От автора: данная статья является выдержкой из нашей книги HTML5 и CSS3 для реального мира, 2-е издание за авторством Алексиса Гольдштейна, Луиса Лазариса и Эстель Вейль. Книгу можно найти в магазинах по всему миру или купить цифровую версию. Наш сайт-пример от статьи к статье становится все лучше и лучше. Мы создали базовую структуру и подробно изучили разметку контента с помощью новых HTML5 тегов.
В этой статье мы разберем еще больше новых элементов, а также посмотрим на изменения и улучшения в уже известных элементах. Мы добавим парочку заголовков и текст в наш проект, а также обсудим потенциальное влияние HTML5 на доступность.
Прежде чем перейти к теме нашей статьи, давайте вернемся чуть-чуть назад и рассмотрим парочку новых и довольно сложных концепций, которые есть в HTML5.
Новый взгляд на типы контента
При макетировании и стилизации разработчики привыкли думать, что элементы на странице относятся к двум категориям: блочные и линейные. Элементы действительно отрисовываются в браузерах либо в виде блоков, либо линейно, однако спецификация HTML5 расширила понятие категорий контента. В спецификации прописан набор более мелких моделей контента. Это расширенные определения типа контента, который должен быть внутри элемента. По большей части они почти не повлияют на то, как вы будете писать разметку, однако ознакомиться с ними все же стоит:
Метаданные: к этой категории относятся метаданные – данные, которые не отображаются на странице, но влияют на ее представление и включают другую информацию о странице. К таким данным относятся теги title, link, meta и style.
Основной поток: данная категория включает в себя все элементы, используемые в теле HTML документа, в том числе теги header, footer и даже p. Исключаются только теги, не влияющие на поток в документе: например, теги script, link и meta внутри head.
Секционный контент: самый интересный, в том числе для нас, тип контента в HTML5. В предыдущей главе мы часто использовали общий термин «секция» для описания блоков контента, в которых может содержаться хедер, футер и сайдбар. На самом деле мы говорили про секционный контент. В HTML5 к этой категории относятся теги article, aside, nav и section. Чуть позже мы более подробно разберем секционный контент и то, как он может влиять на то, как мы пишем разметку.
Заголовочный контент: данный тип контента определяет заголовок заданной секции и включает в себя заголовки разного уровня (h1, h2 и т.д.).
Текстовый контент: грубо говоря, к этой категории относится контент, который раньше вы считали линейным. К нему относятся теги em, strong, cite и т.д.
Вложенный контент: тут все просто, к этой категории относятся элементы, вставляемые на страницу, такие как img, object, embed, video и canvas.
Интерактивный контент: к этой категории относится любой контент, с которым может взаимодействовать пользователь. В основном это формы элементов, ссылки и другие элементы, с которыми можно взаимодействовать только, когда установлены определенные атрибуты. В качестве примеров можно привести тег audio с атрибутом controls, а также тег input с атрибутом type, установленным в любое значение кроме hidden.
В списке для чтения можно узнать, что некоторые элементы относятся к нескольким категориям. Существуют и такие элементы, которые не подходят ни под одну категорию (например, head и html). Если все это показалось запутанным, не беспокойтесь. Суть в том, что вам, как разработчику, не нужно будет думать об этих категориях, чтобы решить, какой тег использовать в определенных обстоятельствах. Это просто способ инкапсулировать различные виды HTML тегов.
Еще больше новых элементов
Помимо структурных элементов, которые мы разобрали в Главе 2, в HTML5 также есть ряд семантических элементов. Разберем наиболее полезные.
Элементы figure и figcaption
Теги figure и figcaption – еще одна пара новых HTML5 элементов, улучшающих семантику в HTML5. Про тег figure из спецификации: «Тег figure можно […] использовать в качестве подписи к иллюстрациям, диаграммам, фотографиям, коду и т.д. […] Контент тега figure является частью окружающего потока.»
Представьте себе диаграммы, графики, изображения с текстом или примеры кода. Со всеми этими типами контента можно использовать тег figure и, возможно, figcaption.
Тег figcaption используется для размещения подписи к контенту, который находится внутри тега figure.
Чтобы использовать тег figure, контент внутри него должен быть связан с основным контентом, внутри которого используется данный тег. Если данный тег можно спокойно удалить из документа, и контент останется полностью понятен, то, скорее всего, данный тег здесь не нужен. Его можно попробовать заменить на aside.
Давайте посмотрим, как можно вставить тег figure в article:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<article> <h1>Accessible Web Apps</h1> <p>Lorem ipsum dolor ... </p> <p>As you can see in <a href="#fig1">Figure 1</a>, <figure id="fig1"> <figcaption>Screen Reader Support for WAI-ARIA</figcaption> <img src="figure1.png" alt="JAWS: Landmarks 1/1, Forms 4/5 ... "> </figure> <p>Lorem ipsum dolor ... </p> </article> |
С тегом figcaption все просто. Он используется внутри тега figure и может находиться перед и после контента. В примере выше мы разместили данный тег перед изображением.
Элемент mark
Тег mark «представляет собой кусок текста в одном документе, выделенный в справочных целях из-за своей релевантности в другом контексте». Следует признать, что способов применения тега mark очень мало. Самый распространенный в контексте поиска, когда искомые ключевые слова подсвечиваются в результатах.
В спецификации также говорится про использование mark для привлечения внимания к тексту внутри цитаты. Данный тег можно использовать для выделения «части документа, которая была подсвечена из-за релевантности к текущим действиям пользователя».
Не путайте mark с em и strong. Эти теги добавляют контекстной важности, в то время как тег mark отделяет целевой контент, основанный на текущих действиях пользователя по просмотру и поиску.
Можно реализовать пример с поиском. Для этого вам нужно подсветить слова в статье с помощью тега mark, если пользователь перешел на нее из Google по запросу «HTML5»:
|
1 |
<h1>Yes, You Can Use <mark>HTML5</mark> Today!</h1> |
Тег mark можно вставлять в страницу как на стороне сервера, так и на стороне клиента с помощью JS после полной загрузки страницы. Контент для поиска можно получить, например, из URL с помощью search.php?query=html5. В таком случае код на стороне сервера может вытянуть контент из строки запроса и сохранить его в переменную, после чего вставлять тег mark во всех местах, где были найдены слова из запроса.
Теги progress и meter
В HTML5 добавлены два новых элемента, с помощью которых можно размечать данные, которые каким-то образом измеряются. Между ними почти нет разницы: тег progress используется для описания текущего состояния изменяющегося процесса, который идет к завершению, независимо от того, задано ли состояние завершения. Отличный пример – стандартные прогресс бары процесса загрузки.
Тег meter же представляет элемент с известными границами, с минимумом и максимумом. В спецификации приводятся примеры с пространством на диске, а также частью населения, участвующей в выборах. В обоих примерах есть максимальное значение. Поэтому данный тег лучше не использовать для указания возраста, высоты или веса – у всех этих параметров обычно неизвестно максимальное значение.
Давайте поподробнее разберем тег progress. У элемента progress есть атрибут max, указывающий точку завершения процесса, а также атрибут value, в который записывается состояние. Оба атрибута необязательные, пример:
|
1 2 |
<h1>Your Task is in Progress</h1> <p>Status: <progress max="100" value="0"><span>0</span>% </progress></p> |
Этот тег лучше всего использовать в паре с JS, чтобы динамически менять процентное значение выполнения задачи. Заметили, что в коде выше есть тег span, отделяющий числовое значение? Это упрощает получение числа в скрипте для его обновления.
У тега meter есть шесть атрибутов. Помимо max и value, вам доступны min, high, low и optimum.
Атрибуты min и max описывают нижнюю и верхнюю границы диапазона, а value указывает текущее измерение. Атрибуты high и low указывают на пороговые значения, считающиеся «высокими» и «низкими» в данном контексте. Например, оценка за тест находится в пределах от 0% (min) до 100% (max), но все, что ниже 60% считается низким результатом, а все, что выше 85% — высоким. Атрибут optimum описывает идеальное значение. В случае примера с тестом оптимальным значением будет 100.
Пример использования тега meter для индикации свободного пространства на диске:
|
1 |
<p>Total current disk usage: <meter value="130" min="0" max="320" low="10" high="300" title="gigabytes">63 GB</meter></p> |
На скриншоте ниже показано, как тег meter выглядит по умолчанию в Chrome и Firefox.
Для лучшей доступности при использовании тегов progress и meter рекомендуется вставлять значения в виде текста. Если вы используете JS для настройки текущего состояния атрибута value, вам нужно изменить текстовый контент.
Тег time
Дата и время – неоценимые компоненты веб-страниц. Поисковики умеют фильтровать результаты по времени, а в некоторых случаях отдельные результаты могут подняться или опуститься в выдаче в зависимости от времени публикации.
Тег time был специально разработан, чтобы решать проблему того, как люди и машины по-разному читают дату и время. Разберем следующий пример:
HTML]
We’ll be getting together for our next developer conference on 12 October of this year.
Люди, прочитав данный параграф, поймут, когда произойдет событие. А вот машинам будет сложнее распарсить такую информацию. Тот же параграф, но с тегом time:
|
1 |
<p>We’ll be getting together for our next developer conference on <time datetime="2015-10-12">12 October of this year</time>.</p> |
Тег time позволяет записывать дату и время в любом формате, сохраняя однозначное представление в атрибуте datetime. С помощью JS или браузера данное значение можно конвертировать в локализованное или более удобное (хотя на момент написания статьи ни один браузера не поддерживает этого).
В ранних версиях спецификации у тега time был атрибут pubdate. Это было Булево значение, указывающее, что контент внутри ближайшего родительского тега article был опубликован в заданную дату. Если тега article не было, атрибут pubdate применялся ко всему документу. Однако данный атрибут, несмотря на кажущуюся полезность, был удален из спецификации. Aurelio De Rosa в своей подробной статье по тегу time представляет замену атрибуту pubdate.
У тега time есть несколько правил и руководящих принципов:
Нельзя использовать time для кодирования неопределенных дат и времени (например, «во время ледникового периода» или «прошлой зимой», тег time не дает диапазонов).
Дата не может быть «BC» или «BCE» (до нашей эры), дата должна быть представлена по Григорианскому календарю.
Если у тега time неправильно задан атрибут datetime, то у контента внутри тега (все между открывающим и закрывающим тегом time) должно быть прописано правильное значение datetime.
Ниже представлено множество примеров HTML, как правильно указать значение datetime по спецификации:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!-- месяц --> <time>2015-11</time> <!-- дата --> <time>2015-11-12</time> <!-- дата без года --> <time>11-12</time> <!-- время --> <time>14:54:39</time> <!—дата с плавающей точкой и время --> <time>2015-11-12T14:54:39</time> <!—часовой пояс --> <time>-0800</time> <!-- мировая дата и время --> <time>2015-11-12T06:54:39.929-0800</time> <!-- неделя --> <time>2015-W46</time> <!-- продолжительность --> <time>4h 18m 3s</time> |
Примеров использования тега time несчетное множество: события в календаре, даты публикации (в блогах, видео, пресс релизах и т.д.), исторические даты, записи об операциях, статьи или обновления контента и т.д.
Редакция: Louis Lazaris
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
