#29 Randomly grouping content

submitted on by Manuel

Bad code

<section>
<aside>
<div>
<section>
<header>
<a href="/">
<img src="logo.svg" alt="Logo">
</a>
</header>
<main>
<a href="/services">Services</a>
<a href="/products">Products</a>
<a href="/aboutus">Aboutus</a>
</main>
<footer></footer>
</section>
</div>
</aside>
<section>
<footer></footer>
<main>
<h1>Welcome to Hell</h1>
</main>
<footer></footer>
</section>
</section>

Issues and how to fix them

  • Use the <section> element only to mark up a grouping of related content, typically introduced with a heading. Learn more about sections in Issue #8 - the section element.
  • Use the <aside> element only for content that is tangentially related to the main content and not for important parts of the page or site.
  • Use the <nav> elements for important navigational groupings of links. Learn more about landmarks in Issue #16 - Landmarks.
  • If a link contains an image and no text, the alt attribute of the image serves as the link text. In such a case it might make sense to use the attribute not to describe the image, but the functionality of the link.
  • You can structure the links in a <nav> by wrapping them in an <ul> or <ol>. Learn more about lists in Issue #13 - ol vs. ul vs. div
  • Try to avoid empty elements.
  • A document must not have more than one <main> element that does not have the hidden attribute specified. Having more than one visible <main> element can confuse users because screen readers don’t announce the number of <main> elements.
  • The <main> element must not appear as a descendant of the <section> or <aside> element.
  • A page or sectioning content like <article> or <section> should only contain a single <footer>.

Check out the resources section at the bottom of this page for more.

Good code

 <header>
<a href="/">
<img src="logo.svg" alt="Homepage">
</a>
<nav>
<ul>
<li>
<a href="/services">Services</a>
</li>
<li>
<a href="/products">Products</a>
</li>
<li>
<a href="/aboutus">Aboutus</a>
</li>
</ul>
</nav>
</header>
<main>
<h1>Welcome to Hell</h1>
</main>