Что такое семантика?

Одна из важных особенностей HTML — семантика, которая буквально переводится как «обозначающий». При помощи HTML мы описываем структуру страниц и их содержимого, то есть объясняем браузерам, вспомогательным и другим технологиям и программам значение элементов. Это может быть параграф текста, кнопка, часть страницы с основным содержимым или ничего не значащий контейнер.

На практике семантика HTML-элементов передаётся через их роли, а ещё состояния и свойства. Роли описывают основной смысл элемента, а состояния и свойства добавляют больше деталей: выбран или не выбран чекбокс, активно или неактивно поле в форме и так далее.

Каждый раз, когда пишите HTML-код, вы имеете дело с семантикой. Даже если используете только <div> и <span> 🤯

Все HTML-теги, которых больше 100, семантические. Для простоты разделим их на две группы — секционные и контентные. Полный список элементов найдёте в HTML Living Standard.

Секционные теги делят HTML-документ (страницу) на большие логические блоки или секции:

• <article> — самостоятельный блок с содержимым вроде превью поста в блоге, карточки товара или рекламного баннера. Такой контент не потеряет смысл, если его перенести на другую страницу или сайт.
• <nav> — основная или дополнительная навигация со ссылками на другие страницы или отдельные разделы.
• <section> — блок, который объединяет содержимое по смыслу.
• <main> — основное содержимое страницы.
• <header> — вводное содержимое или навигация. Не привязан к конкретному месту страницы и отдельной секции, но традиционно используется для создания основной навигации по сайту — шапки (хедера). Также можно использовать для оборачивания оглавления раздела, заголовка статьи с вводной информацией о ней и прочего.
• <footer> — дополнительная информация о сайте или части одной страницы. Тоже не привязан к части страницы или отдельной секции. Например, подвал (футер) может быть у превью поста и содержать информацию о дате публикации и авторе.

Посмотрим на пример с карточкой. Поисковый робот просканирует код и сделает вывод, что на странице несколько независимых от контекста блоков <article> с параграфами текста. У карточек есть вводное содержимое <header> с заголовком <h2> и неважным текстом <span>. Также дополнительная информация о содержимом в <footer> — дата без времени <time>.

        
          
          <article>  <header>    <h2>SEO для начинающих</h2>    <span class="author">Иван Иванович</span>  </header>  <p>    Благодаря этому курсу вы научитесь задавливать конкурентов    с помощью ссылочной массы, а не качественного контента.  </p>  <footer>    <time datetime="2023-02-13">      13 февраля 2023    </time>  </footer></article>
          <article>
  <header>
    <h2>SEO для начинающих</h2>
    <span class="author">Иван Иванович</span>
  </header>

  <p>
    Благодаря этому курсу вы научитесь задавливать конкурентов
    с помощью ссылочной массы, а не качественного контента.
  </p>

  <footer>
    <time datetime="2023-02-13">
      13 февраля 2023
    </time>
  </footer>
</article>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Контентные теги описывают смысл частичек и типов содержимого — контента. Перечислим несколько тегов, на самом деле их гораздо больше:

• <h1>-<h6> для определения заголовков на странице. <h1> используют для основного заголовка документа или раздела. Остальные нужны для подзаголовков. Все заголовки описывают структуру и иерархию страниц.
• <button> для кнопок. Используют для отправки форм и выполнения других команд.
• <img> для картинок.
• <table> для таблиц. Состоят из нескольких элементов для структурирования табличных данных: строк <tr>, заголовочных ячеек <th> и ячеек с данными <td>.
• <ul> неупорядоченный маркированный список.
• <a> для ссылок, с помощью которых пользователи переходят от одной страницы к другой.
• <p> для абзацев текста. Это основные блоки текста в HTML; логически разграничивают части текста с общей мыслью или идеей.

И снова пример. Когда скринридеры столкнутся с таким HTML, они узнают о декоративной графике <img alt="">, параграфе текста <p> и ссылке <a>.

        
          
          <img src="seo-basics.png" alt=""><p>  <a url="/seo-basics">Базовый курс по SEO</a> научит задавливать конкурентов  с помощью ссылочной массы, а не качественного контента.</p>
          <img src="seo-basics.png" alt="">
<p>
  <a url="/seo-basics">Базовый курс по SEO</a> научит задавливать конкурентов
  с помощью ссылочной массы, а не качественного контента.
</p>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

Конечно, не все теги подробно описывают типы содержимого. К примеру, <section> только намекает, что это что-то объединённое по смыслу. <article> уже больше рассказывает о содержимом: оно тесно связано, сгруппировано в одном месте и не зависит от другого на странице.

