Статьи

Посмотри на пример типичной разметки:

<div class="entry">
	<p class="post-date">October 22, 2009</p>
	<h2><a href="#" rel="bookmark" title="link to this post"> Travel day </a></h2>
…
</div>

Опять-таки этот код будет валидным в HTML5. Но теперь появился новый семантический элемент <article>, который служит для обозначения статьи на странице.

<article>
	<p class="post-date">October 22, 2009</p>
	<h2><a href="#" rel="bookmark" title="link to this post">Travel day</a></h2>
…
</article>

Но не все так просто. Сейчас внесу еще одно изменение в код, а ниже поясню его:

<article>
	<header>
		<p class="post-date">October 22, 2009</p>
		<h1><a href="#" rel="bookmark" title="link to this post">Travel day</a></h1>
	</header>
...
</article>

Заметна разница? Я изменил заголовок <h2> на <h1> и обернул его элементом <header>. C <header> мы уже знакомились. Он является контейнером элементов, которые образуют заголовок статьи (в нашем случае — это название статьи, время и дата публикации). Стоп-стоп-стоп! А не должен ли быть на странице только один <h1>? Не нарушат ли несколько элементов <h1> на странице ее структуру? Ответ на оба вопроса — нет. Но чтобы понять почему, нам нужно сделать шаг назад.

В HTML4 единственный путь создать структуру документа — это использовать элементы h1-h6. Если тебе нужен был только один корневой узел, можно было ограничится одним h1 в разметке. Но в HTML5 для создания структуры документа используются специально для этого предназначенные семантические элементы. HTML5 алгоритм говорит нам, что <articles> создает новый раздел, т.е. новый узел в структуре. И в HTML5 каждый раздел может иметь свой собственный <h1>.

По сравнению с HTML4 это резкое изменение. Но изменение в лучшую сторону. И вот почему. Многие веб страницы делаются по шаблонам. Кусок берется из одного источника и вставляется тут, затем еще кусок с другого и вставляется там. Описать можно примерно так: «Вот некоторая HTML разметка. Просто копируем ее и вставляем на свою страницу». Такой вариант подойдет для небольшого куска кода. Но как поступать, когда нужно скопипастить целый раздел? В этом случае действия описать можно так: «Вот некоторая разметка. Копируем ее в текстовый редактор. Исправляем теги заголовков, чтобы они соответствовали уровню вложенности и вставляем это кусок».

Немного поясню. HTML4 не имеет общего тега для заголовков. Но он снабжен заголовками шести уровней <h1>-<h6>, которые должны быть вложены в точно указанном порядке. Вот это и является основной проблемой. И эту проблему решает HTML5, вводя новые элементы секционирования и новые правила для использования заголовков. Если ты используешь новую семантическую разметку, код может быть таким:

<article>
	<header>
		<h1>A syndicated post</h1>
	</header>
	<p>Lorem ipsum blah blah...</p>
</article>

Его можно копировать и вставлять без изменений. То, что этот блок содержит <h1> не является проблемой, потому что блок начинается тегом <article>. <article> — это автономный узел в структуре документа, а <h1> снабжает этот узел заголовком. И в данном случае неважен уровень вложенности секции — правило одинаково для любого уровня.

Куда дальше

• следующая — Даты и время
• предыдущая — Заголовки
• содержание