Руководство по HTML5
Адам Фриман
Создание HTML документа
Элементы и атрибуты не существуют в изоляции: вы используете их, чтобы сделать разметку контента в HTML-документе. Самый простой способ создания HTML документа – это создание текстового файла; по соглашению эти файлы имеют расширение .html
. Вы можете загрузить файл в браузер либо непосредственно с диска, либо через веб-сервер. (В этой книге я обычно использую веб-сервер. Мой сервер называется titan
, и вы будете часто видеть это имя в окне браузера, показанного на скриншотах).
Браузеры и пользовательские агенты
В этой главе (и в большей части данной книги), я рассматриваю браузер в качестве цели для HTML документа, который мы создаем. Это неплохой и наиболее распространенный способ видения HTML, но в этом не вся правда. Собирательное название для программных компонентов и компонентов, которые могут потреблять HTML, - пользовательские агенты. Хотя браузеры являются наиболее распространенным видом пользовательских агентов, они не являются единственными.
Небраузерные пользовательские агенты по-прежнему довольно редки, но ожидается, что они станут более популярными. Повышенное внимание разделению содержания и представления в HTML5 крайне оправдано, потому что таким образом мы признаем, что не все HTML-содержание отображается пользователю. В данной книге я буду использовать браузер (потому что браузеры являются наиболее важной и доминирующей категорией пользовательских агентов), но стоит иметь в виду, что ваш HTML5 может быть использован некоторыми другими видами программного обеспечения.
HTML документ имеет определенную структуру, и вы, как минимум, должны расположить некоторые ключевые элементы по местам. Большинство примеров в этой книге показаны как полные HTML-документы, это обозначает, что вы можете быстро и легко увидеть, как применяется элемент и к какому результату приводит его использование. Я объясню все элементы из листингов в последующих главах, но в качестве быстрого старта я собираюсь провести для вас тур по основному HTML документу. Я также буду давать ссылки на следующие главы, в которых изложена более подробная информация.
HTML vs. XHTML
Хотя эта книга про HTML, было бы непростительно, если бы я не упомянуть и XHTML (HTML, которому предшествует X). Синтаксис HTML позволяет вам делать вещи, которые незаконны для XML-документов. Это означает, что могут возникнуть сложности при обработке HTML-документа с помощью стандартных XML-парсеров.
Чтобы решить эту проблему, вы можете использовать XHTML, который является XML сериализацией HTML (то есть, вы выражаете содержание и элементы и атрибуты HTML таким образом, как это делается для действительного XML, и они могут быть легко обработаны парсером XML). Вы также можете создать документы полиглоты, которые являются действительными HTML и XML документами, хотя это требует использования подмножества синтаксиса HTML. Я не покрывают в этой книге XHTML, но вы можете получить больше информации про XHTML вот тут: http://wiki.whatwg.org/wiki/HTML_vs._XHTML.
Внешняя структура
Есть два элемента, которые обеспечивают внешнюю структуру HTML документа – элементы DOCTYPE
и html
, как показано в листинге 3-11.
Листинг 3-11: Внешняя структура HTML документа
<!DOCTYPE HTML>
<html>
<!-- elements go here -->
</html>
Элемент DOCTYPE
говорит браузеру, он имеет дело с HTML документом. Это выражается через HTML булев атрибут:
<!DOCTYPE HTML>
За элементом DOCTYPE
сразу следует открывающий тег элемента html
. Это говорит браузеру, что содержимое элемента должно рассматриваться как HTML от начала и до конца, пока не встретится закрывающий тег html
. Может показаться странным, что вы используете элемент DOCTYPE
, а затем сразу же и элемент html
. Но когда HTML превратился в стандарт, были другие равнозначные языки разметки, и ожидалось, что документы будут содержать смесь разных типов разметки.
В наши дни HTML является основным языком разметки, и большинство браузеров будет предполагать, что они имеют дело с HTML, даже если вы опустите элементы DOCTYPE
и html
. Это не обозначает, что вы должны их выбрасывать. Эти элементы служат важной цели, и опираться на браузерное поведение по умолчанию – это как доверять незнакомцам: большую часть времени все будет отлично, но все же может случиться нечто, что все испортит и поломает. В главе 7 изложена более подробная информация про элементы DOCTYPE
и html
.
Метаданные
Область метаданных в документе HTML позволяет предоставить браузеру информацию о документе. Метаданные содержатся внутри элемента head
, как показано в листинге 3-12.
Листинг 3-12: Добавление элемента head
в HTML документ
<!DOCTYPE HTML>
<html>
<head>
<!-- metadata goes here -->
<title>Example</title>
</head>
<html>
В листинге я предоставил минимальное количество метаданных, а именно элемент title
. Считается, что все HTML документы должны содержать элемент title
, хотя браузеры обычно игнорируют любые упущения. Большинство браузеров отображают содержимое элемента title
в строке меню в окне браузера или в верхней части вкладки, открытой на странице. Элементы head
и title
полностью описаны в главе 7, наряду со всеми другими элементами метаданных, которые могут быть размещены в элементе head
.
Совет
В листинге показано, как создать комментарии в HTML документе. Вы начинаете с тега
<!--
и заканчиваете тегом-->
. Браузер будет игнорировать все, что вы напишете внутри этих тегов.
В дополнение к содержащимся элементам, которые описывают HTML документ, элемент head
также используется для определения отношений с внешними ресурсами (такими как CSS стили), определения встроенных стилей CSS, а также определения и загрузки скриптов. Весь этот функционал будет показан в главе 7.
Содержание
Третьей и заключительной частью HTML документа является содержание, которое находится внутри элемента body
, как показано в листинге 3-13.
Листинг 3-13: Добавление элемента body
в HTML документ
<!DOCTYPE HTML>
<html>
<head>
<!-- metadata goes here -->
<title>Example</title>
</head>
<body>
<!-- content and elements go here -->
I like <code>apples</code> and oranges.
</body>
</html
Элемент body
сообщает браузеру, какая часть документа должна отображаться пользователю и, конечно, большая часть этой книги посвящается тому, что вы можете положить внутрь элемента body
. С добавлением элемента body
, у вас появляется скелет HTML документа, который я буду использовать для большинства примеров в этой книге.
Родительские и дочерние элементы, потомки и сиблинги
HTML элементы определяют взаимоотношения с другими элементами в HTML документе. Элемент, который содержит еще один элемент, является родителем второго элемента. В листинге 3-13 показано, что элемент body
является родителем элемента code
, потому что элемент code содержится между открывающим и закрывающим тегами элемента body
. С другой стороны, элемент code
является дочерним для элемента body
. Элемент может иметь несколько дочерних, но только один родительский элемент.
Элементы могут содержать элементы, которые, в свою очередь, содержат другие элементы. Вы также можете увидеть это в листинге 3-13: элемент html содержит элемент body
, который содержит элемент code
. Элементы body
и code
являются потомками элемента html
, но только элемент body
является дочерним элемента html
. Дочерние элементы являются прямыми потомками. Элементы, имеющие одного и того же родителя, известны как сестринские (сиблинги). В листинге 3-13 элементы head
и body
являются сиблингами, потому что они дочерние элементы элемента html
.
Важность отношений между элементами проходит через весь HTML. Как вы увидите в следующем разделе, элементы имеют ограничения, по которым другие элементы могут быть их родительскими или дочерними элементами. Эти ограничения выражаются через типы элементов. Отношения элементов также имеют важное значение в CSS, который я представляю в главе 4, и одним из способов выбора элементов для применения стилей является их выбор по родительскому элементу и элементу потомку. И наконец, когда вы прочтете про Объектную модель документа (Document Object Model (DOM)) в части IV, вы будете находить конкретные элементы в документе, перемещаясь по дереву документа, которое является представлением связей между элементами. Знание сиблингов потомков элементов является важным навыком в мире HTML.
Типы элементов
Спецификация HTML5 группирует элементы по трем категориям: элементы метаданных, поточные (или потоковые) элементы и фразовые элементы.
Элементы метаданных используются для создания основной структуры HTML документа и для предоставления информации браузеру о том, как этот документ должен быть обработан. Я описал элементы метаданных в главе 7.
Две другие категории немного отличаются: вы используете их, чтобы указать допустимый набор родительских и дочерних элементов для элемента. Фразовые элементы являются основными строительными блоками HTML. Глава 8 содержит описание наиболее часто используемых фразовых элементов. Категория поточных элементы является расширенным множеством (расширенной версией) фразовых элементов; то есть все фразовые элементы являются поточными элементами, но не все поточные – фразовыми.
Не все элементы принадлежат к одной из категорий: это те элементы, которые либо не имеют особого значения, либо могут быть использованы только в очень жестких условиях. Примером такого элемента является элемент li
, который обозначает элемент списка, и у него может быть только один из трех родительских элементов: ol
(который обозначает упорядоченный список), ul
(который обозначает неупорядоченный список) и menu
(который обозначает меню). Вы можете узнать больше об элементе li
в главе 9. Я расскажу вам, к какой категории относится каждый элемент, при его описании, и это начнется с главы 6.