Важным принципом веб-дизайна является идея использования HTML-элементов для обозначения того, чем они являются на самом деле, а не того, как они могут отображаться в браузере по умолчанию. Это известно как использование семантического HTML.

Что такое семантический HTML?

Семантический HTML или семантическая разметка - это HTML, который придает значение веб-странице, а не просто представление. Например,

 указывает, что заключенный текст является абзацем. Это и семантическое, и презентационное, потому что люди знают, что такое абзацы, а браузеры знают, как их отображать.

На оборотной стороне этого уравнения такие теги, как  а также  не являются семантическими. Они определяют только то, как должен выглядеть текст (полужирный или курсив), и не придают никакого дополнительного значения разметке.

Примеры семантических HTML-тегов:

• Теги заголовка

   через

Есть еще много семантических HTML-тегов, которые можно использовать при создании веб-сайта, соответствующего стандартам.

Почему вам следует заботиться о семантике

Преимущество написания семантического HTML проистекает из того, что должно быть движущей целью любой веб-страницы: желания общаться. Добавляя семантические теги к вашему документу, вы предоставляете дополнительную информацию об этом документе, которая помогает в общении. В частности, семантические теги дают браузеру понять, что означает страница и ее содержимое. Эта ясность также передается поисковым системам, гарантируя, что нужные страницы будут доставлены по правильным запросам.

Семантические теги HTML предоставляют информацию о содержимом этих тегов, выходящую за рамки того, как они выглядят на странице. Текст, заключенный в  Тег немедленно распознается браузером как язык программирования. Вместо того, чтобы пытаться отобразить этот код, браузер понимает, что вы используете этот текст в качестве примера кода для статьи или онлайн-руководства.

Использование семантических тегов дает вам гораздо больше возможностей для стилизации вашего контента. Возможно, сегодня вы предпочитаете, чтобы образцы кода отображались в стиле браузера по умолчанию, но завтра вы можете захотеть вызвать их с помощью серого цвета фона; еще позже вы можете захотеть определить точное семейство шрифтов с одинарным интервалом или стек шрифтов использовать для ваших образцов. Вы можете легко сделать все это, используя семантическую разметку и грамотно применяемый CSS.

Правильное использование семантических тегов

При использовании семантических тегов для передачи смысла, а не для целей презентации, будьте осторожны, чтобы не использовать их неправильно просто из-за общих свойств отображения. Вот некоторые из семантических тегов, которые чаще всего используются неправильно:

• цитата - Некоторые люди используют тег для отступа текста, не являющегося цитатой. Это потому, что по умолчанию цитаты имеют отступ. Если вы просто хотите сделать отступ для текста, который не является цитатой, используйте вместо этого поля CSS.
• п - Некоторые веб-редакторы используют (неразрывный пробел, содержащийся в абзаце), чтобы добавить дополнительное пространство между элементами страницы, а не определять фактические абзацы для текста этой страницы. Как и в предыдущем примере, для добавления пробела следует использовать свойство стиля поля или отступа.
• ул - Как и с

  , заключив текст в

   тег делает отступы для этого текста в большинстве браузеров. Это семантически неверный и недействительный HTML, потому что только
  •  теги действительны в пределах
    тег. Опять же, используйте стиль полей или отступов для отступа текста.
  • h1, h2, h3, h4, h5 и h6 - Вы можете использовать теги заголовков, чтобы сделать шрифты крупнее и жирнее, но если текст не является заголовком, используйте вместо этого свойства CSS font-weight и font-size.

  Используя HTML-теги, которые имеют значение, вы создаете страницы, которые передают больше информации, чем те, которые просто окружают все

   теги.

  Какие HTML-теги являются семантическими?

  Хотя почти все теги HTML4 и все HTML5 теги имеют семантическое значение, некоторые теги прежде всего семантический.

  Например, HTML5 переопределил значение  а также  теги должны быть семантическими. В  тег не несет особой важности; текст с тегами обычно выделяется жирным шрифтом. Точно так же  тег не передает особой важности или акцента; скорее, он определяет текст, который обычно выделяется курсивом.

  Семантические HTML-теги

  Сокращение
  Акроним
  Длинная цитата
  Определение
  Адрес автора (ов) документа
  Цитата
  Ссылка на код
  Текст телетайпа
  Логическое деление
  Универсальный контейнер встроенного стиля
  Удаленный текст
  Вставленный текст
  Акцент
  Сильный акцент
  Заголовок первого уровня
  Заголовок второго уровня
  Заголовок третьего уровня
  Заголовок четвертого уровня
  Заголовок пятого уровня
  Заголовок шестого уровня
  	Тематический перерыв
  Текст, вводимый пользователем
  Предварительно отформатированный текст
  Краткая встроенная цитата
  Пример вывода
  Нижний индекс
  Надстрочный
  Переменный или определенный пользователем текст