Строение тела документа

Строение тела документа.

Описание тела нашего документа готово. Базовая структура определена, но необходимо еще поработать над содержанием. Пока мы изучили только элементы HTML5, помогающие определять разделы макета и указывать их назначение, однако все самое важное находится внутри этих разделов.

Большинство уже рассмотренных элементов нужны для определения структуры HTML-документа, которую смогут распознать любые браузеры и новые устройства. Мы узнали, что с помощью тега <body> объявляется тело видимой части документа, тег <header> включает в себя важную информацию о теле, тег <nav> определяет средства навигации, тег <section> описывает содержимое самого документа, а в теги <aside> и <footer> заключается вспомогательная информация. Но ни один из указанных элементов не объявляет непосредственно содержимое документа. Все они относятся исключительно к описанию структуры документа.

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

тексты, изображения, видео и интерактивные приложения. Нам необходимо различать эти элементы и устанавливать взаимоотношения между ними.

<article>

Приведенный на рис. 1.1 макет представляет собой простую и обобщенную структуру современных веб-сайтов, а также показывает, каким образом основное содержимое документа располагается на экране. Так же, как блог делится на записи, содержимое веб-сайтов чаще всего делится на фрагменты, обладающие схожими характеристиками. Определить каждый из этих фрагментов помогает элемент <article> (статья).

Листинг 1.15. Использование элемента <article>

<! DOCTYPE html>

<html lang="ru">

<head>

<meta charset="utf-8">

<meta name="description" content^^™ пример HTML5">

<meta name="keywords" content="HTML5, CSS3, JavaScript’^ <title>Этот текст — заголовок документа</title>

<link rel="stylesheet" href="mystyles. css">

</head>

<body>

<header>

<h1>Это главный заголовок веб-сайта</h1>

</header>

<nav>

<ul>

<li>домой</li>

<Н>фотографии</Н>

<li>видео</li>

<Н>контакты</Н>

</ul>

</nav>

<section>

<article>

Это текст моей первой статьи </article>

<article>

Этот текст моей второй статьи </article>

</section>

<aside>

<blockquote>Статья номер 1</blockquote>

<blockquote>Статья номер 2</blockquote>

</aside>

<footer>

Copyright &copy; 2010-2011 </footer>

</body>

</html>

Как вы видите в коде листинга 1.15, теги <article> располагаются между тегами <section> — статьи принадлежат разделу, частью которого они являются. Можно сказать, что тег <article> — дочерний элемент тега <section>, так же как все элементы внутри тега <body> являются дочерними элементами тела документа. Как и все дочерние элементы тела документа, теги <article> следуют один за другим, так как они независимы друг от друга, что и показано на рис. 1.4.

повторяем основы-

Как уже говорилось, документ HTML имеет древовидную структуру, корнем которой является элемент <html>. Элемент структуры может быть предком, потомком или братом другого элемента, в зависимости от того, какое место относительно друг друга они занимают в дереве. Например, в обычном HTML-документе элемент <body> является потомком элемента <html> и братом элемента <head>. Для обоих элементов, <body> и <head>, элемент <html> является родителем или предком.

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

Группирует связанные друг с другом фрагменты информации, независимо от характера этой информации.

<header> «/header>

<nav> </nav>

Как любая независимая часть документа, содержимое каждого элемента <article> обладает собственной структурой. При определении этой структуры мы можем пользоваться преимуществами, которые дает нам универсальность тегов <header> и <footer>, рассмотренных ранее. Это переносимые теги, и их можно использовать не только в теле документа, но и внутри любого его раздела.

Листинг 1.16. Построение структуры элемента <article>

<! DOCTYPE html>

<html lang="ru">

<head>

<meta charset="utf-8">

<link rel="stylesheet" href="mystyles. css">

</head>

<body>

<header>

<h1>Это главный заголовок веб-сайта</h1>

</header>

<nav>

<ul>

<li>домой</li>

<Н>фотографии</Н>

<li>видео</li>

<li>контакты</li>

</ul>

</nav>

<section>

<article>

<header>

h1>Заголовок статьи 1</h1>

</header>

Это текст моей первой статьи <footer>

<р>комментарии (0)</p>

</footer>

</article>

<article>

<header>

h1>Заголовок статьи 2</h1>

</header>

Это текст моей второй статьи <footer>

<р>комментарии (0)</p>

</footer>

</article>

</section>

<aside>

<blockquote>Статья номер 1</blockquote>

<blockquote>Статья номер 2</blockquote>

</aside>

<footer>

Copyright &copy; 2010-2011 </footer>

</body>

</html>

Обе статьи в листинге 1.16 описаны с помощью элемента <article>, и у каждой статьи задана своя структура. Вначале определен тег <header> с заголовком <h1>. Далее идет основное содержимое, то есть текст статьи. Завершает каждую статью тег <footer> с указанием количества комментариев.

<hgroup>

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

Для создания заголовков мы можем использовать теги <h>: <h1>, <h2>, <h3>, <h4>, <h5> и <h6>. Однако для ускорения обработки документа и для того, чтобы во время его интерпретации не создавались множественные разделы и подразделы, эти теги необходимо группировать. Для этого в HTML5 используется элемент <hgroup>.

Листинг 1.17. Использование элемента <hgroup>

<! DOCTYPE html>

<html lang="ru">

<head>

<meta charset="utf-8">