<div> и <span> тоже существуют не зря, хотя их часто называют несемантическими. Это не совсем так. Оба тега играют роль универсальных контейнеров с ролью generic. То есть они говорят браузерам или скринридерам, что их смысл не важен и на них можно не обращать внимание.

С семантическими тегами вы тоже, скорее всего, знакомы. Это глобальные атрибуты title для дополнительной информации об элементе, lang для языка текстового содержимого, translate для перевода с одного языка на другой и dir для направления письма.

Кто-то может подумать, что раз даже <div> и <span> семантические, расставлять теги кнопок, ссылок и списков долго и бессмысленно. Всё прямо наоборот: у вёрстки, которая подробно описывает содержимое страниц, больше преимуществ, чем у «дивной».

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

Качественная вёрстка экономит время разработчиков и уменьшает количество строчек кода. Например, у <button> и <input> уже есть стили по умолчанию и встроены обработчики событий: их не нужно писать руками. Чтобы воспроизвести нативное поведение кнопки, нужно слушать события keydown при нажатии на Enter и keyup для пробела и Enter. Размеры файлов со стилями и скриптами напрямую влияют на производительность сайта (perfomance). Чем больше вес файлов, тем дольше грузится страница. Подробнее о производительности позже.

Отдельная статья расходов времени при переписывании кода (рефакторинге) — внедрение доступности. Плохой код приводит ко многим проблемам с доступностью. Если команда не подумала о семантической разметке с самого начала, время на внедрение доступности в проект увеличивается в несколько раз.

Семантика — основа хорошего пользовательского опыта или UX (user experience). Хороший UX складывается из лёгкого и успешного взаимодействия с интерфейсами (юзабилити), полезного содержимого, доступности для пользователей с инвалидностью и общей удовлетворённости от всего процесса.

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

Логичная HTML-разметка улучшает опыт пользователей вспомогательных технологий и устраняет барьеры, из-за которых невозможно пользоваться сайтом. К примеру, скринридер расскажет пользователям, что <button> — это кнопка. Пользователи голосового управления могут кликнуть по элементу <button> с помощью команды «кнопка, клик». У чекбоксов есть состояния checked и unchecked. Благодаря им люди могут услышать, какой чекбокс выбран, а какой нет. В <h1>−<h6> встроено свойство для уровня заголовка — level. Скринридеры зачитывают уровень заголовка вместе с ролью: заголовок первого уровня или заголовок четвёртого уровня. Так структуру страницы смогут представить те, кто слушает интерфейсы.

Другой плюс продуманной HTML-разметки — навигация для скринридеров. Теги вроде <header> и <footer> — ориентиры. Это значит, что пользователи могут перемещаться по отдельным блокам страницы с помощью горячих клавиш.

Пользователи скринридеров перемещаются и по заголовкам. Это распространённый метод поиска информации по странице.

Другая неочевидная польза семантики — вам не придётся стилизовать сайт отдельно под режим принудительных цветов, например, режим высокой контрастности в Windows. В его случае количество цветов ограничивается до небольшой палитры. Если кнопка свёрстана на <div>, система не заменит цвет элемента на системный.

Семантика приносит пользу и самим браузерам. К примеру, во все браузеры встроен режим чтения (reading mode). В нём со страницы удаляются все лишние элементы и остаётся самое важное: заголовки, текст, картинки и видео. Если страница, например, свёрстана без <h1>, <h2> и заголовков других уровней, пользователи получат большой кусок неструктурированного текста. Такие же проблемы будут и у сервисов для RSS (really simple syndication) и отложенного чтения и закладок вроде Pocket.

Часть пользователей устанавливает разные браузерные расширения. К примеру, чтобы изменять стили страниц, текста или бионического чтения. Расширения полагаются на разметку, как и браузеры в целом.

Умные часы и голосовые помощники тоже не остались в стороне от HTML-семантики. В часы от Apple и Samsung встроены браузеры, доступ к которым получаете через голосовые команды для Siri, Bixby или Google Assistant. Голосовые помощники выполнят команды быстрее и точнее, если для ссылок используете <a> или <time> для дат.

Поисковики стерпят всё и поймут вас в любом случае, даже если общаетесь с ними на языке дивов. Однако семантика упрощает им работу и позитивно влияет на поисковую оптимизацию сайтов — SEO (search engine optimization), а именно:

