Мета-утопия — это мир достоверных метаданных. Когда же отравителю становится выгодно отравить колодец, то мета-воды становятся крайне токсичными очень быстро. Кори Доктороу
Позвольте мне описать одну ситуацию:
- Вы разрабатываете сайт.
- И думаете: «Так. Надо бы добавить элемент».
- Потом думаете: «Нет. Добавление
<div>
вызывает у меня чувство вины. Каша из дивов — это ужасно, я же про это знаю». - Потом: «Ну, нужно что-то ещё использовать. Например, сюда может подойти элемент
<aside>
». - Погуглив три раза и прочитав пять статей, вы приходите к выводу, что в данном случае использовать
<aside>
семантически неправильно. - Вы останавливаетесь на
<article>
, потому что по крайней мере это не<div>
. - Только что вы выкинули в помойку 40 минут, ничего не прибавив к вашему коду.
Это просто полный отстой Скопировать ссылку
Эта тема поднимается уже не в первый раз. В 2003 году Энди Бадд написал статью о выборе между семантической чистотой и семантическим реализмом.
Если ваша главная проблема с HTML5 — выяснить какая разница между <aside>
и <blockquote>
или, скажем, как правильно разметить адрес — знаете, вы используете HTML5 не для того, для чего он предназначен.
Разметка структурирует содержимое, но выбор элементов имеет гораздо меньшее значение, чем нас в течение долгого времени приучали думать. Давайте пройдемся по ряду причин.
Веб больше не состоит из структурированного содержимого Скопировать ссылку
В золотые времена веба страницы замысливались как хранилища информации и смыслового содержимого — и ничего больше. Сейчас в вебе есть содержимое, но его смысл — производная от действий пользователей с этим содержимым.
XML, RDFA, Dublin Core и другие структурированные спецификации применимы для очень важных сценариев использования, но в число этих сценариев не входит большинство взаимодействий внутри веба. Чёрт побери, нет ни одного сайта, на котором действительно существовала бы та идеальная семантическая разметка, которую требуют эти спецификации. Об этом гораздо лучше, чем я, пишет Марк Пилгрим.
Если у вас есть содержимое, которое требует семантической чистоты: библиотечный каталог, документ с оглавлением, онлайн-книга (то есть всё, для чего имеет смысл семантическая чистота) — тогда, разумеется, верстайте его так, оно соответствовало алгоритму разметки HTML5 и спорьте сколько угодно о том, какой элемент должен быть <article>
, а какой — <section>
. Нет ни одного инструмента, с помощью которого пользователь мог бы напрямую, благодаря этому алгоритму, построить оглавление документа. Ни в одном браузере таких инструментов тоже нет.
Это делает содержимое доступным? Скопировать ссылку
Если причина, по которой вы используете семантическую разметку — доступность для людей с нарушениями восприятия, поймите, пожалуйста, что в действительности доступность и семантическая разметка очень слабо коррелируют друг с другом по причине массового неправильного использования HTML-разметки в вебе. Я бы сослалась на пост Марка Пилгрима об этом, но он недоступен, так что придется вот так.
Теги <b>
, <strong>
, <i>
и <em>
совершенно эквивалентны тегу <span>
с точки зрения спецификации. И некоторые теги HTML5 — тоже.
Как написано в HTML5 Accessibility, практически каждый новый элемент HTML5 дает специальным возможностям для пользователей ровно столько же семантической информации, сколько элемент <div>
. Так что если вы думаете, что использование элементов HTML5 сделает ваш сайт более доступным для людей с нарушениями зрения, подумайте ещё раз. Сколько дополнительной информации содержат теги <figure>
и <figcaption>
? Нисколько.
Недавний спор (или, скорее, разгромный пост) об элементе <time>
— ещё одно доказательство недолговечности семантического значения, которое связывается с тем или иным элементом.
Это облегчает поиск по содержимому? Скопировать ссылку
Если великая цель, для достижения которой вы используете семантическую разметку — SEO, что ж, знайте, что большинство поисковых систем не станут доверять странице больше из-за её разметки. Единственное, что рекомендуется в руководстве Google по поисковой оптимизации — использовать релевантные заголовки и ссылки (другие поисковые системы работают точно так же). Будете ли вы использовать элементы HTML5 или <strong>
и <span>
— это никак не повлияет на восприятие вашей страницы поисковыми системами.
Есть другой способ предоставлять поисковым системам больше данных — использовать микроданные (Microdata и Schema.org — прим. редактора). Это никак не повлияет на положение вашей страницы в поисковой выдаче, но это добавит полезную информацию к результатам поиска в том случае, если поисковая система посчитала ваш сайт подходящим.
Это делает содержимое портируемым? Скопировать ссылку
Ещё одно широко разрекламированное преимущество семантического веба — портируемость данных. Предполагается, что все устройства должны чудесным образом понимать семантическую разметку, которая везде используется, и без всяких усилий извлекать оттуда информацию. Арье Грегор разоблачает этот миф:
… Ману Спорни сказал, что ребята, занимающиеся семантическим вебом, по результатам исследований заключили, что внешние данные (out-of-band data) сложнее держать синхронизированными с содержимым. Могу сказать, что в случае MediaWiki это не так… Единственные сценарии, которые я могу придумать для использования RDFa или микроданных вместо отдельного RDF — это либо если у вас нет достаточно хороших инструментов для генерации страниц, либо если вы хотите, чтобы метаданные обрабатывались специфическими, заранее известными клиентами, которые поддерживают только встроенные метаданные (например, поисковые системы, поддерживающие спецификацию Schema.org и т.п.). Если страница всё равно обрабатывается скриптом, и если автор скрипта имеет доступ к инструментам на стороне сервера, которые могут извлечь метаданные в отдельный RDF-поток, тогда в обычном случае опубликовать отдельный поток должно быть так же просто, как и встроенный. И это сохраняет довольно большой объём данных, который передается просто так при каждой загрузке страницы.
Что же теперь делать? Скопировать ссылку
- Никакого вреда от использования элементов
<div>
не будет, вы можете спокойно продолжить использовать их вместо<section>
и<article>
. Мне представляется, что мы должны использовать новые элементы для того, чтобы сделать разметку более читаемой, а не для того, чтобы добиться внутреннего семантического соответствия правилам разметки самим по себе. Если вы хотите использовать HTML5-элементы<section>
и<article>
, чтобы улучшить какую-нибудь текстовую документацию для того, кто действительно её впоследствии прочитает — пожалуйста, делайте это. - Уже сейчас существуют инструменты, которые пользуются элементами
<nav>
,<header>
и<footer>
. NVDA делает заключение о предполагаемой семантике документа с помощью этих элементов. Эти элементы просто понять и просто использовать. - Стандарт ARIA достаточно хорошо поддерживается программами, читающими с экрана, но будьте осторожны при их использовании с элементами HTML5.
- В HTML5 масса новых возможностей. Мне кажется, что мы должны изучать их, использовать и высказывать своё мнение, чтобы сделать эти возможности более функциональными и стабильными. Да, большинство этих возможностей предполагают, что вы понимаете JavaScript, пишете на нём и применяете те функции, которые помогают пользователям более полно взаимодействовать с вашим сайтом. Если эта задача кажется вам слишком сложной, учитесь писать код, особенно на JavaScript.
Что вы думаете? Скопировать ссылку
Эта статья является авторским мнением и может не соответствовать мнению редакции. Согласны ли вы с автором? Расскажите об этом в комментариях. Если вы готовы высказаться самостоятельно, написав возражение — свяжитесь с нами.