#27 <a6>

submitted on by Hidde
Context: Visually a list of links.

Bad code

<h6>Popular Cities</h6>
<div>
  <h6 class="footerLinks">Amsterdam</h6>
  <h6 class="footerLinks">Rotterdam</h6>
  <h6 class="footerLinks">Utrecht</h6>
  <h6 class="footerLinks">Den Haag</h6>
  <h6 class="footerLinks">Eindhoven</h6>
</div>

Issues and how to fix them

  1. Use headings (<h1>-<h6>) to structure the page, don’t use heading elements arbitrarily or only to comply with visual requirements.
  2. By default, a click event on an <h6> triggers only on click. A click event on an a triggers on click and if the user presses the Enter key.
  3. An <h6> isn’t keyboard focusable.
  4. If your content it so comprehensive and deeply structured that you need levels as deep as <h5> and <h6> in order to describe the structure, consider splitting your large page into multiple smaller pages.
  5. The <div> element is an element of last resort, for when no other element is suitable. Use of the <div> element instead of more appropriate elements leads to poor accessibility.
  6. If you’re listing items that thematically belong together, consider grouping them semantically using <ol> or <ul>.
  7. <a> allows users to right click and copy link / open in new tab.
  8. Linking to pages using the <a> element works without JavaScript.
  9. An <a> has the right cursor without having to add CSS.

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

Good code

 <h3>Popular Cities</h3>
 <ul>
   <li>
     <a href="/amsterdam.html">Amsterdam</a>
   </li>
   <li>
     <a href="/rotterdam.html">Rotterdam</a>
   </li>
   <li>
     <a href="/utrecht.html">Utrecht</a>
   </li>
   <li>
     <a href="/denhaag.html">Den Haag</a>
   </li>
   <li>
     <a href="/eindhoven.html">Eindhoven</a>
   </li>
 </ul>

Resources