Конечно, все наши броузеры обработают следующий элемент CSS.

Div {color: red}
А как насчет этого:

Div {font-weight: bold}
На самом деле, почти все броузеры, включая IE7, обработают стиль div с атрибутом structure, даже если нет такого атрибута. К сожалению, наше счастье изчезает, потому что IE6 нет. Но мы можем использовать этот атрибут в HTML и все существующие броузеры распознают его. Мы даже можем использовать стили CSS для нашего HTML, с использованием атрибута во всех современных броузерах. И если мы хотим обойти старые броузеры, мы можем добавить class, со значением стиля. В сравнении с HTML 5 решением, которое добавляет новые элементы, не работающие в Internet Explorer 6 или 7, мы видим, что это, безусловно, более обратно совместимое решение.

Расширяемость через атрибуты

Эти новые атрибуты, могут быть использованы как атрибут class: для придания элементу семантики, описывать характер элемента или для метаданных элемента.

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

Например XHTML атрибут role работает следующим образом:

< ul role ="navigation sitemap" >
< li href ="downloads" > Downloads
< li href ="docs" > Documentation
< li href ="news" > News

* This source code was highlighted with Source Code Highlighter .

Почему бы не принять атрибут role, как есть? Ведь существуют другие виды семантики, для которых определение роли не применимо. Например:

He’s a fantastic person.

Вот еще один пример. Все более очевидно, что в HTML не хватает представления машино-читаемого значения понятным для человека, например даты. Это лежит в основе проблемы BBC с микроформатом hCalendar, о ней мы говорили ранее. Хотя May Day next year действительно не имеет смысла, зато по аналогии May Day next year будет.

Опять же, когда мы используем конкретный термин «equivalent» в качестве атрибута или какой либо другой для обозначения такого рода семантики, это не является проблемой. Важно отметить, что это не так просто, как использование атрибута class или role, где в один элемент помещается целый набор элементов семантики информации. Для, должным образом, расширяемого решения, которое обеспечит обратную совместимость и достаточную гибкость, стоит исследовать в этом направлении.

Я назвал этот раздел «Некоторые идеи решения», поскольку значительный объем работы необходимо сделать, для того, что бы создать действительно работоспособное решение. Открытые вопросы включают в себя следующее.

• сколько различных семантических атрибутов должно быть. Будут ли эти категории расширяемыми, если да, то каким образом?
• Каким образом определять словарь?
• Мы просто изобретаем термины, которые мы хотим, почти тем же образом, как и разработчикки использовали значение class, или возможные значения должны быть определены стандартизированной спецификацией?
• Если у нас есть конфликт, между двумя словарями, например двум идентичным терминам дают определения два различных словаря, как это решить?
• Нужно ли пространство имен или же существует другой механизм?

Вместо того, что бы торопится с ответом на эти вопросы, я выдвинул на свет вопросы которые необходимо решить и начать диалог. Разветвление и размах решений сделаных в HTML 5, слишком велик для принятия этих решений, необходимо внести осведомленность о лингвистике, семантике, семиотике и смежных областях.

Надеюсь понятно, что просто внесение новых элементов в HTML не является решением проблемы расширения семантики в HTML.

Давайте не спешить с легким решением - с изменением «климата» все это обременит наших внуков проблемой, как и сейчас. По крайней, мере давайте оставим им максимально хороший HTML, на сколько возможно.

Теги:

• html 5
• xhtml
• семантика
• браузеры

Приложив немного усилий мы можем сделать нашу разметку более выразительной.

Но зачем тратить дополнительное время и ресурсы на обеспечение семантики HTML? Большинство пользователей не читают ваш HTML. И их заботит лишь то, что происходит на экране.

Семантический HTML предназначен только для машин. Они не так умны как вы и я, поэтому мы должны помочь им.

Примером таких машин, которые извлекают пользу из семантического HTML, могут послужить поисковые системы. Когда поисковые системы индексируют наш сайт, они интерпретируют содержание страниц сайта на основе разметки.

Вот что говорит Google об использовании семантического HTML (курсивом выделены мои записи):

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

Языковые инструменты (переводчики) исследуют нашу разметку для того, чтобы они могли перевести наши статьи на другой язык. Хорошая HTML разметка может привести к более точному переводу. Для примера, существуют различия между американским и британским английским. Люди могут с легкостью понять диалектические и идиоматические различия, но машины этого не могут.

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

Это только верхушка айсберга. Есть неисчислимое количество других машин, которые смотрят на наш HTML и пытаются его понять. Черт возьми, да интернет состоит из кучи машин. Они составляют большую часть веба. Мы должны приложить все возможности, чтобы кормить их более значимыми данными.

