Редкие HTML тэги
Современным веб-разработчикам часто приходится работать сразу в нескольких языках программирования. Из-за этого сложно изучить все возможности каждого языка и легко упустить более специализированные, но не менее полезные HTML тэги.
К сожалению, в последнее время мы мало используем возможности более редких тегов и атрибутов HTML. Однако никогда не поздно вернуться в игру и начать писать код, используя мощь некоторых редко используемых HTML-тегов.
Вот некоторые из редких и очень специальных HTML-тегов. Хотя они могут быть менее знакомы, они все еще достаточно полезны в определенных ситуациях.
<cite>
Многие из нас знакомы с тегом <blockquote>, но знали ли вы о его младшем брате <cite>? Тег <cite> позволяет определить текст внутри элемента как ссылку на источник. Обычно браузер отображает текст внутри тега <cite> курсивом, но это можно изменить с помощью CSS.
<p>David Allen's breakthrough organization book <cite>Getting Things Done</cite> has taken the web by storm.</p>
<acronym>
<acronym> – это один из крутых тегов HTML, который можно использовать для определения или дополнительного объяснения группы слов. При наведении на текст, в котором используется тег <acronym>, появляется окно с текстом из атрибута title. Например:
The microblogging site <acronym title="Founded in 2006"> Twitter</acronym> has recently struggled with downtimes.
<optgroup>
Тег <optgroup> позволяет добавить некоторое определение между группами опций внутри списка выбора. Это позволяет визуально отделить элементы списка. Например, если вы хотите группировать список фильмов по времени, это будет выглядеть следующим образом:
<label for="showtimes">Showtimes</label>
<select id="showtimes" name="showtimes">
<optgroup label="1PM">
<option value="titanic">Twister</option>
<option value="nd">Napoleon Dynamite</option>
<option value="wab">What About Bob?</option>
</optgroup>
<optgroup label="2PM">
<option value="bkrw">Be Kind Rewind</option>
<option value="stf">Stranger Than Fiction</option>
</optgroup>
</select>
HTML тэги <ins> и <del>
Если вы хотите отображать версии правок с помощью разметки, то <ins> и <del> – именно то, что вам нужно. Как следует из названия, <ins> подчеркивает то, что было добавлено в документ, а <del> показывает, что было удалено.
John <del>likes</del> <ins>LOVES</ins> his new iPod.
<address>
Тег <address> является простым, но очень полезным тегом в HTML. Как следует из названия, он позволяет задать семантическую разметку адресов в HTML. Этот удобный тег также курсивом выделяет все данные внутри скобок, хотя стиль можно легко изменить с помощью простого CSS
<address>Glen Stansberry 1234 Web Dev Lane Anywhere, USA </address>
<base>
Для относительных ссылок в HTML используется элемент base, который предоставляет базовый URL. Например, вы можете указать базовый URL в верхней части страницы, а затем другие относительные ссылки на странице будут использовать тот же самый URL.
<base href="https://geniuscourses.com/" target="_blank">
Пожалуйста, обратите внимание, что тег <base> должен находиться между тегами <head> документа, и каждый документ может иметь только один элемент <base>. Например:
<html>
<head>
<title>Base Tag Example</title>
<base href="https://geniuscourses.com/" target="_blank">
</head>
<body>
<p>Understand <a href="articles/data-structures">Data Structures</a>.</p>
</body>
</html>
<meta>
Тэги <meta> описания и автора являются общими HTML-тегами, которые часто игнорируются разработчиками при написании кода. Эти специальные теги в HTML используются для указания описания или ключевых слов HTML-документа, что помогает пользователям легко находить ваш веб-сайт или контент.
<meta name="keywords" content="уроки, курсы, статьи"> <meta name="description" content="Лучшие уроки, курсы и статьи по веб разработке от Genius Courses"> <meta name="author" content="Александр Сокирка">
<q>
Элемент <q> является одним из наиболее часто используемых HTML-тегов, используемых для выделения цитируемого текста на веб-странице. Этот тег добавляет разнообразие в контент вашего сайта и используется в основном для обозначения кратких цитат.
<q>Tests are stories we tell the next generation of programmers on a project.</q>
Атрибут <cite> указывает источник цитаты.
<p><cite>Roy Osherove</cite> said, <q>Tests are stories we tell the next generation of programmers on a project.</q>.</p>
<progress>
HTML-тег <progress> используется для отображения прогресса выполнения задачи. Он позволяет веб-разработчикам легко добавлять индикатор выполнения на свои веб-сайты. Тег <progress> также может использоваться для отображения уровня компетенции в различных областях на портфолио веб-разработчика, а также для отслеживания прогресса загрузки файлов. Атрибут max определяет диапазон прогресс-бара.
<progress value="750" max="1000"> <span>70</span>% </progress>
<mark>
Тег <mark> используется для выделения текста или информации, которые являются очень важными и требуют внимания.
<p>The <mark>mark</mark> tag is used to highlight a text or a piece of information that is very important needs attention</p>
<meter>
Тег <meter> используется для определения шкалы измерения в определенном диапазоне и также может обрабатывать дробные значения. Еще одно название для него – это шкала. Толкование тега <meter> можно определить с помощью шести различных атрибутов.
- value: указывает текущее значение измерения
- min: указывает нижнюю границу диапазона
- max: указывает верхнюю границу диапазона
- low: указывает диапазон, который является низким значением
- high: указывает диапазон, который является высоким значением
- optimum: указывает наилучший или оптимальный числовой диапазон.
<p>Low storage space <meter optimum="40" high="80" max="100" value="20">85%</meter></p>
<details>
Элемент <details> используется для предоставления или скрытия дополнительной информации о содержании на веб-сайте. Он используется для создания интерактивного виджета, который пользователь может открыть или закрыть. Содержимое элемента details видно при открытии заданных атрибутов.
Элемент details используется с тегом <summary>, чтобы создать заголовок, на который можно нажать, чтобы открыть или закрыть информацию, которую вы хотите узнать подробнее.
<p> <p>I'm Alex Socha, a software developer who has more development experience in frontend building responsive website sites using these web technologies like Javascript, Vue Js, HTML and CSS, Bootstrap Tailwind CSS.</p> </p> <details> <summary>Click to read more about me</summary> <p>I love sharing how to use the latest technology tools to solve problems and my technical experience through an article.</p> </details>
<wbr>
Этот тег используется редко и служит для указания места, где, по вашему мнению, может потребоваться перенос строки. Однако перенос будет осуществлен браузером только в том случае, если это необходимо. Этот тег полезен, если вам нужно создать макет, избегая появления горизонтальных полос прокрутки.
<label>
Из элементов формы один из самых забытых – это тег <label>. Не только это быстрый способ указать текст метки, но тег <label> также может передавать атрибут “for“, чтобы указать, какой элемент должен получить метку. Теги <label> прекрасны для стилизации, и они также позволяют сделать заголовок кликабельным для соответствующего элемента.
<label for="username">Username</label> <input id="username" type="text" />
<fieldset>
Fieldset – это удобная маленькая функция, которую вы можете добавить к своим формам для логической группировки элементов формы. После применения тега <fieldset> создается рамка вокруг элементов внутри этого поля. Дополнительный бонус за добавление тега <label> внутри поля, чтобы определить заголовок группы. Посмотреть тэги и атрибуты для валидации формы на html5
<form><fieldset> <legend>Are You Smarter Than a 5th Grader?</legend> Yes <input name="yes" type="radio" value="yes" /> No <input name="no" type="radio" value="no" /> </fieldset> </form>
<abbr>
Тег <abbr> очень похож на тег <acronym>, за исключением того, что он используется только для определения сокращенных слов. Как и в случае с тегом <acronym>, вы определяете заголовок внутри тега. Когда посетитель наводит курсор на сокращенный текст, полное определение появляется ниже. Тег <abbr> редко используется, но для скринридеров, проверки орфографии и поисковых систем он имеет много преимуществ.
<abbr title="Sergeant">Sgt.</abbr> Pepper's Lonely Hearts Club is my favorite album.
Источник: https://genius.courses/html-тэги/