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

Как пользоваться секционными элементами 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 (таких как некоторые screen reader-ы).

На странице следует использовать всего один элемент 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

Элемент 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 также отлично подходит для оглавления или просмотра списка блогов.

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

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

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

Обратите внимание: не все скринридеры пока могут похвастать поддержкой этих семантических элементов. Для безопасности вам, может быть, придется продолжить пользоваться ролями ARIA.

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

Мне интересно узнать, что вы думаете об элементах секционирования HTML5. Поделитесь своим мнением в разделе комментариев под постом.

Автор: Matt West

Источник: http://blog.teamtreehouse.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (2)

  1. SkyNoSky

    » что вы думаете об элементах секционирования HTML5.» Я думаю это давно должно было произойти. С ними код становится ещё более читабельным и благородным, и как автор статьи заметил «оно заставляет разработчиков лучше обдумывать структуру своих веб-страниц.».
    Соответственно наверное наступила пора, изменять\публиковать статьи и уроки используя новые элементы. Сам использую и это действительно удобно.

  2. Евгений

    Сейчас применение новых тегов уже состоявшаяся действительность. Особенно удручало написание доктайпов в xhtml. У меня кстати уже все переведено на хтмл5.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree