Главная страница   /   3.3. Создание HTML документа (Руководство по HTML5

Руководство по HTML5

Руководство по HTML5

Адам Фриман

3.3. Создание 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.