HTML <section> Tag

The HTML <section> tag is a semantic element used to define sections within a web page. It helps organize content by grouping related elements into distinct sections, making the page more readable and easier to navigate. This tag is commonly used to structure content such as articles, chapters, and other thematically related content blocks. By using the <section> tag, web developers can create a clear and organized structure, which not only improves user experience but also enhances SEO performance by helping search engines understand the page’s layout.

The <section> tag is part of HTML5 and has become an essential tool for semantic HTML. It provides meaning and structure to a document, allowing screen readers and search engines to better interpret the content.

Syntax of the <section> Tag

html
<section>
    <!-- Content goes here -->
</section>

A <section> element typically contains a heading (<h1>, <h2>, etc.) followed by relevant content. It helps break up the webpage into clearly defined sections.

Attributes of the <section> Tag

The HTML <section> tag supports several global attributes, allowing developers to style and manage sections more effectively. Here are some key attributes:

AttributeDescription
classDefines a class name for styling the section with CSS.
idDefines a unique identifier for the section, useful for linking or JavaScript manipulation.
styleUsed to apply inline CSS styles directly to the section.
langSpecifies the language of the section's content.
titleAdds a tooltip when hovering over the section.
data-*Custom attributes for additional data.

Examples of HTML <section> Tag

Example 1: Basic Section with a Heading and Paragraph

html
<!DOCTYPE html>
<html>
<head>
    <title>Section Example</title>
</head>
<body>
    <section>
        <h1>About Us</h1>
        <p>We are a company dedicated to providing the best services to our clients.</p>
    </section>
</body>
</html>

In this example, the <section> tag groups the "About Us" content, creating a separate block within the page.

Example 2: Multiple Sections for Thematic Content

html
<!DOCTYPE html>
<html>
<head>
    <title>Multiple Sections</title>
</head>
<body>
    <section>
        <h2>Services</h2>
        <p>We offer a wide range of services including web development, SEO, and digital marketing.</p>
    </section>

    <section>
        <h2>Contact Us</h2>
        <p>Email: contact@example.com</p>
    </section>
</body>
</html>

Here, multiple <section> tags are used to divide the content into different thematic areas, each with its own heading and related content.

FAQs About the HTML <section> Tag

Q1: What is the purpose of the <section> tag?
A: The <section> tag is used to define thematic sections of content within a webpage, making the content more structured and easier to navigate.

Q2: Does the <section> tag improve SEO?
A: Yes, the <section> tag helps search engines understand the structure of the page, which can lead to better indexing and improved SEO rankings.

Q3: Can I use the <section> tag without a heading?
A: While the <section> tag can be used without a heading, it’s recommended to include a heading to give context to the content within the section for both users and search engines.

Q4: What’s the difference between <section> and <div> tags?
A: The <section> tag is a semantic element used to define content blocks with related themes, while the <div> tag is a non-semantic element used purely for styling and layout purposes.

Q5: Is the <section> tag supported by all browsers?
A: Yes, the <section> tag is supported by all modern browsers, including Chrome, Firefox, Safari, and Edge.

tools

HTML

Related Articles