понедельник, 3 марта 2014 г.

[Из песочницы] Как использовать секционные элементы HTML5

Один славный малый Matt West c туманного альбиона, промышляющий фрилансом и предпринимательством, предложил нашему вниманию пост: «Как использовать секционные элементы HTML5».

Ниже приводится его перевод.





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

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

Давайте начнем.


Элемент main




Элемент <main> должен содержать главный контент вашей вебстраницы. Причем, все содержимое должно быть уникально на странице и не должно отображаться где-либо еще на сайте.

Повторяющийся на нескольких страницах контент (логотип, окно поиска, ссылки в футере и т.д.) не следует помещать внутри элемента <main>.

Ниже приводится пример представления главного содержимого страницы.

<body>
  <header>
    <div id="logo">Журнал Rocking Stone</div>
    <nav>...</nav>
  </header>
  <main role="main">
    <h1>Гитары</h1>
    <p>Величайшие гитары современности</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>Название статьи</h1>
    <p>Опубликовано: 13 февраля 2014</p>
  </header>
  <p>
    ...
  </p>
</article>




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

<article>
  <header>
    <h1> Название статьи</h1>
    <p> Опубликовано: 13 февраля 2014</p>
  </header>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <section>
    <h2>Комментарии</h2>
    <article>
      <footer>
        <p>Автор: Джо Балок</p>
      </footer>
      <p>Это была интересная статья</p>
    </article>
    <article>
      <footer>
        <p> Автор: Кейси Брок</p>
      </footer>
      <p>Как ты связываешь это с мировым превосходством? </p>
    </article>
  </section>
</article>




В этом примере мы использовали элемент <article>, чтобы выделить саму статью и каждый комментарий к ней. Такая схема вложенности позволяет отнести комментарии к тексту статьи.

Элемент section




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

Рекомендуется использовать теги (<h1> – <h6>) для обозначения темы секции.

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

<article>
  <h1>Как использовать секционные элементы HTML5</h1>
  <p>...</p>

  <section>
    <h2>Элемент main</h2>
    <p>...</p>
  </section>
  <section>
    <h2>Элемент article </h2>
    <p>...</p>
  </section>
  <section>
    <h2>Элемент section</h2>
    <p>...</p>
  </section>
  ...
</article>




Здесь мы использовали элемент <article> для всей статьи и несколько элементов <section> для выделения подзаголовков, обсуждаемых в посте.

Если вы хотите сгруппировать контент для последующей стилизации, в этом случае нужно использовать элемент <div> вместо <section>.

Элемент nav




Элемент <nav> используется для разметки группы ссылок на внешние страницы или разделы внутри текущей страницы. Он хорошо подходит как для основной навигации по сайту, так и по оглавлению или постам.

<nav>
  <ul>
    <li><a href="#chapter-one">Глава первая</a>
    <li><a href="#chapter-two">Глава вторая</a>
    <li><a href="#chapter-three">Глава третья</a>
  </ul>
</nav>




Разметка ссылок как списка упрощает навигацию, хотя и не требуется при использовании элемента <nav>.

Элемент aside




Элемент <aside> используется для выделения содержания, непосредственно связанного с окружающим контентом, но которое может рассматриваться и отдельно. Это могут быть боковые сноски (как в книгах), группы элементов <nav>, цифры или цитаты.

<article>
  <header>
    <h1>Компания Google покупает Nest</h1>
    <p>Опубликовано: 13 января 2014</p>
  </header>
  <p>...</p>
  <p>...</p>

  <aside>
    <h1>Google (GOOG)</h1>
    <p>Компания Google была основана в 1998 году Ларри Пейджем и Сергеем Брином. Компания ...</p>
  </aside>
</article>




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

Элемент header




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

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

<header>
    <h1>Компания Google покупает Nest</h1>
    <p>Опубликовано: 13 января 2014</p>
</header>




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

Элемент footer




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

<footer>
Copyright Matt West 2014
</footer>




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

Элемент address




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

<address>
  Контакты <a href="mailto:matt@example.com">Matt West</a>
</address>




Этот элемент часто используется внутри элемента <footer>, который в свою очередь располагается внутри элемента <article>.

<article>
  <header>
    <h1>Компания Google покупает Nest</h1>
    <p>Опубликовано: 13 января 2014</p>
  </header>
  <p>...</p>
  <p>...</p>
  <footer>
    <address>
      Автор <a href="mailto:matt@example.com">Matt West</a>
    </address>
    <p>Copyright Matt West 2014</p>
  </footer>
</article>


Заключение




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

Одно из самых больших – это придание семантического значения определенным областям вашей веб-страницы, позволяющего компьютерным программам (скринридерам) идентифицировать ключевые элементы содержания и навигации.


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

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

Хотя выбор секционного элемента и очевиден, но он порождает важные вопросы о назначении и цели контента, а также, помогает понять, а относится ли вообще содержимое к этой странице?

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

This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at http://ift.tt/jcXqJW.


на

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

Отправить комментарий