#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>

Resources