Semantics Markup

Semantic Markup - Social Media

'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.

Semantic Markup


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. The best way to get top placement is

Valid HTML & CSS

None of this works reliably unless the HTML is valid! Invalid HTML puts browsers 'quirks mode' and confuses web crawlers and visually handicapped folks nec ante lacinia ullamcorper.

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.