6. Развитие веб-стандартов

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

Лет 15 тому назад для того, чтобы сделать шрифт надписи крупнее и задать буквы красного цвета, любой веб-мастер написал бы прямо в HTML-коде вот что: <fontsize="+1" color="#ff0000">очень важная надпись</font>. Других способов добиться желаемого не существовало в принципе. Сегодня такой подход противоречит веб-стандартам.

Лет 10 тому назад реализация эффекта «перекатывания» кнопок меню навигации не обходилась без JavaScript. Спецификация CSS2 уже была рекомендацией W3C, но в распространенных на тот момент браузерах она толком не работала.

Лет 5 тому назад изменение расположения и нюансов внешнего вида блоков на странице в зависимости от ширины окна браузера можно было сделать только при помощи JavaScript. Сегодня уже можно пользоваться для этих целей возможностями MediaQueries — одного из модулей CSS3. Можно надеяться, что в ближайшие пару лет во всех известных браузерах будет реализована адекватная поддержка этого действия³.

6. Важнейшие аспекты концепции веб-стандартов

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

1. Семантика

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

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

1. Базовый уровень семантики - использование структурных элементов HTML строго по назначению.

К примеру, структурную единицу, по смыслу являющуюся заголовком первого уровня, необходимо размечать тегом <h1> и только им — другие элементы разметки для этого не подходят по своему назначению. Верно и обратное: использовать тег <h1> надлежит для разметки только и только такого элемента, смысловая роль которого — заголовок первого уровня.

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

2. Следующий, более тонкий уровень - грамотное именование классов и идентификаторов элементов, использующихся в CSS-коде, сообразно их смысловой нагрузке, но никак не особенностям визуального представления.

Предположим, дизайн некоторого сайта предполагает использование цветового выделения дат публикации свежих новостей в блоке с информацией о текущих обновлениях. Скажем, оранжевым. Казалось бы, ничто не мешает нам разметить соответствующие элементы примерно следующим образом: <spanclass="orange">07.06.2011</span>, определив стилевые правила для класса orange в CSS-коде. А теперь представьте, что спустя некоторое время нам захотелось модифицировать цветовую схему новостного блока — ну, допустим, изменить выделение дат публикации новостей с оранжевого на синее. Конечно, можно было бы оставить код разметки в покое, заменив только соответствующее стилевое правило, но в таком случае старое, неактуальное уже название класса станет противоречить здравому смыслу и вносить лишнюю путаницу — по-хорошему, код разметки тоже надо поправить. А вот если бы мы сразу поименовали соответствующий класс в соответствии с его смысловой нагрузкой — ну, например, как-то вроде newsdate, — описываемой проблемы не возникло бы в принципе.

Кстати, в HTML5 для разметки информации о дате и времени предусмотрен специальный элемент <time>. Так что, при использовании в верстке сайта именно HTML5, совсем правильным было бы применение для обсуждаемых целей вот этого самого элемента <time> вместо семантически нейтрального <span>.

3. Еще более высокий уровень - использование сверх основной HTML-разметки каких-либо дополнительных метаданных, облегчающих возможную машинную обработку контента (примеры средств реализации – микроформаты, Microdata и RDFa).

Семантическая верстка подразумевает полное соответствие назначения элемента страницы и тега, с помощью которого этот элемент свёрстан. Вот несколько примеров:

• Контакты компании должны располагаться в теге address, а не в div-e.

• Картинки могут быть свёрстаны тегом img только в том случае, если она являются информационными и несут смысловую нагрузку. Во всех остальных случаях делать картинки нужно с помощью CSS-свойства background-image.

• Все ненумерованные списки (в том числе — навигация) должны быть сделаны с помощью тегов ul и li.

• Нумерованные списки — это обязательно ol и li

• Определения в тексте выделяются тегом dfn

• Списки определений — это dl, dt, dd

• Для аббревиатур необходимо использовать тег abbr

• Блоки цитат должны быть заключены в blockquote

• Заголовки первого, второго, третего, четвертого, пятого и шестого уровней — h1, h2, h2, h4, h5 и h6 соответственно.

• Таблицы должны использоваться только для вывода табличных данных⁴.

Дополнительные требования к вёрстке:

• Читаемость при отсутствии картинок. Для этого нужно всегда прописывать для блоков не только background-image, но и background-color так, чтобы при отсутствии изображения текст был достаточно контрастен по отношению к фону.

• Человекопонятный код. Код рекомендуется разбить на блоки, назвать классы и идентификаторы понятно и логично, комментировать отдельные элементы.

• Минимальный объём кода и изображений.