Практический HTML: улучшаем семантику ссылок
Примечание: ниже перевод статьи «Boost Your Hyperlink Power». В ней освещается использование атрибутов rel и rev, а также некоторые микроформаты.
Часть HTML-тегов и атрибуты мы используем каждый день в свой работе. Заголовки, параграфы, списки и картинки являются основой разметки каждого веб-разработчика. Но наиболее распространенным элементом, наверное, будет ссылка — простой тег, который связывает воедино все страницы, создавая ту самую беспорядочную структуру, которую мы называем Всемирная Сеть Интернет (WWW).
Ссылка как она есть
Теория относительности ( rel ativity)
Может быть, вы уже читали про атрибут rel у ссылки. Я готов поспорить, что в секции head ваших страниц будет располагаться что-нибудь типа этого:
Еще одно распространенное употребление rel :
В данном случае связь между текущим документом и связанным — RSS-лентой — указана как alternate : альтернативное преставление текущего документа.
Вы можете добавить дополнительную информацию к этой ссылке, используя атрибут rel :
Элементарные микроформаты
Эта конструкция описывает, что текущая страница ссылается на документ, помеченный как «лицензия».
Микроформат rel-tag идет немного дальше. Он используется для указания на то, что последняя часть URL’а у ссылки является «меткой» для текущего документа:
В данном случае для этого документа добавлена метка «Microformats».
XFN (XHTML Friends Network) является способом описания отношений между людьми:
Таким образом я указываю, что Drew мой друг, я с ним встречался, и он мой коллега (ведь мы оба фанатеем от интернета (Web monkies)).
«Мы — хотим перемен» ( rev olution)
Разумность большинства
За легкостью использования rel и rev скрывается богатый потенциал. Они позволяет относительно легко добавить в ваши ссылки больше семантического смысла, что создает связи, которые затем могут быть обработы поисковыми роботами, агрегаторами или браузерами. Пусть вашим следующим шагом станет тесное знакомство с этими атрибутами и расширение возможностей ссылок.
Сссылки по теме
Существует ряд других распространённых типов, с которыми вы столкнётесь. Например, ссылка на сайт иконок:
Есть ряд других значений rel для иконок, в основном, используемых для обозначения специальных типов иконок для использования на различных мобильных платформах, например:
Атрибут sizes определяет размер иконки, когда type содержит тип MIME связанного ресурса. Они предоставляют советы, позволяющие браузеру выбрать наиболее подходящую иконку.
Вы можете, также, указать медиа тип или запрос внутри атрибута media ; этот ресурс будет загружен только в том случае, если media состояние равно true. Например:
Другие замечания по использованию:
Атрибуты
Этот элемент включает в себя глобальные атрибуты.
auto : указывает на отсутствие предпочтений. Браузер может использовать собственную эвристику для определения приоритетов ресурсов.
high : указывает браузеру, что ресурс находится в высоком приоритете.
low : указывает браузеру, что ресурс находится в низком приоритете.
Примечания:
Примечание: Большинство форматов иконок могут хранить только одну иконку, поэтому чаще всего sizes содержит только одну запись. MS’s ICO формат, как и Apple’s ICNS. ICO более распространены; вы должны использовать их.
Нестандартные атрибуты
Устаревшие атрибуты
Примечание: Этот атрибут считается устаревшим жизненным стандартом WHATWG HTML (который является каноничной спецификацией MDN). Однако, стоит отметить, что rev не считается устаревшим в спецификации W3C. Стоит сказать, учитывая неопределённость, полагаться на rev не стоит.
Стилизация с CSS
Примеры
Включение таблицы стилей
Включение таблицы стилей на страницы имеет следующий синтаксис:
Предоставление альтернативных таблиц стилей
Пользователь может выбрать, какую таблицу стилей использовать, выбрав её в меню Вид > Стиль страницы. Это позволяет пользователям видеть мультиверсию страницы.
Предоставление иконок для различных контекстов использования
Вы можете включить ссылки на несколько различных иконок на одной странице, и браузер выберет, какая из них лучше подходит для его конкретного контекста, используя значения rel и sizes как подсказки.
Условная загрузка ресурсов с медиавыражениями
Вы можете предоставить тип медиа или запрос внутри атрибута media ; этот ресурс будет загружен только в том случае, если условия медиа равно true. Например:
События загрузки таблицы стилей
Примечание: Событие load запускается после загрузки и анализа таблицы стилей и всего импортируемого содержимого, непосредственно перед тем, как стили будут применены к содержимому.
Что всё это значит?
Перевод: Влад Мержевич
В этой главе мы возьмем веб-страницу и, не делая с ней ничего плохого, улучшим ее. Местами она станет короче, местами длиннее, но она станет семантической. Возрадуемся!
Вот пример страницы. Откройте ее в новой вкладке и не возвращайтесь, пока не посмотрите ее исходный код по меньшей мере один раз.
Доктайп
Посмотрите на первую строку нашего кода.
Она называется доктайп. Это длинная история с черной магией, стоящая за доктайпом. Во время работы над Internet Explorer 5 под Mac его разработчики столкнулись с неожиданной проблемой. Новая версия этого браузера содержала столько улучшений по части стандартов, что старые страницы отображались некорректно. Вернее, отображались они надлежащим образом, по спецификации, но люди считали, что отображаются они неправильно. Авторы страниц при верстке ориентировались на доминирующие браузеры того времени — Netscape 4 и Internet Explorer 4. Браузер IE5/Mac был настолько передовым, что фактически разрушил Сеть.
Эта идея распространилась как лесной пожар и вскоре все основные браузеры имели два режима: «режим совместимости» и «стандартный режим». Конечно, вскоре все это вышло из-под контроля. Когда Mozilla запустила версию 1.1 своего браузера, она обнаружила, что страницы, которые отображаются в «стандартном режиме» в действительности основываются на одной конкретной причуде под именем доктайп. Mozilla подправила свой браузерный движок для устранения этого недостатка и тысячи страниц рассыпались в один миг. Таким образом был создан, и я не выдумываю это, «почти стандартный режим».
В своей основной работе Переключение режимов браузера через доктайп Хенри Сивонен выделил следующие режимы.
Режим совместимости
В режиме совместимости браузеры нарушают современные веб-спецификации и чтобы избежать «рассыпания» страниц отображают их в соответствии с практикой, распространенной в конце 90-х годов.
Стандартный режим
В стандартном режиме браузеры пытаются вывести документы в соответствии со спецификацией в той мере, насколько она реализована в браузере. В HTML5 называется «не режим совместимости».
Почти стандартный режим
Браузеры Firefox, Safari, Chrome, Opera (начиная с 7.5) и IE8 также поддерживают почти стандартный режим, в котором вертикальные размеры ячеек таблиц реализуются традиционно, а не в полном соответствии со спецификацией CSS2. В HTML5 называется «ограниченный режим совместимости».
Вы должны прочитать остальные статьи Хенри, потому что я привел здесь всё упрощённо. Даже в IE5/Mac было несколько вариантов доктайпа. Со временем список особенностей браузеров вырос и вместе с ним увеличился список доктайпов, которые переключают в режим совместимости. В последний раз, когда я занимался подсчётом, было 5 доктайпов для переключения в «почти стандартный режим» и 73 для переключения в «режим совместимости». Вероятно, при этом я пропустил несколько и я ещё молчу про ту сумасшедшую фигню, что делает Internet Explorer 8 для переключения между четырьмя (четырьмя!) режимами отображения. Вот схема. Убейте ее! Убейте и сожгите!
Так, где мы? Ах, да, доктайп.
Если вам нравится этот доктайп, можете оставить его. Или можете изменить доктайп на HTML5, который короче и приятнее, к тому же переключает в «стандартный режим» во всех современных браузерах.
Вот и все. Всего 15 символов. Это так просто, что вы можете набрать его вручную и не выкручиваться.
Корневой элемент
Корневой элемент может выглядеть так.
Ничего плохого в этом коде нет, так что если он вам нравится, можете его оставить, в HTML5 он абсолютно корректен. Но некоторые части уже не требуются, поэтому можно удалить их, тем самым сэкономив несколько байт.
После удаления xmlns останется следующее:
Готовы к выбрасыванию? Если да, то поехали. Едем, едем. приехали. Вот что осталось от нашего корневого элемента.
И это все, что я хотел сказать об этом.
Элемент
Кодировка символов
Когда вы думаете «текст», вы, вероятно, думаете о «знаках и символах, что я вижу на экране моего компьютера». Но компьютерам нет дела до знаков и символов, они имеют дело с битами и байтами. Каждый фрагмент текста, который вы когда-либо видели на экране компьютера, на самом деле хранится в определенной кодировке. Существуют сотни различных кодировок символов, некоторые из них оптимизированы для конкретных языков, таких как русский, китайский или английский, другие могут быть использованы сразу для нескольких языков. Грубо говоря, кодировка символов обеспечивает перевод между тем, что вы видите экране и тем, что компьютер хранит в памяти и на диске.
В действительности, все гораздо сложнее. Некоторые символы могут быть более чем в одной кодировке, каждая кодировка может использовать разные последовательности байтов в зависимости от способа хранения символов. Таким образом, кодировка это своего рода ключ для расшифровки текста. Всякий раз, когда кто-то дает вам последовательность байтов и утверждает что это «текст», вы должны знать, какую кодировку символов они использовали, чтобы суметь перевести байты в символы и вывести их.
Как же фактически ваш браузер определяет кодировку набора байтов, что посылает веб-сервер? Рад, что спросили. Если вы знакомы с HTTP-заголовками, то возможно видели подобный.
Content-Type: text/html; charset=»utf-8″
Эта строка говорит, что веб-сервер считает, что посылает вам HTML-документ в кодировке UTF-8. К сожалению, в Интернете творится каша — некоторые авторы могут контролировать HTTP-сервер, другие же нет. К примеру, сайт blogger.com может содержать различный контент предоставленный разными людьми, но управляется серверами Google. В HTML4 используется способ указания кодировки самостоятельно в любом HTML-документе. Вы, наверное, встречали такую строку.
Эта строка говорит о том, что автор считает, что в HTML-документе применяется кодировка UTF-8.
Это работает во всех браузерах. Выбор этого атрибута продиктован тем, что он уже реализован в браузерах, к тому же люди часто оставляли значение без кавычек.
Спроси профессора Маркапа
☞ В. Я никогда не использую смешные символы. Надо ли мне объявлять мою кодировку?
О. Да, вы всегда должны указывать кодировку на каждой веб-странице. Отсутствие кодировки может привести к уязвимости системы безопасности.
Дружеские отношения
Обычные ссылки всего лишь указатель на другой сайт. Отношения между ссылками это способ пояснить, почему вы указываете на другую страницу. Вот окончания предложения «Потому что. ».
Поведение ссылки на внешние ресурсы зависит от отношения, которое определено для соответствующего типа ссылки.
В примере, что я приводил ранее, только первая ссылка ( rel=»stylesheet» ) указывает на внешний ресурс. Остальные являются гиперссылками на другие документы. Вы можете при желании пройти по этим ссылкам, но они не требуются для просмотра текущей страницы.
Спроси профессора Маркапа
☞ В. Могу я создать свои собственные отношения между ссылками?
О. Кажется, имеется бесконечный запас идей для новых отношений между ссылками. В попытках помешать людям творить фигню WHATWG (Web Hypertext Application Technology Working Group, Рабочая группа по прикладным веб-технологиям) ведет реестр предложенных значений rel и устанавливает процесс их принятия.
rel=»stylesheet»
Давайте посмотрим на первую ссылку в нашем примере.
rel=»alternate»
Вернемся к нашей странице.
Ссылка с отношением rel=»alternate» всегда была странным гибридом в использовании, даже в HTML4. В HTML5 ее определение было уточнено и расширено, чтобы более точно описать существующий контент. Как вы видели, использование rel=»alternate» в сочетании с type=application/atom+xml указывает на Atom-фид для текущей страницы. Но вы также можете использовать rel=»alternate» в сочетании с другими значениями type для обозначения того же содержания в другой формат, например PDF.
Другие отношения ссылок в HTML5
rel=»author» используется для ссылки на страницу с информацией об авторе. Это может быть почтовый адрес, хотя и не обязательно. Обычно это ссылка на контактную информацию или страницу «Об авторе».
Запись rel=»external» сообщает, что ссылка ведет на документ, который не является частью сайта. Я считаю, что ее впервые популяризировал WordPress, когда использовал в ссылках комментариев.
Лучший способ подумать о rel=»up» это посмотреть на навигацию в виде хлебных крошек (или представить ее). Главная страница это первая страница в навигации, а текущая страница находится в хвосте. rel=»up» указывает на страницу, следующую за последней в хлебных крошках.
Все основные браузеры поддерживают такое связывание иконки со страницей. Обычно она отображается в адресной строке браузера рядом с URL или во вкладке браузера или в том и другом месте.
Новое в HTML5: атрибут sizes может быть использован для указания размера иконки.
rel=»license» был включен сообществом по микроформатам. Такое отношение означает, что ссылка ведет на страницу с авторскими правами, согласно которым предоставляется текущий документ.
rel=»nofollow» указывает, что ссылка не одобрена автором или издателем страницы или что ссылка на указанный документ включена в основном из-за коммерческих отношений между людьми связанных с этими страницами. Это отношение было изобретено в Google и стандартизировано в сообществе по микроформатам. WordPress вставляет rel=»nofollow» в ссылки, добавленные в комментариях, полагая, что раз ссылки с nofollow не передают PageRank, то спамеры откажутся постить спам в комментариях блога. Этого не произошло, но rel=»nofollow» остался.
rel=»noreferrer» указывает, что информация о реферере не должна утекать при переходе по ссылке. Браузеры не поддерживают это отношение, однако оно недавно было добавлено в браузерный движок Webkit и в конечном итоге появится в Safari, Chrome и других браузерах, основанных на этом движке.
rel=»pingback» указывает адрес пингбэк-сервера. Как поясняется в спецификации, «пингбэк» это способ для блога автоматически оповещать сайты, ссылающиеся на него. Это создает обратную связь — способ пройти назад по цепочке ссылок вместо «прямого прохода». В блогах, частности WordPress, пингбэк-механизм используется для уведомления авторов, что вы ссылаетесь на кого-то при создании новой записи.
rel=»sidebar» показывает, что ссылаемый документ, если это возможно, будет показан в дополнительном контексте браузера. Что это значит? В Opera и Firefox это реализовано так: когда я щелкаю по ссылке, открывается окно для добавления ссылки в панель закладок. Internet Explorer, Safari и Chrome игнорируют rel=»sidebar» и покажут обычную ссылку.
Новые семантические элементы в HTML5
HTML5 не просто делает существующую разметку компактнее, он также определяет новые семантические элементы.
Что всё это значит?
В этой главе мы возьмём веб-страницу и не делая с ней ничего плохого, улучшим её. Местами она станет короче, местами длиннее, но она станет более семантической. Возрадуемся!
Вот пример страницы. Откройте её в новой вкладке и не возвращайтесь, пока не посмотрите её исходный код по меньшей мере один раз.
Доктайп
Посмотрите на первую строку нашего кода.
Она называется доктайп. Это длинная история с чёрной магией, стоящая за доктайпом. Во время работы над Internet Explorer 5 под Mac его разработчики столкнулись с неожиданной проблемой. Новая версия этого браузера содержала столько улучшений по части стандартов, что старые страницы отображались некорректно. Вернее, отображались они надлежащим образом, по спецификации, но люди считали, что отображаются они неправильно. Авторы страниц при вёрстке ориентировались на доминирующие браузеры того времени — Netscape 4 и Internet Explorer 4. Браузер IE5/Mac был настолько передовым, что фактически разрушил Интернет.
Эта идея распространилась как лесной пожар и вскоре все основные браузеры имели два режима: «режим совместимости» и «стандартный режим». Конечно, вскоре всё это вышло из-под контроля. Когда Mozilla запустила версию 1.1 своего браузера, то обнаружила, что страницы, которые отображаются в «стандартном режиме» в действительности основываются на одной конкретной причуде. Mozilla подправила свой браузерный движок для устранения этого недостатка и тысячи страниц рассыпались в один миг. Таким образом был создан, и я не выдумываю это, «почти стандартный режим».
В своей основной работе Переключение режимов браузера через доктайп Хенри Сивонен выделил следующие режимы.
Режим совместимости
В режиме совместимости браузеры нарушают современные веб-спецификации и чтобы избежать «рассыпания» страниц отображают их в соответствии с практикой, распространённой в конце 90-х годов.
Стандартный режим
В стандартном режиме браузеры пытаются вывести документы в соответствии со спецификацией в той мере, насколько она реализована в браузере. В HTML5 он называется «не режим совместимости».
Почти стандартный режим
Браузеры Firefox, Safari, Chrome, Opera (начиная с 7.5) и IE8 также поддерживают почти стандартный режим, в котором вертикальные размеры ячеек таблиц реализуются традиционно, а не в полном соответствии со спецификацией CSS2. В HTML5 называется «ограниченный режим совместимости».
Вы должны прочитать остальные статьи Хенри, потому что я привел здесь всё упрощённо. Даже в IE5/Mac было несколько вариантов доктайпа. Со временем список особенностей браузеров вырос и вместе с ним увеличился список доктайпов, которые переключают в режим совместимости. В последний раз, когда я занимался подсчётом, было 5 доктайпов для переключения в «почти стандартный режим» и 73 для переключения в «режим совместимости». Вероятно, при этом я пропустил несколько и ещё молчу про ту сумасшедшую фигню, что делает Internet Explorer 8 для переключения между четырьмя (четырьмя!) режимами отображения. Вот схема. Убейте её! Убейте и сожгите!
Так, где мы? Ах, да, доктайп.
Если вам нравится этот доктайп, можете оставить его. Или можете изменить доктайп на HTML5, который короче и приятнее, к тому же переключает в «стандартный режим» во всех современных браузерах.
Ничего плохого в этом коде нет, так что если он вам нравится, можете его оставить, в HTML5 он абсолютно корректен. Но некоторые части уже не требуются, поэтому можно удалить их, тем самым сэкономив несколько байт.
После удаления xmlns останется следующее:
Чтобы упростить переход от или к XHTML, авторы могут писать атрибут без указания пространства имён в виде xml:язык или без префикса для элементов в HTML-документах, но такие атрибуты должны присутствовать, только если атрибут lang указан вне пространства имён, и оба атрибута должны иметь одинаковое значение с учётом регистра.
Атрибут без префикса и вне пространства имён и с именем xml:язык не имеет никакого влияния на обработку языка.
Готовы к выбрасыванию? Если да, то поехали. Едем, едем. приехали. Вот что осталось от нашего корневого элемента.
И это всё, что я хотел сказать об этом.
Элемент
Кодировка символов
Когда вы думаете о «тексте», вы, вероятно, думаете о «знаках и символах, которые я вижу на экране моего компьютера». Но компьютерам нет дела до знаков и символов, они имеют дело с битами и байтами. Каждый фрагмент текста, который вы когда-либо видели на экране компьютера, на самом деле хранится в определённой кодировке. Существуют сотни различных кодировок символов, некоторые из них оптимизированы для конкретных языков, таких как русский, китайский или английский, другие могут быть использованы сразу для нескольких языков. Грубо говоря, кодировка символов обеспечивает соответствие между тем, что вы видите экране и тем, что компьютер хранит в памяти и на диске.
В действительности, всё гораздо сложнее. Некоторые символы могут быть более чем в одной кодировке, каждая кодировка может использовать разные последовательности байтов, в зависимости от способа хранения символов в памяти или на диске. Таким образом, кодировка это своего рода ключ для расшифровки текста. Всякий раз, когда кто-то даёт вам последовательность байтов и утверждает что это «текст», вы должны знать, какую кодировку символов они использовали, чтобы суметь перевести байты в символы и вывести их.
Итак, как же ваш браузер фактически определяет кодировку потока байтов, которую посылает веб-сервер? Рад, что спросили. Если вы знакомы с HTTP-заголовками, то возможно видели подобный.
Вкратце, эта строка говорит, что веб-сервер считает, что посылает вам HTML-документ в кодировке UTF-8. К сожалению, в Интернете творится каша — некоторые авторы могут контролировать HTTP-сервер, другие же нет. К примеру, сайт Blogger может содержать различный контент предоставленный разными людьми, но управляется серверами Google. В HTML4 используется способ указания кодировки самостоятельно в любом HTML-документе. Вы, наверное, встречали такую строку.
Эта строка говорит о том, что автор считает, что в HTML-документе применяется кодировка UTF-8.
Это работает во всех браузерах. Как произошло сокращение синтаксиса? Вот лучшее объяснение, что мне удалось найти:
Выбор атрибута charset продиктован тем, что он уже реализован в браузерах, к тому же люди часто оставляли значение без кавычек, например:
Спроси профессора Разметкина
☞ В. Я никогда не использую смешные символы. Надо ли мне объявлять мою кодировку?
О. Да, вы всегда должны указывать кодировку на каждой веб-странице. Отсутствие кодировки может привести к уязвимости системы безопасности.
Дружеские отношения
И так далее. HTML5 разделяет отношения ссылок на две категории:
Точное поведение ссылок на внешние ресурсы зависит от точного отношения, как это определено для соответствующего типа связи.
В примере, что я приводил ранее, только первая ссылка ( rel=»stylesheet» ) указывает на внешний ресурс. Остальные являются гиперссылками на другие документы. Вы можете при желании пройти по этим ссылкам, но они не требуются для просмотра текущей страницы.
Спроси профессора Разметкина
☞ В. Могу я создать свои собственные отношения между ссылками?
О. Кажется, имеется бесконечный запас идей для новых отношений между ссылками. В попытках ограничить людей от раздувания списка, сообщество микроформатов ведёт реестр предложенных значений rel и HTML спецификация устанавливает процесс для их принятия.
rel=»stylesheet»
Давайте посмотрим на первую ссылку в нашем примере.
rel=»alternate»
Ссылка с отношением rel=»alternate» всегда была странным гибридом в использовании, даже в HTML4. В HTML5 её определение было уточнено и расширено, чтобы более точно описать существующий контент. Как вы видели, использование rel=»alternate» в сочетании с type=application/atom+xml указывает на Atom-фид для текущей страницы. Но вы также можете использовать rel=»alternate» в сочетании с другими значениями type для обозначения того же содержания в другом формате, например PDF.
Другие отношения ссылок в HTML5
rel=»author» используется для ссылки на страницу с информацией об авторе. Это может быть почтовый адрес, хотя и не обязательно. Обычно это ссылка на контактную информацию или на страницу «Об авторе».
И ох, самостоятельно делали rel=»up» для указания на «родительскую» страницу. Лучший способ подумать об rel=»up» это взглянуть на навигацию в виде хлебных крошек (или представить её). Ваша главная страница, вероятно, идёт первой в хлебных крошках, а текущая страница находится в хвосте. rel=»up» указывает на предпоследнюю страницу.
Все основные браузеры поддерживают такое связывание иконки со страницей. Обычно она отображается в адресной строке браузера рядом с URL или во вкладке браузера или в том и другом месте.
Новое в HTML5: атрибут sizes может быть использован для указания размера иконки.
rel=»license» был включен сообществом по микроформатам. Такое отношение означает, что «ссылка ведёт на страницу с авторскими правами, согласно которым предоставляется текущий документ».
rel=»nofollow» указывает, что ссылка не одобрена автором или издателем страницы или что ссылка на указанный документ включена в основном из-за коммерческих отношений между людьми связанных с этими страницами. Это отношение было изобретено в Google и стандартизировано в сообществе по микроформатам. WordPress вставляет rel=»nofollow» в ссылки, добавленные в комментариях, полагая, что раз ссылки с nofollow не передают PageRank, то спамеры откажутся постить спам в комментариях блога. Этого не произошло, но rel=»nofollow» остался.
rel=»noreferrer» указывает, что информация о реферере не будет уходить при переходе по ссылке. Webkit поддерживает это отношение, так что оно работает в Google Chrome и Safari (и, надеюсь, в других браузерах, основанных на этом движке).
Новые семантические элементы в HTML5
HTML5 не просто делает существующую разметку компактнее, он также определяет новые семантические элементы.
, когда заголовок включает несколько уровней, таких как подзаголовки, альтернативные названия или лозунги. Представляет собой группу из вступительных или навигационных средств. Элемент обычно содержит заголовок раздела (элементы или ), но это не обязательно. также может быть использован для обёртывания оглавления разделов, формы поиска или любых подходящих логотипов.
Задаёт нижний колонтитул для раздела содержания или подвал для страницы. Элемент обычно содержит информацию о разделе, такую как: имя автора, ссылки на соответствующие документы, авторские данные и тому подобное. Колонтитулы не обязательно должны выводиться в конце раздела, как это обычно делается. Представляет собой либо время в 24-часовом формате, либо точную дату, которую при желании можно совмещать со временем и указанием часового пояса. Помечает фрагмент документа или выделяет его в справочных целях.
или ), но это не обязательно. также может быть использован для обёртывания оглавления разделов, формы поиска или любых подходящих логотипов.
Я знаю, вам не терпится начать использовать эти новые элементы, иначе вы бы не читали эту главу. Но прежде нам надо немного отклониться от темы.
Длинное отступление о том, как браузеры обрабатывают неизвестные элементы
Каждый браузер содержит основной список HTML-элементов, которые он поддерживает. Например, список элементов Mozilla Firefox хранит в nsElementTable.cpp. Элементы вне этого списка рассматриваются как «неизвестные». Вот две фундаментальные проблемы, связанные с такими элементами.
есть отступ сверху и снизу, у
, второй элемент неявно закрывает первый, так что они являются элементами одного уровня, а не родителем и потомком. Но если вы пишете
потому что Firefox знает, что
Различные браузеры отвечают на эти вопросы по своему. Вы в шоке, я знаю. Из основных браузеров Microsoft Internet Explorer имеет больше всех проблем, но и остальные браузеры нуждаются в небольшой помощи.
На первый вопрос есть относительно простой ответ: к неизвестным элементам вообще не надо применять стили. В действительности они наследуют свойства CSS там, где это возможно, автор же добавляет остальной требуемый ему стиль через CSS. В основном это работает, но есть один маленький глюк, который нужно знать.
Профессор Разметкин говорит
☞ Все браузеры отображают неизвестные элементы как строчные, т. е. так, словно в стилях к ним добавили display: inline.
Этот код взят из статьи Ричи Кларка HTML5 Reset Stylesheet, где написано много других вещей выходящих за рамки этой главы.
Но погодите, это ещё хуже! До версии 9, Internet Explorer не применяет любые стили к неизвестным элементам. Например, если у вас такая разметка.
Вторая проблема — это DOM, который создают браузеры, когда они сталкиваются c неизвестными им элементами. Опять же, самый проблематичный браузер — это старые версии Internet Explorer (до версии 9, в котором эта проблема также решена). Если IE 8 не признаёт элемент, то вставляет его в DOM как пустой узел без детей. Все элементы, которые ожидаются как прямые потомки неизвестного элемента, на самом деле будут вставлены как родственные.
Для иллюстрации этих различий приведён ASCII-рисунок. Это DOM, который диктует HTML5.
В действительности Internet Explorer создаёт следующий DOM.
Это работает во всех версиях Internet Explorer, включая IE 6! Мы можем расширить эту технику, чтобы сразу создать фиктивные копии всех новых элементов HTML5 — опять же, они никогда не вставляются в DOM, так что вы их не увидите. Иначе пришлось бы беспокоиться о браузерах, не поддерживающих HTML5.
Реми Шарп написал скрипт с именем HTML5 enabling script. Скрипт прошёл более десятка редакций с момента написания этой книги, но вот его основная идея.
Фрагмент и называется условным комментарием. Internet Explorer интерпретирует его как установку: «если текущий браузер Internet Explorer и версия ниже 9, то выполнить этот блок». Любой другой браузер будет рассматривать весь блок как комментарий HTML. Конечным результатом является то, что Internet Explorer до версии 8 включительно будет выполнять этот скрипт, а другие браузеры целиком его игнорируют. Это позволяет страницам загружаться быстрее в тех браузерах, что не поддерживают данный хак.
Реми Шарп уменьшил скрипт и разместил его на Google Project Hosting. Там находится сам код скрипта и MIT-лицензия, так что вы можете использовать его в любом проекте. Если хотите, можете сделать ссылку на последнюю версию скрипта напрямую, как показано ниже.
Теперь мы готовы начать использовать новые семантические элементы HTML5.
Заголовки
Вернемся к нашему примеру. В частности, посмотрим только на заголовки.
Ничего плохого в этой разметке нет, если она вам нравится, можете её оставить, это валидный HTML5. Но HTML5 предоставляет некоторые дополнительные семантические элементы для заголовков и разделов.
Для начала, давайте избавимся от
Это хорошо. Страница рассказывает желающим, что это заголовок. Но что делать со слоганом, ещё одним типовым элементом, для которого нет стандартной разметки? Это трудный выбор, как его верстать. Слоган вроде бы подзаголовок, но «привязан» к основному заголовку. То есть, это подзаголовок, но не имеющий собственного раздела.
Элементы заголовков, такие как
формируют структуру вашей страницы. Собранные воедино они создают иерархию, которую можно использовать для визуализации страницы или навигации по ней. Экранные ридеры используют схему документа, чтобы помочь слепым пользователям перемещаться по странице. Есть онлайн-инструменты и расширения браузера, которые также могут помочь вам представить схему вашего документа.
были единственным способом создания схемы документа, например, такой.
Прекрасно, но это означает, что нет никакого способа для разметки слогана «Много усилий пошло на создание этих усилий». Если мы попытемся отметить его как
, то добавится фантомный узел в схему документа.
Может быть, мы могли бы отметить слоган как
, а каждый заголовок статьи как
? Нет, это ещё хуже.
У нас все ещё есть фантомный узел в схеме документа, но он «украл» детей, которые по праву принадлежат корневому узлу. В этом и заключается проблема: HTML4 не предоставляет способ разметки подзаголовка без добавления его в схему документа. Независимо от наших перестановок, «Много усилий пошло на создание этих усилий» окажется в конечном итоге на этой диаграмме. Именно поэтому мы остановились на семантически бессмысленной разметке вроде
Возьмем эту разметку.
Созданная схема документа.
Вы можете проверить ваши страницы через HTML5 Outliner чтобы убедиться, что вы используете заголовки правильно.
Статьи
Вновь обратимся к нашему примеру и посмотрим, что можно сделать с этим кодом.
Ах, не всё так просто. Существует ещё одно изменение, которое вы должны сделать. Вначале я покажу, а потом объясню его.
Уловили, да? Я заменил
на странице? Не испортит ли это схему документа? Нет, но чтобы понять это мы должны вернуться на шаг назад.
В HTML 4 единственным путём формирования схемы документа было использование
. Если вы хотели иметь лишь один корневой узел в схеме, то должны были ограничиться одним
. Но спецификация HTML5 устанавливает алгоритм генерации схемы документа, включающий в себя новые семантические элементы. Этот алгоритм говорит, что создаёт новый раздел, иными словами, новый узел в схеме документа. А в HTML5 каждый раздел может содержать собственный элемент
Это довольно сильное отличие от HTML4 и вот почему оно замечательно. Многие веб-страницы в действительности формируются шаблонно. Кусок взят из одного источника, кусок из другого и вставлен в код. Многие учебники поощряют этот путь — «Вот HTML-код, скопируйте его и вставьте к себе на страницу». Это хорошо для небольших фрагментов, но что если вы вставите целый раздел? В этом случае, в учебнике можно прочесть нечто вроде «Вот HTML-код, скопируйте его, вставьте в текстовый редактор и поправьте заголовки, чтобы они соответствовали уровню вложенности в вашей странице».
Зайду с другой стороны. В HTML4 нет универсального элемента для заголовков. Есть шесть строго пронумерованных элементов
, которые должны быть вложены в указанном порядке. Это хреново, особенно если ваша страница «сборная», а не «авторская». Эта проблема решается новыми элементами для разделов и правилами для имеющихся заголовков. Если вы используете новые элементы для разделов, я могу дать вам эту разметку.
Вы можете скопировать и вставить её в любом месте вашей страницы без изменений. Тот факт, что код содержит
обеспечивает название узла. Все остальные элементы в других разделах страницы остаются на том же уровне, где они и были до этого.
Профессор Разметкин говорит
☞ Как это обычно бывает, в реальности всё немного сложнее, чем я изложил. Новые «явные» элементы разделов (например,
внутри ) могут взаимодействовать самым неожиданным образом со старыми «неявными» элементами разделов (
). Ваша жизнь будет проще, если вы станете использовать только один подход, но не оба сразу. Если придётся на странице включить оба подхода, проверьте результат в HTML5 Outliner и убедитесь, что схема вашего документа осмысленна.
Дата и время
Интересно, не так ли? Конечно, не так интересно как спускаться голышом на лыжах с Эвереста и напевать гимн родной страны, но довольно захватывающе, насколько это позволяет семантическая верстка. Продолжим с нашим примером. Я выделил следующую строку.
У элемента три части:
В данном примере атрибут datetime указывает только дату, не время. Формат такой: четыре цифры года, две цифры месяца и две цифры дня, разделенные дефисом.
Если вы хотите включить и время, добавьте букву T после даты, затем напишите время в 24-часовом формате и укажите часовой пояс.
Формат даты/времени довольно гибок. Спецификации HTML5 содержит валидные примеры.
И это тоже валидный HTML5.
Если вам не нравится «голый» атрибут, то есть альтернатива.
Вот как надо изменить статью, чтобы она в полной мере соответствовала HTML5.
Навигация
Одна из наиболее важных частей любого веб-сайта это навигация. На сайте CNN.com вверху каждой страницы имеются вкладки, ссылающиеся на разные новостные разделы сайта: «Entertainment», «Tech», «Travel» и др. У Google на страницах результатов поиска есть аналогичная полоса в верхней части страницы, чтобы опробовать другие службы Google — «Картинки», «Видео», «Карты» и др. В нашем примере страница содержит навигацию в заголовке по разным разделам нашего гипотетического сайта — «главная», «блог», «галерея» и «обо мне».
Вот как панель навигации исходно выглядит.
Опять же, это валидный HTML5. Но пока код размечен как список из четырёх пунктов и ничего не говорит что он является частью навигации по сайту. Визуально вы могли бы догадаться, что это часть заголовка страницы и прочитать текст ссылок. Но семантически нет ничего, чтобы отличить этот список ссылок от любого другого.
Кто заботится о семантике навигации? В первую очередь люди с ограниченными возможностями. Почему? Рассмотрим такой сценарий: ваши движения ограничены и пользоваться мышью вам трудно или невозможно. Чтобы компенсировать это, вы можете использовать дополнение браузера, которое позволяет переходить к основным навигационным ссылкам. Или подумайте об этом: если вы плохо видите, можно использовать специальную программу под названием «экранный ридер», которая преобразует текст в речь. Как только вы получите заголовок страницы, следующая важная информация о странице это основные навигационные ссылки. Если вы хотите перейти к ним, то скажете вашему ридеру перепрыгнуть к панели навигации и начать читать. Если вы хотите, можете сказать ридеру пропустить навигацию и начать читать основное содержание. В любом случае, выявленные программно навигационные ссылки важны.
Таким образом, пока нет ничего плохого в использовании
Спроси профессора Разметкина
О. Ссылки «пропустить» позволяют ридерам пропускать блоки навигации. Они полезны для пользователей с ограниченными возможностями, которые используют стороннее программное обеспечение для чтения веб-страниц вслух и переходов без мыши.
Подвал
В конце концов, мы подошли к финалу нашего примера. Последняя вещь, о которой я хотел бы сказать это подвал. Оригинальный код подвала такой.
Что можно поместить в подвал? Наверное то, что вы добавили сейчас в
В наше время в моде «толстые подвалы». Посмотрите на сайт W3C. Подвал содержит три столбца, помеченных как «Navigation», «Contact W3C» и «W3C Updates». Код выглядит примерно так.
Чтобы преобразовать это в семантический HTML5, я хотел бы сделать следующие изменения:
Окончательный код может выглядеть примерно так.
Дальнейшее чтение
Примеры страниц используемых в этой главе:
Как разрешить новые элементы HTML5 в Internet Explorer:
Стандартные режимы и разнюхивание доктайпа:
