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

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

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

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

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

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

Для примера возьмем codeэлемент:

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

Семантика, контролируемая автором

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

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

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

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

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

• Это должен делать профессионал.
• Это стало более доступным.
• Это стало более удобным в обслуживании.

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

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

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

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

b	«фрагмент текста, стилистически отличающийся от обычного текста прозой, без придания ему дополнительной значимости, например, ключевые слова в аннотации к документу, названия продуктов в обзоре или другие фрагменты текста, типичное типографское оформление которых выделено жирным шрифтом».	<p>The <b>frobonitor</b> and <b>barbinator</b> components are fried.
strong	«большое значение для его содержания»	<p><strong>Warning.</strong> This dungeon is dangerous.
i	«фрагмент текста, написанный другим тоном или настроением или иным образом отличающийся от обычной прозы, например, таксономическое обозначение, технический термин, идиоматическая фраза из другого языка, мысль, название судна или другая проза, типичное типографское оформление которой выделено курсивом».	<p>The term <i>prose content</i> is defined above.
em	«подчеркните важность его содержания»	<p><em>Cats</em> are cute animals.

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

• center
• font
• s
• u

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

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

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

Что делать и чего не делать

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

Абзацы обозначайте элементами абзаца, а не переносами строк.

Не	Делать	Причина
<p class»heading»>foo</p>	<h1>foo</h1>	Для заголовков используются элементы заголовка.
<p><font size=»2″>bar</font></p>	<p>bar</p> p { font-size: 1em; }	Поддержка презентационной разметки обходится дорого.
<table> <tr> <td class=»heading»>baz</td> </tr> <tr> <td>scribble</td> </tr> </table>	<h1>baz</h1> <p>scribble</p>	Используйте элементы таблицы для представления табличных данных.
<div class=»newrow»>foo</div> <div>1</div> <div class=»newrow»>bar</div> <div>2</div>	<table> <tr> <th>foo</th> <td>1</td> </tr> <tr> <th>bar</th> <td>2</td> </tr> </table>	Используйте элементы таблицы для представления табличных данных.
foo bar.<br><br>baz scribble.	<p>foo bar.</p> <p>baz scribble.</p>	Абзацы обозначайте элементами абзаца, а не переносами строк.