О веб-семантике

Понедельник, 16 июля 2012 г.

В контексте веб-разработки семантика относится к семантической разметке, то есть разметке, используемой в соответствии с ее смыслом и назначением.

Разметка, используемая в соответствии с ее назначением, означает использование элементов заголовков (например, h1
to h6) для разметки заголовков, элементов абзацев (p) для абзацев, списков
(ul, ol, dl, а также datalist или
menu) для списков, таблиц для табличных данных и так далее.

Констатация очевидного стала необходимой в старые времена, когда Веб состоял всего из нескольких веб-сайтов, а авторы использовали таблицы для верстки целых сайтов, ячейки таблиц или абзацы для заголовков и придумывали другие креативные способы достижения нужного макета. (Стоит признать, что у этих авторов было меньше инструментов в распоряжении, чем у авторов сегодня. Были времена, когда верстка трехколоночного макета была буквально невозможна без использования таблиц или изображений.)

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

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

говорит.
Например, возьмем the code:

element Элемент code

представляет фрагмент компьютерного кода. Это может быть имя элемента XML, имя файла, компьютерная программа или любая другая строка, которую распознает компьютер.

Семантика, управляемая автором
HTML-элементы несут смысл, определяемый спецификациями HTML, однако имена ID и классов также могут нести смысл. Имена ID и классов, точно так же какmicrodata
,
обычно находятся под контролем автора, за единственным исключениемmicroformats

. (Мы не будем рассматривать микроданные или микроформаты в этой статье.)

• Имена ID и классов дают авторам большую свободу при работе с HTML-элементами. Существует несколько основных правил, соблюдение которых гарантирует, что эта свобода не превратится в проблемы:
• Сведите использование ID и классов к минимуму.Используйте функциональные имена ID и классов
• ;
  если это невозможно, используйте общие имена ID и классов.

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

Преимущества использования семантической разметки

• Использование разметки в соответствии с ее назначением, а также умеренное использование функциональных имен ID и классов дает ряд преимуществ: Это профессиональный
• подход.
• Это более доступно.

Это легче поддерживать.

Особые случаи

«Нейтральные» элементы, элементы с неоднозначным значением и презентационные элементы составляют особые случаи. div и span

предлагают «общий механизм для добавления структуры в документы». Их можно использовать всегда, когда нет другого доступного элемента, соответствующего тому, что представляет собой рассматриваемый контент. b, В прошлом много путаницы вызывали элементы,
istrong и em b . Авторы проклинали i и за их презентационный характер и обычно предлагали замену 1:1 на strong
иem
. Не вороша прошлое, вот что говорит HTML 5, наделяя все четыре элемента смыслом:

<p><em>Cats</em> are cute animals.
Последнее, но не менее важное: существуют истинно презентационные элементы. Эти элементы будут поддерживаться пользовательскими агентами (браузерами) вечно, но их больше не следует использовать, так как
презентационная разметка не подлежит поддержке,
и вместо этого должен обрабатываться таблицами стилей. Некоторые популярные из них:

• центр
• шрифт
• s
• u

Как узнать, движетесь ли вы в правильном направлении

Быстрый и простой способ проверить семантику вашей страницы и понять, как она может интерпретироваться
программой чтения с экрана, — это отключить CSS, например, используя расширение Web Developer Toolbar,
доступное
для Chrome
и Firefox.
Это позволяет выявить только проблемы, связанные с использованием CSS для передачи смысла, но все же может быть полезно.

Другие методы варьируются от экспертной оценки кода (лучшие практики кодирования) до пользовательского тестирования (доступность).

Что можно и чего нельзя делать

В следующей таблице представлен общий обзор некоторых плохих практик при написании HTML,
а также правильные альтернативы и краткое объяснение.

Автор
Jens O. Meiert,
Старший веб-архитектор, команда веб-мастеров Google