Часть 3. Переходим на HTML5. Организация контента.

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

Верстка статей

Типичная статья в блоге обычно состоит из заголовка, метаданных (дата написания, автор, категория и проч.) и текста самой статьи

Пример разметки HTML 4:

1
2
3
4
5
6
7
8
9
10
11
<div class=”post”>
<h2>Экхарт Толле.</h2>
<small>13 июля 2012</small>
<div class=”text”>
<p>Страх исчезает, когда вы начинаете делать то, что боитесь делать, вместо того, чтобы думать об этом.</p>
</div>
<div class=”metadata”>
Автор:  <a href=”author”> Экхарт Толле</a>  |
Категория:  <a href=”citate”>Цитаты</a>
</div>
</div>

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

Исходя из предыдущей статьи, мы вполне можем заменить <div class=”post”> на <article>.

<header> и <footer> могут использовать на странице несколько раз и не только для обрамления шапки и подвала страницы. Каждый раз они будут относиться к тому разделу, в котором находятся. Заголовок и время добавления статьи являются предварительными данными, следовательно, заключим их в <header>. Аналогично поместим содержимое <div class=”metadata”> в <footer>.

1
2
3
4
5
6
7
8
9
10
11
<article>
<header>
<h2>Экхарт Толле.</h2>
<time datetime=2012-07-13>13 июля 2012</time>
</header>
<p>Страх исчезает, когда вы начинаете делать то, что боитесь делать, вместо того, чтобы думать об этом.</p>
<footer>
Автор:  <a href=”author”> Экхарт Толле</a>  |
Категория:  <a href=”citate”>Цитаты</a>
</footer>
</article>

Кое-что о <footer>

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

1
2
3
4
5
6
<body>
<footer><a href=”/”>Вернуться назад</a></footer>
<h1>Заголовок</h1>
<p>Текст</p>
<footer><a href=”/”>Вернуться назад</a></footer>
</body>

Интересно, что в <blockqoute> тоже очень удобно использовать <footer> для указания источника:

1
2
3
4
<blockquote>
Признак первосортных мозгов — это умение держать в голове две взаимоисключающие мысли одновременно, не теряя при этом способности мыслить.
<footer>Френсис Скотт Фитцджеральд</footer>
</blockquote>

Верстка блока комментариев

В спецификации для комментариев рекомендуется использовать вложенные элементы <article>.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<article>
<header>
<h1>Вечеринка</h1>
<time datetime=2012-12-31>31 декабря 2012</time>
</header>
<p>Сегодня у меня дома новогодняя пати, приходите все!</p>
<footer>Автор: Вася</footer><!— комментарии —>
<article>
<header>
<a href=”http://site.com”>Петя</a> написал:
</header>
<p>Супер! С удовольствием приду.</p>
</article><article>
<header>
<a href=”http://site2.com”>Маруся</a> написала:
</header>
<p>Да ну, я лучше пойду на «Голубой огонек».</p>
</article>
</article>

<figure> — рисунки и иллюстрации

Раньше нельзя было явно привязать подпись к рисунку, и подпись относилась к окружающему контенту. Новый элемент <figure> заключает в себя изображение (или видео, или фрагмент кода) и его заголовок <figcaption>.

1
2
3
4
5
6
<figure>
<img src=”img.png” alt=””>
<figcaption>
Подпись к изображению
</figcaption>
</figure>

С помощью css стилей можно добиться разнообразного оформления иллюстраций в статьях, как, например, на нашем сайте.