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

Содержание

Тег | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 6.0+ 10.6+ 5.0+ 4.0+ 2.2+ 3.0+

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

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Задаёт раздел документа, может применяться для блока новостей, контактной информации, глав текста, вкладок в диалоговом окне и др. Раздел обычно содержит заголовок. Допускается вкладывать один тег <section> внутрь другого.

Синтаксис

<section>
</section>

Атрибуты

Для этого тега доступны глобальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>section</title>
 </head> 
 <body>
  <section>
   <h2>Съёмки фильма Полипропилен</h2>
   <p>История о том, как снимали фильм, где герои отдыхали на пляже, 
   потом пришёл антагонист, избил протагонистов, сбросил их в бассейн, 
   и что из этого получилось.</p>
  </section>
  <section>
   <h2>Хороший язык</h2>
   <p>История о том, как проходила студия изучения языка эсперанто, 
   в то время, как над ней, на веранде велась студия приколистов, 
   где травились анекдоты, и что из этого получилось.</p>
  </section>
 </body>
</html>

Браузеры

Internet Explorer до версии 8.0 включительно игнорирует тег <section>, но отображает его содержимое. Также в этом браузере любые стили не применяются к селектору SECTION.

Firefox полностью поддерживает этот тег начиная с версии 4.0, но версии 3.0 и старше также корректно отображают содержимое тега.

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

HTML теги

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

Тег <section> (раздел) служит для группировки взаимосвязанного содержимого.

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


Данный тег часто используется при верстке целевых страниц (англ. landing page, "посадочная страница") для логического разделения страницы на разделы.


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

<section> <!-- начало первой вложенной статьи -->
	<h3>Первый раздел</h3> 
	<p>Информация внутри раздела</p>
</section> <!-- конец первой вложенной статьи -->
<section> <!-- начало второй вложенной статьи -->
	<h3>Второй раздел</h3>
	<p>Информация внутри раздела</p>
</section><!-- конец второй вложенной статьи -->
Пример размещения тега <section> на странице.

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

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

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

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

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

Допускается помещать элементы <section> (раздел) в другие элементы <section>, но при этом рекомендуется учитывать следующую структуру документа:

<body>
	<h2>Заголовок первого уровня</h2>
	<section>
		<h3>Заголовок второго уровня</h3>
		<section>
			<h4>Заголовок третьего уровня</h4> 
		</section>
	</section>

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

Рис. 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">
			<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 по умолчанию

section {
display: block;
}

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

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

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

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

HTML теги

| HTML | WebReference

Задаёт раздел документа, может применяться для блока новостей, контактной информации, глав текста, вкладок в диалоговом окне и др. Раздел обычно содержит заголовок. Допускается вкладывать один элемент <section> (от англ.

section — раздел) внутрь другого.

Закрывающий тег

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>section</title>
 </head> 
 <body>
  <section>
   <h2>Съёмки фильма Полипропилен</h2>
   <p>История о том, как снимали фильм, где герои отдыхали на пляже, 
   потом пришёл антагонист, избил протагонистов, сбросил их в бассейн, 
   и что из этого получилось.</p>
  </section>
  <section>
   <h2>Хороший язык</h2>
   <p>История о том, как проходила студия изучения языка эсперанто, 
   в то время, как над ней, на веранде велась студия приколистов, 
   где травились анекдоты, и что из этого получилось.</p>
  </section>
 </body>
</html>

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

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

×

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 09.10.2018

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

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

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

12.0+ 9.0+ 4.0+ 6.0+ 11.1+ 5.0+

Описание

Содержимое HTML тега <section> представляет собой раздел веб-страницы. В этом контексте раздел - это тематическая группировка содержимого документа, как правило, с собственным заголовком.

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

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

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

Атрибуты

Тег <section> поддерживает Глобальные атрибуты и События

Стиль по умолчанию


section {
    display: block;
} 

Пример


<section>
  <h2>WWF</h2>
  <p>WWF - Всемирный фонд дикой природы появился в 1961 году...</p>
</section> 

Результат данного примера в окне браузера:

Пример использования тега <section>

| Справочник HTML



Элемент <section> (от англ. "section" ‒ «раздел, рубрика») представляет собой раздел веб-страницы. В этом контексте раздел — это тематическая группировка содержимого документа, как правило, с собственным заголовком.

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

Примечание: Каждый элемент <section>, расположенный на странице, может содержать собственный заголовок первого уровня (h2), так же есть возможность вложения одного такого элемента внутрь другого.

Синтаксис

<section>
  <h[1-6]> ... </h[1-6]>
  ...
</section>

Закрывающий тег

Обязателен.

Атрибуты

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Большинство браузеров отобразит элемент <section> со следующими значениями CSS по умолчанию:

section { 
    display: block;
}

Различия между HTML 4.01 и HTML5

Тег <section> был добавлен в HTML5.

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

Макет на основе элементов HTML5:

Пример HTML:

Попробуй сам
<section>
<h2>Заголовок</h2>
<p>Основной контент...</p>
</section>

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

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

Элемент
<section> 9+ 5+ 11+ Да 4.1+ 4+
Элемент
<section> 2.2+ 4+ 11+ 5+

Учебник HTML

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

HTML Элементы



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

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

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

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

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

Div

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

Section

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

<section>
  <h2>Последние новости</h2>
  ...
</section>

Article

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

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

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

  • Как правильно использовать теги div, section и article. Создано 02.11.2015 13:58:49
  • Как правильно использовать теги div, section и article. Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (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 справочник

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> <!-- конец основной статьи -->
Пример размещения тега <article> на странице.

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

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

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

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

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

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

Рис. 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">
			<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;
}

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

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

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

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

HTML теги

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

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