section
Defines sections in a document, such as chapters, headers, footers, or any other sections of the document. It is new to HTML5.
Overview Table
A section is a thematic grouping of content, typically with a heading. Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A website’s home page could be split into sections for an introduction, news items, and contact information. The section element is not a generic container element. Authors are encouraged to use the div element for styling purposes or when an element is needed as a convenience for scripting. The section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.
Examples
In the following example, an article (part of a larger document about apples) contains two short sections.
The rank of h1-h6 elements is determined by the number in their name. The h1 element is said to have the highest rank; the h6 element has the lowest rank. Two elements with the same name have the same rank. The default style applied to hn elements varies according to the rank of the element. However, the rank of headings that appear within a section element is automatically reduced. This affects the visual appearance of the headings inside the section element. In the following example, the author uses h1 elements without worrying whether a particular section is at the top level, the second level, the third level, and so on. The two outlines produce equivalent output.
<section> — элемент секции
HTML-элемент <section> представляет собой автономный раздел — который не может быть представлен более точным по семантике элементом — внутри HTML-документа. Как правило, но не всегда, разделы имеют заголовок.
Интерактивный пример
Например, меню навигации должно быть помещено в элемент <nav> , но список результатов поиска и отображение карты с её элементами управления не имеют специфических элементов и могут быть помещены в <section> .
Примечание: Если содержимое элемента имеет смысл объединить как единое целое (в цельный и независимый блок), то элемент <article> может стать лучшим выбором.
HTML5 — Элемент section
Элемент section используется для создания секции в документе, которая группирует некоторый тематический контент вместе. Для каждой секции в документе следует указывать её название (тему). Это, как правило, осуществляется с помощью заголовков (элементов h1 — h6 ).
Элементы section , обычно применяются в следующих случаях:
- для разметки разделов внутри секции. Например, для разметки глав в статье, вкладок в диалоговом окне, разделов в диссертации и т.п.
- для группировки нескольких секций в одну тематическую группу. Например, для группировки последних новостей на сайте, комментариев к статье и т.п.
Применение элемента section
Например, рассмотрим фрагмент кода страницы, содержащий статью с комментариями. Каждый из комментариев, оставленных пользователем на странице, содержит некоторый завершенный контент и, следовательно, может рассматриваться как элемент article . Но, в тоже время все комментарии представляют некоторую тематическую группу, и следовательно их можно поместить в элемент section , т.е. данный элемент сгруппирует все эти комментарии на странице вместе.
Вышеприведенный пример будет иметь следующую структуру (outline):
Например, рассмотрим применение элементов section для создания разделов внутри элемента article :
Вышеприведенный пример будет иметь следующую структуру (outline):
Ограничения при использовании элемента section
Элемент section в HTML 5 не является универсальным элементом для группировки содержимого, т.е. его не следует использовать для оборачивания любого понравившегося контента. Его основное назначение это добавление семантики в документ и создание его структуры (outline).
Когда автору необходимо сгруппировать контент, только для того, чтобы применить к нему стили или поработать с ним в сценарии JavaScript, ему в этом случае лучше всего будет воспользоваться элементом div . Элемент div в отличие от элемента section , не добавляет семантики в документ и не участвует в создании его структуры (outline).
Отличие между элементами section и article
Элементы section и article хоть и кажутся на первый взгляд очень похожими, но имеют различное семантическое значение. Элемент article предназначен для группирования контента, который представляет собой нечто завершённое, самостоятельное и которое может рассматриваться отдельно от остального содержимого страницы. А элемент section несёт в себе другой семантический смысл, он предназначен для группировки контента, который является составной частью чего-то другого.
Но как автору узнать, что собой представляет некоторый контент на странице? Давайте рассмотрим это на примере фрагмента статьи. Фрагмент — это часть статьи и, следовательно, для группировки его контента необходимо применять элемент section . Но этот же фрагмент, уже оставленный в качестве комментария, будет представлять собой нечто целое, завершенное. Следовательно, в этом контексте для его группировки можно использовать элемент article . Но рассуждать, конечно, можно и наоборот. Поэтому, какой элемент использовать для группировки контента, в большинстве случаев зависит от вашего субъективного мнения как автора. Но самое главное в этом подходе поддерживаться выбранной позиции. Поэтому чем автор будет более последовательным в создании структуры, тем он сможет больше смысла в неё вложить.
HTML <section> Tag
<section>
<h2>WWF History</h2>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h2>WWF’s Symbol</h2>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>
Definition and Usage
The <section> tag defines a section in a document.
Browser Support
The numbers in the table specify the first browser version that fully supports the element.
| Element | |||||
|---|---|---|---|---|---|
| <section> | 5.0 | 9.0 | 4.0 | 5.0 | 11.5 |
Global Attributes
The <section> tag also supports the Global Attributes in HTML.
Event Attributes
The <section> tag also supports the Event Attributes in HTML.
Related Pages
Default CSS Settings
Most browsers will display the <section> element with the following default values: