Ниже приводится выдержка из нашей книги « HTML5 и CSS3 для реального мира», 2-е издание , написанной Алексисом Гольдштейном, Луи Лазарисом и Эстель Вейль. Копии продаются в магазинах по всему миру, или вы можете купить их в электронном виде здесь .
Наш образец сайта идет хорошо. Мы дали ему некоторую базовую структуру, а также узнаем больше о разметке контента с использованием новых элементов HTML5
В этой главе мы обсудим еще больше новых элементов, а также некоторые изменения и улучшения знакомых элементов. Мы также добавим некоторые заголовки и основной текст в наш проект и обсудим потенциальное влияние HTML5 на доступность.
Прежде чем мы углубимся в это, давайте сделаем шаг назад и рассмотрим несколько новых — и немного хитрых — концепций, которые HTML5 предлагает на рассмотрение.
Новый взгляд на типы контента
В целях верстки и оформления разработчики привыкли считать элементы HTML-страницы принадлежащими к одной из двух категорий: блочные и встроенные. Хотя элементы по-прежнему отображаются браузерами как блочные или встроенные, спецификация HTML5 продвигает классификацию контента на шаг вперед. Спецификация теперь определяет набор более детальных моделей контента. Это широкие определения типа контента, который должен быть найден внутри данного элемента. В большинстве случаев они мало влияют на то, как вы пишете свою разметку, но с ними стоит немного познакомиться, поэтому давайте посмотрим:
-
Содержимое метаданных : эта категория звучит так: данные, которых нет на самой странице, но влияют на представление страницы или содержат другую информацию о странице. Это включает в себя такие элементы, как
titlelinkmetastyle -
Потоковое содержимое : включает в себя почти каждый элемент, который используется в теле документа HTML, включая такие элементы, как
headerfooterpИсключаются только те элементы, которые не влияют на поток документа: например,scriptlinkmeta -
Секционирование контента . Это наиболее интересный и, для наших целей, наиболее актуальный тип контента в HTML5. В последней главе мы часто использовали общий термин «раздел» для обозначения блока контента, который может содержать заголовок, нижний колонтитул или другой элемент. На самом деле мы имели в виду разделение контента. В HTML5 это включает
headarticleasidenavВскоре мы поговорим более подробно о секционировании контента и о том, как он может повлиять на то, как вы пишете свою разметку. -
Содержимое заголовка. Этот тип содержимого определяет заголовок данного раздела и включает в себя различные уровни заголовка (
sectionh1 -
Фразирование контента : эта категория примерно соответствует тому, что вы привыкли считать внутренним контентом; он включает в себя такие элементы, как
h2emstrong -
Внедренный контент : он довольно простой и включает в себя элементы, которые, в общем-то, встроены в страницу, такие как
citeimgobjectembedvideo -
Интерактивный контент . В эту категорию входит любой контент, с которым пользователи могут взаимодействовать. Он состоит в основном из элементов формы, а также ссылок и других элементов, которые являются интерактивными только при наличии определенных атрибутов. Два примера включают элемент
canvasaudiocontrolsinputtype
Как вы могли бы прочитать из списка, некоторые элементы могут принадлежать более чем одной категории. Есть также некоторые элементы, которые не вписываются ни в одну категорию (например, элементы hiddenhead Не волнуйтесь, если что-то из этого кажется запутанным. Правда, как разработчику, вам не нужно думать об этих категориях, чтобы решить, какой элемент использовать в каких обстоятельствах. Более того, они просто способ инкапсулировать различные доступные теги HTML.
Больше новых элементов
В дополнение к структурным элементам, которые мы видели в главе 2, HTML5 включает в себя ряд других семантических элементов. Давайте рассмотрим некоторые из наиболее полезных.
Элементы htmlfigure
Элементы figcaptionfigure Элемент figcaptionпоясняется в спецификации следующим образом:
Элемент
figurefigure
Подумайте о диаграммах, графиках, изображениях, сопровождающих текст, или пример кода. Все эти типы контента могут быть хорошими местами для использования figurefigure
Элемент figcaptionfigcaption element
Чтобы использовать элемент figure Если вы можете полностью удалить его из документа, а содержание документа все еще можно полностью понять, вам, вероятно, не следует использовать figure вам, однако, может понадобиться использовать в figure
Давайте посмотрим, как мы помечаем asidefigure
article
Использовать <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> Он должен быть внутри элемента figcaptionfigure В приведенном здесь примере мы поместили его перед изображением.
Элемент figcaption
Элемент markmark Наиболее распространенным является контекст поиска, где ключевые слова, которые искали, выделяются в результатах.
В спецификации также упоминается использование mark В любом случае вы хотите использовать его для обозначения «части документа, которая была выделена в связи с ее вероятной релевантностью для текущей деятельности пользователя».
Избегайте смешения markmarkem эти элементы добавляют контекстуальную важность, тогда как mark отделяет целевой контент в зависимости от текущей активности пользователя в поиске или просмотре.
Чтобы использовать пример поиска, если пользователь пришел к статье на вашем сайте из поиска Google по слову «HTML5», вы можете выделить слова в статье, используя элемент strong
mark
Элемент <h1>Yes, You Can Use <mark>HTML5</mark> Today!</h1> Например, контент для поиска может быть получен из URL с использованием mark В этом случае ваш серверный код может захватить содержимое переменной в строке запроса, а затем использовать search.php?query=html5
Элементы markprogress
Два новых элемента, добавленных в HTML5, позволяют разметить данные, которые измеряются или измеряются каким-либо образом. Разница между ними довольно тонкая: meter Традиционный индикатор выполнения, показывающий прогресс загрузки, является прекрасным примером этого.
Элемент progress В спецификации приводятся примеры использования диска или доли голосующего населения, оба из которых имеют определенное максимальное значение. Поэтому, скорее всего, вам не следует использовать meter
Давайте посмотрим более подробно на meter Элемент progressprogressmax Оба эти атрибута являются необязательными. Вот пример:
value
Этот элемент лучше всего использовать с JavaScript для динамического изменения значения процента в ходе выполнения задачи. Вы заметите, что код включает теги <h1>Your Task is in Progress</h1> это облегчает нацеливание номера прямо из вашего скрипта, когда вам нужно его обновить.
<p>Status: <progress max="100" value="0"><span>0</span>% </progress></p>
Элемент span В дополнение к metermaxvalueminhighlow
Атрибуты optimumminmax Атрибуты valuehigh Например, ваша оценка в тесте может варьироваться от 0% (мин) до 100% (макс), но все, что ниже 60%, считается низким, а что-либо выше 85% считается высоким. low В случае теста, значение optimum
Вот пример optimum
meter
На рисунке ниже вы можете увидеть, как элемент метра выглядит по умолчанию в Chrome и Firefox.
Для лучшей доступности при использовании <p>Total current disk usage: <meter value="130" min="0" max="320" low="10" high="300" title="gigabytes">63 GB</meter></p>progress Поэтому, если вы используете JavaScript для настройки текущего состояния атрибута meter
Элемент value
Даты и время являются бесценными компонентами веб-страниц. Поисковые системы могут фильтровать результаты по времени, и в некоторых случаях конкретный результат поиска может получить больший или меньший вес с помощью алгоритма поиска в зависимости от того, когда он был впервые опубликован.
Элемент time Возьмите следующий пример:
time
Хотя люди, читающие этот абзац, скорее всего, поймут, когда произойдет событие, машине, пытающейся проанализировать информацию, будет не так ясно.
Вот тот же абзац с введенным элементом <p>We'll be getting together for our next developer conference on 12 October of this year.</p>
time
Элемент <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 Затем это значение можно преобразовать в локализованную или предпочтительную форму с помощью JavaScript или самого браузера (хотя ни один из браузеров на момент написания этой статьи не поддерживал такое поведение).
В более ранних версиях спецификации элемент datetimetime Это был логический атрибут, указывающий, что содержимое в элементе pubdate Если элемент articlearticle Но этот атрибут был удален из спецификации, хотя он казался полезным. В своей углубленной статье об элементе pubdate Аурелио Де Роса предлагает альтернативу для теперь timepubdate
Элемент time
-
Не следует использовать
timetime -
Представленная дата не может быть «до н.э» или «до н.э.» (до общей эры); это должна быть дата в григорианском календаре.
-
Если элементу
timedatetimetimedatetime
Вот фрагмент HTML, который включает в себя множество различных способов записи значения datetime
<!-- month -->
<time>2015-11</time>
<!-- date -->
<time>2015-11-12</time>
<!-- yearless date -->
<time>11-12</time>
<!-- time -->
<time>14:54:39</time>
<!-- floating date and time -->
<time>2015-11-12T14:54:39</time>
<!-- time-zone offset -->
<time>-0800</time>
<!-- global date and time -->
<time>2015-11-12T06:54:39.929-0800</time>
<!-- week -->
<time>2015-W46</time>
<!-- duration -->
<time>4h 18m 3s</time>
Использование элемента time