CSS-live.ru

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

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

10 комментариев

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

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

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

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

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

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

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

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

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

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