Текстовые семантические элементы HTML5

Веб-программирование --- HTML5 --- Текстовые семантические элементы

Мы начали рассматривать семантику с изучения элементов уровня структуры страницы потому, что разобраться с семантикой этого уровня довольно легко. А легкая она оттого, что структура подавляющего большинства веб-сайтов сравнительно одинаковая и создается с помощью небольшого набора элементов дизайна — верхних и нижних колонтитулов, боковых панелей и меню.

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

Например, даже для обычного почтового адреса потребовалась целая куча семантических элементов (наподобие <address>, <name>, <street>, <country> и т. д.), прежде чем его можно было использовать в разметке страницы.

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

Обозначение дат и времени с помощью элемента <time>

Веб-страницы часто содержат информацию о датах и времени. Например, такая информация вставляется в конце большинства записей в блогах. К сожалению стандартного способа помечать даты не существует, вследствие чего другим программам (например, поисковым движкам) не так-то легко извлечь их из остального кода разметки. Эта проблема решается введением семантического элемента <time> с помощью которого можно обозначить дату, время или комбинацию обоих. В следующем коде приводится пример использования этого элемента:

<p>Новый магазин откроется <time>2013-03-21</time></p>

То, что элемент <time> применяется как оболочка для даты (без времени) может показаться несколько нелогичным, но это просто одна из странностей HTML5. Логичнее было бы ввести элемент <datetime>, но этого почему-то не сделали.

От элемента <time> требуется выполнять две функции. Во-первых, он должен указывать местонахождение значения даты или времени в разметке. Во-вторых, он должен предоставлять заключенное в него значение даты или времени в форме, понимаемой любой программой. Предыдущий пример отвечает второму требованию предоставления универсального формата даты, который состоит из четырехсимвольного значения года, двухсимвольного значения месяца и двухсимвольного значения дня, в указанном порядке. Иными словами, формат даты имеет такой шаблон:

ГГГГ:ММ:ДД

Но пользователю, просматривающему веб-страницу, дату вполне допустимо показать в другом формате. Более того, дату на экран можно выводить любым нравящимся вам способом, при условии предоставления ее значения в машиночитаемом универсальном формате в атрибуте datetime, как показано в следующем примере:

<p>Новый магазин откроется <time datetime="2013-03-21">21 марта.</time></p>

В браузере это будет выглядеть таким образом:

Новый магазин откроется 21 марта.

Подобные правила также применяются и для значения времени, которое предоставляется в таком формате:

ЧЧ:ММ+00:00

То есть, дается двузначное значение часа (в 24-часовом формате), затем двузначное значение минут. Часть после знака "плюс" (или "минус") представляет смещение часового пояса от всемирного координированного времени. Указание смещения часового пояса является обязательным. Узнать смещение часового пояса для конкретного региона можно на веб-сайте «Часовой пояс».

Например, Москва находится в московском часовом поясе, который также называется UTC+4:00 (UTC - Universal Time Coordinated, всемирное координированное время), т.е. смещение данного часового пояса равно плюс четырем часам. Время 09:30 в Москве указывается в разметке следующим образом:

<p>Магазин открывается ежедневно в <time datetime="09:30+4:0">9-30.</time></p>

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

Наконец, время в определенный день указывается путем совмещения этих двух стандартов. Дата приводится первой, за ней следует прописная латинская буква Т, после которой указывается время:

<p>Новый магазин откроется <time datetime="2012-03-21T16:30+4:0">21 марта в 16-30.</time></p>

Элемент <time> также поддерживает атрибут pubdate. Он применяется в тех случаях, когда указываемая дата совпадает с датой публикации текущего содержимого (например, статьи, в которой помещается элемент <time>). В качестве примера можно привести такой код:

<p>Опубликовано <time datetime="2012-03-21T16:30+4:0" pubdate>21 марта в 16-30.</time></p>

Так как элемент <time> является чисто информационным и не обеспечивает никакого связанного с ним форматирования, его можно использовать для любого браузера, не волнуясь о совместимости. Но для форматирования этого элемента необходимо прибегать к обходному решению для Internet Explorer, описанному в предыдущей статье.

JavaScript-вычисления и элемент <output>

