Article html5

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


Article html5

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

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


Элемент 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”, здесь он указывает на важность этого элемента тем программам, которые еще не поддерживают элемент (например, некоторые скринридеры).


Можно использовать только один элемент

 на странице, который нельзя помещать внутри элементов , , , или .

Элемент article


Элемент должен содержать часть самодостаточной информации, которая может быть вырвана из контекста всей страницы без потери смысла. Это могут быть: новость, статья в блоге, комментарии пользователя.

<article> <header> <h1>Название статьи</h1> <p>Опубликовано: 13 февраля 2014</p> </header> <p> ... </p> </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>

В этом примере мы использовали элемент

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

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

Здесь мы использовали элемент

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

Элемент nav


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

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

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

.

Элемент aside


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

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

В этом примере мы использовали элемент

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

Элемент header


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

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

В этом примере элемент

 содержит заголовок и дату публикации новостной статьи.

Элемент footer


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

<footer> Copyright Matt West 2014 </footer>

Так же как

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

Элемент address


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

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

Этот элемент часто используется внутри элемента

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

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


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

habr.com

HTML5 новые тэги time, figure, video, audio, canvas

Продолжаем рассматривать новый язык разметки веб-сайтов — HTML5. Если вы еще ничего не слышали о нем, то вэлкам во Введение в HTML5 и первые шаги в HTML5.

Сегодня поговорим о новых тэгах в HTML5. И для начала рассмотрим наиболее глобальные: section, article, header, footer, nav, aside и hgroup.

Тэги header и footer

Как уже отмечалось ранее, HTML5 во многом более семантически правильный стандарт. Отдельные характерные части веб-сайта названы, наконец, своими унифицированными именами, дабы в дальнейшем не возникало никакой путаницы: header — верхняя секция сайта, footer — нижняя, nav — блок навигации и т.д.

По сути, это избавляет от необходимости использовать нейтральный тэг DIV для обозначения данных частей сайта.

Можно, например, типичную запись:

<div id="header">
<h1><a href="http://www.examplesite.com/">Самый сайт</a></h1>
</div>

переписать по-новому так:

<header>
<h1><a href="http://www.examplesite.com/">Самый сайт</a></h1>
</header>

И в файле стилей CSS соответственно прописать набор правил непосредственно для тэга header.

Однако в этом есть одна закавыка. Дело в том, что большинство браузеров пока еще не знают, что эти новые тэги являются блочными элементами и считают их строковыми, как те же тэги ссылок <a> или картинок <img>, например. Поэтому в файле стилей CSS для таких тэгов необходимо принудительно прописывать их блочный характер:

header, footer, nav, article {display: block;}

Окей! Если с семантикой тэгов header, footer все более менее понятно, то остальные тэги стоит рассмотреть более внимательно.

Тэг nav

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

Тэг aside

aside — является объединяющим тэгом, более всего подходящим для выделения сайдбара. В него могут входить как блоки nav, так и другие элементы, не являющиеся по-сути навигационными (рекламные баннеры, фотография автора и информация о нем, кнопки социалок и пузомерки и т.д.).

Тэг section

section — также объединяющий тэг. Причем он может выступать в разных ролях: либо разделять страницу на несколько тематических областей (например, выделить и, тем самым, обособить от шапки и подвала центральную часть с контентом и сайдбаром), либо разделять на отдельные секции (читай параграфы) непосредственно статью на странице.

Тэг article

article — служит для разбивки страницы на отдельные статьи.

Оба тэга section и article обладают рядом интересных особенностей.

Например, вы можете теперь смело использовать заголовок первого уровня h1 на одной странице несколько раз, что ранее было недопустимо.

Кроме того, тэг section может быть как родительским элементом для article, так и разделять саму статью article на несколько секций. Т.е. вполне возможна такая конструкция:

<section>
<article>
<section></section>
<section></section>
</article>
<article>
<section></section>
<section></section>
</article>
</section>

Тэг hgroup

hgroup — тэг призван группировать заголовки страницы в одну логическую единицу.

Например, главный заголовок всей страницы h1 и описание к ней, оформленное тэгом h3. На странице в дальнейшем еще несколько раз могут использоваться тэги h3 для других целей. Чтобы логически отделить описание страницы от других тэгов h3, мы его объединяем с главным тэгом h1 в группу, которая и обозначается тэгом hgroup:

<hgroup>
<h1>Самый сайт</h1>
<h3>Здесь описание Самого сайта</h3>
</hgroup>

UPD 24.02.2017: Значительно позже написания данной статьи появился еще один тег — main. Сначала дадим его общее определение, а потом расскажу подробнее, зачем он нужен и нужен ли вообще.

www.websovet.com

Значение и применение

Тег <article>html5 (статья) применяется для обозначения раздела страницы, содержащего завершенную, независимую композицию. Данный элемент может содержать в себе такую информацию как запись блога, товар в интернет-магазине, пост на форуме, газетная статья, любой другой независимый элемент содержимого или просто основной текст страницы.

Элемент должен иметь в качестве дочернего (вложенного) элемента заголовок от <h2> до <h6> (если до этого не использовался <h1>, то допускается его разовое размещение). Внутри тега <article>html5 могут содержаться другие одноименные элементы с близким по смыслу содержимым.

 <article> <!-- начало основной статьи --> 	<h1>Статьи о птицах</h1><!-- заголовок первого уровня (если был использован в документе, то h2, а во вложенных h3) --> 	<p>Вводная информация о птицах...</p> 	<article> <!-- начало первой вложенной статьи --> 		<h2>Статья о воробье</h2>  		<p>Информация про воробьев...</p> 	</article> <!-- конец первой вложенной статьи --> 	<article> <!-- начало второй вложенной статьи --> 		<h2>Статья о синице</h2> 		<p>Информация про синиц...</p> 	</article><!-- конец второй вложенной статьи --> </article> <!-- конец основной статьи --> 
Пример размещения тега <article> на странице.
Пример размещения тега <article> на странице.

Совместное использование тегов <section>html5 и <article>html5

Обратите внимание, что допускается в качестве дочернего (вложенного) элемента тега <article>html5 использовать тег <section>html5 (раздел), как бы разбивая по смыслу содержимое. При этом необходимо, чтобы элемент <article>html5 и вложенные элементы <section>html5 имели в качестве дочернего (вложенного) элемента заголовок от <h2> до <h6> (если до этого не использовался <h1>, то допускается его разовое размещение внутри <article>html5).

Пример размещения тега <section> внутри <article>.
Пример размещения тега <section> внутри <article>.

По аналогии с вышерассмотренным примером допускается помещать элементы <article>html5 внутрь элементов <section>html5, формируя при этом разделы с тематической информацией. При этом на элементы действуют те же правила по размещению заголовков:

Пример размещения тега <article> внутри <section>.
Пример размещения тега <article> внутри <section>.

Тег <div> имеет довольно общий характер — это просто элемент на уровне блока, используемый для разбиения страницы на разделы. Одна из целей HTML 5 заключается в предоставлении в распоряжение разработчиков широкого выбора из других, семантически более осмысленных тегов.

Рис. 43 Человек, который использует только тег <div>.
Рис. 43 Человек, который использует только тег <div>.

HTML 5 включает в себя множество различных тегов, чьи имена отражают тип их содержимого, и эти теги могут использоваться вместо тега <div>. HTML 5 предлагает новые блочные семантические элементы для определения различных частей веб-страницы, вы можете детально с ними познакомиться в статье учебника HTML 5 «Теги разметки страницы».

Пример использования

Рассмотрим пример в котором сделаем простую разметку для сайта, используя современный стандарт гипертекстовой разметки HTML5.

 <!DOCTYPE html> <html> 	<head> 		<title>Разметка страницы</title> 	</head> 	<body> 		<header style = "background-color:khaki; height:100px"> 			<p>Верхний колонтитул (тег <header>)</p> 		</header> 		<nav style = "background-color:coral; height:75px"> 			<a href = "#">Ссылка 1</a> | 			<a href = "#">Ссылка 2</a> | 			<a href = "#">Ссылка 3</a> | 		<p>Панель навигации (тег <nav>)</p> 		</nav> 		<aside style = "float:right; width:200px; height:250px; background-color:tan"> 			<p>Справа мы разместили тег <aside></p> 		</aside> 		<main style = "height:250px"> 			<h1>Главный заголовок сайта</h1> 			<p>Основное содержимое (тег <main>)</p> 			<section style = "background-color:grey; height:75px"> 				<h2>Заголовок второго уровня</h2> 				<p>Раздел 1 (тег <section>)</p> 			</section> 			<section style = "background-color:grey; height:75px"> 				<h2>Заголовок второго уровня</h2> 				<p>Раздел 2 (тег <section>)</p> 			</section> 		</main> 		<footer style = "background-color:khaki; height:80px"> 			<p>Нижний колонтитул (подвал) тег <footer></p>  			<address>Пример с сайта basicweb.ru</address> 		</footer> 	</body> </html> 

Обратите внимание, что практически к каждому элементу для демонстрации мы применили встроенный CSS стиль, применение встроенных стилей не является хорошей практикой, научиться грамотно применять стили вы можете после изучения языка HTML 5 в Учебнике CSS 3.

И так по порядку, что мы сделали в этом документе:

  • Для элемента <header>html5 (верхний колонтитул) мы задали цвет заднего фона khaki и установили высоту элемента равную 100 пикселям.
  • Следующим на странице мы разместили элемент <nav>html5 (навигация), для которого задали те же встроенные CSS свойства, но указали цвет заднего фона coral, а высоту элемента 75 пикселей.
  • Далее мы разместили элемент <aside>html5, который мы сделали плавающим и сместили в правую сторону (CSS свойство float со значением right), задали ему цвет заднего фона (tan), ширину (200 пикселей) и высоту (250 пикселей). Как вы можете заметить другие элементы его обтекают, не смотря на то, что они блочные. Таким образом происходит верстка плавающими элементами. Подробно изучить работу с плавающими элементами вы можете в учебнике CSS в статье «Плавающие элементы».
  • Добавили на страницу элемент <main>html5 в который мы добавили заголовок первого уровня (тег <h1>). Прдеполагается, что внутри этого элемента будет содержаться основной контент.
  • Внутри элемента <main>html5 мы добавили два тематических раздела (тег <section>html5), поместили внутри этих элементов заголовки второго уровня (тег <h2>), задали им цвет заднего фона grey и высоту блоков по 75 пикселей.
  • После основного содержимого мы разместили элемент <footer>html5 (нижний колонтитул), по аналогии с предыдущими элементами задали ему цвет заднего фона (khaki) и высоту (80 пикселей). Внутри него разместили тег <address>, в котором указали контактные данные, которые по умолчанию отображаются курсивом.

Результат нашего примера:

Разметка страницы на HTML 5

Разметка страницы на HTML 5.

Значение CSS по умолчанию

 article { display: block; } 

Поддержка глобальных атрибутов

Элемент поддерживает «глобальные атрибуты».

basicweb.ru

В формате разметки HTML5 появились новые элементы, которые служат заменой для обычных блочных элементов с атрибутами class и id, например <div class="article"> или <div id="page">.

Рассмотрим три элемента, которые легко можно спутать друг с другом:

  • div — «базовый контейнер», который мы все знаем и любим. Это обычный блочный элемент без какого-либо семантического значения.
  • section — «документ или раздел приложения». Обычно содержит верхний (header) и нижний (footer) колонтитулы. Это несколько схожих по смыслу статей, подраздел одной большой статьи, главная часть страницы (например, раздел новостей) или страница интерфейса с закладками.
  • article — «независимая часть документа или сайта». Эта часть должна иметь смысл вне зависимости от остального содержания. Например, это может быть статья в блоге или форуме, комментарий. Так же как и section внутри этого тега могут размещать верхний и нижний колонтитулы.

Описание на whatwg.org

Разница между div, section и article

В HTML4 div использовался как базовый элемент разметки. Он не имел особого семантического значения. Так же не было особых требований на его содержимое и взаимоотношение между ним внутри блока.

Элемент section

Новый элемент section очень похож на div, т.к. используется как контейнер, но он уже имеет особое семантическое значение — объекты, которые располагаются внутри него, объединены общим смыслом.

Так же этот элемент служит для разбивки текста на разделы.

Элемент article

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

Что выбрать?

Если проводить аналогию с HTML4, то можно сравнить эти теги с p и blockquote. Оба тега — блочные элементы, но blockquote, как разновидность p, имеет значение «блок цитируемого текста». То же самое и с section и article: тег section обозначает близкий по смыслу текст, а тег article обозначает осмысленную часть этого текста.

Смущающим обстоятельством является то, что section может быть использована для различных частей страницы (главная колонка, раздел новостей и т.п. на одной странице) и содержать article, а так же для дробления большого article (т.е. использоваться внутри article).

Чтобы определиться, какой из элементов выбрать, можно использовать алгоритм:

  1. Будет ли содержимое иметь осмысленное значение само по себе, например, при публикации в RSS-потоке? Если да, то выбираем article
  2. Если части содержимого объединены общим значением, то выбираем section
  3. Наконец, если нет никакого семантического значения, то выбираем div

Элемент section, за редким исключением, не должен использоваться, если у него нет заголовка. Если при автоматическом построении содержания документа будут встречаться не именованные разделы, то, вероятно, разметка сделана не верно. Однако наличие не именованных элементов nav и aside может быть вполне типичным явлением.

Итак, элемент section не стоит использовать если:

  1. требуется блочный элемент для декорирования. Это функция элемента div
  2. в этом месте для разметки содержимого больше по смыслу подходят элементы article, aside или nav
  3. у раздела нет естественного заголовка

Элементы section и article используются аналогично div в HTML4. Они не должны встречаться внутри p, blockquote или address.

Пример использования

<header>  <h1>Название сайта</h1>  <nav>  <ul>  <li><a href="page1.html">Страница 1</a></li>  <li><a href="page2.html">Страница 2</a></li>  <li><a href="page3.html">Страница 3</a></li>  </ul>  </nav> </header> <section>  <h2>Свежие статьи</h2>  <article>  <h2>Заголовок статьи 1</h2>  <p>Текст статьи</p>  </article>  <article>  <h2>Заголовок статьи 2</h2>  <p>Текст статьи</p>  <aside>Дополнительная информация, относящаяся к статье 2</aside>  </article> </section> <aside>  <section>  <h3>Blogroll</h3>  </section>  <section>  <h3>Реклама</h3>  </section> </aside> <footer>  <p>Копирайты</p> </footer> 

По мотивам http://oli.jp/2009/html5-structure1/

You May Also Like

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.