Окей, теперь, я надеюсь, вы на борту и хотите использовать семантический HTML. Может быть на своём блоге или при разработке CMS.

Посмотрите на шаблон ниже.

HTML шаблон

Вот семантический HTML шаблон для веб-контента. Это хорошая отправная точка/шаблон. Просто заполните пробелы. Это общий шаблон, который может работать со многими типами текстового содержимого: записи в блоге, новостные статьи, очерки и так далее.

HTML-разметка шаблона использует семантические элементы (т.е. article , header и footer).

Также здесь используется структурированная разметка данных Schema.org. В частности, схемы и Веб-страница . Schema.org - это совместный проект компаний Google, Bing и Yahoo!. Целью проекта является предоставление способа для поисковых систем, лучше понимать содержимое страниц.

Пример

Вот заполненный пример:

Детали

Давайте поговорим о различных частях HTML-шаблона.

Уточнение типа контента, языка и направления текста

HTML элемент имеет четыре атрибута:

• itemscope указывает, что схема Статья используется на протяжении всего документа.
• itemtype содержит адрес используемой схемы.
• lang даёт информацию о том, на каком языке написано содержимое страницы. W3C говорит, что мы должны пользоваться языковыми тегами, перечисленными в IANA Language Subtag Registry . Например, если страница написана на немецком языке, мы должны присвоить атрибуту land значение de .
• dir содержит информацию о направлении текста статьи. У вас есть два варианта. Либо «слева направо» (ltr), либо «справа налево» (rtl). Если вы хотите, чтобы браузер решил это за вас, то не используйте его.

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

Для осмысленного структурирования, мы используем следующие HTML элементы согласно спецификациям W3C.

BBC использует сопровождающее предложение ко всем своим статьям.

Структурированные данные

Шаблон использует микроданные, чтобы усилить семантическую HTML структуру.

Если вы обеспокоены использованием новых HTML5 элементов, то вы можете заменить их полностью поддерживаемыми элементами, такими как div или span. при этом вы можете обеспечить их семантическую значимость с помощью микроданных.

Ниже приводится краткое описание микроданных, используемых в HTML-шаблоне.

Иллюстрации: Кевин Корнелл

Перевод: Влад Мержевич

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

Давайте остановимся на нашей ответственности. К сожалению, в истории мы связаны с развитием важного инструмента нашей цивилизации, который будет использоваться для коммуникации на десятилетия вперед. Таким образом, когда мы направляем наш разум, праздно или всерьез, на улучшение HTML, мы должны понимать уже сегодня последствия далеко идущих решений.

HTML5, над которым W3C недавно удвоил свои усилия по формированию следующего поколения HTML, развил значительный импульс. Это огромный проект, охватывающий не только структуру HTML, но и модель парсинга, обработку ошибок, DOM, алгоритмы извлечения ресурсов, медиа-контент, двумерную графику, шаблоны данных, безопасность, страницы загрузки, хранение данных на стороне клиента и многое другое.

Есть также изменения в структуре, синтаксисе и семантике HTML, которые частично описал Лаклан Хант в статье .

Но в этой статье давайте обратимся исключительно к семантике HTML. Она интересует меня уже много лет и считаю, что семантика принципиально важна для будущего HTML.

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

Это не просто теоретическая проблема. Сотни тысяч разработчиков используют атрибуты class и id для создания расширенной семантической разметки. При этом практически неизменно разработчики используют специальные словари, которые они сами же составляют, а не значения, взятые из существующих схем. В лучшем случае это псевдосемантика.

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

Расширяемая семантика

Существует реальная проблема, которая должна быть решена. Нам нужны механизмы в HTML, которые чётко и однозначно позволят разработчикам добавлять в разметку более существенную семантику, а не псевдосемантику. Это, пожалуй, одна из важных целей проекта HTML5.

Но придумать такой механизм не так просто, потому что в любом решении имеются ограничения. Есть существенные ограничения, возможно, самым большим из них является обратная совместимость. Решение не должно ломать сотни миллионов используемых сегодня устройств, и которые будут использоваться ещё долгие годы. Любое решение без обратной совместимости не будет широко принято разработчиками из страха потерять читателей. Такие решения быстро вянут на корню.

Решение также должно быть совместимо и с будущими версиями. Не в том смысле, что оно должно работать в будущих браузерах - это ответственность разработчиков браузеров, но оно должно быть расширяемым. Мы не можем ожидать какого-либо единого решения, которое разрабатывается прямо сейчас, чтобы решить все мыслимые и немыслимые будущие семантические потребности. Мы можем разработать решение, которое удовлетворит расширяющиеся потребности по мере их возникновения.

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

Итак, как HTML5 решет этот вопрос? HTML5 вводит ряд новых элементов, некоторые из них я назвал «структурными» -