• улучшает точность индексации страниц;
• повышает показатели производительности сайта;
• увеличивает органический трафик и количество кликов;
• гарантирует спокойную старость спокойное будущее.

Более точная индексация. Семантика дополняет другие факторы ранжирования и раскрывает больше информации о структуре сайта, темах страниц и связях между разными видами контента. Поисковые роботы точнее определяют главную тему страницы по заголовку <h1> и атрибуту title. Ряд семантических тегов наводит мосты между типами контента. Например, между видео <video> и скрытыми субтитрами в <track>.

Лучшая производительность. Производительность — ещё один ключевой фактор ранжирования. Браузеры лучше работают с чистым и хорошо организованным кодом. Семантическая разметка как раз избавляет от лишнего JavaScript и CSS, а это ускоряет загрузку страниц.

Рост органического трафика. Органический трафик (organic traffic) — это количество пользователей, которые перешли на сайт из поисковой выдачи, а не по рекламным ссылкам и баннерам.

Один из источников такого трафика — сниппеты на первой странице выдачи поисковика. К примеру, в Google под название страницы попадают заголовки второго уровня <h2> и ссылки из основной навигации <nav>. Ещё больше смысла добавляет простое и ёмкое описание из атрибута description. Пользователи больше доверяют сайтам, которые прозрачны и заранее предупреждают, чего от них ждать.

Вклад в будущие поисковые алгоритмы. Всё течёт, всё меняется, и SEO тоже. Компании разрабатывают новые алгоритмы поиска, основанные на искусственном интеллекте. Например, Microsoft уже запустила поумневший движок Bing. Google работает над новым движком «Проект "Маги"» 🧙‍♂️

В будущем ключевыми факторами ранжирования могут стать качественные клики (qualified clicks), качество и актуальность контента, и UX в целом. UX подразумевает юзабилити и доступность, а они в хороших отношениях с семантикой. Так что хорошая вёрстка может оказаться важнее микроразметки и производительности.

Первый шаг. Смотрим на крупные логические блоки страницы и выбираем подходящие теги. Например, <header>, <footer>, <main>, <nav> или <aside>.

Можете использовать такое правило при выборе тега. Если задаёте дивам классы вроде header, sidebar, content, post и footer, подумайте, не подходят ли больше элементы <header>, <aside>, <main>, <article> и <footer>. Из любого правила есть исключение: контекст интерфейса и содержимого важнее.

Предыдущая схема — один из многих вариантов раскладки. Обычно на страницах повторяются только <header>, <footer> и <main>. В этой схеме, к примеру, есть хедер, основная часть с картинкой <img>, с несколькими превью <article> и формой <form>, а также футер.

Приблизим карточку с превью поста. В блоке <article> размещаются картинка, параграф текста <p> и хедер с заголовком и другой информацией о посте.

Второй шаг. Смотрим на содержимое всей страницы и отдельных, более мелких блоков на ней. Расставляем заголовки <h1>-<h6>. Хороший тон использовать один <h1>. После в правильном порядке располагаем заголовки других уровней.

Представим, что на странице есть заголовок первого уровня и несколько подзаголовков второго и третьего уровней. После <h1> идёт <h2>, после — пара <h3>, которые находятся в том же блоке. Следующая секция опять начинается с <h2>.

        
          
          <main>  <section>    <h1></h1>    <p></p>  </section>  <section>    <h2></h2>    <p></p>    <h3></h3>    <p></p>    <h3></h3>    <p></p>  </section>  <section>    <h2></h2>    <p></p>  </section></main>
          <main>
  <section>
    <h1></h1>
    <p></p>
  </section>

  <section>
    <h2></h2>
    <p></p>

    <h3></h3>
    <p></p>

    <h3></h3>
    <p></p>
  </section>

  <section>
    <h2></h2>
    <p></p>
  </section>
</main>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Третий шаг. Переходим к небольшим смысловым блокам. Это списки, таблицы, примеры кода, цитаты и похожие элементы.

Четвёртый шаг. Разбираемся с самыми мелкими частями содержимого: параграфами, кнопками, ссылками, временем, изображениями, видео и т. д.

Сверстаем страницу вымышленного сайта про SEO двумя способами: дивно и хорошо.

В дивном примере используем минимальное количество тегов.

