Html css section class

: The Generic Section element

The HTML element represents a generic standalone section of a document, which doesn’t have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions.

Try it

Attributes

This element only includes the global attributes.

Usage notes

As mentioned above, is a generic sectioning element, and should only be used if there isn’t a more specific element to represent it. As an example, a navigation menu should be wrapped in a element, but a list of search results or a map display and its controls don’t have specific elements, and could be put inside a .

Also consider these cases:

• If the contents of the element represent a standalone, atomic unit of content that makes sense syndicated as a standalone piece (e.g. a blog post or blog comment, or a newspaper article), the element would be a better choice.
• If the contents represent useful tangential information that works alongside the main content, but is not directly part of it (like related links, or an author bio), use an .
• If the contents represent the main content area of a document, use .
• If you are only using the element as a styling wrapper, use a instead.

To reiterate, each should be identified, typically by including a heading (h1 — h6 element) as a child of the element, wherever possible. See below for examples of where you might see a without a heading.

Examples

Simple usage example

Before

div> h2>Headingh2> p>Bunch of awesome contentp> div> 

Result

After

section> h2>Headingh2> p>Bunch of awesome contentp> section> 

Result

Using a section without a heading

Circumstances where you might see used without a heading are typically found in web application/UI sections rather than in traditional document structures. In a document, it doesn’t really make any sense to have a separate section of content without a heading to describe its contents. Such headings are useful for all readers, but particularly useful for users of assistive technologies like screen readers, and they are also good for SEO.

Consider however a secondary navigation mechanism. If the global navigation is already wrapped in a element, you could conceivably wrap a previous/next menu in a :

section> a href="#">Previous articlea> a href="#">Next articlea> section> 

Or what about some kind of button bar for controlling your app? This might not necessarily want a heading, but it is still a distinct section of the document:

section> button class="reply">Replybutton> button class="reply-all">Reply to allbutton> button class="fwd">Forwardbutton> button class="del">Deletebutton> section> 

Result

Depending on the content, including a heading could also be good for SEO, so it is an option to consider.

Technical summary

Content categories	Flow content, Sectioning content, palpable content.
Permitted content	Flow content.
Tag omission	None, both the starting and ending tag are mandatory.
Permitted parents	Any element that accepts flow content. Note that a element must not be a descendant of an element.
Implicit ARIA role	region if the element has an accessible name, otherwise no corresponding role
Permitted ARIA roles	alert , alertdialog , application , banner , complementary , contentinfo , dialog , document , feed , log , main , marquee , navigation , none , note , presentation , search , status , tabpanel
DOM interface	HTMLElement

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 7, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

HTML class Attribute

The Night Watch (Dutch: De Nachtwacht), is a 1642 painting by Rembrandt van Rijn. It is in the collection of the Amsterdam Museum but is prominently displayed in the Rijksmuseum (State Museum) as the best-known painting in its collection. The Night Watch is the most famous Dutch Golden Age painting.

 .section-class 
The Night Watch 
The Night Watch (Dutch: De Nachtwacht), is a 1642 painting by Rembrandt van Rijn. It is in the collection of the Amsterdam Museum but is prominently displayed in the Rijksmuseum (State Museum) as the best-known painting in its collection. The Night Watch is the most famous Dutch Golden Age painting.
 
 

Using class

Classes (i.e. classnames) are used for styling the section element. Multiple classnames are separated by a space. JavaScript uses classes to access elements by classname.

Syntax

Values

More Examples

The Night Watch

The Night Watch (Dutch: De Nachtwacht), is a 1642 painting by Rembrandt van Rijn. It is in the collection of the Amsterdam Museum but is prominently displayed in the Rijksmuseum (State Museum) as the best-known painting in its collection. The Night Watch is the most famous Dutch Golden Age painting.
Toggle class

 .section-bg < background: moccasin; padding: 20px; width: 400px; line-height: 1.7em; >.section-border 
The Night Watch 
The Night Watch (Dutch: De Nachtwacht), is a 1642 painting by Rembrandt van Rijn. It is in the collection of the Amsterdam Museum but is prominently displayed in the Rijksmuseum (State Museum) as the best-known painting in its collection. The Night Watch is the most famous Dutch Golden Age painting.
 
 
Toggle class let toggle = () => 

Источник

div, section, article — где использовать каждый тег

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

Итак, теги и были придуманы для более осмысленного семантического разделения вашего контента, как альтернатива единственному

Назначение элементов

Это общий элемент, служит для группировки любого типа контента. По умолчанию имеет блочное отображение. Никак дополнительно не связывет обёрнутный в него контент, что может привести к неприятным сюрпризам, при использовании экранных читалок. Официальная документация на W3C говорит о том, что элемент стоит использовать как крайнюю меру, когда нет возможности найти более подходящий. По этому рекомендуется использовать этот тег для группировки других элементов и последующей стилизации при помощи CSS, например для враппера страницы.

 
 
Наши возможности
 
.
 
 
Наши преимущества
 
.
 
 

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

Тег article предполагает ещё более конкретное применение по сравнению в секцией. Article используется в контексте сильной семантической связи контента, в нём так же как и в секции обязательно указывать заголовок. При этом контент как не трудно догадатся из названия относится к содержимому статьи / страницы, должен быть независим от прочего оформления сайта и не терять смысла, если его показать в отрыве от всего сайта, так как именно подобным образом его используют экранные ассистенты и режим «для чтения» в браузерах.

 
Заголовок статьи
 
Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона.
 

div, section или article

Итак когда какой элемент правильно использовать?

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

Комбинирование тегов

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

Кроме того, элемент article может содержать секции для объединения в себе связанной информации, а ещё можно вложить article самого в себя, когда мы хотим процитировать большую выдержку из других статей, или вложить рекомендуеммые / связанные статьи со ссылками. Не забывайте, что для цитирования кототких текстов грамотнее будет использовать тег blockquote.

Верстайте контент грамотно и Google полюбит ваши сайты =)

Источник