2
\$\begingroup\$

I'm trying to update my website's code to HTML5's semantic and structural elements, but I'm not very sure with the sections and article element.

Here's the structure of my page:

<body>
    <header id="heaven" style="background-image: url(" ./images/header/2.png ");"></header>
    <nav id="outer-nav" style="position: absolute; top: 0px;"></nav>
    <div id="main" style="position: relative; top: 332px; background-image: url(" ./images/background/1.png ");">
        <div id="sidebar-container">
            <aside class="sidebar-menu-left"></aside>
            <aside class="sidebar-menu-right"></aside>
            <div id="content">
                <div class="textblock">
                    <form action="user_login.php" method="post"></form>
                    <div class="newornament"></div>
                    <form action="user_register.php" method="post"></form>
                    <div class="info"></div>
                </div>
            </div>
            <footer id="disclaimer"></footer>
        </div>
    </div>
</body>

Should I turn the main div and/or the content div into a section, and should the <div class="textblock"> be the article, or should I put each of the <form> in an article?

Any other hints about the structure are also welcome.

You can take a look at the whole page here.

\$\endgroup\$

2 Answers 2

Reset to default
2
\$\begingroup\$

You can’t decide which sectioning elements to use without taking the actual content into consideration. So the following is meant for the home page of http://www.habbo-heaven.de/ (sub pages might differ!).

Your header (#outer-nav) is fine. It contains the h1 for the whole site. Therefore it is a child of body (and no other sectioning element).

Your nav (#outer-nav) is fine. It contains the site-wide navigation, therefore it is a child of body (and no other sectioning element). You could use a ul for the links, though.

Using aside is fine. It contains content related to the whole page. Therefore it is a child of body (and no other sectioning element). However, your use of the headings inside of it is not correct for your content. The first heading inside the aside will be the (only!) heading of that sectioning element. But you use several h1 and, assuming that my understanding of your content is correct, there should be no top heading for all the blocks in the sidebars, because semantically they are all on the same level. There would be 2 possible solutions:

  • use one aside for all blocks and use section elements for each block (if you need containers for styling, use div elements around the aside elements)

    <aside>
  <!-- <div class="sidebar-menu-left"> -->
  <section>
    <h1>Zuletzt gesetzte Gebote</h1>
  </section>
  <section>
    <h1>Zuletzt hinzugefügte Möbel</h1>
  </section>
  <!-- </div> -->
  <!-- <div class="sidebar-menu-right"> -->
  <section>
    <h1>Top Trader</h1>
  </section>
  <section>
    <h1>Neusten User</h1>
  </section>
  <section>
    <h1>Zuletzt hinzugefügte Angebote</h1>
  </section>
  <!-- </div> -->
</aside>

  • use a separate aside for every block in the sidebar

    <!-- <div class="sidebar-menu-left"> -->
<aside>
  <h1>Zuletzt gesetzte Gebote</h1>
</aside>
<aside>
  <h1>Zuletzt hinzugefügte Möbel</h1>
</aside>
<!-- </div> -->
<!-- <div class="sidebar-menu-right"> -->
<aside>
  <h1>Top Trader</h1>
</aside>
<aside>
  <h1>Neusten User</h1>
</aside>
<aside>
  <h1>Zuletzt hinzugefügte Angebote</h1>
</aside>
<!-- </div> -->

Note that these two variants don’t generate the same document outline. The first variant will open another heading level for the aside, even if you don’t specify a heading explicitly. In the second variant all aside headings will be on the same (top) level as e.g. the main content. I’d prefer the first variant with one aside as container, because it doesn’t clutter the document outline and all your sidebar blocks are related content-wise anyway. If possible, find a suitable heading (you could hide it visually), like "Recent activity" or similar.

For the two forms you could use an article element for each (as you already do on the live site). section would work, too, of course. And it would also be possible to use no sectioning element at all (just headings), because you marked up all other content appropriately (header, footer, aside), so it’s clear what the main content is. For this content (just these two forms), it’s mostly a question of taste.

Your footer (#disclaimer) is fine. It contains the footer for the whole page/site, not only for the main content. Therefore it is a child of body (and no other sectioning element).

\$\endgroup\$
1
\$\begingroup\$

When in doubt about which element to use, always refer to the spec. It will tell you exactly where and when it is appropriate to each element(s).

For a section here's is what the MDN spec has to say:

The HTML Section Element (<section>) represents a generic section of a document, i.e., a thematic grouping of content, typically with a heading.

Usage notes:

If it makes sense to separately syndicate the content of a element, use an <article> element instead. Do not use the element as a generic container; this is what <div> is for, especially when the sectioning is only for styling purposes. A rule of thumb is that a section should logically appear in the outline of a document.

In other words, if you have content that is related and goes together, put them in a section. Example is a heading section. Do this as long as you have actual content that will go in the element and you're not just using it to style your page.

Now for the article element:

The HTML <article> Element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable, e.g., in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

Usage notes:

When an <article> element is nested, the inner element represents an article related to the outer element. For example, the comments of a blog post can be <article> elements nested in the <article> representing the blog post. Author information of an <article> element can be provided through the <address> element, but it doesn't apply to nested <article> elements. The publication date and time of an <article> element can be described using the pubdate attribute of a <time> element.

OK so use an article when you have stuff that goes with your site but is independent from the rest of the page. If you use an article element within another element, that article element's content should be related to the parent element's content/stuff.

From what I can tell your <div class="main"> it for styling and positioning, so it should remain a <div>. You got that sidebar <aside> element well, and the content inside is should be in the <aside> element itself, or if you have content that is groupable and related, then a <section> element inside that would be appropriate as well.

\$\endgroup\$
2
  • \$\begingroup\$ so ive changed the content div to a section but now the question is should i put a article element around each of the forms and if i do so should i the delete the textblock div and use the css style of the textblock at the article element? \$\endgroup\$
    – Vloxxity
    Commented Apr 26, 2013 at 15:27
  • \$\begingroup\$ I would suggest a section element containing both forms. And yes apply the textblock styles to that section. \$\endgroup\$
    – Jonny Sooter
    Commented Apr 26, 2013 at 15:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.