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

Перевод статьи 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. Это тоже может быть интересно:

5 Комментарии

  1. Ваготрон

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

    1. SelenIT

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

      1. Алексей

        Спасибо!

  2. Сергей

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

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

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

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

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