Язык разметки HTML: семантическая вёрстка

С точки зрения лингвистики, семантика — это изучение смысловых значений единиц языка. И как и в любом языке, в языках программирования она тоже имеет определённое значение. Говоря же о семантике в HTML — обычно имеют ввиду использование именно смысловых тегов, вместо обычных div.

Например, есть две разметки:

Обычная, без использования смысловых тегов

<div class="header">
  <h1>Название сайта</h1>
  <div class="navigation">
    <ul>
      <li><a href="#">Пункт меню</a></li>
      <li><a href="#">Пункт меню</a></li>
      <li><a href="#">Пункт меню</a></li>
    </ul>
  </div>
</div>
  
<div class="main">
  основной контент страницы
</div>
  
<div class="footer">
  контент подвала
</div>

И семантическая, то есть, с их использованием:

<header class="header">
  <h1>Название сайта</h1>
  <nav class="navigation">
    <ul>
      <li><a href="#">Пункт меню</a></li>
      <li><a href="#">Пункт меню</a></li>
      <li><a href="#">Пункт меню</a></li>
    </ul>
  </nav>
</header>
  
<main class="main">
  основной контент страницы
</main>
  
<footer class="footer">
  контент подвала
</footer>

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

Доступность, в контексте клиентской веб-разработки, имеет довольно важное значение, поскольку при разработке сайта следует учитывать разные группы населения. В том числе и те, которые в силу определённых обстоятельств вынуждены пользоваться скринридерами. И в первом случае пользователь со скринридером услышит только кучу div'ов, которые сами по себе не несут никакой смысловой нагрузки (если не дополнять их атрибутом role), а во втором он сможет сориентироваться и понять, какая часть интерфейса выполняет ту или иную функцию. Таким образом, он сможет без проблем сориентироваться по сайту, даже не видя его. Кроме пользователей с особыми потребностями, есть ещё и поисковые роботы, алгоритмы которых настроены на вычленение тех или иных контентных частей страницы, для них семантичность вашего кода так же очень важна.

Основные семантические теги HTML

Источник: https://habr.com/ru/company/htmlacademy/blog/546500/

<article>

Значение: независимая, отделяемая смысловая единица, например комментарий, твит, статья, виджет ВК и так далее.
Особенности: желателен заголовок внутри.
Типовые ошибки: путают с тегами <section> и <div>.

<section>

Значение: смысловой раздел документа. Неотделяемый, в отличие от <article>.
Особенности: желателен заголовок внутри.
Типовые ошибки: путают с тегами <article> и <div>.

<aside>

Значение: побочный, косвенный для страницы контент.
Особенности: может иметь свой заголовок. Может встречаться несколько раз на странице.
Типовые ошибки: считать <aside> тегом для «боковой панели» и размечать этим тегом основной контент, который связан с окружающими его элементами.

<nav>

Значение: навигационный раздел со ссылками на другие страницы или другие части страниц.
Особенности: используется для основной навигации, а не для всех групп ссылок. Основной является навигация или нет — на усмотрение верстальщика. Например, меню в подвале сайта можно не оборачивать в <nav>. В подвале обычно появляется краткий список ссылок (например, ссылка на главную, копирайт и условия) — это не является основной навигацией, семантически для такой информации предназначен <footer> сам по себе.
Типовые ошибки: многие считают, что в <nav> может быть только список навигационных ссылок, но согласно спецификации там может быть навигация в любой форме.

<header>

Значение: вводная часть смыслового раздела или всего сайта, обычно содержит подсказки и навигацию. Чаще всего повторяется на всех страницах сайта.
Особенности: этих элементов может быть несколько на странице.
Типовые ошибки: использовать только как шапку сайта.

<main>

Значение: основное, не повторяющееся на других страницах, содержание страницы.
Особенности: должен быть один на странице, исходя из определения.
Типовые ошибки: включать в этот тег то, что повторяется на других страницах (навигацию, копирайты и так далее).

<footer>

Значение: заключительная часть смыслового раздела или всего сайта, обычно содержит информацию об авторах, список литературы, копирайт и так далее. Чаще всего повторяется на всех страницах сайта.
Особенности: этих элементов может быть несколько на странице. Тег <footer> не обязан находиться в конце раздела.
Типовые ошибки: использовать только как подвал сайта.

Стоит так же отметить, что и в более старых спецификациях есть семантические теги, как например тег <p>, который обозначает параграф, а теги <b> и <i> не являются семантическими, поскольку только меняет отображение текста, не неся в себе при этом никакой смысловой нагрузки. На замену тегу <b> пришёл тег <strong>, который, по сути, делает то же самое, но является более правильным, с точки зрения семантики.

Как разметить страницу с точки зрения семантики

Источник: https://habr.com/ru/company/htmlacademy/blog/546500/

Процесс разметки можно разделить на несколько шагов с разной степенью детализации.

Крупные смысловые блоки на каждой странице сайта. Теги: <header>, <main>, <footer>.
Крупные смысловые разделы в блоках. Теги: <nav>, <section>, <article>, <aside>.
Заголовок всего документа и заголовки смысловых разделов. Теги: <h1>-<h6>.
Мелкие элементы в смысловых разделах. Списки (ul, ol), таблицы (table, thead, tbody, tfoot), демо-материалы (code, pre), параграфы (p) и переносы (br), формы (form, input, button), цитаты (blockquote), контактная информация и прогресс (progress).
Фразовые элементы. Изображения (img, picture), ссылки (a), кнопки (button), видео (video), время (time) и мелкие текстовые элементы.

Сомневаюсь, какие теги использовать

Источник: https://habr.com/ru/company/htmlacademy/blog/546500/

Есть простые правила для выбора нужных тегов.

Получилось найти самый подходящий смысловой тег — использовать его.
Для потоковых контейнеров — <div>.
Для мелких фразовых элементов (слово или фраза) — <span>.

Правило для определения <article>, <section> и <div>:

Можете дать имя разделу и вынести этот раздел на другой сайт? — <article>
Можете дать имя разделу, но вынести на другой сайт не можете? — <section>
Не можете дать имя? Получается что-то наподобие «новости и фотогалерея» или «правая колонка»? — <div>

Что почитать?

HTML Semantic Elements (https://www.w3schools.com/html/html5_semantic_elements.asp)
Забудьте про div, семантика спасёт интернет (https://habr.com/ru/company/htmlacademy/blog/546500/)
Глоссарий по семантике на MDN (https://developer.mozilla.org/en-US/docs/Glossary/Semantics)

Презентация: https://docs.google.com/presentation/d/10Bo6hPBCzyKDZllZSSASIcWIsqG4Hx0_ZLH0f01zeFc/edit?usp=sharing