Было время, когда разработчики писали HTML-документы, не обращая никакого внимания на семантическое значение структуры документа, вероятно, из-за того, что сеть изначально создавалась для обмена научной информацией, прежде чем она превратилась в систему, улучшающую почти все аспекты нашей жизни. ежедневные занятия. Общепринятой практикой было вложение тегов <div> в теги <div>, и при введении новых отдельных элементов в HTML-документ хак заключался в том, чтобы по-прежнему добавлять больше тегов <div>, а не использовать описательные и семантически значимые элементы html для содержания надлежащего контента.
Чем отличается семантический HTML?
Написав семантический HTML, вы не только определяете структуру и представление своего HTML-документа, но и передаете значение каждого элемента своей веб-страницы. Это просто означает сообщение браузеру и тому, кто читает ваш код, назначение каждого элемента html и тип содержимого внутри них, а не просто определение того, как они должны выглядеть в браузерах.
Итак, зачем писать семантический HTML?
Сообщая как структуру, так и значение вашего html-документа, вы облегчаете поисковым системам предоставление нужных страниц для правильных запросов, тем самым достигая лучшей поисковой оптимизации (SEO) для вашего веб-сайта.
Семантический HTML не только легче читается только веб-браузерами, но также легче читается и понимается людьми, что облегчает работу вам и другим разработчикам.
Доступность — еще одно большое преимущество написания семантического HTML, поскольку это важный шаг к охвату более широкой аудитории через Интернет и тому, чтобы сделать его полезным для всех, независимо от их физических возможностей. Например, вспомогательные технологии, такие как программы чтения с экрана для пользователей с нарушениями зрения, также могут лучше понимать назначение каждого содержимого веб-сайта, что повышает удобство работы для таких пользователей. Некоторые примеры семантического html перечислены ниже.
<!--You can click on any of the HTML tags bellow to learn more.--><article> <aside> <details> <figcaption> <figure> <footer> <header><main> <mark> <nav> <section> <summary> <time> <blockquote>
Некоторые плохие практики, которых следует избегать
Нередко разработчики используют семантический HTML для неправильных целей, но это все равно не делает такой веб-документ осмысленным, потому что основная цель семантического HTML — четко указать назначение каждого элемента в HTML-документе.
Примером может служить использование <blockquote> для отступа основного текста, это злоупотребление и должно быть заменено применением необходимого стиля css (margin/padding) к правому элементу, несущему текст. Другим является использование тегов от <h1> до <h6> для выделения текста жирным шрифтом, это тоже неправильно и к такому тексту нужно применять правильные стили шрифта. Элемент <table> также не следует использовать для веб-разметки/позиционирования на веб-страницах (правда, электронные письма в формате HTML могут быть исключением), так как CSS теперь предлагает flexbox и CSS grid, которые лучше подходят для веб-разметки.
Как правило, лучше обрабатывать стиль (внешний вид/ощущение) веб-сайтов/приложений с помощью CSS и писать HTML для структуры, семантики и доступности.
