Что такое семантический HTML и почему вы должны его использовать?

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

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

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

tag указывает, что вложенный текст является абзацем.

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

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

Примеры семантических тегов HTML включают теги заголовка

через

,

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

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

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

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

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

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

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

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

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

• blockquote. Некоторые люди используют

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

• p - Некоторые веб-редакторы используют (неразрывное пространство, содержащееся в параграфофе), чтобы добавить дополнительное пространство между элементами страницы, а не определять фактические абзацы для текста этой страницы. Как и в предыдущем примере отступов, вы должны использовать свойство margin или padding style для добавления пробела.
• ul - Как blockquote, содержащий текст внутри
  тег отступов, который содержит текст в большинстве браузеров. Это как семантически некорректный, так и недействительный HTML, как только
  • теги действительны в пределах
    тег. Опять же, используйте стиль margin или padding для текста с отступом.
  • h1-h6 - Тэги заголовков могут использоваться для того, чтобы шрифты становились больше и смелее, но если текст не является заголовком, он не должен находиться внутри тега заголовка. Вместо этого используйте свойства CSS шрифта и размера шрифта, если вы хотите изменить размер или вес определенного текста на своей странице.

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

  теги.

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

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

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

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

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