Главная страница   /   10.6. Работа со статьями (Руководство по HTML5

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

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

Адам Фриман

10.6. Работа со статьями

Элемент 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">
		&#169;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 является контекстуальным, то есть если таким образом вы определяете для одного вида контента значимую и имеющую смысл структуру, то для другого контента это не подходит и не имеет смысла. Тут требуется способность правильно оценить контекст и последовательность.