Перевод статьи «13 Semantic HTML Elements You’ve Probably Never Heard Of».
С учетом возможностей, предоставляемых современными фронтенд-фреймворками, легко отмахнуться от того, что может предложить старый добрый HTML. Легко посчитать его лишь стартовой позицией для применения более крутых опций. Разработчиков, действительно хорошо знающих HTML, становится все меньше, а между тем необходимость в улучшении доступности и производительности продуктов высока как никогда.
Если не учитывать фактор «крутости», HTML — отличный динамический инструмент, очень даже живой и развивающийся. Фактически, разработчики усвоили уроки, полученные в ходе создания различных фронтенд-проектов, и на этой основе усовершенствовали сам HTML, чтобы раскрыть весь его потенциал.
Давайте рассмотрим несколько семантических элементов HTML, которые помогут вам создавать лучший веб. Если вы пользовались этими элементами и раньше — отлично. Веб нуждается в таких людях, как вы. Если же для вас эти элементы в новинку, считайте это приглашением к более детальному изучению возможностей HTML.
Примечание: многие из этих элементов имеют полифилы для поддержки в старых браузерах, но прежде чем использовать их, следует сначала изучить документацию.
1. <area>, <map>
Элемент <area>, используемый внутри элемента <map>, позволяет определить отдельные области изображения и привязать к ним ссылку. То есть, при помощи этих элементов можно создать ссылки на разных частях изображения.
See the Pen <area> and <map> elements by Blake Eric (@blakeeric) on CodePen.
2. <base>
Элемент <base> создает корневой URL, что позволяет в дальнейшем использовать относительные URL в HTML-документе. К нему даже можно получить доступ из скриптов — при помощи document.baseURI.
<head> <base href="https://www.myurl.com/" /> </head> <body> <a href="suburl">Visit https://www.myurl.com/suburl</a> </body>
3. <cite>
Элемент <cite> позволяет указать автора цитируемого произведения. (О цитировании и тегах, которыми стоит пользоваться в разных случаях, мы публиковали отдельную статью, — прим. ред. Techrocks).
<img src="the_alchemist_cover.jpg" alt="The Alchemist Book Cover"> <p> <cite>The Alchemist</cite> by Paulo Coelho. Published in 1988. </p>
4. <datalist>
Элемент <datalist> содержит список элементов <option>, которые представляют рекомендуемые термины из других областей. Взгляните на пример ниже. В нем компонент <input/> дополнен поиско-подобным функционалом без применения JavaScript.
See the Pen <datalist> demo by Blake Eric (@blakeeric) on CodePen.
5. <details>
Элемент <details> — это, в общем, нативная HTML-версия выпадающего компонента пользовательского интерфейса. Когда элемент переводится в «открытое» состояние, показывается дополнительная информация.
See the Pen <details> demo by Blake Eric (@blakeeric) on CodePen.
6. <dialog>
HTML-элемент <dialog> позволяет добавить интерактивный компонент, например, окно, всплывающее при нажатии кнопки.
<dialog open>This is an open dialog window</dialog>
7. <dd>, <dt>, <dl>
Эти теги позволяют добавить описания или задать значения для элементов в списке. Более новые браузеры автоматически форматируют термины и определения, выделяя их отступами.
<dl> <dt>George Michael</dt> <dd>80's Musician</dd> <dt>Madonna</dt> <dd>90's Musician</dd> </dl>
8. <dfn>
Элемент <dfn> используется для выделения термина, определение которого дается в предложении. При этом определением считается содержимое ближайшего родительского элемента.
<p> <dfn>HTML</dfn> is the standard markup language for creating web pages. </p>
9. <hgroup>
Элемент <hgroup> это обертка для многоуровневого заголовка. Он группирует набор элементов от h1 до h6.
<hgroup> <h1>Main Header</h1> <h2>Subheader</h2> </hgroup>
10. <kbd>
Цитата с сайта MDN: «Элемент ввода с клавиатуры <kbd> указывает на то, что текст внутри элемента описывает пользовательский ввод с клавиатуры, голосовой ввод или ввод с использованием любого другого типа устройств ввода текста. По общему соглашению, user agent использует моноширный шрифт для отображения содержимого элемента <kbd> по-умолчанию, хотя это и не указывается HTML стандартом явно».
<p>Press <kbd>Cmd</kbd> + <kbd>C</kbd> to copy text.</p>
11. <mark>
Элемент <mark> служит для выделения текста в справочных целях.
<p>This is not that important. <mark>But this is</mark>.</p>
12. <meter>
HTML-элемент <meter> создает визуальное представление фракции или процентного соотношения.
<label for="completion">Completion</label> <meter id="completion" value="2" min="0" max="10">2 out of 10</meter>
13. <progress>
С помощью тега <progress> создается визуальное представление прогресса какого-либо действия. (Возможно, вам будет интересна статья о создании прелоадеров (спиннеров). Почитать можно здесь, — прим. ред. Techrocks).
<label for="file">Downloading progress:</label> <progress id="file" value="32" max="100"> 32% </progress>
Заключение
Это только несколько примеров того, как можно применить семантический HTML в вашем коде. Понимание того, как работает HTML и каковы его возможности, помогает разработчикам создавать фронтенд-приложения, отлично работающие у максимального числа пользователей. Так что не забывайте об HTML. Вы можете пожалеть об этом через пару лет, когда простые проекты, использующие преимущества HTML и ванильного JavaScript, обгонят по производительности ваши React-приложения.
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]