Заглянем в HTML-код из демо:

        
          
          <div class="container">  <div class="header">    <div class="nav">      <a href="#" class="nav__item">Главная</a>      <a href="#" class="nav__item">Блог</a>      <a href="#" class="nav__item">Контакты</a>    </div>  </div>  <div class="main">    <span class="heading">Курсы компании «Гарцующий пони»</span>    <div class="wrapper">      <div class="card">        <div class="card__header">          <span class="card__heading">SEO для начинающих</span>          <span class="card__author">Иван Иванович</span>        </div>        <div class="card__content">          <img            src="./images/seo-course.png"            alt=""            class="card__img"            decoding="async"          >          <span class="card__description">            Благодаря этому курсу вы научитесь задавливать конкурентов            с помощью ссылочной массы, а не качественного контента.          </span>        </div>        <div class="card__footer">          <span>13 февраля 2023</span>        </div>      </div>      <div class="card">        <div class="card__header">          <span class="card__heading">            WordPress разработка          </span>          <span class="card__author">Ольга Ольгина</span>        </div>        <div class="card__content">          <img            src="./images/wordpress-course.png"            alt=""            class="card__img"            decoding="async"          >          <span class="card__description">            WordPress — топ за свои деньги. Изучите его, чтобы стать            востребованным фрилансером.          </span>        </div>        <div class="card__footer">          <span>23 октября 2023</span>        </div>      </div>      <div class="card">        <div class="card__header">          <span class="card__heading">JavaScript для чайников</span>          <p class="card__author">М. Михайловских</p>        </div>        <div class="card__content">          <img            src="./images/javascript-course.png"            alt=""            class="card__img"            decoding="async"          >          <span class="card__description">            Курс подойдёт для любых чайников: электрических, газовых            и даже для кастрюлек, временно подменяющих сломанный чайник.          </span>        </div>        <div class="card__footer">          <span>30 ноября 2023</span>        </div>      </div>    </div>  </div>  <div class="footer">    <span class="copyright">      2023. Разработано компанией      <a class="copyright__link" href="#">«Гарцующий пони»</a>    </span>  </div></div>
          <div class="container">
  <div class="header">
    <div class="nav">
      <a href="#" class="nav__item">Главная</a>
      <a href="#" class="nav__item">Блог</a>
      <a href="#" class="nav__item">Контакты</a>
    </div>
  </div>
  <div class="main">
    <span class="heading">Курсы компании «Гарцующий пони»</span>
    <div class="wrapper">
      <div class="card">
        <div class="card__header">
          <span class="card__heading">SEO для начинающих</span>
          <span class="card__author">Иван Иванович</span>
        </div>
        <div class="card__content">
          <img
            src="./images/seo-course.png"
            alt=""
            class="card__img"
            decoding="async"
          >
          <span class="card__description">
            Благодаря этому курсу вы научитесь задавливать конкурентов
            с помощью ссылочной массы, а не качественного контента.
          </span>
        </div>
        <div class="card__footer">
          <span>13 февраля 2023</span>
        </div>
      </div>

      <div class="card">
        <div class="card__header">
          <span class="card__heading">
            WordPress разработка
          </span>
          <span class="card__author">Ольга Ольгина</span>
        </div>
        <div class="card__content">
          <img
            src="./images/wordpress-course.png"
            alt=""
            class="card__img"
            decoding="async"
          >
          <span class="card__description">
            WordPress — топ за свои деньги. Изучите его, чтобы стать
            востребованным фрилансером.
          </span>
        </div>
        <div class="card__footer">
          <span>23 октября 2023</span>
        </div>
      </div>

      <div class="card">
        <div class="card__header">
          <span class="card__heading">JavaScript для чайников</span>
          <p class="card__author">М. Михайловских</p>
        </div>
        <div class="card__content">
          <img
            src="./images/javascript-course.png"
            alt=""
            class="card__img"
            decoding="async"
          >
          <span class="card__description">
            Курс подойдёт для любых чайников: электрических, газовых
            и даже для кастрюлек, временно подменяющих сломанный чайник.
          </span>
        </div>
        <div class="card__footer">
          <span>30 ноября 2023</span>
        </div>
      </div>
    </div>
  </div>
  <div class="footer">
    <span class="copyright">
      2023. Разработано компанией
      <a class="copyright__link" href="#">«Гарцующий пони»</a>
    </span>
  </div>
</div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В предыдущем примере героически избегали всего спектра HTML-элементов и рассчитывали только на <div> и <span>. Заменим ничего не значащие <div> и <span> на подходящие элементы. Хедер, футер, ссылки, заголовки — всё обрело больше смысла.

