Элементы документа и метаданных
В таблице 6-2 приведены элементы документа и метаданных, которые подробно описаны в главе 7. Эти элементы используются для создания надстройки HTML документа, они предоставляют информацию о документе браузеру, определяют скрипты и CSS стили, а также содержание, которое будет отображаться, если скрипты отключены в браузере.
Таблица 6-2: Элементы документа и метаданных
Элемент | Описание | Тип | Новый/Измененный |
base |
Устанавливает базу для относительных URL-адресов | метаданные | не изменен |
body |
Обозначает содержание в HTML документе | N/A (недоступно) | изменен |
DOCTYPE |
Обозначает начало HTML документа | N/A | изменен |
head |
Содержит метаданные документа | N/A | Не изменен |
html |
Указывает начало самого HTML в документе | N/A | изменен |
link |
Определяет связь с внешним ресурсом, как правило, таблицей стилей или значком | метаданные | изменен |
meta |
Содержит сведения о документе | метаданные | изменен |
noscript |
Содержит контент, который будет отображаться, если скрипты отключены или недоступны в браузере | метаданные/фразовый | Не изменен |
script |
Определяет блок скрипта, либо встроенный, либо во внешнем файле | метаданные/фразовый | изменен |
style |
Определяет стиль CSS | метаданные | изменен |
title |
Устанавливает заголовок документа | метаданные | Не изменен |
Текстовые элементы
Текстовые элементы применяются к содержанию для придания им базовой структуры и смысла. В таблице 6-3 представлены эти элементы, более подробно они описаны в главе 8.
Таблица 6-3: Текстовые элементы
Элемент | Описание | Тип | Новый/Измененный |
a |
Создает гиперссылку | фразовый/потоковый | Изменен |
abbr |
Обозначает аббревиатуру | фразовый | не изменен |
b |
Выделяет отрывок текста без дополнительного акцента или важности | фразовый | изменен |
br |
Обозначает разрыв строки | фразовый | Не изменен |
cite |
Обозначает название другой работы | фразовый | изменен |
code |
Обозначает фрагмент программного кода | фразовый | Не изменен |
del |
Обозначает текст, который был удален из документа | фразовый/потоковый | новый |
dfn |
Обозначает определение термина | фразовый | Не изменен |
em |
Обозначает отрывок текста с выразительным акцентом | фразовый | Не изменен |
i |
Обозначает отрывок текста, который имеет иную природу, чем окружающий контент, например, слово из другого языка | фразовый | изменен |
ins |
Обозначает текст, который был добавлен в документ | фразовый/потоковый | новый |
kbd |
Обозначает данные, введенные пользователем | фразовый | Не изменен |
mark |
Означает содержание, которое будет выделено из-за своей актуальности в другом контексте | фразовый | новый |
q |
Обозначает содержание, цитируемое из другого источника | фразовый | Не изменен |
rp |
Обозначает параметры для использования с элементом ruby |
фразовый | новый |
rt |
Обозначает примечание для использования с элементом ruby |
фразовый | новый |
ruby |
Обозначает заметку, которая должна быть размещена выше или справа от символов в логографическом языке | фразовый | новый |
s |
Обозначает текст, который больше не является правильным | фразовый | изменен |
samp |
Обозначает выходные данные из компьютерной программы | фразовый | Не изменен |
small |
Обозначает мелкий шрифт | фразовый | изменен |
span |
Общий элемент, который не имеет сам по себе семантического значения. Используйте этот элемент, чтобы применять глобальные атрибуты без придания дополнительного семантического значения. | фразовый | Не изменен |
strong |
Обозначает текст, который является важным | фразовый | Не изменен |
sub |
Обозначает подстрочный текст | фразовый | Не изменен |
sup |
Обозначает надстрочный текст | фразовый | Не изменен |
time |
Обозначает время или дату | фразовый | новый |
u |
Выделяет отрывок текста без дополнительного акцента или важности | фразовый | изменен |
var |
Обозначает переменную из программы или компьютерной системы | фразовый | Не изменен |
wbr |
Указывает место, где может быть безопасно помещен разрыв строки | фразовый | новый |
Объединение содержания
Элементы из таблицы 6-4 используются для группирования и объединения связанного содержания. Полную информацию об этих элементах можно найти в главе 9.
Таблица 6-4: Группирующие элементы
Элемент | Описание | Тип | Новый/Измененный |
blockquote |
Обозначает блок содержания, цитируемый из другого источника | Потоковый | Не изменен |
dd |
Обозначает определение внутри элемента dl |
N/A | Не изменен |
div |
Общий элемент, который не имеет никакого предопределенного семантического значения. Это потоковый эквивалент элемента span . |
Потоковый | Не изменен |
dl |
Обозначает список, который содержит ряд терминов и определений | Потоковый | Не изменен |
dt |
Обозначает термин внутри элемента dl |
N/A | Не изменен |
figcaption |
Обозначает заголовок для элемента figure |
N/A | Новый |
figure |
Обозначает изображение | Потоковый | Новый |
hr |
Обозначает тематический разрыв на уровне абзаца | Потоковый | Изменен |
li |
Обозначает пункт (единицу, элемент) в элементах ul , ol или menu |
N/A | Изменен |
ol |
Обозначает упорядоченный список элементов | Потоковый | Изменен |
p |
Обозначает абзац | Потоковый | Изменен |
pre |
Означает содержание, форматирование которого должно быть сохранено | Потоковый | Не изменен |
ul |
Обозначает неупорядоченный список элементов | Потоковый | Изменен |
Структурирование содержания
Элементы из таблицы 6-5 используются для того, чтобы разделить содержание таким образом, чтобы каждая концепция, идея или тема были изолированы. Многие из этих элементов являются новыми, и они во многом дают основу для разделения смысла элементов и их внешнего вида. Вы можете узнать больше об этих элементах в главе 10.
Таблица 6-5: Элементы структуры
Элемент | Описание | Тип | Новый/Измененный |
address |
Обозначает контактную информацию для документа или элемента article |
Потоковый | Новый |
article |
Обозначает независимый блок содержания | Потоковый | Новый |
aside |
Обозначает содержание, которое имеет косвенное отношение к окружающему контенту | Потоковый | Новый |
details |
Создает раздел, который пользователь может открыть, чтобы получить дополнительную информацию | Потоковый | Новый |
footer |
Обозначает область нижнего колонтитула | Потоковый | Новый |
h1 -h6 |
Обозначает заголовок | Потоковый | Не изменен |
header |
Обозначает область заголовка | Потоковый | Новый |
hgroup |
Скрывает все, кроме первого набора заголовков, в структуре документа | Потоковый | Новый |
nav |
Указывает на значительную концентрацию элементов навигации | Потоковый | Новый |
section |
Указывает на важные понятия или темы | Потоковый | Новый |
summary |
Обозначает название или описание содержания в окружающем элементе details |
N/A | Новый |
Создание таблиц
Элементы в таблице 6-6 используются для создания таблиц для отображения данных в сетке. Основное изменение в HTML5 заключается в том, что вы больше не можете использовать таблицы для управления макетом страницы. Вместо этого вы должны использовать возможности CSS таблиц, которые я описал в главе 21.
Таблица 6-6: Элементы таблицы
Элемент | Описание | Тип | Новый/Измененный |
caption |
Добавляет таблице название | N/A | изменен |
col |
Обозначает одну колонку (столбец) | N/A | изменен |
colgroup |
Обозначает группу столбцов | N/A | изменен |
table |
Обозначает таблицу | Потоковый | изменен |
tbody |
Обозначает тело таблицы | N/A | изменен |
td |
Обозначает отдельную ячейку таблицы | N/A | изменен |
tfoot |
Обозначает нижний колонтитул таблицы | N/A | изменен |
th |
Обозначает отдельную ячейку заголовка | N/A | изменен |
thead |
Обозначает заголовок таблицы | N/A | изменен |
tr |
Обозначает ряд ячеек таблицы | N/A | изменен |
Создание форм
Элементы из таблицы 6-7 применяются для создания HTML форм, которые можно использовать для запроса вводимых данных от пользователя. Этой области HTML уделяется большое внимание в HTML5, и она имеет много новых элементов и функций, включая возможность валидации данных, введенных клиентом, прежде чем пользователь сможет отправить форму. Я описываю элементы HTML формы в главах 12, 13 и 14. Особый интерес представляют собой новые виды элемента input
, о котором речь идет в главе 12 и который более подробно рассмотрен в главе 13.
Таблица 6-7: Элементы формы
Элемент | Описание | Тип | Новый/Измененный |
button |
Обозначает кнопку, которая будет отправлять или сбрасывать форму (или которая может быть использована в качестве общей кнопки) | фразовый | изменен |
datalist |
Определяет набор предложенных значений для пользователя | потоковый | изменен |
fieldset |
Обозначает группу элементов формы | потоковый | изменен |
form |
Обозначает HTML форму | потоковый | изменен |
input |
Обозначает управление сбором данных от пользователя | фразовый | изменен |
keygen |
Создает пару ключей открытый/закрытый (public/private) | фразовый | новый |
label |
Обозначает метку для элемента формы | фразовый | изменен |
legend |
Обозначает описательную метку для элемента fieldset |
N/A | не изменен |
optgroup |
Обозначает группу связанных элементов option |
N/A | не изменен |
option |
Обозначает опцию, которая будет представлена пользователю | N/A | не изменен |
output |
Обозначает результат вычисления | фразовый | новый |
select |
Представляет пользователю фиксированный набор опций | фразовый | изменен |
textarea |
Позволяет пользователю ввести несколько строк текста | фразовый | изменен |
Заполнение содержанием
Элементы из таблицы 6-8 используются для внедрения и вставки какого-либо содержания в HTML документ. Некоторые из этих элементов описаны в главе 15, а другие рассматриваются в последующих частях этой книги.
Таблица 6-8: Элементы для внедрения содержания
Элемент | Описание | Тип | Новый/Измененный |
area |
Обозначает место для изображения карты со стороны клиента | фразовый | изменен |
audio |
Обозначает аудио ресурс | N/A | новый |
canvas |
Предлагает динамическое графическое полотно | фразовый/потоковый | новый |
embed |
Внедряет содержание в HTML документ при помощи плагина | фразовый | новый |
iframe |
Внедряет один документ во второй, создавая просматриваемый контекст | фразовый | изменен |
img |
Вставляет изображение | фразовый | изменен |
map |
Обозначает определение клиентской карты-изображения | фразовый/потоковый | изменен |
meter |
Вставляет представление числовых значений, отображенных в диапазоне возможных значений | фразовый | новый |
object |
Внедряет содержание в HTML документ, а также может быть использован для создания просматриваемого контекста и создания клиентской карты-изображения | фразовый/потоковый | изменен |
param |
Обозначает параметр, который будет передан плагину через элемент object |
N/A | не изменен |
progress |
Внедряет представление о прогрессе по отношению к цели или выполнению задачи | фразовый | новый |
source |
Обозначает медиа ресурс | N/A | новый |
svg |
Обозначает структурированный векторный контент | N/A | новый |
track |
Обозначает дополнительный медиа трек, такой как субтитры | N/A | новый |
video |
Обозначает видео ресурс | N/A | новый |