Ниже приводится его перевод.
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.
Использование секционных элементов также помогает разработчикам больше задумываться о структуре своих веб-страниц.
Хотя выбор секционного элемента и очевиден, но он порождает важные вопросы о назначении и цели контента, а также, помогает понять, а относится ли вообще содержимое к этой странице?
Это пример того, как веб-стандарты помогают не только улучшить качество разметки, но и качество веб-страницы в целом.
ссылка на оригинал статьи http://habrahabr.ru/post/214407/
Добавить комментарий