Home/ Questions/Q 6904293
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T08:02:29+00:00

Lets talk about the section element. I’m still confused when to use it, and

  • 0

Lets talk about the section element. I’m still confused when to use it, and it seems like no one can pin point when to use it properly?

I have been told, and I have read that it should not be used as a generic wrapper for content. So I am still using divs for this purpose, and I am rarely using sections, only article. But then I came across http://dev.opera.com/, which are using it in that way? So then they are using it wrong? But that is exactly how I would like to use it… To divide the page into a “main” section where the content goes.

Here is an example how I would like to layout my pages:

<html>
<head>

</head>

<body>

<header>

</header>

<section id="main">
    generic content
</section>

<footer>

</footer>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The “section” tag is used to group general content and can be used with a generic title (h1, h2 or other).
    There are some rules to use “section” tag, those are the most important:

    1. Don’t use it for template structure – use other tags (header, footer, div) instead
    2. Don’t use it if you can use the “article” tag – so your articles can be used in other sites
    3. You can use a “section” in an “article” and, of course, an “article” in a “section”.

    Generally you can use it in order to structure the page by grouping related content: for example in a blog you can define two sections, one for the last entry and another for the oldest.
    You can also have a “section” in a “section”: you can have as many section (generic contents) as you need.

    <section>
    <h1>Last post</h1>
    <article>
        [My post...]
        <section>
            [Comments...]
        </section>
    </article>
</section>

<section>
    <h2>Oldest post</h2>
    <article>
        [First post...]
    </article>
    <article>
        [Second post...]
    </article>
    <article>
        [Third post...]
    </article>
</section>

    Reading your code I think you can improve your structure using this:

    <html>
    <head>
    </head>

    <body>
        <header>
        </header>

        <div id="main">
            <section>
                Generic content
            </section>
        </div>

        <footer>
        </footer>

    </body>
</html>
    • 0