#18 main divigation

submitted on by Christoph

Context: The main navigation of a personal website.

Bad code

<div class="nav">
<div>
<div>about</div>
<div>thoughts</div>
</div>
</div>

Issues and how to fix them

  1. 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.
  2. Use <nav> for the main navigation, it represents a landmark with links to external or internal pages. Screen reader users may use shortcuts to access the navigation directly or skip it.
  3. Use <ul> or <ol> to structure related links semantically and visually. Screen readers usually announce the number of items in a list.
  4. If the order of items in the navigation matters, use <ol>, otherwise <ul>.
  5. A click event on a div triggers only on click. Use <a href=""> to link to other pages. It's (more) accessible to keyboard, screen reader, and mouse users than a fake JavaScript-only link.

Good code

<nav>
<ul class="nav">
<li>
<a href="/about">about</a>
</li>
<li>
<a href="/thoughts">thoughts</a>
</li>
</ul>
</nav>
```