Понимание семантики

Перевод статьи Understanding semantics с сайта tink.uk, опубликовано на css-live.ru с разрешения автора — Леони Уотсон.

Слово «семантический» уже слилось с веб-разработкой. Мы произносим «семантический код» и «семантика» элемента, но что это значит на самом деле и почему так важно?

Слово семантика происходит от французского «semantique» — «несопоставимый». А в английском у него есть три значения:

  1. значение слов или что-то, к нему относящееся;
  2. код, предназначенный для отражения структуры и смысла;
  3. мелкие или незначительные детали.

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

Структура

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

У каждого элемента есть свои общепризнанные значение и функция. Например, тег <p> отвечает за абзац статического текста, элемент <a> — интерактивный и может загрузить новый ресурс. Не будь оно общепризнанным, браузеры не смогли бы определить оформление и функциональность по умолчанию для многих элементов.

Смысл

HTML также задёт смысл контента. У большинства HTML-элементов есть неявная роль, определяющая назначение элемента. Например, неявная роль элемента <a> — «ссылка», у <img> — «графика» или «изображение», а у <header> — это «баннер».

Демонстрации

Разные API доступности, поддерживаемые платформой, могут распознавать эти роли, а вспомогательные технологии вроде инструментов распознавания речи и скринридеров пользуются ими.

<a href="http://tink.uk">Tink UK</a>

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

Сравните это с псевдоссылкой в коде ниже.

<span class="link">Tink UK</span>

Для браузера это не ссылка, поэтому он не предоставляет никакого ожидаемого поведения (оформление как у ссылки предоставляется с помощью CSS). Элемент <span> семантически нейтральный, поэтому у него нет неявной роли, полезной в этом контексте. Это демо псевдоссылки в скринридере показывает недостающую информацию.

Можно использовать JavaScript, ARIA и CSS, чтобы восполнить недостающую семантическкую информацию и предоставить некоторое (но не всё) оформление и поведение, связанное с элементом <a>. Это требует гораздо больше кода и усилий, и обычно приводит к крайне хрупкой реализации по сравнению со стандартным HTML-элементом для ссылки.

Поэтому семантика HTML имеет двоякое значение: она дает нам единообразное понимание структуры контента и стандартное поведение, а также делает смысл и назначение контента понятным для всех. А самое главное, при правильном использовании HTML нам всё это даётся даром.

P.S. Это тоже может быть интересно:

9

Комментарии

  1. Ваготрон

    Вы серьезно? Зачем выкладывать такой унылый и банальный контент, скатились, вы ребята, раньше такие эпичные статьи были, до сих пор вспоминаю по inline-blocks кучу годноты.

    1. SelenIT

      SelenIT

      Это 1) напоминание новичкам, 2) «затравка» перед эпичным развитием темы. Так задумано, главная интрига впереди, оставайтесь на связи!

      1. Алексей

        Спасибо!

  2. Сергей

    Исправьте ошибку:
    ————
    Слово семантика происходит от французского «semantique» — «несопостовимый».
    ————
    несопост_О_вимый -> несопост_А_вимый

    1. Максим Усачев (Автор записи)

      Исправили, спасибо!

  3. Yuno

    Как-то непонятно все равно в чем разница между структурой и смыслом в данном контексте

    1. Yuno

      Я кажется понял… Nav: в плане структуры — группа интерактивых элементов; в плане смысла — данные интерактивные элементы должны вести на взаимосвязанные страницы внутри данного ресурса.
      Em: как структура — жирный текст; в плане смысла — важный текст.

      Поправьте пожалуйста если я не прав

      1. SelenIT

        SelenIT

        Как я сам понимаю: в плане структуры ul и ol, например — оба списки, main, aside, nav и header — крупные блоки контента, em, strong и mark — особым образом выделенные фрагменты текста, а textarea и button — интерактивные контролы. И структура определяет, что во что можно вкладывать (напр., фрагменты текста в блоки можно, а наоборот нельзя). Но в рамках этих структурных типов у каждого элемента есть еще и свой особый смысл: ol отличается от ul тем, что в нем важен порядок пунктов, nav — блок не любого контента, а именно навигационных ссылок, header — блок не любого контента, а конкретно вводной информации, и т.д. И программа (напр. скринридер) может извлечь этот смысл и помочь донести его до пользователя.

        1. Yuno

          Большое спасибо, все встало на свои места!

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Ваш E-mail не будет опубликован

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