Semantic Markup is Key for Accessibility and Search Engine Optimization

'Semantic markup' and 'separating style from content' are key concepts for making the content at websites understandable by blind people, search engines, and everybody else. It's operationalized in HTML by limiting markup in content to headings (<h1> - <h7>), paragraphs (<p>), lists (<ul>, <ol>, <li>), and a couple levels of emphasis (<em> and <strong>). HTML5 and CSS3 add more tags for semantics including: <main>, <nav>, <aside> <header>, <footer>, <article>, and <section>.

Semantically marked-up html should not use plain <div>s with classes or ids named like nav, header, or menu!

Semantically marked up content is read in the order it appears in the document. It can be styled to be attractive to those with good vision and easy on the eyes for people with vision impaired by refractive or macular issues. CSS allows content to be placed on the page the best way for people who _can_ see, while the HTML is organized the best for 'web page readers' used by blind people. Search engines like Google or Bing can't 'see' the pages, and semantic markup helps them to index the content to lead people to the desired pages.


Section 508 of the Rehabilitation Act ties into semantic markup.

Search Engine Optimization

Google's guidelines require 'honest markup' and their web crawlers now detect abuses such as hiding tags under images or text the same color as the background.

Valid HTML & CSS

None of this works reliably unless the HTML is valid! Invalid HTML puts browsers 'quirks mode' and confuses web crawlers.

Simple Techniques

'Separating Style from Content' is easy to do, and makes the content 'portable' so that it will fit into any page where it may be displayed.