Посмотрим на улучшенный код:

        
          
          <header class="header">  <nav class="nav">    <a href="#" class="nav__item">Главная</a>    <a href="#" class="nav__item">Блог</a>    <a href="#" class="nav__item">Контакты</a>  </nav></header><main class="main">  <h1 class="heading">Курсы компании «Гарцующий пони»</h1>  <div class="wrapper">    <article class="card">      <header class="card__header">        <h2 class="card__heading">SEO для начинающих</h2>        <p class="card__author">Иван Иванович</p>      </header>      <div class="card__content">        <img          src="./images/seo-course.png"          alt=""          class="card__img"          decoding="async"        >        <p class="card__description">          Благодаря этому курсу вы научитесь задавливать конкурентов          с помощью ссылочной массы, а не качественного контента.        </p>      </div>      <footer class="card__footer">        <time          class="card__date"          datetime="2023-02-13"        >          13 февраля 2023        </time>      </footer>    </article>    <article class="card">      <header class="card__header">        <h2 class="card__heading">WordPress разработка</h2>        <p class="card__author">Ольга Ольгина</p>      </header>      <div class="card__content">        <img          src="./images/wordpress-course.png"          alt=""          class="card__img"          decoding="async"        >        <p class="card__description">          WordPress — топ за свои деньги. Изучите его,          чтобы стать востребованным фрилансером.        </p>      </div>      <footer class="card__footer">        <time          class="card__date"          datetime="2023-10-23"        >          23 октября 2023        </time>      </footer>    </article>    <article class="card">      <header class="card__header">        <h2 class="card__heading">JavaScript для чайников</h2>        <p class="card__author">М. Михайловских</p>      </header>      <div class="card__content">        <img          src="./images/javascript-course.png"          alt=""          class="card__img"          decoding="async"        >        <p class="card__description">          Курс подойдёт для любых чайников: электрических, газовых          и даже для кастрюлек, временно подменяющих сломанный чайник.        </p>      </div>      <footer class="card__footer">        <time          class="card__date"          datetime="2023-11-30"        >          30 ноября 2023        </time>      </footer>    </article>  </div></main><footer class="footer">  <p class="copyright">    2023. Разработано компанией    <a class="copyright__link"href="#">«Гарцующий пони»</a>  </p></footer>
          <header class="header">
  <nav class="nav">
    <a href="#" class="nav__item">Главная</a>
    <a href="#" class="nav__item">Блог</a>
    <a href="#" class="nav__item">Контакты</a>
  </nav>
</header>
<main class="main">
  <h1 class="heading">Курсы компании «Гарцующий пони»</h1>
  <div class="wrapper">
    <article class="card">
      <header class="card__header">
        <h2 class="card__heading">SEO для начинающих</h2>
        <p class="card__author">Иван Иванович</p>
      </header>
      <div class="card__content">
        <img
          src="./images/seo-course.png"
          alt=""
          class="card__img"
          decoding="async"
        >
        <p class="card__description">
          Благодаря этому курсу вы научитесь задавливать конкурентов
          с помощью ссылочной массы, а не качественного контента.
        </p>
      </div>
      <footer class="card__footer">
        <time
          class="card__date"
          datetime="2023-02-13"
        >
          13 февраля 2023
        </time>
      </footer>
    </article>

    <article class="card">
      <header class="card__header">
        <h2 class="card__heading">WordPress разработка</h2>
        <p class="card__author">Ольга Ольгина</p>
      </header>
      <div class="card__content">
        <img
          src="./images/wordpress-course.png"
          alt=""
          class="card__img"
          decoding="async"
        >
        <p class="card__description">
          WordPress — топ за свои деньги. Изучите его,
          чтобы стать востребованным фрилансером.
        </p>
      </div>
      <footer class="card__footer">
        <time
          class="card__date"
          datetime="2023-10-23"
        >
          23 октября 2023
        </time>
      </footer>
    </article>

    <article class="card">
      <header class="card__header">
        <h2 class="card__heading">JavaScript для чайников</h2>
        <p class="card__author">М. Михайловских</p>
      </header>
      <div class="card__content">
        <img
          src="./images/javascript-course.png"
          alt=""
          class="card__img"
          decoding="async"
        >
        <p class="card__description">
          Курс подойдёт для любых чайников: электрических, газовых
          и даже для кастрюлек, временно подменяющих сломанный чайник.
        </p>
      </div>
      <footer class="card__footer">
        <time
          class="card__date"
          datetime="2023-11-30"
        >
          30 ноября 2023
        </time>
      </footer>
    </article>
  </div>
</main>
<footer class="footer">
  <p class="copyright">
    2023. Разработано компанией
    <a class="copyright__link"href="#">«Гарцующий пони»</a>
  </p>
</footer>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать