Qarpeo LogoInstitute

<section>

The HTML <section> element represents a thematic block of content, usually containing its own heading, used to organize and divide a document into related segments.

<section> Tag

The <section> tag defines a thematic grouping of content in a document. It is a semantic element that organizes content into distinct sections, usually with a related heading, allowing for separate styling or manipulation.

Syntax

index.html
<section>
  <h2>Section Title</h2>
  <p>Content for this section goes here.</p>
</section>

<section> Demo

Main Header
Introduction

This section introduces the main topic.

Main Content

This section contains the main content of the document.

Conclusion

This section summarizes the document.

Footer content

index.html
<header>
  <h1>Main Header</h1>
</header>
<section>
  <h2>Introduction</h2>
  <p>This section introduces the main topic.</p>
</section>
<section>
  <h2>Main Content</h2>
  <p>This section contains the main content of the document.</p>
</section>
<section>
  <h2>Conclusion</h2>
  <p>This section summarizes the document.</p>
</section>
<footer>
  <p>Footer content</p>
</footer>

Attributes

This element only includes the attributes.

Default CSS Settings

In most web browsers, the <section> element is typically rendered with the following default styling:

style.css
section {
  display: block;
}

See Also

  • Other section-related elements:

<body> <nav> <article> <aside> <hgroup> <header> <footer> <address>

Conclusion

The <section> tag plays a crucial role in organizing content into thematic blocks, making web pages more structured and accessible. By using this semantic element, developers can improve both user experience and SEO. It helps create a clear hierarchy and allows for better styling and manipulation of different sections.

<nav>

The HTML <nav> element indicates a section containing navigation links, organizing and grouping menus to enhance accessibility and the overall user experience on a webpage.

<span>

The HTML <span> element serves as a generic inline container for grouping and styling portions of text or other inline elements, without imparting any semantic significance or altering the document structure.