Следить за новостями:

Категории
Свежие записи
BrainFБлог

Как использовать секционные элементы html5

Вместе с HTML5 был внедрен ряд секционных элементов для разметки веб-страниц, разбивающих вашу страницу на семантические блоки, позволяя компьютерным программам лучше понять ваш контент.

В этой статье вы узнаете как и когда использовать секционные элементы в ваших сайтах. Я объясню когда лучше воспользоватся одними элементами, когда другими, а также когда лучше не забыть про старый добрый <div>. Приступим.

Элемент 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>

Примечание: Мы использовали ARIA атрибут role=»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> для выделения записи в блоге, а также для каждого из комментариев, подчеркивая связь комментариев с основной темой блогозаписи.

<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>

Элемент section

Элемент <section> используется для представления группы связанного контента. Он похож на элемент <article> с тем отличием что содержание <section> не обязательно должно иметь смысл вне контекста страницы.

Желательно  использовать элемент заголовка (<h1> — <h6>) для определения темы раздела.

Используя этот блог в качестве примера, можно было бы поместить каждую из отдельных частей этой статьи в элемент <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

<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>

В данном примере <aside> используется для того чтобы отделить информацию о Google внутри статьи. Информация о компании внутри <aside> может быть интересна читателю, но она не связанна напрямую с основной статьей.

Элемент header

<header> используется для представления вводного содержимого в статье или веб-странице. Как правило содержит элемент заголовка, а также некоторые метаданные, относящиеся к контенту, например, дату публикации. Также <header> может содержать оглавление (представленное элементом <nav>) для объемного документа.

Элемент <header> связан с ближайшим секционным элементом, которым как правило является прямой родитель в структуре страницы.

<header>
 <h1>Google buys Nest</h1>
 <p>Posted at 11:34am 13th January 2014</p>
</header>

В примере <header> содержит заголовок и дату публикации новости.

Элемент footer

Элемент <footer> может быть использован для представления информации о секции, например, такой как автор, сведения об авторских правах или ссылки на соответствующие веб-страницы.

<footer>
  Copyright Matt West 2014
</footer>

Как и <header>, элемент <footer> связан с ближайшим секционным элементом.

Элемент address

<address> является одним из самых неоднозначных html элементов. Он предназначен не для разметки почтового адреса, а для представления контактной информации для статьи или веб-страницы. Это может быть ссылка на сайт автора или его электронная почта.

<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 при разметке веб-страниц. Их использование имеет ряд преимуществ, одним из которых является тот факт что секционные элементы обозначивают смысловое значение определенных участков страницы, позволяя компьютерным программам находить ключевые элементы, такие как основное содержание и навигация по страницам. Эта информация является очень полезной для таких приложений как скринридеры.

Примечание: Не все скринридеры поддерживают эти семантические элементы. В таком случае вы можете совмещать их использование с использованием ARIA ролей.

Используя секционные элементы разработчикам приходится больше задумываться о структуре своих веб-страниц. Выбор элемента для части содержимого не всегда очевиден, но поднимает вопросы о целях этого содержимого и необходимости его принадлежности к странице. Это пример того как веб-стандарты помогают улучшить не только качество разметки, но и веб-страниц в целом.

Статья является вольным переводом. Почитать оригинал вы можете здесь

Еще по теме

Ваш комментарий
выберите имя