<meta name="description" content=»Это пример HTML5">

<link rel="stylesheet" href="mystyles. css"> </head>

<body>

<header>

<h1>Это главный заголовок веб-сайта</h1> </header>

<nav>

<ul>

<li>домой</li>

<Н>фотографии</Н>

<li>видео</li>

<li>контакты</li>

</ul>

</nav>

<section>

<article>

<header>

<hgroup>

<h1>Заголовок статьи 1</h1> <h2>подзаголовок статьи 1</h2> </hgroup>

<p>опубликовано 10.12.2011</p> </header>

Это текст моей первой статьи <footer>

<p>комментарии (0)</p>

</footer>

</article>

<article>

<header>

<hgroup>

<1п1>Заголовок статьи 2</h1> <h2>подзаголовок статьи 2</h2> </hgroup>

<p>опубликовано 15.12.2011</p> </header>

Это текст моей второй статьи <footer>

<p>комментарии (0)</p>

</footer>

</article>

</section>

<aside>

<blockquote>Статья номер 1</blockquote>

<blockquote>Статья номер 2</blockquote>

</aside>

<footer>

Copyright &copy; 2010-2011 </footer>

</body>

</html>

Необходимо соблюдать иерархию тегов <h>, то есть сначала должен быть объявлен тег <h1>, затем для подзаголовка тег <h2> и т. д. Но в отличие от предыдущих версий HTML, в HTML5 теги <h> можно использовать в каждом разделе и заново строить такую иерархию. В листинге 1.17 мы добавили подзаголовок и метаданные в каждую статью и сгруппировали заголовок и подзаголовок с помощью <hgroup>. Иерархия тегов <h1> и <h2> используется в каждом элементе <article>.

Элемент <hgroup> следует добавлять только в том случае, если в одном теге <header> есть заголовки разных уровней.

Данный элемент может содержать только теги <h> — вот почему в нашем примере метаданные находятся за его пределами. Если в вашем коде используется только тег <h1> или тег <h1> с метаданными, то эти элементы группировать не нужно. Например, в заголовке тела документа элемент <hgroup> отсутствует, потому что элемент <h> только один. Элемент <hgroup> предназначен исключительно для группировки тегов <h>, на что и указывает его название.

Браузеры и программы, которые исполняют и отображают веб-сайты, считывают HTML-код и создают собственную внутреннюю структуру для интерпретации и обработки каждого элемента. Эта внутренняя структура состоит из разделов, не имеющих ничего общего с разделами документа, которые мы определили в HTML-коде, например, с помощью элементов <section>. Речь идет о концептуальных разделах, генерируемых во время интерпретации кода. Элемент <header> сам по себе не создает отдельного концептуального раздела. Это означает, что элементы внутри <header>, представляющие разные уровни заголовков, могут

привести к формированию нескольких концептуальных разделов. Элемент <hgroup> был создан специально для группировки тегов <h>, чтобы избежать ошибок интерпретации HTML-кода браузерами.

повторяем основы-

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

<figure> и <figcaption>

Элемент <figure> предназначен для более точного определения содержимого документа. До его появления невозможно было объявить содержимое, которое представляет собой изолированную частью документа: иллюстрации, рисунки, видео и т. п. Как правило, такие элементы являются частью основного раздела, но их можно спокойно удалять из документа, не нарушая его структуру. Если такая информация присутствует в документе, то она определяется тегом <figure>.

Листинг 1.18. Использование элементов <figure> и <figcaption>

<! DOCTYPE html>

<html lang="ru">

<head>

<meta charset="utf-8">

<meta name="description" content=»Это пример HTML5">

<link rel="stylesheet" href="mystyles. css">

</head>

<body>

<header>

<h1>Это главный заголовок веб-сайта</h1>

</header>

<nav>

<ul>

<li>домой</li>

<Н>фотографии</Н>

<li>видео</li>

<Н>контакты</Н>

</ul>

</nav>

<section>

<article>

<header>

<hgroup>

<h1>Заголовок статьи 1</h1>

<h2>подзаголовок статьи 1</h2>

</hgroup>

<р>опубликовано 10.12.2011</p>

</header>

Это текст моей первой статьи <figure>

<img src="http://minkbooks.com/content/myimage.jpg"> <figcaption>

Это изображение для первой статьи </figcaption>

</figure>

<footer>

<р>комментарии (0)</p>

</footer>

</article>

<article>

<header>

<hgroup>

<h1>Заголовок статьи 2</h1>

<h2>подзаголовок статьи 2</h2>

</hgroup>

<р>опубликовано 15.12.2011</p>

</header>

Это текст моей второй статьи <footer>

<р>комментарии (0)</p>

</footer>

</article>

</section>

<aside>

<blockquote>Статья номер 1</blockquote> <blockquote>Статья номер 2</blockquote>

</aside>

<footer>

Copyright &copy; 2010-2011 </footer>

</body>

</html>

В листинге 1.18 в первой статье сразу после текста мы добавили изображение (<img src="http://minkbooks.com/content/myimage.jpg">). Это

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

Кроме того, в листинге 1.18 внутри тега <figure> используется еще один дополнительный элемент. Такие блоки информации, как изображения и видео, принято подписывать. В HTML5 предусмотрен специальный элемент для создания таких подписей. Тег <figcaption> определяет текст, относящийся к содержимому <figure>, и устанавливает отношение между этими элементами и их содержимым.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *