Section тег – Теги header, section, article и aside обязательно должны содержать заголовок и если да, обязательно h1?

<section>
<h2>Заголовок</h2>
<p>Основной контент...</p>
</section>

Спецификации

Поддержка браузерами

Учебник HTML

HTML уроки: Макеты веб-страниц

HTML Элементы

Как правильно использовать теги div, section и article.

Вы здесь: Главная — HTML — HTML 5 — Как правильно использовать теги div, section и article.

Всем привет! В этой статье мы рассмотрим, как правильно использовать теги div, section и article в HTML5.

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

Div

Если вы откроете сайт W3C, то можете найти там рекомендацию, смысл которой заключается в том, что использовать данный тег нужно для семантически несвязанного между собой контента. Очень часто div используют для того, чтобы сгруппировать какой-нибудь контент, который затем нужно спозиционировать или как-то оформить с помощью css.

Section

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

Article

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

Конечно, все зависит от конкретной ситуации, но чаще всего вы можете разметить свою страницу правильно, используя следующее правило: если контент семантически связан между собой и может быть изолирован со страницы без потери смысла, то используйте article. Если не может быть изолирован со страницы без потери смысла, используйте section. В остальных случаях – div.

Итак, на этом все. Надеюсь, что данная тема вам ясна и теперь вы будете размечать ваши интернет-странички грамотно. Спасибо за внимание и удачи!

• Создано 02.11.2015 13:58:49
• Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

   Она выглядит вот так:

2. Текстовая ссылка:
   <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

   Она выглядит вот так: Как создать свой сайт

3. BB-код ссылки для форумов (например, можете поставить её в подписи):
   [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Тег | HTML справочник

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

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

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

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

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

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

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

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

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">
			<h2>Главный заголовок сайта</h2>
			<p>Основное содержимое (тег <main>)</p>
			<section style = "background-color:grey; height:75px">
				<h3>Заголовок второго уровня</h3>
				<p>Раздел 1 (тег <section>)</p>
			</section>
			<section style = "background-color:grey; height:75px">
				<h3>Заголовок второго уровня</h3>
				<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> (верхний колонтитул) мы задали цвет заднего фона khaki и установили высоту элемента равную 100 пикселям.
• Следующим на странице мы разместили элемент <nav> (навигация), для которого задали те же встроенные CSS свойства, но указали цвет заднего фона coral, а высоту элемента 75 пикселей.
• Далее мы разместили элемент <aside>, который мы сделали плавающим и сместили в правую сторону (CSS свойство float со значением right), задали ему цвет заднего фона (tan), ширину (200 пикселей) и высоту (250 пикселей). Как вы можете заметить другие элементы его обтекают, не смотря на то, что они блочные. Таким образом происходит верстка плавающими элементами. Подробно изучить работу с плавающими элементами вы можете в учебнике CSS в статье «Плавающие элементы».
• Добавили на страницу элемент <main> в который мы добавили заголовок первого уровня (тег <h2>). Прдеполагается, что внутри этого элемента будет содержаться основной контент.
• Внутри элемента <main> мы добавили два тематических раздела (тег <section>), поместили внутри этих элементов заголовки второго уровня (тег <h3>), задали им цвет заднего фона grey и высоту блоков по 75 пикселей.
• После основного содержимого мы разместили элемент <footer> (нижний колонтитул), по аналогии с предыдущими элементами задали ему цвет заднего фона (khaki) и высоту (80 пикселей). Внутри него разместили тег <address>, в котором указали контактные данные, которые по умолчанию отображаются курсивом.

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

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

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

article {
display: block;
}

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

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

Атрибуты событий

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