Работа со статьями
Элемент article представляет собой самодостаточный блок контента в HTML документе, который может, в принципе, распространяться или использоваться независимо от остальной части страницы (например, через канал RSS). Это не значит, что вы должны обрабатывать и распространять его отдельно, просто такая независимость от остальной части документа является руководством того, когда стоит использовать данный элемент. Хорошие примеры этого – это новые статьи и записи в блоге. В таблице 10-9 представлен элемент article.
Таблица 10-9: Элемент article| Элемент | article |
| Тип элемента | Потоковый |
| Разрешенные родительские элементы | Любой элемент, который может содержать потоковые элементы, но этот элемент не может быть потомком элемента address |
| Локальные атрибуты | Нет |
| Содержание | Элементы style и потоковый контент |
| Стиль тегов | Открывающий и закрывающий теги |
| Новый в HTML5 | Да |
| Изменения в HTML5 | N/A |
| Соглашение по стилям | article { display: block; } |
В листинге 10-7 показано, как используется элемент article.
Листинг 10-7: Использование элемента article<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman" />
<meta name="description" content="A simple example" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style>
h1, h2, h3, article > footer {
background: grey;
color: white;
}
hgroup > h1 {
margin-bottom: 0;
margin-top: 0;
}
hgroup > h2 {
background: grey;
color: white;
font-size: 1em;
margin-top: 0px;
margin-bottom: 2px;
}
body > header *, body > footer * {
background: transparent;
color: black;
}
article {
border: thin black solid;
padding: 10px;
margin-bottom: 5px;
}
article > footer {
padding: 5px;
margin: 5px;
text-align: center;
}
article > footer > nav > a {
color: white;
}
body > article > section,
body > article > section > section {
margin-left: 10px;
}
body > header, body > footer {
border: medium solid black;
padding-left: 5px;
margin: 10px 0 10px 0;
}
body > nav {
text-align: center;
padding: 2px;
border: dashed thin black;
}
body > nav > a {
padding: 2px;
color: black;
}
</style>
</head>
<body>
<header>
<hgroup>
<h1>Things I like</h1>
<h2>by Adam Freeman</h2>
</hgroup>
<nav>
<h1>Contents</h1>
<ul>
<li><a href="#fruitsilike">Fruits I Like</a></li>
<li><a href="#activitiesilike">Activities I Like</a></li>
</ul>
</nav>
</header>
<article>
<header>
<hgroup>
<h1 id="fruitsilike">Fruits I Like</h1>
<h2>How I Learned to Love Citrus</h2>
</hgroup>
</header>
I like apples and oranges.
<section>
<h1 id="morefruit">Additional fruits</h1>
I also like bananas, mangoes, cherries, apricots, plums,
peaches and grapes.
<section>
<h1>More information</h1>
You can see other fruits I like <a href="fruitlist.html">here</a>
</section>
</section>
<footer>
<nav>
More Information:
<a href="http://fruit.org">Learn More About Fruit</a>
</nav>
</footer>
</article>
<article>
<header>
<hgroup>
<h1 id="activitiesilike">Activities I like</h1>
<h2>It hurts, but I keep doing it</h2>
</hgroup>
</header>
<section>
<p>
I like to swim, cycle and run. I am in training for my first
triathlon, but it is hard work.
</p>
<h1 id="tritypes">Kinds of Triathlon</h1>
There are different kinds of triathlon - sprint, Olympic and so on.
<section>
<h1 id="mytri">The kind of triathlon I am aiming for</h1>
I am aiming for Olympic, which consists of the following:
<ol>
<li>1.5km swim</li>
<li>40km cycle</li>
<li>10km run</li>
</ol>
</section>
</section>
<footer>
<nav>
More Information:
<a href="http://triathlon.org">Learn More About Triathlons</a>
</nav>
</footer>
</article>
<footer id="mainFooter">
©2011, Adam Freeman. <a href="http://apress.com">Visit Apress</a>
</footer>
</body>
</html>
В этом примере я сменил структуру моего документа, чтобы больше соответствовать общему стилю блога, хотя, возможно, это и не самый интересный блог. Основная часть документа разбита на три части. Первая часть – это верхний колонтитул (header), который выходит за рамки отдельных записей и обеспечивает опорную точку для остальной части документа. Вторая часть представляет собой нижний колонтитул (footer), который уравновешивает верхний колонтитул и предоставляет пользователю базовую информацию по остальной части содержания. Новым дополнением является третья часть – элементы article. В этом примере каждая статья описывает определенный тип вещей, которые мне нравятся. Это проходит тест на независимость контента, потому что каждое описание вещи, которую я люблю, является автономным и может быть распространено само по себе, обладая при этом неким смыслом. Еще раз, я добавил некоторые стили, чтобы обратить ваше внимание на результат использования этого элемента, что и видно на рисунке 10-10.
Рисунок 10-10: Применение элемента article
Элемент article может применяться так же гибко, как и другие новые семантические элементы. Например, вы создать вложенные элементы article, чтобы указать оригинальную статью, а затем каждое обновление или комментарий, которые вы получили. Как и у некоторых других элементов, значение у article является контекстуальным, то есть если таким образом вы определяете для одного вида контента значимую и имеющую смысл структуру, то для другого контента это не подходит и не имеет смысла. Тут требуется способность правильно оценить контекст и последовательность.
