Demonstration of the disparity between semantic HTML and 'DIV soup'

semantic-html.md

A simple website header

Correct

<header>
  <a href="#">Welcome to my site</a>
  <nav>
    <ul>
      <li aria-current="true"><a href="#">home</a></li>
      <li><a href="#">portfolio</a></li>
      <li><a href="#">blog</a></li>
      <li><a href="#">contact</a></li>
    </ul>
  </nav>
</header>

An assistive technology is able to understand that:

• the structure represents group of introductory or navigational aids, by using the <header> element.
• the unordered list represents a section that links to other pages or to parts within the page, by using the <nav> element.
• the first menu item is a link to the current page, by using aria-current="true"

Incorrect

<div id="header">
  <a href="#">Welcome to my site</a>
  <div class="menu">
    <span class="active"><a href="#">home</a></span>
    <span><a href="#">portfolio</a></span>
    <span><a href="#">blog</a></span>
    <span><a href="#">contact</a></span>
  </ul>
</div>

For many more great examples of ARIA usage, please check out Heydon Pickering's demos