Народ, всем привет. Сегодня мы погорим про HTML, его 5 стандарт, и про тэги, о которых вы может и не слышали. Есть те, которые вроде на слуху, но как использовать и зачем – непонятно. А есть те, по которые просто забыли. Сами по себе тэги HTML, понятное дело, это основа веб-разработки, но помимо известных тэгов вроде <div> и <a>, существуют менее популярные, но очень полезные тэги. И старички, кто давно начинал, знают про них. А вот начинающие веб-разработчики, фронтендеры, иногда про них даже не вспоминают. И на это есть свои причины.
1. <header>, <footer>, <article> и <section>
Да, вот кажется, это же основа, эти теги знают все. Да только с ростом популярности различных курсов, разработки веб приложений, многие начинают сразу писать сайты на JS, использовать фреймворки или тот же React. И они просто не использует данные тэги, и хоть все и разбивает на модули, но внутри них все загнано в div’ы, а весь блок вообще в <> … </>.
И если header еще как-то встречается, то про footer вообще забивают. Первое – это шапка сайта, второй – это подвал сайта. И поисковики до сих пор активно работают с этими тегами, берут информацию, например, номер телефона для карточки компании.
А вот что такое section или article – люди в душе не чают. А ведь данные теги отлично помогают как при самой верстке (разделяют фрагменты), так и помогают поисковикам отличать основной контент от прочего «мусора» на странице. Чтобы не было путаницы, вот отличный пример с Хабра:
- <div> — контейнер общего назначения, не обязательно смысловой. Дивы используются для разметки мелких блоков, создания сетки и декоративных эффектов.
- <section> — более крупный логический контейнер, объединяющий содержание по смыслу. Например, блок «О компании», список товаров, раздел личной информации в профиле и так далее.
- <article> — самостоятельный, цельный и независимый раздел документа. Этот раздел можно в неизменном виде использовать в различных местах, в том числе и на других сайтах. Примеры: статья, пост в блоге, сообщение на форуме и так далее.
Кстати, Вам может быть это интересно:
2. <aside>
Есть еще aside, который позволяет создавать некий дополнительный блок или колонку справа или слева от основного контента. Его часто используют для ссылок, новостей или просто комментариев. Почему не использовать div? Да можно разлинеить всю страницу дивами, это не проблема. Но сам по себе тэг дает понять поисковикам, что контент там размещён отдельный от основного блока и является второстепенным.
3. <mark>
Теперь перейдем к более мелким тэгам, так сказать, но не менее полезным. Так, например, тэг позволяет «окрасить» слово или фрагмент текста. Полезно использовать для выделения ключевых слов или когда пользователь делает поиск (и слова поиска выделятся маркером).
<p> Петя <mark> любил </mark> Марину </p>
4. <details>
Он позволяет создавать раскрывающиеся блоки. Этот тэг используется для отображения скрытой информации, которая раскрывается по клику. Внутри <details> можно использовать <summary> для указания заголовка блока, который будет виден всегда.
<details>
<summary>Подробнее</summary>
<p>Это скрытый текст!</p>
</details>
5. <dialog>
Более сложные примеры, это dialog, который создает диалоговые окна. Этот тэг представляет собой модальное окно, которое можно открывать и закрывать с помощью JavaScript методов .show() и .close(). Полезен для реализации уведомлений или подтверждений о выполненном действии.
<dialog id="myDialog">Это модальное окно!</dialog>
<button onclick="document.getElementById('myDialog').show()">
Открыть
</button>
<button onclick="document.getElementById('myDialog').close()">
Закрыть
</button>
6. <meter>
Он применяется для отображения уровня внутри заданного диапазона. В основном используется для представления данных, например, рейтингов или уровня здоровья. Часто применяют для отображения качества (силы) придуманного пароля, или рейтинга пользователя (книги, чего угодно). Его плюс в том, что он сам следит за тем, насколько текущие значения укладываются в допустимые границы, и подсвечивает всё разными цветами.
<p>Безопасность пароля: <meter value="7" max="10" low="2" high="5"></meter> </p>
Есть еще тэг <progress>, который отображает прогресс выполнения задачи. Тэг включает атрибуты value и max, чтобы показать завершенность процесса. Понятно, что больше всего подходит для отображения загрузок, ну или выполнения задач.
<progress value="70" max="100">70%</progress>
7. <output>
Тэк служит для отображает результат вычислений. Он связывается с другими элементами формы через атрибут for, чтобы отображать вычисленные значения. Чаще всего его применяют для отображения результатов каких форм, общей суммы, калькуляторов.
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="number" id="a" value="0"> +
<input type="number" id="b" value="0"> =
<output name="result">0</output>
</form>
8. <abbr>
Если сложно, вот полегче. Данный тэг позволяет задавать сокращения с подсказкой. У него есть атрибут title, который указывает, что означает сокращение, и отображается как подсказка при наведении курсора.
<abbr title="HyperText Markup Language">HTML</abbr>
9. <bdi>
Используется довольно редко, ну просто потому, что не сильно заморачиваются и он довольно специфически. Но все же он нужен для текста, который должен отображаться независимо от направления записи. Если проще, он нужен, чтобы избежать проблем с выравниванием текста, особенно в мультиязычных интерфейсах. Например, при работе с динамическими данными (именами пользователей, скажем).
<p>Пользователь <bdi>\u202Etest_user</bdi> добавлен.</p>
10. <picture>
Ну и последнее, это picture, который позволяет адаптировать изображения для разных экранов и разрешений. Тэг предоставляет возможность указать несколько источников изображений и условия их применения через <source>. Понятное дело, что используется для адаптивного дизайна.
<picture>
<source srcset="image-large.jpg" media="(min-width: 800px)">
<img src="image-small.jpg" alt="Описание">
</picture>