Семантическая структура

[ Это перевод статьи с названием „Semantic Structure“. Copyright © by www.Webaim.org ]

Содержание статьи:

  1. Природа HTML
  2. Использование заголовков в содержании
  3. Правильное использование заголовков
  4. Правильное использование списков

Природа HTML

Ученые, которые создали HTML стремились определить физические стандарты распространения документов. Они были мало заинтересованы в том, как визуально документ выглядит на экране компьютера. На самом деле, HTML был первоначально разработан для обеспечения четкого разделения структуры контента и графического дизайна. Намерение состояло в том, чтобы создать World Wide Web страниц, которые будут отображаться в каждой доступной системе и браузере, в том числе браузерах, которые позволяют “читать” текст веб-страницы пользователям с ослабленным зрением, и которые могут быть точно интерпретируемы с помощью автоматизированных поисковых и аналитических систем.

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

Например, большинство графических дизайнеров не используют стандартные элементы заголовков в HTML (<h1>, <h2>, и так далее), потому что им не хватает специфики: в большинстве веб-браузеров эти элементы делают заголовки абсурдно большими (<h1>, <h2 >) или до смешного малыми (<h4>, <h5>, <h6>). Но элементы заголовка в HTML были созданы без мысли о графическом дизайне. Их единственная цель состоит в том, чтобы обозначить иерархию важности, так чтобы и человек, и автоматизированные поисковые системы имели возможность просмотреть документ и легко определить его информационную структуру. Только, между прочим, дизайнеры браузера создали визуальную иерархию для HTML заголовков путем присвоения различных размеров типов и уровней каждому элементу заголовка, хотя эти размеры , как правило, несколько ограничены в языке HTML.
К счастью, CSS позволяет авторам изменять дизайн представления элементов для удовлетворения их визуальных предпочтений, сохраняя при этом основной смысл(слово “семантический” буквально означает “смысл”). Хотя в первоначальном намерении Интернета о чтении с экрана и других вспомогательных технологиях, в основном ,игнорировался визуальный стиль ,а внимание было сосредоточено , в первую очередь ,на семантике и структуре.

Использование заголовков в содержании

Сталкиваясь со слишком длинной веб-страницей, зрячие пользователи часто прокручивают её в поисках заголовков жирным текстом , чтобы получить представление о структуре и содержании страницы. Используя чтение с экрана и другие вспомогательные технологии пользователи также имеют возможность просмотра веб-страниц, визуально определяя её структуру, с учетом того, что заголовки могут отличаться от основного текста жирным или более крупным шрифтом.Это означает, что пользователь имеет возможность просмотреть список всех заголовков на странице, может читать весь текст или прыгать заголовками, переходя непосредственно к заголовкам верхнего уровня (<h1>), заголовкам следующего уровня (<h2>), (<h3>), и так далее.

Пример

Просмотр структуры содержимого одного из ваших веб-страниц в <a href=”http://wave.webaim.org/”>WAVE</a>. Введите URL веб-страницы в текстовое поле, нажмите кнопку и затем выберите вкладку Outline в боковой панели.

Страницы должны быть структурированы в иерархическом порядке, как правило, с одним заголовком 1-й степени (<h1>) , который является наиболее важным (как правило, заголовки страниц или основного содержимого заголовок), а затем заголовками 2-й степени (<h2> – как правило, основные заголовки разделов), 3–й степени (заголовки подразделов элемента <h2>), и так далее. Технически заголовки меньшей степени должны содержаться в заголовках следующей высшей степени (то есть, следует не пропускать уровни заголовков, например, от <h2> до <h4>, вниз по документу). Следующая схема показывает иерархию, которую веб-страница может содержать. На самом деле, она представляет собой иерархию основного содержания раздела этой страницы, с различными степенями заголовков для представления более высоких или более низких уровней иерархии контента. Вы можете нажать на любой из заголовком, чтобы перейти в этот раздел в пределах этой страницы.

Правильное использование заголовков

Не используйте при наборе такие функции, как размер шрифта или жирный шрифт для выделения внешнего вида заголовков – для этого существуют фактические заголовки (<h1> – <h6>) для всего контента. Реабилитационные технологии и другие браузеры полагаются на конкретную разметку страницы с целью определения её структуры. Элементы, выделенные жирным или более крупным шрифтом не интерпретируются как структурные .

Точно так же, не следует использовать заголовки для достижения только визуальных результатов. Например, если вы хотите выделить или подчеркнуть элемент внутри вашего контента, который не является заголовком (например, как в предыдущем предложении), не используйте заголовок элементов для изменения его внешнего вида. Вместо этого следует использовать размер шрифта, жирный шрифт , или курсив. На самом деле, вы должны использовать стили для достижения визуальных результатов. Если вы хотите подчеркнуть то, технически необходимо использовать <strong> вместо использования жирного шрифта и подчеркивание вместо курсива. Жирный и курсив создают визуальный акцент и придают дополнительное значение, в то время как <strong> и подчеркивание определяют семантическое значение. Визуально, жирный шрифт и <STRONG> , подчеркивание и курсив выглядят точно так же и, к сожалению, как правило, обрабатываются программой чтения с экрана так же (если дифференцированы вообще) ,но разработчики , тем не менее, должны использовать более правильные элементы HTML.

Правильное использование списков

HTML списки – <UL>, <оl>, <dl> – также передают иерархическую структуру контента. Каждый из них имеет свои правила, касающиеся их использования. Неупорядоченные списки следует использовать, когда нет порядка последовательности или важности. Упорядоченные списки предлагают прогрессии или последовательность. Списки определений следует использовать в явном виде для представления структуры определений. Как и в случае с заголовками списки должны быть использованы правильно и для правильных целей. Маркированные и нумерованные списки должны всегда содержать элементы списка. Списки определений всегда должны иметь описание определений. Пустые списки являются неправильными HTML. Списки никогда не должны использоваться только для отступа или для других целей компоновки. Вложенные списки должны быть закодированы правильно .