13 семантических HTML-элементов, о которых вы, возможно, не слышали

0
1281
views

Перевод статьи «13 Semantic HTML Elements You’ve Probably Never Heard Of».

Photo by Ramshid ekl on Unsplash

С учетом возможностей, предоставляемых современными фронтенд-фреймворками, легко отмахнуться от того, что может предложить старый добрый 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-приложения.

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here