Семантический элемент <output> предназначен для облегчения понимания разметки определенных страниц, в которых используются сценарии JavaScript. Функция этого элемента состоит просто в резервировании поля подстановки, в которое код может выводить результаты вычислений. Допустим, например, что вы создали страницу наподобие показанной ниже:

Показанная на рисунке форма разрешает пользователю ввести определенную информацию в соответствующие поля. Нажатие кнопки Сложить отправляет эту информацию сценарию JavaScript, который выполняет необходимые вычисления и выводит результаты этих вычислений в соответствующем поле внизу формы.

В таких случаях для обозначения места для вывода результатов полю присваивается однозначный идентификатор. Обычно для поля подстановки используется элемент <span>, который отлично работает, но не придает этому полю никакого специфического значения. Использование же элемента <output> для этой цели делает код более осмысленным:

<p>Результат: <output id="result"></output></p>    

Собственно код JavaScript не требует никаких изменений, т.к. он ищет элемент по его идентификатору, и его ничуть не волнует тип этого элемента:

var resultElement = document.getElementById(resultElementName);

Часто для удобства элементы управления помещаются в элемент <form>. В следующем листинге показан соответствующий код, в котором определяются два текстовых поля для ввода информации:

<form action="#" id="CalculatorForm">
    <label for="number1">Число 1:</label>
    <input name="number1"><br>

    <label for="number2">Число 2:</label>
    <input name="number2"><br>

    <input type="button" name="calc" value="Сложить" 
       onclick="CalculateFunction(this.form.number1.value, this.form.number2.value, 'result')" /></p>
</form>

Элемент <output> можно сделать еще более осмысленным, добавив в него атрибут form (который указывает идентификатор формы, содержащей связанные элементы управления) и атрибут for (со списком идентификаторов связанных элементов управления, разделенных запятыми). Далее показан примера такого кода:

<p>Результат: <output id="result" form="CalculatorForm"
    for="number1 number2"></output></p>  

Эти атрибуты в действительности ничего не делают, кроме как передают информацию о том, откуда элемент <output> получает свои данные. Но они вносят очень важную информацию с точки зрения семантики. В частности, если страницу нужно будет отредактировать кому-то другому, а не разработчику-хозяину, эти атрибуты помогут ему разобраться, как она работает.

Выделение текста цветом с помощью элемента <mark>

Элемент <mark> обозначает блок текста, выделенного цветом. Применение этого элемента особенно подходит для выделения фрагментов текста, как показано в следующем листинге:

<p>Давным-давно <mark>корпорация Sun</mark> решила разработать язык 
 для стиральных машинок, но ввиду отсутствия в те времена в них интернетов, перенесённом на серверы. 
 Разработки его велись более 5 лет с привлечением истинных гуру вроде <mark>Никлауса Вирта</mark>, 
 чья реализация <mark>сборщика мусора</mark> попала в код первых версий. <mark>Java</mark> 
 начала свою историю как язык для корпоративного сектора (если пропустить самое начало, когда он был языком 
 для микроволновок), энтырпрайзность зашкаливала за все границы: писали громадные спеки и стандарты 
 и всё ковалось закрыто в <mark>Sun Microsystems</mark>.</p>

Текст, взятый в элемент <mark>, выделяется желтым цветом:

С помощью элемента <mark> можно также помечать важное содержимое или ключевые слова (наподобие того, как это делают поисковые движки, выделяя текст, совпадающий с текстом запроса, в результатах поиска).

По правде говоря, элемент <mark> немного выделяется среди остальных семантических элементов. Хотя спецификация HTML5 считает его семантическим элементом, его презентационная функция, возможно, более важная, чем семантическая. По умолчанию текст, помеченный элементом <mark>, выделяется желтым цветом, но с помощью правил таблицы стилей можно применить какой-либо другой цвет:

mark {
	background-color:green;
	color:white;
}

По сути, элемент <mark> не предназначен для выполнения форматирования текста. В конце концов, имеется множество других способов выделить текст на веб-странице. Поэтому элемент <mark> следует использовать (совместно с форматированием посредством CSS, если есть такое желание), когда это подходит с точки зрения семантики. Удачно использовать элемент <mark> для привлечения внимания к обычному тексту, содержание которого по какой-либо причине является важным, например из-за контекста обсуждения, в котором он находится, или из-за выполняемой пользователем операции.