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

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

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

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

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

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

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

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

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

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

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

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

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

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

   

  (неразрывный пробел, содержащийся в абзаце), чтобы добавить дополнительное пространство между элементами страницы, а не определять фактические абзацы для текста этой страницы. Как и в предыдущем примере с отступом, вы должны использовать свойство стиля margin или padding, чтобы добавить пробел.

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

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

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

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

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

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

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