Skip to main content
Code Review

Return to Answer

added 372 characters in body
Source Link
unor
unor
  • 2.6k
  • 14
  • 24

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.

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.

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.

Source Link
unor
unor
  • 2.6k
  • 14
  • 24

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.

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