От автора: В HTML5 представлены несколько секционных элементов, которые можно применять для разметки веб-страниц. Использование таких элементов передает страницам больше семантического смысла, позволяя компьютерным программам лучше понимать ваш контент.
Из этого поста вы узнаете, как применять элементы секционирования в собственных веб-сайтах. Я поясню, когда следует пользоваться данными элементами, а когда другими, а также когда лучше всего придерживаться старого доброго div.
Элемент main
Элемент main должен содержать основной контент вашей веб-страницы. Ему следует быть единственным в своем роде для отдельной страницы, и он не должен появляться на сайте где-то еще. Любой контент, повторяющийся на нескольких страницах (логотипы, поля поиска, ссылки нижнего колонтитула и пр.), помещать в элемент main нельзя.
В нижеприведенном примере элемент main применяется для представления основного содержимого страницы.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<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> |
Заметьте: мы применили здесь атрибут ARIA role=”main” для указания на значимость этого элемента для программ, которые пока не поддерживают элемент main (таких как некоторые screen reader-ы).
На странице следует использовать всего один элемент main, и его нельзя размещать внутри элементов article, aside, header, footer или nav.
Элемент article
В элементе article должен содержаться фрагмент автономного содержимого, которое можно распределять вне контекста страницы. Оно включает в себя новые статьи, посты блогов или комментарии пользователей.
|
1 2 3 4 5 6 7 8 9 |
<article> <header> <h1>Blog Post Title</h1> <p>Posted 13th February 2014</p> </header> <p> ... </p> </article> |
Элементы article можно размещать один в другом. В данном случае подразумевается, что вложенные элемент связаны с внешним элементом article.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<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
Элемент section применяется для представления группы связанного содержимого. Он аналогичен элементу article с тем лишь отличием, что содержимому внутри элемента section не обязательно иметь смысл вне контекста страницы.
Для определения темы раздела советуем пользоваться элементом заголовков (h1 – h6).
Воспользуемся данным постом блога как примером: можно взять элементы section, представляющие внутри поста каждый раздел по отдельности.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<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 также отлично подходит для оглавления или просмотра списка блогов.
|
1 2 3 4 5 6 7 |
<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.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееЭлемент aside
Элемент aside применяется для представления содержимого, четко связанного с окружающим его контентом, но которое можно счесть отдельным. Это включает боковые колонки (такие, как можно видеть в книге), группы элементов nav, цифровые данные и извлеченные цитаты.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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 внутри новостной статьи мы воспользовались элементом aside. Пользователь может счесть информацию о компании в aside полезной, но с новостями она напрямую не связана.
Элемент header
Элемент header применяется для представления вводного содержимого к статье или веб-странице. Обычно он содержит элемент заголовка, а также существенные для содержимого метаданные, такие как дата поста или новостной статьи, например. В нем также может содержаться оглавление (в элементе nav) более длинного документа.
Элемент header будет связан с ближайшим элементом секционирования, обычно это прямой родительский элемент страничной структуры.
|
1 2 3 4 |
<header> <h1>Google buys Nest</h1> <p>Posted at 11:34am 13th January 2014</p> </header> |
В данном примере элемент header содержит заголовок и дату новостной статьи.
Элемент footer
Элемент footer используется для представления информации о разделе: автор, копирайт или ссылки на связанные веб-страницы.
|
1 2 3 |
<footer> Copyright Matt West 2014 </footer> |
Как и в случае с header, элемент footer связывается с ближайшим элементом секционирования.
Элемент address
Элемент address — один из самых неверно понимаемых элементов HTML. Он предназначен не для разметки почтового адреса, а для представления контактной информации статьи или веб-страницы. Это может быть ссылка на сайт автора или его электронный адрес.
|
1 2 3 |
<address> Contact <a href="mailto:matt@example.com">Matt West</a> </address> |
Этот элемент часто используется внутри footer для article.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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 при разметке веб-страниц. Их применение гарантирует массу преимуществ. Одно из основных – передача определенным областям страницы более семантического значения, создание возможности для компьютерных программ идентифицировать ключевые элементы, такие как основной контент и страничная навигация. Эта информация чрезвычайно важна для таких приложений, как screen reader-ы.
Обратите внимание: не все скринридеры пока могут похвастать поддержкой этих семантических элементов. Для безопасности вам, может быть, придется продолжить пользоваться ролями ARIA.
Еще применение элементов секционирования дает следующее преимущество: оно заставляет разработчиков лучше обдумывать структуру своих веб-страниц. Выбор того, какой элемент применить для очередного фрагмента содержимого, не всегда однозначен, но он поднимает важный вопрос целей этого содержимого, и отведено ли ему вообще место на этой странице. Это пример, где веб-стандарты помогают улучшить не только качество разметки, но и качество веб-страниц вообще.
Мне интересно узнать, что вы думаете об элементах секционирования HTML5. Поделитесь своим мнением в разделе комментариев под постом.
Автор: Matt West
Источник: //blog.teamtreehouse.com/
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Комментарии (2)