Search code examples
htmlsemantic-markup

What are the practical benefits of semantic markup for visual user-agents

After years of creating HTML documents and trying to keep abreast of different markup patterns and best practices that make the markup the most meaningful I'm often left wondering how these semantics will start paying off for end-users.

Let's introduce the question as: You have two documents…

The first document uses all of the most reasonably standardized parts of contemporary HTML to create a rich document structure peppered with some RDFa and choice microfromats for an exemplary expressive piece of HTML.

The second document is the same structure as the first except that the tags have all been converted to divs and spans and all of the classnames are purely stylehooks: all semantics have been removed but the page renders efficiently and visually identical to the first.

I'm interested in the direct benefits of the first document over the second document to a well-sighted human who is interacting with this HTML document via a desktop or mobile browser. Your answer can invent the nature of the content and point at specific browser features to demonstrate your point.

Your answer should not include:

  • Screen readers (the user is well-sighted)
  • SEO (the indirect benefit of search engine visibility is off topic)
  • Semantic markup is easier to maintain (which is also indirect)
Solution

  • (This is, of course, not complete. It's just what came to my mind while typing.)

    This answer assumes: for users of desktop/mobile browsers without a screenreader; page consists of div and span elements only (with allowed attributes); only what is relevant today (not tomorrow, not in 2400 years).

    Missing metadata

    • users won't see a favicon (icon link type; unless you place an ICO img in root) nor a title (title element) when bookmarking your page
    • no icon when creating shortcut (apple-touch-icon, msapplication-TileImage, …)
    • it will not be possible for certain web applications to extract metadata out of your pages when users post/quote/share your page there (e.g. Open Graph Protocol)
    • browser won't auto-detect your feed (alternate link type)
    • No (performance) benefits by link types like prefetch, prerender, dns-prefetch, pingback, prev/next, …

    (Note that some of this could be accomplished with HTTP headers.)

    Missing default functionality

    Without a, input, textarea, button etc. the corresponding functionalites would require JavaScript. Users without JavaScript couldn't click at links, search, upload files, submit forms, …

    Reasons for no (or limited) JS support:

    • user deactivated JS (globally, for site/host only)
      • deliberately, e.g. with NoScript
      • required by company/admin/etc.
    • JS files couldn't load (CDN issues, …)
    • very old browser
    • …

    Also some typical navigation mechanisms might no be available by default (tabbing through fields; focus; pressing enter to activate; search in link text (e.g. ' in Firefox)).

    Missing functionality provided by browser extensions

    There are various browser add-ons (or bookmarklets, etc.) that parse the markup and "do things".

    Missing default "styling"

    Without CSS support, a page consisting of only div and span elements may be hard to read, or it could even become unintelligible (think of complex data tables, for example).

    Reasons for no (or limited) CSS support:

    • text browsers (Lynx, w3m, …)
    • very old graphical browsers
    • user deactivated CSS (globally, for site only, for page only)
    • user uses own stylesheet
    • CSS files couldn't load (CDN issues, …)
    • …

    Limited reusability

    • copy & pasting: If users copy&paste some content and/or markup and your custom CSS doesn't get "included" (probably the case for many, many tools), it may be hard or even impossible to understand/reuse that content/markup.
    • extracting your content: it's harder for others to scrape your content (e.g. Piggy Bank) and/or transform it (XSLT, XPath)