Accessibility Through Semantic HTML ◆ 24 ways

What does neglected HTML look like? Here’s an example of the markup I found on a news site just yesterday. There’s a bit of text, a few links, and a few images. But mostly it’s div elements.

<div class="block_wrapper">
  <div class="block_content">
    <div class="box">
      <div id="block1242235">
        <div class="column">
          <div class="column_content">
            <a class="close" href="#"><i class="fa"></i></a>
          </div>
          <div class="btn account_login"></div>
          Some text <span>more text</span>
        </div>
      </div>
    </div>
  </div>
</div>

divs and spans, why do we use them so much?

While I find tracking scripts completely inexcusable, I do understand why people write HTML like the above. As developers, we like to use divs and spans as they’re generic elements. They come with no associated default browser styles or behaviour except that div displays as a block, and span displays inline. If we make our page up out of divs and spans, we know we’ll have absolute control over styles and behaviour cross-browser, and we won’t need a CSS reset.

Absolute control may seem like an advantage, but there’s a greater benefit to less generic, more semantic elements. Browsers render semantic elements with their own distinct styles and behaviours. For example, button looks and behaves differently from a. And ul is different from ol. These defaults are shortcuts to a more usable and accessible web. They provide consistent and well-tested components for common interactions.

Semantic elements aid usability

A good example of how browser defaults can benefit the usability of an element is in the <select> option menu. In Safari on the desktop, the browser renders <select>as a popover-style menu. On a touchscreen, Safari overlays the same menu over the lower half of the screen as a “picker view.”

…