Update HTML4 to new HTML5 Semantic/Structural Elements 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:

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




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

Any other hints about the structure are also welcome.

You can take a look at the whole page here.
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)

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

use a separate aside for every block in the sidebar

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



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).