Как использовать секционные элементы в HTML5.
Всем привет! Стандарт HTML5 используется уже практически везде, однако многие до сих пор не умеют делать правильную разметку с использованием новых тегов. Если вы относитесь к одним из них, то эта статья для вас.
Main
Элемент main должен содержать основную информацию вашей страницы. Весь контент должен быть уникальным и не появляться где-либо еще на сайте. Любой контент, который повторяется на нескольких страницах(лого, поисковые блоки, ссылки в футере и т.д.) не должны быть помещены в элемент main.
Пример использование тега main ниже.
<body>
<header>
<div id="logo">Rocking Stone</div>
<nav>...</nav>
</header>
<main role="main">
<h1>Guitars</h1>
<p>The greatest guitars ever built.</p>
<article>
<h2>Gibson SG</h2>
<p>...</p>
</article>
<article>
<h2>Fender Telecaster</h2>
<p>...</p>
</article>
</main>
</body>
Заметка! Мы использовали атрибут role='main' для программ, которые еще не поддерживают тег main.
Вам следует использовать только один элемент main на странице, и он не должен быть помещен в теги article, aside, header, footer или элемент nav.
Article
Элемент article должен содержать часть автономного содержания, которое может быть распределено вне контекста страницы. Это включает такие вещи, как новостные статьи, посты блога или комментарии пользователей.
<article>
<header>
<h1>Blog Post Title</h1>
<p>Posted 13th February 2014</p>
</header>
<p>
...
</p>
</article>
Вы можете вкладывать элементы article в друг друга. В таком случае подразумевается, что вложенные элементы связаны с внешним элементом article.
<article>
<header>
<h1>Blog Post Title</h1>
<p>Posted 13th February 2014</p>
</header>
<p>...</p>
<p>...</p>
<p>...</p>
<section>
<h2>Comments</h2>
<article>
<footer>
<p>Posted by: Joe Balochio</p>
</footer>
<p>This was a great article</p>
</article>
<article>
<footer>
<p>Posted by: Casey Brock</p>
</footer>
<p>How do you think this applies to the plan for world domination?</p>
</article>
</section>
</article>
В этом примере мы использовали article элементы, чтобы разметить сообщение в блоге и какждый из комментариев. Данный паттерн подразумевает, что комментарии связаны с темой статьи.
Section
Данный элемент используется для представления группы связанного содержания. Он очень похож на элемент article, однако различие в том, что содержание в section не обязательно дожно иметь смысл с контекстом страницы.
Желательно использовать элементы заголовка, чтобы определить тему для раздела. Использование поста блога в качестве примера, вы могли использовать элементы section, которые представляют каждую из отдельных частей в пределах поста.
<article>
<h1>How to use HTML5 Sectioning Elements</h1>
<p>...</p>
<section>
<h2>The <main> Element</h2>
<p>...</p>
</section>
<section>
<h2>The <article> Element</h2>
<p>...</p>
</section>
<section>
<h2>The <section> Element</h2>
<p>...</p>
</section>
...
</article>
Здесь мы использовали элемент article, чтобы определить пост, как единое целое, а затем множество элементов section, чтобы определить каждую отдельную часть, рассмотренную в статье.
Если вам нужно просто сгруппировать контент вместе для стилизации, то лучше использовать элемент div, нежели section.
Nav
Элемент nav используется для того, чтобы определить группу ссылок на страницы сайта.
<nav>
<ul>
<li><a href="#chapter-one">Chapter One</a>
<li><a href="#chapter-two">Chapter Two</a>
<li><a href="#chapter-three">Chapter Three</a>
</ul>
</nav>
Использование списков для создания навигации часто делает ее проще, однако это не обязательное требование при использовании элемента nav.
Aside
Этот элемент используется для того, чтобы определить контент, который связан с тем, что вокруг него, однако может быть отделен от него. Например, сайдбар, группы элементов nav и т.п.
<article>
<header>
<h1>Google Buys Nest</h1>
<p>Posted at 11:34am 13th January 2014</p>
</header>
<p>...</p>
<p>...</p>
<aside>
<h1>Google (GOOG)</h1>
<p>Google was founded in 1998 by Larry Page and Sergey Brin. The company...</p>
</aside>
</article>
В этом примере мы использовали этот элемент, чтобы разметить информацию о Google в новостной статье. Информация о компании может быть полезна для читателей, однако непосредственно не связана с темой статьи.
Header
Элемент header используется для того, чтобы выделить начало контента в статье или страницы. Он, как правило, содержит элементы заголовка, а также некоторые метаданные, которые относятся к содержанию, например, дату статьи. Он также может содержать оглавление(в пределах nav элемента ) для больших документов.
Элемент header будет связан с ближайшей секцией, как правило, это ближайший родительский элемент в структуре документа.
<header>
<h1>Google buys Nest</h1>
<p>Posted at 11:34am 13th January 2014</p>
</header>
В этом примере элемент header содержит заголовок и дату публикации новостной статьи.
Footer
Содержит такие элементы, как автор, информацию о правах или ссылки, связанные со страницей.
<footer>
Copyright Matt West 2014
</footer>
Также, как и элемент header, элемент footer связан с ближайшим элементом section.
Address
Элемент address является самым непонятным для большинства. Он не предназначен для обозначения почтовых адресов, а предназначен для обозначения какой-либо контактной информации для статьи странице. Например, это может быть ссылка на сайт автора или его email.
<address>
Contact <a href="mailto:matt@example.com">Matt West</a>
</address>
Этот элемент часто используется внутри footer для article.
<article>
<header>
<h1>Google buys Nest</h1>
<p>Posted at 11:34am 13th January 2014</p>
</header>
<p>...</p>
<p>...</p>
<footer>
<address>
By <a href="mailto:matt@example.com">Matt West</a>
</address>
<p>Copyright Matt West 2014</p>
</footer>
</article>
Заключительные мысли по поводу секционных элементов
В этой статье вы узнали, как использовать секционные элементы HTML5 на странице. Использование этих элементов дает огромные преимущества. Одно из самых больших - семантическое понимание. Это позволит компьютерным программам лучше понимать структуру вашей страницы. Такая информация будет очень полезна для ридеров.
Заметка! Не все ридеры поддерживают современные HTML5 теги, поэтому используйте атрибут role, если вам нужна их поддержка.
Новые теги часто заставляют разработчиков задуматься о выборе того или иного элемента, однако это необходимо, чтобы ваша страница была семантически правильной и соответствовала стандарту HTML5.
Источник: teamtreehouse.com
-
Создано 03.03.2015 19:00:00
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.