Семантика — это наука о значениях слов и фраз в языке. Таким образом, семантические элементы — это элементы или теги со значением.
Что такое семантические теги?
Семантические теги четко описывают, что они означают, как браузеру, так и веб-разработчику.
В качестве примера не семантических элементов можно привести теги и . Они ничего не говорят о характере их контента.
Семантические теги HTML5 поддерживаются всеми современными браузерами.
Кроме этого, можно «научить» старые браузеры понимать «неизвестные элементы». См. раздел «Поддержка элементов HTML5».
Новые семантические элементы в HTML5
На многих веб-сайтах есть HTML код вроде этого: , , . Обычно он используется для выделения блоков навигации, шапки и подвала страницы.
HTML5 вводит ряд новых семантических тегов, предназначение которых определять блоки различных частей веб-страницы:
Элемент
Элемент определяет раздел в документе.
В соответствии со спецификацией W3C по HTML5: «Раздел — это тематически сгруппированный контент, как правило с заголовком.»
Домашняя страница обычно может быть разбита на следующие разделы: вступление, основной контент и контактная информация.
WWF
Всемирный фонд дикой природы (WWF) это.
Элемент
Элемент определяет независимый, самодостаточный контент.
Контент, помещенный в этот элемент, должен иметь смысл сам по себе, т. е. он должен быть понятен в отрыве от остальных частей веб-сайта.
В качестве примеров использования элемента могут выступать:
Публикация на форуме
Публикация в блоге
Газетная статья
Что делает Всемирный фонд дикой природы?
Задача Всемирного фонда дикой природы остановить деградацию окружающей среды на нашей планете и построить будущее, в котором человечество будет жить в гармонии с дикой природой.
Элемент должен быть вложен в или наоборот?
Элемент определяет независимый, самодостаточный контент.
Элемент определяет раздел в документе.
Можно ли по определению сказать, какой из этих элементов в какой должен быть вложен? Нет, нельзя!
В интернете вы найдете HTML страницы с элементами , содержащие элементы , и элементы , содержащие элементы .
Также, вы встретите страницы с элементами , содержащие другие элементы , и элементы , содержащие другие элементы .
Пример для газеты: Спортивная статья в спортивном разделе может содержать технический раздел.
Элемент
Элемент предназначен для определения заголовочного блока или «шапки» документа или раздела.
Элемент следует использовать как контейнер для вводной информации.
В одном документе разрешается определять несколько элементов .
В следующем примере определяется «шапка» для статьи:
Что делает Всемирный фонд дикой природы (ВФП)?
Цель ВФП:
Задача Всемирного фонда дикой природы остановить деградацию окружающей среды на нашей планете и построить будущее, в котором человечество будет жить в гармонии с дикой природой.
Элемент
Элемент предназначен для определения «подвала» документа или раздела.
Элемент должен содержать информацию о содержащим его элементе.
Обычно в «подвале» размещают информацию об авторе документа, ссылки на условия использования текста, информация об авторских правах, контактные данные и т.п.
В одном документе разрешается определять несколько элементов .
Элемент
Элемент определяет набор ссылок навигации.
Обратите внимание, что НЕ ВСЕ ссылки в документе следует размещать внутри элемента . Элемент предназначен только для основного блока навигационных ссылок.
Элемент
Элемент определяет некий контент, находящийся в стороне от контента, внутри которого он расположен (как боковой блок страницы, «сайдбар»).
Контент внутри элемента должен соотноситься с окружающим контентом.
Этим летом я с семьей посетил EPCOT центр.
Элементы и
Назначение элемента — добавление визуального пояснения к изображению.
В HTML5 изображение и пояснение к нему может быть сгруппировано в элементе :
Рис. 1 — Палпит Рок. Гора в Норвегии
Элемент определяет изображение, а элемент пояснение к нему.
Зачем нужны семантические элементы?
В HTML4 веб-разработчики использовали свои собственные имена в идентификаторах/классах элементов для их стилизации: header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav и т.п.
Такое положение дел не позволяло поисковым системам корректно идентифицировать роль того или иного контента веб-страницы.
Благодаря новым элементам HTML5 (, , , , ), сделать это стало гораздо проще.
Семантические элементы HTML5
Ниже приводится список новых семантических элементов, добавленных в HTML5.
Тег
Описание
Определяет статью
Определяет блок сбоку от основного контента
Определяет дополнительную информацию, которую пользователь может открывать или закрывать
Определяет пояснение для элемента
Используется для группирования различных самодостаточных элементов — иллюстраций, диаграмм, фотографий, листингов кода и т.д.
Определяет «подвал» документа или раздела
Определяет «шапку» документа или раздела
Определяет основной контент документа
Определяет маркированный/подсвеченный текст
Определяет блок навигационных ссылок
Определяет раздел в документе
Определяет видимый заголовок элемента
Определяет дату/время
Рассуждения о семантике кода HTML с примерами
Семантика кода HTML всегда является горячим вопросом. Некоторые разработчики стараются всегда писать семантический код. Другие критикуют догматичных приверженцев. А некоторые даже понятия не имеют о том, что это такое и зачем оно нужно. Семантика определяется в HTML в тегах, классах, ID, и атрибутах, которые описывают назначение, но не задают точно содержание, которое в них заключено. То есть речь идет о разделении содержания и его формата.
Начнем с очевидного примера.
Плохая семантика кода
Заголовок статьи
Текст статьи, который кем-то написан.
А автор
Инко Гнито.
Хорошая семантика кода
Заголовок статьи
Текст статьи, который кем-то написан. Инко Гнито - ее автор.
Вне зависимости от того, считаете ли вы, что HTML5 готов к использованию или нет, наверняка использование тега в данном случаем будет более привлекательным, чем обычный с указанием класса. Название статьи становится заголовком, содержание становится параграфом, а выделенный жирным шрифтом текст становится тегом .
Но не все так четко представляется тегами HTML5. Давайте рассмотрим набор имен классов и разберемся с тем, отвечают ли они требованиям семантики.
Не семантический код. Это классический пример. Каждая рабочая среда CSS для модульной сетки использует такого типа имена классов для определения элементов сетки. Будет ли это «yui-b», «grid-4», или «spanHalf» — такие имена ближе к заданию разметки, чем к описанию содержания. Однако их использование в большинстве случаев неизбежно при работе с шаблонами модульных сеток.
Семантический код. Нижний колонтитул ( footer ) приобрел устойчивое значение в веб дизайне. Это нижняя часть страницы, которая содержит такие элементы как повторяющаяся навигация, права использования, информацию об авторе и так далее. Данный класс определяет группу для всех этих элементов без их описания.
Если вы перешли к использованию HTML5, то лучше применять элемент в таких случаях. Замечание касается и всех остальных частей веб страницы (верхний колонтитул должен быть , боковая панель — , и так далее). Ну а если вы еще не прониклись силой HTML5 (наверно у вас есть действительно важная причина), то эквивалентные имена классов будут прекрасной заменой тегам.
Не семантический код. Он точно определяет содержание. Но почему текст должен быть большим? Чтобы выделяться среди другого более мелкого текста? » standOut » (выделение) больше подходит в данном случае. Вы можете решить изменить стиль для выделяющего текста, но ничего не делать с его размером, и в таком случаем название класса может привести вас в замешательство.
Семантический код. В данном случае речь идет об определении уровня важности элемента в интерфейсе приложения (например, параграфа или кнопки). Элемент с более высоким уровнем может иметь яркие цвета и больший размер, а элементы с низким уровнем могут содержать больше содержания. Но точного определения стилей в данном случае нет, поэтому код является семантическим. Данная ситуация очень похожа на использование тегов , , , и так далее, но к другим элементам интерфейса.
Семантический код. Если бы каждое имя класса можно было так четко определить! В данном случае мы имеем описание раздела, который имеет содержание, назначение которого легко описать, также как и «tweets», «pagination» или «admin-nav».
Не семантический код. В данном случае речь идет о задании стиля для первого параграфа на странице. Такой прием используется для привлечения внимания читателей к материалу. Лучше использовать имя «intro», в котором отсутствует упоминание элемента. Но еще лучше использовать селектор для таких параграфов, например article p:first-of-type или h1 + p .
Не семантический код. Это очень обобщенное имя класса, которое используется для организации форматирования элементов. Но в нем нет ничего, чтобы касалось описания содержания. Различные теоретики семантики рекомендуют в таких случаях использовать имя класса наподобие «group». Вполне вероятно, что они правы. Так как данный элемент, несомненно, служит для группирования нескольких других элементов, и рекомендуемое название будет лучше описывать его назначение без погружения в детали.
Не семантический код. Слишком детальное описание формата содержания. Лучше подобрать другое имя, которое будет описывать содержание, а не его формат.
Семантический код. Класс очень хорошо описывает статус содержания. Например, сообщение об успешном завершении операции может иметь совершенно другой стиль от сообщения об ошибке.
Не семантический код. В данном примере имеется попытка задать определение формата содержания, а не его назначения. «plain-jane» очень похоже на «normal» или «regular». Идеальный код CSS должен быть написан так, чтобы не возникало необходимости в именах класса наподобие «regular», которые описывают формат содержания.
Не семантический код. Такого типа классы обычно используются для определения элементов сайта, которые не должны включаться в цепочку ссылок. В данном случае лучше использовать что-то наподобие rel=nofollow для ссылок, но не класс для всего содержания.
Не семантический код. Здесь имеется попытка описать формат содержания, а не его назначение.
Не семантический код. Тег ссылки сам по себе определяет ее. Если в данном случае имелась попытка выделить ссылку среди других, то лучше использовать описание типа «почему», например, «book-link» или «button».
Но.
Допустим, что у вас на сайте есть две статьи. И вы желаете задать им разные стили. «Обзоры фильмов» будут иметь голубой фон, а «Горячие новости» — красный фон и шрифт большего размера.
Один из способов решить задачу такой:
Другой способ такой:
Наверняка, если опросить нескольких разработчиков о том, какой код более соответствует требованиям семантики, большинство укажет на первый вариант. Он отлично соответствует материалу данного урока: описание назначение без ссылок на форматирование. А второй вариант указывает на формат («blueBg» — имя класса, которое сформировано из двух английских слов, означающих «голубой фон»). Если вдруг будет принято решение поменять дизайн обзоров фильмов — например, сделать зеленый фон, то имя класса «blueBg» превратится в кошмар разработчика. А имя «movie-review» позволит абсолютно спокойно изменять стили оформления с сохранением отличного уровня поддержки кода.
Но никто не утверждает, что первый пример лучше во всех без исключения случаях. Допустим, что определённый оттенок синего используется во многих местах на сайте. Например, он является фоном для некоторой части нижнего колонтитула и областей в боковой панели. Вы можете воспользоваться следующим селектором:
Эффективное решение, так как цвет определяется только в одном месте. Но такой код становится сложным для поддержки, так как имеет длинный селектор, сложный для визуального восприятия. Также потребуются другие селекторы для определения уникальных стилей, что приведет к повторению кода. Или вы можете использовать другой подход и оставить их разделёнными:
.movie-review < background: #c2fbff; /* Определение цвета */ >footer > div:nth-of-type(2) < background: #c2fbff; /* И еще одно */ >aside > div:nth-of-type(4) < background: #c2fbff; /* И еще одно */ >
Такой стиль помогает сохранять CSS файл более организованным (разные области определяются в разных разделах). Но платой является повторение определений. Для больших сайтов определение одного и того же цвета может доходить до нескольких тысяч раз. Ужасно! Вариантом решения может быть использование класса по типу «blueBg» для определения цвета один раз и вставки его в HTML коде, когда требуется использовать данный дизайн. Конечно, его лучше назвать «mainBrandColor» или «secondaryFont», чтобы отвязаться от описания форматирования. Можно пожертвовать семантикой кода в пользу сохранения ресурсов.
Данный урок подготовлен для вас командой сайта ruseller.com Источник урока: css-tricks.com/13423-semantic-class-names/ Перевел: Сергей Фастунов Урок создан: 8 Августа 2011 Просмотров: 31205 Правила перепечатки
5 последних уроков рубрики «HTML и DHTML»
Лайфхак: наиполезнейшая функция var_export()
При написании или отладки PHP скриптов мы частенько пользуемся функциями var_dump() и print_r() для вывода предварительных данных массив и объектов. В этом посте я бы хотел рассказать вам о функции var_export(), которая может преобразовать массив в формат, пригодный для PHP кода.
30 сайтов для скачки бесплатных шаблонов почтовых писем
Создание шаблона для письма не такое уж простое дело. Предлагаем вам подборку из 30 сайтов, где можно бесплатно скачать подобные шаблоны на любой вкус.
Как осуществить задержку при нажатии клавиши с помощью jQuery?
К примеру у вас есть поле поиска, которое обрабатывается при каждом нажатии клавиши клавиатуры. Если кто-то захочет написать слово Windows, AJAX запрос будет отправлен по следующим фрагментам: W, Wi, Win, Wind, Windo, Window, Windows. Проблема?.
Важность HTML5 секционирования элементов.
Как бы вы не называли эти секции — блоки, модули, области, разделы — их используют для визуального выделения разделов веб-страниц уже более десяти лет. Вся проблема в том, что мы никогда не имели подходящих инструментальных средств, чтобы делать это. Несмотря на то, что внешний вид веб-сайта доступен всему миру, его структурная организация представляла собой нагромождение из пронумерованных заголовков и бессмысленных элементов помощи. Неуправляемый поток контента выглядел как один сплошной блок.
Существует возможность выделения фрагмента документа с помощью тэга , но данный фрагмент не будет вести себя как раздел. Процесс работы со вспомогательными технологиями ( AT ) и анализ данных программного обеспечения существенно отличаются от возможности визуально следить за результатами изменений.
Теперь, когда в HTML5 наконец-то реализована возможность секционирования элементов, многие пользователи стали проявлять к ней свое негативное отношение. Почему так происходит? Отчасти потому, что мы находимся в обществе, которое частенько разочаровывается в изменениях. С другой стороны, причина в некоторых ощутимых расхождениях относительно советов в спецификации. Советы представляют собой пояснение и алгоритм секционирования, который на самом деле проще в использовании, чем предыдущие реализации. Некоторые просто очень привыкли к традиционной последовательности выполняемых действий, и они думают, что вы должны поступать также. Они даже не могут привести стоящих аргументов.
Не ошибитесь: секционированные элементы помогут вам улучшить структуру документа и их можно повторно использовать в спецификации. Я хочу рассмотреть основные проблемы, которые можно решить с помощью этих элементов, их возможности и не всем понятную важность для “Семантической паутины”. Если вы не знакомы с понятием “Семантическая паутина”, то этот видеоролик поможет получить необходимую информацию.
Оформление веб-сайтов.
Мое знакомство со сферой веб-дизайна началось в университете, с курса лекций под названием “2.1: Дримвивер”. Я очень хорошо помню свой первый веб-сайт. Я помню, как специально подбирал яркую палитру специализированных цветов. Я помню, как проверял в Навигаторе Netscape правильность отображения только что скорректированных элементов. Лучше всего, я помню часы неудачных попыток создания периметра для визуального выделения шаблона с именем “стол”. Я тогда не имел совершенно никакого понятия, что этот макет представляет собой специфический тип выделения, который называется HTML тегом. Кроме того, никто не сказал мне, что эта HTML команда будет использовать совокупность основных цветов и сжимать файлы в формате JPEG, чтобы провести обработку, на подобии той, что осуществляется в таблице Excel сумасшедший. Другими словами, я понятия не имел насколько правильны или ошибочны были мои действия.
Фундаментальная неудача в создании большинства графических элементов, продуктов, архитектуры и даже городского дизайна заключается в упорном следовании принципу визуальной привлекательности, а не приносимой пользы.
– Ричард Соул Ворман.
Дримвивер (Dreamweaver) от Macromedia не обладает какими-то выдающимися функциональными возможностями в плане создания документов. Но это один из ряда новых GUI (графический интерфейс пользователя) редакторов, которые ориентируются на наше стремление к визуальному выражению, в ущерб информационной ясности. Суть работы Дримвивер и других редакторов можно охарактеризовать фразой “ WYSIWYG ” (что видишь, то и имеешь). Они помогают преобразовать стандартизированную информационную систему в хранилище для графического дизайна. Во многом благодаря подобным инструментам появились толпы поклонников, не всегда выносимого, сериала Натан Барли, заполонившего всемирную паутину своей пустой привлекательностью. Я был одним из многих.
Веб-стандарты.
К тому времени, когда я завершил создание своего первого сайта, стремительными темпами развивалось движение веб-стандартов, которое содействовало соблюдению норм проектирования. Об этом я узнал уже гораздо позже. Так не должно быть: система взаимодействий в рамках веб проекта, по прежнему, большей частью оставалась графическим проектом с небольшим влиянием программирования. Если у вас возникают сомнения относительно существовавших на то время тенденций всемирной паутины, советую проанализировать данные до 2010 (! 2010 ). Веб-браузеры действительно сделаны не из бумаги.
Я постараюсь продемонстрировать, что тэг является основным инструментом графического дизайна. Оказывая влияние только на внешний вид, он реорганизует примитивную структуру документа и интерфейсов; все, что выходит за рамки документа технически неверно. Проще говоря, данный тэг позволяет выполнить разбиение.
Проблема с тэгом < div>.
Каждый день тысячи веб-разработчиков прибегают к услугам всемогущего тэга , чтобы делить, создавать разделы и ограждать контент на веб-страницах. Мы используем для защиты контента, чтобы предотвратить появление разрозненных кусков информации, способных оказать негативное влияние друг на друга. По правде говоря, тэг не имеет огромных функциональных возможностей.
Рассмотрим следующий пример:
В основную схему, я включил тело текста и смежный “контур”. Чтобы читателю было совсем понятно этот контур находится в правой части панели и не принадлежит к основному содержанию. С помощью свойства border я нарисовал по его периметру жирную линию. Для тех из вас, кто начал возмущаться: “Заголовок на боковой панели должен быть выполнен с помощью тэга < h3>!”, я аргументирую свой выбор в ближайшее время. Все мои дизайнерские решения (соседнее положение, границы и уменьшение размера шрифта для заголовка) не могут быть выполнены только лишь использованием одного CSS . Если я совсем уберу CSS, тогда получится следующий результат:
Отключение функций CSS — это не только самый быстрый способ, чтобы сделать веб-страницу адаптивной. У вас появляется отличная возможность увидеть, как HTML4 документы (в которых отсутствует секционирование элементов) на самом деле обрабатываются. В этом случае, наш так называемый “боковой контур” показан просто другим информационным пунктом в линейном потоке документа.
Почему так происходит?
Основная причина этого в том, что тэг есть и всегда был элементом потокового контента. Независимо от того, какой толщины будут заданы границы тэга или насколько темным будет цвет его фона, он не сможет находиться в стороне от основной структуры документа. Таким образом, он всегда будет частью основного содержимого. Из-за отключения функций CSS, искусственная боковая панель с заголовком «Ресурсы» сейчас кажется частью различных компонентов страницы и относится к основному содержанию. Для синтаксического анализатора или ридера такая структура необходима постоянно.
Для ясности, давайте посмотрим на еще один пример использования фрагмента HTML:
Heading
Some content.
Another heading
Some other content.
Я сделал кое-что не совсем обычное, введя два тега в дочерне-родительские отношений: div.child тег принадлежит к div.parent . Так или иначе, мы можем сделать все это и с помощью CSS. Тем не менее, ссылка тэгов на спецификацию “не имеет особого смысла”. Они не только ничего не значат семантически, но и не оказывают никакого влияния на обработку структурных частей страницы (иногда называемых “схемами документа“). Хорошо было бы использовать невидимые тэги ; поэтому, чтобы получить подходящую структурную организацию, мы должны полностью их убрать. Результатом такого действия станет наличие только четырех элементов и предполагаемой дочерне-родительской связи:
Heading
Some content.
Another heading
Some other content.
Также как HTML кодировщики заинтересованы в надежной структуре, мы должны быть заинтересованы в сокращении кода, который опускает все бессмысленные элементы. Но результаты наших действий не принесли требуемого эффекта: в документе организация принадлежности к “родительским” элементам “дочерних” имеет другие контекстные значения чем предполагалось.
Уровневая организация структуры не поможет.
Популярным заблуждением относительно решения данной проблемы, является замена второго тэга на тэг . Если мы сделаем это, то получим следующий, более динамичный контур:
Заголовок ( h2 )
Другой заголовок ( h3 )
Это решение, естественно, кажется более целенаправленным, но правильное ли это решение? Возникает вопрос: второй заголовок будет подзаголовком в пределах одной и той же темы ( ) или станет введением в совершенно новую тему (как в первом примере)? Одни лишь заголовки могут только показать, где начинается определенная часть контента, а где она заканчивается не понятно. Из-за этого возникает проблема однозначного определения принадлежности одной информации к другой. Имитировать принадлежность можно выбрав правильный уровень заголовка для данного контекста. Просто задумайтесь на секунду: мы определяем структурный статус контента помечая его определенным числом. Это начало совершения ошибочных действий.
Давайте посмотрим на домашнюю страницу экспертов из The Paciello Group . При первом же взгляде становится понятно, что это очень доступный и хорошо организованный сайт. А может ли быть улучшена структура с помощью HTML5 секций? Вы можете заметить, что они используют тэг для общего выделения трех заголовков: Software Developers (Разработчики программного обеспечения), Website Owners(Владельцы веб-сайта) и Mike Paciello(Майк Пациэлло). Поскольку не влияет на содержание этих трех блоков, то для последнего заголовка и следующего допускается попарное разделение:
Майк Пациэлло (h2)
Свяжитесь с нами сейчас (h3)
Подождите … получается, что заголовок “Свяжитесь с нами сейчас” является подразделом, относящимся к большой теме “Майк Пациэлло”. Неужели это правда? Естественно, что в визуальном макете получается совсем другое представление. Стоит отметить, что в этом случае тэг , который тематически не группирует эти три блока, принадлежит классу class=»region» . Результатом такой принадлежности может стать ситуация, когда некоторые программы-ридеры будут видеть , который был , как “region”. Если был использован вместо , предполагаемых результатов не возникло бы: “region” будет замкнутым. Класс “region” не принимается во внимание и не влияет на структуру.
Как бы странно это не выглядело, но ситуация становится еще более запутанной, когда мы начинаем использовать пункты, для которых заголовки являются самым подходящим вариантом. Рассмотрим это еще на одном примере:
На моей странице, созданной с помощью HTML4, организовано следующее представление: документ, место основного контента и место начала “бокового поля” (которое является невыразительным , как и в предыдущих примерах). На странице, следуя давно принятым нормам, расположена безымянная область div#footer . Она находится в самом низу документа и служит местом для информации об авторских правах и других подобных предупреждений. (В HTML4 она должна быть выполнена с помощью , потому что возможности использования для этих целей тегов пока не существует). Возникает вопрос, а к какому же из заголовков принадлежит информация нижнего колонтитула?
Чей это колонтитул?
Большинство из нас, основываясь на визуальном восприятии, придет к выводу, что информация в колонтитуле должна принадлежать к телу основного документа. Это то, что мы привыкли ожидать. Давайте рассмотрим все немного подробнее: поскольку нет никаких новых вступительных заголовков между боковой панелью и содержимым нижнего колонтитула, можно сделать предположение, что эти две составляющие являются частью одного целого (см. фото ниже слева). С другой стороны, можно также утверждать, что мы представили “боковое поле” как обычное “прерывание” основного потока контента, прежде чем переходить к информации колонтитула (см. фото внизу справа). Такое предположение дает основание считать заголовок колонтитула, принадлежащим .
Единственная возможность прийти к пониманию целевой структуры страницы — прочитать все содержимое. Учитывая, что весь смысл “языка разметки” в создании понятной и легко воспринимаемой информационной структуры, я с таким же успехом мог отказаться от HTML и набросать структуру веб-страницы на обратной стороне салфетки.
Некоторые специалисты по вопросам доступности предлагают подкорректировать раздел , возглавляющий #footer , и явно обозначить его соответствие, создав маркировку конца боковой панели следующим образом:
h1 (страница)
h2 (основная информация)
h3 (боковая панель)
Данные действия позволят получить не слишком качественные показатели. Вы действительно хотите сделать визуальное выделение нижнего колонтитула — представленного большим и жирным шрифтом, который используется для отображения основного контента, не говоря уже о полужирном шрифте боковой панели? Нет. Если нашу веб-страницу представить фильмом, то нижний колонтитул не может быть его названием — он будет титрами. В HTML5 элемент “содержит информацию о его разделе”. Это семантически выше: мы не используем нижние колонтитулы для ввода тем; мы используем их для завершения. Соответственно, нижние колонтитулы — отличные от своих родителей в разделах HTML5 — не требуют заголовков.
Только лишь тот факт, что уровень вложенности заголовков правильно организован не обязательно делает страницу удобной для чтения.
Самое распространенное средство в «системе» HTML4 для структурирования документов требуемым образом — это пронумерованные заголовки. Частенько такая организация информации не только приводит к неоднозначности, как уже было описано, но на практике мы даже не сможем использовать заголовки для определения структуры. Мы используем тэги для определения структуры, а заголовки служат для упрощения доступа к информации. Чтобы не испортить представление материала, рекомендую ознакомиться с советами по вопросам создания нумерации для заголовков. Хотя мне не понятно, должны ли мы использовать установленный порядок (h1-h6) или нет.
Слабая связь между заголовками и тэгами не совсем корректна. С введением элементов секционирования, мы все еще используем определенные виды блоков, которые самостоятельно могут представить содержащуюся в них информацию. Мы переходим от необходимости подразумевать разделы (проводя их маркировку), к возможности определять их самостоятельно. Если контент имеет понятную организацию и разбит на управляемые части, то как простые читатели, так и специалисты по синтаксическому анализу без усилий смогут изучить содержимое.
Спецификации HTML4 имеют множество неточностей касательно организации разделов и определения их объема. Автоматическая генерация контуров важна, особенно для вспомогательных технологий, которые могут адаптироваться к представлению информацию пользователям в соответствии со структурой документа. HTML5 устраняет необходимость использования < div>элементов из алгоритма создания контуров путем введения нового элемента , HTML Элемент Секционирования.
– “Разделы и контуры HTML5 документа“, Mozilla Development Network (Центр разработчиков Mozilla).
Секционирование.
Учитывая наше стремление к правильной структурной организации элементов в создании легко обрабатываемых разделов, HTML5 предлагает следующий набор тэгов , , и . Я хочу познакомить вас с темой практического секционирования и с особенностями использования этих элементов проведя аналог праздничной викторины. Взгляните на изображение ниже. Сколько разделов вы насчитали?
Далее перечислено несколько вариантов ответов:
Правильный ответ (а), 2. Мы использовали лишь один из новых элементов HTML5 секционирования — . Если тэги и не входят в число элементов секционирования, что же нам с ними делать? Тэг -это внешний элемент, который сам документ делает одним из видов раздела (супер раздел, если быть точным). Итак, что мы имеем: мы использовали “секционирование” с HTML 1.0, но только без подразделов.
Некоторые из вас, возможно, подумали, что невнимательно читали статью, и отнесли тэги и к элементам секционирования. Не волнуйтесь, это не ваша вина. Всякий раз, когда разработчики пытаются объяснить мне структуру страниц HTML5, они обычно размахивают схемами, наподобие той, которую я использовал выше. На этих схемах, разделы с пометками «заголовок», «в стороне» и «нижний колонтитул» существуют в том же Visual Paradigm и занимают аналогичную область. Вы можете сказать, что они подобны друг другу. Другой виновник этой эндемической путаницы — это способ написания спецификации. Верьте или нет, общая структура некоторых страниц в спецификации, которая должна подтверждать структуру документа, совершенно непонятна! Подобные вещи случаются, когда стандарты постоянно развиваются. Дерево навигации для “4.4 разделов” находится в этом эскизе и выглядит следу� …
Что всё это значит?
В этой главе мы возьмем веб-страницу и, не делая с ней ничего плохого, улучшим ее. Местами она станет короче, местами длиннее, но она станет семантической. Возрадуемся!
Вот пример страницы. Откройте ее в новой вкладке и не возвращайтесь, пока не посмотрите ее исходный код по меньшей мере один раз.
Доктайп
Посмотрите на первую строку нашего кода.
PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>
Она называется доктайп. Это длинная история с черной магией, стоящая за доктайпом. Во время работы над Internet Explorer 5 под Mac его разработчики столкнулись с неожиданной проблемой. Новая версия этого браузера содержала столько улучшений по части стандартов, что старые страницы отображались некорректно. Вернее, отображались они надлежащим образом, по спецификации, но люди считали, что отображаются они неправильно. Авторы страниц при верстке ориентировались на доминирующие браузеры того времени — Netscape 4 и Internet Explorer 4. Браузер IE5/Mac был настолько передовым, что фактически разрушил Сеть.
В Майкрософте пришли к оригинальному решению. Перед отображением страницы, IE5/Mac смотрит на доктайп, который, как правило, стоит в первой строке кода (еще до элемента ). Старые страницы, которые ориентировались на «причуды» старых браузеров, обычно не имеют доктайпа, поэтому IE5/Mac отображал их подобно этим браузерам. Для включения поддержки новых стандартов, авторы страниц должны были вставить перед .
Эта идея распространилась как лесной пожар и вскоре все основные браузеры имели два режима: «режим совместимости» и «стандартный режим». Конечно, вскоре все это вышло из-под контроля. Когда Mozilla запустила версию 1.1 своего браузера, она обнаружила, что страницы, которые отображаются в «стандартном режиме» в действительности основываются на одной конкретной причуде под именем доктайп. Mozilla подправила свой браузерный движок для устранения этого недостатка и тысячи страниц рассыпались в один миг. Таким образом был создан, и я не выдумываю это, «почти стандартный режим».
В своей основной работе Переключение режимов браузера через доктайп Хенри Сивонен выделил следующие режимы.
Режим совместимости
В режиме совместимости браузеры нарушают современные веб-спецификации и чтобы избежать «рассыпания» страниц отображают их в соответствии с практикой, распространенной в конце 90-х годов.
Стандартный режим
В стандартном режиме браузеры пытаются вывести документы в соответствии со спецификацией в той мере, насколько она реализована в браузере. В HTML5 называется «не режим совместимости».
Почти стандартный режим
Браузеры Firefox, Safari, Chrome, Opera (начиная с 7.5) и IE8 также поддерживают почти стандартный режим, в котором вертикальные размеры ячеек таблиц реализуются традиционно, а не в полном соответствии со спецификацией CSS2. В HTML5 называется «ограниченный режим совместимости».
Вы должны прочитать остальные статьи Хенри, потому что я привел здесь всё упрощённо. Даже в IE5/Mac было несколько вариантов доктайпа. Со временем список особенностей браузеров вырос и вместе с ним увеличился список доктайпов, которые переключают в режим совместимости. В последний раз, когда я занимался подсчётом, было 5 доктайпов для переключения в «почти стандартный режим» и 73 для переключения в «режим совместимости». Вероятно, при этом я пропустил несколько и я ещё молчу про ту сумасшедшую фигню, что делает Internet Explorer 8 для переключения между четырьмя (четырьмя!) режимами отображения. Вот схема. Убейте ее! Убейте и сожгите!
Так, где мы? Ах, да, доктайп.
PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>
Если вам нравится этот доктайп, можете оставить его. Или можете изменить доктайп на HTML5, который короче и приятнее, к тому же переключает в «стандартный режим» во всех современных браузерах.
Вот HTML5 доктайп.
Вот и все. Всего 15 символов. Это так просто, что вы можете набрать его вручную и не выкручиваться.
Корневой элемент
HTML-страница — это набор вложенных элементов, по своей структуре напоминающей дерево. Некоторые элементы являются «родственными», подобно ветвям, выходящим из одного ствола. Другие элементы «дочерние» для других элементов, как маленькая ветвь, растущая из большой ветки. Это правило работает и в обратную сторону — элемент, непосредственно содержащий другие элементы, называется «родительским», и «предком» для «внучатых» элементов. Элемент, не имеющий дочерних элементов, называется узлом. Самый главный элемент, который выступает предком для всех остальных, зовется «корневым». В HTML-документе корневым всегда является .
Корневой элемент может выглядеть так.
Ничего плохого в этом коде нет, так что если он вам нравится, можете его оставить, в HTML5 он абсолютно корректен. Но некоторые части уже не требуются, поэтому можно удалить их, тем самым сэкономив несколько байт.
Первое, что нужно обговорить, это атрибут xmlns , который остался от XHTML. Этот атрибут сообщает, что элементы на этой странице находятся в пространстве имен XHTML, описанному по адресу http://www.w3c.org/1999/xhtml. Однако элементы HTML5 и так находятся в этом пространстве имен, так что нет необходимости объявлять это намеренно. Страница HTML5 будет работать одинаково во всех браузерах, независимо от того, присутствует атрибут xmlns или нет.
После удаления xmlns останется следующее:
Два атрибута, lang и xml:lang оба определяют язык текущей веб-страницы. Значение ru обозначает русский язык, его можно поменять на другой код языка. Почему используется два атрибута для одного и того же? Опять же, это наследие XHTML. В HTML5 только атрибут lang дает какой-либо эффект. Вы можете оставить xml:lang при желании, но тогда нужно убедиться, что он содержит то же значение, что и lang .
Готовы к выбрасыванию? Если да, то поехали. Едем, едем. приехали. Вот что осталось от нашего корневого элемента.
И это все, что я хотел сказать об этом.
Элемент
Первый дочерний элемент в корне это, как правило, тег . Элемент содержит метаданные — информацию о странице, но не тело самой страницы, которое располагается в . Сам элемент довольно скучен и не изменился на интересный вариант в HTML5.
Хорошие вещи находятся внутри . И для их изучения обратимся к нашему примеру.
Кодировка символов
Когда вы думаете «текст», вы, вероятно, думаете о «знаках и символах, что я вижу на экране моего компьютера». Но компьютерам нет дела до знаков и символов, они имеют дело с битами и байтами. Каждый фрагмент текста, который вы когда-либо видели на экране компьютера, на самом деле хранится в определенной кодировке. Существуют сотни различных кодировок символов, некоторые из них оптимизированы для конкретных языков, таких как русский, китайский или английский, другие могут быть использованы сразу для нескольких языков. Грубо говоря, кодировка символов обеспечивает перевод между тем, что вы видите экране и тем, что компьютер хранит в памяти и на диске.
В действительности, все гораздо сложнее. Некоторые символы могут быть более чем в одной кодировке, каждая кодировка может использовать разные последовательности байтов в зависимости от способа хранения символов. Таким образом, кодировка это своего рода ключ для расшифровки текста. Всякий раз, когда кто-то дает вам последовательность байтов и утверждает что это «текст», вы должны знать, какую кодировку символов они использовали, чтобы суметь перевести байты в символы и вывести их.
Как же фактически ваш браузер определяет кодировку набора байтов, что посылает веб-сервер? Рад, что спросили. Если вы знакомы с HTTP-заголовками, то возможно видели подобный.
Content-Type: text/html; charset=»utf-8″
Эта строка говорит, что веб-сервер считает, что посылает вам HTML-документ в кодировке UTF-8. К сожалению, в Интернете творится каша — некоторые авторы могут контролировать HTTP-сервер, другие же нет. К примеру, сайт blogger.com может содержать различный контент предоставленный разными людьми, но управляется серверами Google. В HTML4 используется способ указания кодировки самостоятельно в любом HTML-документе. Вы, наверное, встречали такую строку.
Эта строка говорит о том, что автор считает, что в HTML-документе применяется кодировка UTF-8.
Обе указанные техники работают в HTML5. Использование HTTP-заголовка является предпочтительным методом, и он перекрывает тег , если таковой имеется. Но не каждый может установить HTTP-заголовки, так что метатеги все еще применяются. К тому же он стал намного проще в HTML5. Теперь это выглядит так.
Это работает во всех браузерах. Выбор этого атрибута продиктован тем, что он уже реализован в браузерах, к тому же люди часто оставляли значение без кавычек.
Спроси профессора Маркапа
☞ В. Я никогда не использую смешные символы. Надо ли мне объявлять мою кодировку?
О. Да, вы всегда должны указывать кодировку на каждой веб-странице. Отсутствие кодировки может привести к уязвимости системы безопасности.
Подведем итоги. Вы должны всегда указывать кодировку во всех HTML-документах, иначе могут произойти неприятные вещи. Вы можете сделать это через HTTP-заголовки, написанием или укороченное , но пожалуйста, сделайте это. Веб будет вам благодарен.
Дружеские отношения
Обычные ссылки всего лишь указатель на другой сайт. Отношения между ссылками это способ пояснить, почему вы указываете на другую страницу. Вот окончания предложения «Потому что. ».
. это таблица стилей, содержащая правила CSS, которые браузер должен применить к документу.
. это фид, содержащий некоторый контент, как эта страница, но в специальном формате.
. это перевод страницы на другой язык.
. это следующий раздел онлайновой книги.
И так далее. HTML5 разделяет отношения ссылок на две категории, которые могут быть созданы с помощью тега . Ссылки на внешние ресурсы для расширения текущего документа и гипертекстовые ссылки на другие документы.
Поведение ссылки на внешние ресурсы зависит от отношения, которое определено для соответствующего типа ссылки.
В примере, что я приводил ранее, только первая ссылка ( rel=»stylesheet» ) указывает на внешний ресурс. Остальные являются гиперссылками на другие документы. Вы можете при желании пройти по этим ссылкам, но они не требуются для просмотра текущей страницы.
Чаще всего отношения ссылок видны в теге раздела . Некоторые отношения также могут быть использованы для тега , но это встречается довольно редко, даже когда допускается. HTML5 также позволяет включить некоторые отношения для , но это еще реже используется (HTML4 не разрешает атрибут rel для тега ). Посмотрите полную диаграмму для проверки, где вы можете использовать значение rel .
Спроси профессора Маркапа
☞ В. Могу я создать свои собственные отношения между ссылками?
О. Кажется, имеется бесконечный запас идей для новых отношений между ссылками. В попытках помешать людям творить фигню WHATWG (Web Hypertext Application Technology Working Group, Рабочая группа по прикладным веб-технологиям) ведет реестр предложенных значений rel и устанавливает процесс их принятия.
rel=»stylesheet»
Давайте посмотрим на первую ссылку в нашем примере.
Это наиболее встречаемое отношение ссылок в мире (в буквальном смысле). Строка указывает на CSS-правила, которые хранятся в отдельном файле. Одну небольшую оптимизацию можно сделать в HTML5 и убрать атрибут type . В нем только один язык стилей, CSS, и он установлен по умолчанию. Это работает во всех браузерах. Думаю, кто-то может придумать когда-нибудь новый язык стилей, но если это произойдет, просто добавьте атрибут type обратно.
rel=»alternate»
Вернемся к нашей странице.
Эти отношения ссылок также весьма распространены. в сочетании с типом RSS или Atom в атрибуте type позволяет то, что называется «автоматическое обнаружение канала». Это позволяет собирать фид читалками (вроде Google Reader) для получения с сайта последних новостей. Большинство браузеров также поддерживает автоматическое обнаружение фида, показывая специальный значок рядом с адресом сайта. В отличие от rel=»stylesheet» , атрибут type здесь важен. Не удаляйте его!
Ссылка с отношением rel=»alternate» всегда была странным гибридом в использовании, даже в HTML4. В HTML5 ее определение было уточнено и расширено, чтобы более точно описать существующий контент. Как вы видели, использование rel=»alternate» в сочетании с type=application/atom+xml указывает на Atom-фид для текущей страницы. Но вы также можете использовать rel=»alternate» в сочетании с другими значениями type для обозначения того же содержания в другой формат, например PDF.
HTML5 также отправляет на отдых давнюю путаницу о том, как делать ссылку на переводы документов. HTML 4 говорит использовать атрибут lang в сочетании с rel=»alternate» для указания языка связанного документа, но это некорректно. В списке исправлений HTML4 перечислены четыре ошибки спецификации. Одна из этих ошибок связана с заданием языка документа через rel=»alternate» . Правильный способ, описанный в исправлениях HTML4 и применяемый в HTML5, заключается в использовании атрибута hreflang . К сожалению, эти исправления не были повторно включены в спецификацию HTML 4, потому что никто больше в Рабочей группе по HTML не работает над ней.
Другие отношения ссылок в HTML5
rel=»archives» указывает, что ссылка описывает набор записей, документов или других материалов, представляющих исторический интерес. Главная страница блога может содержать ссылку на список старых сообщений с указанием rel=»archives» .
rel=»author» используется для ссылки на страницу с информацией об авторе. Это может быть почтовый адрес, хотя и не обязательно. Обычно это ссылка на контактную информацию или страницу «Об авторе».
Запись rel=»external» сообщает, что ссылка ведет на документ, который не является частью сайта. Я считаю, что ее впервые популяризировал WordPress, когда использовал в ссылках комментариев.
HTML4 включает rel=»start» , rel=»prev» и rel=»next» для определения отношений между страницами, которые являются частью серии (например, разделы книги или даже сообщения в блоге). При этом корректно использовалась только запись rel=»next» . Люди вставляли rel=»previous» вместо rel=»prev» , вставляли rel=»begin» и rel=»first» вместо rel=»start» , использовали rel=»end» вместо rel=»last» . И ох, самостоятельно делали rel=»up» для указания на «родительскую» страницу.
HTML5 включает rel=»first» как наиболее распространенный вариант разных способов сказать «первая страница в серии» ( rel=»start» не является синонимом и оставлен для обратной совместимости). Еще добавлены rel=»prev» и rel=»next» как в HTML4, rel=»previous» для обратной совместимости, а также rel=»last» (последняя страница в серии, зеркальный к rel=»first» ) и rel=»up» .
Лучший способ подумать о rel=»up» это посмотреть на навигацию в виде хлебных крошек (или представить ее). Главная страница это первая страница в навигации, а текущая страница находится в хвосте. rel=»up» указывает на страницу, следующую за последней в хлебных крошках.
rel=»icon» является вторым по популярности отношением между ссылками после rel=»stylesheet» . Оно обычно используется вместе с иконкой сайта, вот так.
Все основные браузеры поддерживают такое связывание иконки со страницей. Обычно она отображается в адресной строке браузера рядом с URL или во вкладке браузера или в том и другом месте.
Новое в HTML5: атрибут sizes может быть использован для указания размера иконки.
rel=»license» был включен сообществом по микроформатам. Такое отношение означает, что ссылка ведет на страницу с авторскими правами, согласно которым предоставляется текущий документ.
rel=»nofollow» указывает, что ссылка не одобрена автором или издателем страницы или что ссылка на указанный документ включена в основном из-за коммерческих отношений между людьми связанных с этими страницами. Это отношение было изобретено в Google и стандартизировано в сообществе по микроформатам. WordPress вставляет rel=»nofollow» в ссылки, добавленные в комментариях, полагая, что раз ссылки с nofollow не передают PageRank, то спамеры откажутся постить спам в комментариях блога. Этого не произошло, но rel=»nofollow» остался.
rel=»noreferrer» указывает, что информация о реферере не должна утекать при переходе по ссылке. Браузеры не поддерживают это отношение, однако оно недавно было добавлено в браузерный движок Webkit и в конечном итоге появится в Safari, Chrome и других браузерах, основанных на этом движке.
rel=»pingback» указывает адрес пингбэк-сервера. Как поясняется в спецификации, «пингбэк» это способ для блога автоматически оповещать сайты, ссылающиеся на него. Это создает обратную связь — способ пройти назад по цепочке ссылок вместо «прямого прохода». В блогах, частности WordPress, пингбэк-механизм используется для уведомления авторов, что вы ссылаетесь на кого-то при создании новой записи.
rel=»prefetch» сообщает, что превентивная выборка и кэширование указанного ресурса, вероятно, будет полезна и скорее всего пользователю понадобится этот ресурс. Поисковые системы иногда добавляют на страницу результатов поиска, если они полагают, что верхние результаты более популярны других. Посмотрите исходный код результатов поиска Google для CNN через Firefox и сделайте поиск по ключевому слову prefetch . Mozilla Firefox является пока единственным браузером, поддерживающим rel=»prefetch» .
rel=»search» говорит, что ссылаемый документ содержит интерфейс поиска и связанных с ним ресурсов. Так, если вы хотите полезно использовать rel=»search» , укажите на OpenSearch-документ, который описывает, как браузер может формировать адреса для поиска ключевых слов по текущему сайту. Формат OpenSearch поддерживается браузером Internet Explorer начиная с версии 7.0 и Mozilla Firefox с версии 2.0.
rel=»sidebar» показывает, что ссылаемый документ, если это возможно, будет показан в дополнительном контексте браузера. Что это значит? В Opera и Firefox это реализовано так: когда я щелкаю по ссылке, открывается окно для добавления ссылки в панель закладок. Internet Explorer, Safari и Chrome игнорируют rel=»sidebar» и покажут обычную ссылку.
rel=»tag» сообщает, что метка непосредственно связана с текущим документом. Понятие «метка» (теги, категории) было придумано компанией Technorati для помощи в систематизации постов блога. Ранее блоги и руководства и называли их «метки Technorati». Вы правильно поняли: коммерческая компания убедила весь мир добавить метаданные, которые сделают труд компании проще. Прекрасная работа! Синтаксис позже был стандартизирован сообществом по микроформатам, где его просто назвали rel=»tag» . В большинстве систем блогов, которые позволяют связывать категории, ключевые слова или метки с постами, ссылки маркируются через rel=»tag» . Браузеры ничего особого с такими ссылками не делают, поскольку они в действительности предназначены для поисковых систем.
Новые семантические элементы в HTML5
HTML5 не просто делает существующую разметку компактнее, он также определяет новые семантические элементы.
Элемент определяет основной документ или раздел приложения. В данном контексте это тематическая группировка содержания, как правило, с заголовком. Например, разделами могут быть главы, вкладки в диалоговом окне с вкладками или пронумерованные разделы диссертации. Главная страница веб-сайта может быть разбита на разделы для вступления, вывода новостей, контактной информации.
Элемент представляет собой раздел навигационных ссылок, содержащий ссылки на другие страницы. Не все группы ссылок должны заключаться в тег — только разделы, состоящие из основных блоков навигации. В частности, в подвале страницы часто содержится краткий список ссылок, таких как: условия обслуживания, главная страница, страница с авторскими правами. Для подобных случаев вполне достаточно тега , без использования .
Элемент задает компонент страницы, предназначенный для самостоятельного распространения или повторного использования, например в синдикации. Это может быть сообщение форума, журнальная или газетная статья, запись в блоге, пользовательский комментарий, интерактивный виджет, гаджет или любой другой независимый контент.
Этот элемент представляет раздел страницы, имеющий косвенное отношение к содержанию и который можно отделить от контента. В полиграфии такие участки часто выделяют плашкой. Тег может быть использован для вывода цитат, боковых панелей, рекламы, навигации через и другого контента, который считается отдельным от основного содержания страницы.
Элемент задает заголовок раздела и применяется для группирования нескольких тегов – , когда заголовок включает несколько уровней, таких как подзаголовки, альтернативные названия или лозунги.
Представляет собой группу из вступительных или навигационных средств. Элемент обычно содержит заголовок раздела (теги – или ), но это не обязательно. также может быть использован для обертывания раздела содержания, формы поиска, или соответствующих логотипов.
Задает нижний колонтитул для раздела содержания или подвал для страницы. Элемент обычно содержит информацию о разделе, такую как: имя автора, ссылки на соответствующие документы, авторские данные и тому подобное. Колонтитулы не обязательно должны выводиться в конце раздела, как это обычно делается.
Представляет собой либо время в 24-часовом формате, либо точную дату, которую при желании можно совмещать со временем и указанием часового пояса.
Помечает фрагмент документа или выделяет его в справочных целях.
Я знаю, вам не терпится вначале опробовать эти новые элементы, иначе вы бы не читали эту главу. Но прежде мы должны сделать небольшой крюк.
Длинное отступление о том, как браузеры обрабатывают неизвестные элементы
Каждый браузер имеет основной список HTML-элементов, которые он поддерживает. Например, список элементов Mozilla Firefox хранит в nsElementTable.cpp. Элементы вне этого списка рассматриваются как «неизвестные». Вот две главные проблемы, связанные с такими элементами.
Как должен быть стилизован элемент? По умолчанию
имеет отступ от верхнего и нижнего края, отступ от левого края, отображается крупным шрифтом. Но какой стиль по умолчанию должен применяться к неизвестным элементам?
Как элемент должен выглядеть в DOM? Файл nsElementTable.cpp хранит информацию, какие элементы могут содержать в себе другие. Если вы написали
, второй элемент неявно закрывает первый, так что они являются элементами одного уровня, а не родителем и потомком. Но если вы пишете
, то не закрывает
потому что Firefox знает, что
это блочный элемент, который может содержать встроенные элементы . Так что в DOM обозначается как дочерний для
.
Различные браузеры отвечают на эти вопросы по-разному. Вы в шоке, я знаю. Из основных браузеров Microsoft Internet Explorer имеет больше всех проблем, но и остальные браузеры нуждаются в небольшой помощи.
На первый вопрос есть относительно простой ответ: к неизвестным элементам вообще не надо применять стили. В действительности они наследуют свойства CSS там, где это возможно, автор же добавляет остальной требуемый ему стиль через CSS. В основном это работает, но есть один маленький глюк, который нужно знать.
Профессор Маркап говорит
☞ Все браузеры отображают неизвестные элементы как встроенные, т.е. так, словно в стилях к ним добавили display : inline .
Есть несколько новых элементов, определенных в HTML5 как блочные. При этом они могут содержать другие блочные элементы, и HTML5-совместимые браузеры будут добавлять к ним display : block . Если вы хотите использовать эти элементы в старых браузерах, вам нужно задать стиль для них вручную. Вот код взятый из статьи Ричи Кларка HTML5 Reset Stylesheet, где написано много других вещей выходящих за рамки этой главы.
Но погодите, все еще хуже! До версии 9.0, Internet Explorer не применяет любые стили к неизвестным элементам. Например, если у вас вот такая разметка.
.
Добро пожаловать в Инитех
Это ваш первый день.
Internet Explorer до версии 8.0 включительно не будет рассматривать тег как блочный и не покажет красную рамку вокруг статьи. Все стилевые правила просто игнорируются. Когда я писал эту главу, Internet Explorer 9 еще находился в стадии разработки, но Майкрософт заявил (и разработчики проверили), что в Internet Explorer 9 не будет этой проблемы.
Для иллюстрации различий приведен ASCII-рисунок показывающий DOM предписанный для HTML5.
Существует способ обойти эту чудную проблему. Если предварительно создать фиктивный тег через JavaScript, то Internet Explorer волшебным образом признает элемент и позволит добавлять к нему CSS. Нет нужды вставлять фиктивный элемент в DOM. Простого однократного создания элемента достаточно, чтобы научить IE стилизации элемента, который он не признает.
Welcome to Initech
This is your first day.
Это работает во всех версиях Internet Explorer, включая IE 6! Мы можем расширить эту технику, чтобы сразу создать фиктивные копии всех новых элементов HTML5 — опять же, они никогда не вставляются в DOM, так что вы их не увидите. Иначе пришлось бы беспокоиться о браузерах, не поддерживающих HTML5.
Реми Шарп написал скрипт с именем HTML5 enabling script. Скрипт прошел уже 14 версий со времени написания, но вот его основная идея.
.
День путешествия
.
Я уехал в Прагу!
Ничего плохого в этой разметке нет, если она вам нравится, можете ее оставить, это валидный HTML5. Но HTML5 предоставляет некоторые дополнительные семантические элементы для заголовков и разделов.
Во-первых, давайте избавимся от . Хотя это типовой шаблон, он ничего не значит. Для тега не задана семантика, атрибут id тоже не несет определенного смысла. Браузеры не могут сделать какой-либо вывод на основе значения id . Вы можете заменить строку на и у нее останется такое же семантическое значение, т.е. никакое.
В HTML5 для этих целей определен элемент . Вот как это будет выглядеть на странице нашего примера.
Мой блог
.
Это хорошо. Страница рассказывает желающим, что это заголовок. Но что делать со слоганом, еще одним типовым элементом, для которого нет стандартного тега? Это трудный выбор, как его маркировать. Слоган вроде бы подзаголовок, но «привязан» к основному заголовку. То есть, это подзаголовок, но не имеющий собственного раздела.
Теги заголовков, такие как и формируют структуру вашей страницы. Собранные воедино они создают иерархию, которую можно использовать для визуализации страницы или навигации по ней. Экранные ридеры используют схему документа, чтобы помочь слепым пользователям перемещаться по странице. Есть онлайн-инструмены и расширения браузера, которые также могут помочь вам представить схему вашего документа.
В HTML4 элементы – были единственным способом создания схемы документа, например, такой.
Прекрасно, но это означает, что нет никакого способа для разметки слогана «Много усилий пошло на создание этих усилий». Если мы попытемся отметить его как , то добавится фантомный узел в схему документа.
Мой блог (h1) | +--Много усилий пошло на создание этих усилий (h2) | +--День путешествия (h2) | +--Я в Праге! (h2)
Может быть, мы могли бы отметить слоган как , а каждый заголовок статьи как ? Нет, это еще хуже.
Мой блог (h1) | +--Много усилий пошло на создание этих усилий (h2) | +--День путешествия (h3) | +--Я в Праге! (h3)
У нас все еще есть фантомный узел в схеме документа, но он «украл» детей, которые по праву принадлежат корневому узлу. В этом и заключается проблема: HTML4 не предоставляет способ разметки подзаголовка без добавления его в схему документа. Независимо от наших перестановок, «Много усилий пошло на создание этих усилий» будет в конечном итоге в этом графе. Именно поэтому мы остановились на семантически бессмысленной разметке вроде
.
HTML5 предоставляет решение — элемент . Он используется в качестве обрамления для двух или более связанных элементов заголовка. Что значит «связанных»? Лишь то, что взятые вместе они создают один узел в схеме документа.
Возьмем эту разметку.
Мой блог
Много усилий пошло на создание этих усилий
.
.
День путешествия
.
Я в Праге!
Созданная схема документа.
Мой блог (h1 и hgroup) | +--День путешествия (h2) | +--Я в Праге! (h2)
Вы можете проверить ваши страницы через HTML5 Outliner чтобы убедиться, что вы используете заголовки правильно.
Статьи
Вновь обратимся к нашему примеру и посмотрим, что можно сделать с этим кодом.
rel="bookmark" title="ссылка на этот пост"> День путешествия
.
Опять же, это валидный HTML5. Но HTML5 включает специфичный элемент для общего случая разметки статьи на странице — метко названный .
rel="bookmark" title="ссылка на этот пост"> День путешествия
.
Ах, не все так просто. Существует еще одно изменение, которое вы должны сделать. Вначале я покажу, а потом объясню его.
rel="bookmark" title="ссылка на этот пост"> День путешествия
.
Уловили, да? Я заменил на и обернул его элементом . Вы уже видели в действии. Он выступает контейнером для всех элементов образующих заголовок статьи (в данном случае это дата публикации статьи и ее название). Но. но. но. разве не должен быть только один на страницу? Не испортит ли это схему документа? Нет, но чтобы понять это мы должны вернуться на шаг назад.
В HTML 4 единственным путем формирования схемы документа было использование – . Если вы хотели иметь лишь один корневой узел в схеме, то должны были ограничиться одним . Но спецификация HTML5 устанавливает алгоритм генерации схемы документа, включающий в себя новые семантические элементы. Этот алгоритм говорит, что создает новый раздел, иными словами, новый узел в схеме документа. А в HTML5 каждый раздел может содержать собственный тег .
Это довольно сильное отличие от HTML4 и вот почему оно замечательно. Многие веб-страницы в действительности формируются шаблонно. Кусок взят из одного источника, кусок из другого и вставлен в код. Многие учебники поощряют этот путь — «Вот HTML-код, скопируйте его и вставьте к себе на страницу». Это хорошо для небольших фрагментов, но что если вы вставите целый раздел? В этом случае, в учебнике можно прочесть нечто вроде «Вот HTML-код, скопируйте его, вставьте в текстовый редактор и поправьте заголовки, чтобы они соответствовали уровню вложенности в вашей странице».
Зайду с другой стороны. В HTML4 нет универсального элемента для заголовков. Есть шесть строго пронумерованных тегов – , которые должны быть вложены в указанном порядке. Это хреново, особенно если ваша страница «сборная», а не «авторская». Эта проблема решается новыми элементами для разделов и правилами для имеющихся заголовков. Если вы используете новые элементы для разделов, я могу дать вам эту разметку.
Заголовок
Бла-бла.
Вы можете скопировать и вставить ее в любом месте вашей страницы без изменений. Тот факт, что код содержит , не является проблемой из-за контейнера . Этот элемент задает автономный узел в схеме документа, а тег обеспечивает название узла. Все остальные элементы в других разделах страницы остаются на том же уровне, где они и были до этого.
Профессор Маркап говорит
☞ В реальности все немного сложнее, чем я сказал. Новые «явные» элементы разделов (например, внутри ) могут взаимодействовать самым неожиданным образом со старыми «неявными» элементами разделов ( – ). Ваша жизнь будет проще, если вы станете использовать только один подход, но не оба сразу. Если придется на странице включить оба подхода, проверьте результат в HTML5 Outliner и убедитесь, что схема вашего документа осмысленна.
Дата и время
Интересно, не так ли? Конечно, не так интересно как спускаться голышом на лыжах с Эвереста и петь гимн США, но довольно захватывающе, насколько это позволяет семантическая верстка. Продолжим с нашим примером. Я выделил следующую строку.
День путешествия
Все та же старая история, не правда ли? Для даты публикации статьи нет отдельных семантических элементов, поэтому авторы прибегают к типовым тегам, добавляя к ним свое значение атрибута class. Опять же этот код валиден в HTML5, так что вы не обязаны его менять. Но HTML5 предлагает конкретное решение для этого случая — тег .
У элемента три части:
машинный шаблон времени;
понятный для человека текст;
необязательный атрибут pubdate.
В данном примере атрибут datetime указывает только дату, не время. Формат такой: четыре цифры года, две цифры месяца и две цифры дня, разделенные дефисом.
Если вы хотите включить и время, добавьте букву T после даты, затем напишите время в 24-часовом формате и укажите часовой пояс.
Заметьте, я изменил и содержание текста — то, что находится между — в соответствии с машинным шаблоном. На самом деле это не обязательно. Текст может быть любым, главное правильное значение даты/времени в атрибуте datetime. Вот валидный HTML5.
И это тоже валидный HTML5.
Последний фрагмент нашей головоломки это атрибут pubdate . Это логический атрибут, поэтому если он вам требуется, просто добавьте его как показано ниже.
Если вам не нравится «голый» атрибут, то есть альтернатива.
Что означает pubdate ? Одно из двух. Если располагается внутри , то это дата публикации статьи, если не внутри , то это дата публикации всего документа.
Вот как надо изменить статью, чтобы она в полной мере соответствовала HTML5.
rel="bookmark" title="ссылка на этот пост"> День путешествия
Lorem ipsum dolor sit amet.
Навигация
Одна из наиболее важных частей любого веб-сайта это навигация. На сайте CNN.com вверху каждой страницы имеются вкладки, ссылающиеся на разные новостные разделы сайта: «Entertainment», «Tech», «Travel» и др. У Google на страницах результатов поиска есть аналогичная полоса в верхней части страницы, чтобы опробовать другие службы Google — «Картинки», «Видео», «Карты» и др. В нашем примере страница содержит навигацию в заголовке по разным разделам нашего гипотетического сайта — «главная», «блог», «галерея» и «обо мне».
Вот как панель навигации исходно выглядит.
Опять же, это валидный HTML5. Но пока код размечен как список из четырех пунктов, ничего не говорит, что он является частью навигации по сайту. Визуально вы могли бы догадаться, что это часть заголовка страницы и прочитать текст ссылок. Но семантически нет ничего для отличия этого списка ссылок от любого другого.
Кто заботится о семантике навигации? В первую очередь люди с ограниченными возможностями. Почему? Рассмотрим такой сценарий: ваши движения ограничены и пользоваться мышью вам трудно или невозможно. Чтобы компенсировать это, вы можете использовать дополнение браузера, которое позволяет переходить к основным навигационным ссылкам. Или подумайте об этом: если вы плохо видите, можно использовать специальную программу под названием «экранный ридер», которая преобразует текст в речь. Как только вы получите заголовок страницы, следующая важная информация о странице это основные навигационные ссылки. Если вы хотите перейти к ним, то скажете вашему ридеру перепрыгнуть к панели навигации и начать читать. Если вы хотите, можете сказать ридеру пропустить навигацию и начать читать основное содержание. В любом случае, выявленные навигационные ссылки важны программно.
Таким образом, пока нет ничего плохого в использовании для разметки навигации по сайту, как и ничего хорошего. В действительности, это затрагивает некоторых людей. HTML5 предоставляет семантический способ разметки навигации по разделам: тег .
Спроси профессора Маркапа
☞ В. Ссылки «пропустить» совместимы с элементом ? Нужны ли такие ссылки в HTML5?
О. Ссылки «пропустить» позволяют ридерам пропускать блоки навигации. Они полезны для пользователей с ограниченными возможностями, которые используют стороннее программное обеспечение для чтения веб-страниц вслух и переходов без мыши.
Некоторые ридеры обновлены для распознавания тега , пропускают устаревшие ссылки, также они могут автоматически предложить пропустить раздел навигации, обозначенный через . Однако потребуется какое-то время, прежде чем все пользователи обновят программу своих ридеров, так что вы должны продолжать вставлять собственные ссылки «пропустить» для перескакивания через навигацию.
Подвал
В конце концов, мы подошли к финалу нашего примера. Последняя вещь, о которой я хотел бы сказать это подвал. Оригинальный код подвала такой.
Это валидный HTML5. Если вам нравится код, оставьте его. Но HTML5 предоставляет для этих целей специальный элемент — .
Что можно поместить в подвал? Наверное то, что вы добавили сейчас в . Это ответ по кругу, но это действительно так. В спецификации HTML5 говорится: «подвал обычно содержит информацию о разделе, такую как: автор, ссылки на соответствующие документы, авторские данные, и тому подобное». В нашем примере это указание авторского права и ссылка на страницу об авторе. Глядя на некоторые популярные сайты, я вижу большой потенциал у подвала.
На CNN подвал содержит авторские права, ссылки на переводы, а также ссылки на условия обслуживания, конфиденциальность, страницы «О нас», «Контакты» и «Справка». Все полностью можно добавить в .
У Google симпатичная главная страница, внизу ссылки «Рекламные программы», «Решения для предприятий», «Всё о Google»; авторские права, ссылка на политику конфиденциальности. Все это может быть внутри контейнера .
В подвале моего блога содержатся ссылки на другие мои сайты плюс авторские права. Определенно подходит для элемента . Замечу, что ссылки сами по себе не должны оборачиваться элементом , поскольку это не навигация по сайту, а всего лишь коллекция ссылок на другие мои проекты.
В наше время в моде «толстые подвалы». Посмотрите на сайт W3C. Подвал содержит три столбца, помеченных как «Navigation», «Contact W3C» и «W3C Updates». Код выглядит примерно так.
Чтобы преобразовать это в семантический HTML5, я хотел бы сделать следующие изменения:
Преобразовать внешней в .
Преобразовать два первых в элемент , а третий в .
Преобразовать заголовки в , так как они теперь будут внутри своего раздела. Элемент создает раздел в схеме документа подобно элементу .
Окончательный код может выглядеть примерно так.
Что еще почитать
Примеры страниц используемых в этой главе:
Как разрешить новые элементы HTML5 в Internet Explorer:
