Weighing the value of semantic markup

I’ve been working to sharpen and add to my skill set and am participating in Aquent’s Summer of Learning, which focuses on HTML5.

The book used for self-study is HTML5 & CSS3 Visual QuickStartGuide by Elizabeth Castro and Bruce Hyslop. It really has me thinking about semantic markup, that is, using HTML elements, attributes, and values and ARIA roles to describe the meaning of the content. HTML5 introduces new container elements like header, footer, nav, article, and section that give information about the content based on the element name. ARIA roles (e.g., navigation, main, complementary) provide similar information targeted to assistive technologies like screen readers. Microformats such as hCalendar tell user agents that the strings within the HTML tags represent specific information such as a calendar event.

Of course, site users don’t typically view a page’s source to see the markup. Not one in a thousand will know if you followed best practices and used the element i to place italics around a book title, the element em to indicate that a word or phrase is being emphasized, and the address element for the author’s contact information — all these will appear as italics unless you tweak the CSS to give them a different appearance. Users won’t know if you wrap the publication date in the new time element using the pubdate and datetime attributes. (Browsers are supposed to display text based on datetime‘s value but support for this is lacking.)

So, what’s the payoff?

Per HTML5 & CSS3 Visual QuickStart Guide, the benefits are:

  • Improved accessibility and interoperability (content is available to assistive technologies for visitors with disabilities, and to browsers on desktop, mobile, tablet, and other devices alike)
  • Improved search engine optimization (SEO)
  • (Typically) lighter code and faster pages
  • Easier code maintenance and styling

I buy most of this, especially when it comes to container elements. When it comes to some of the phrasing (think inline or span) elements and attributes, I’m not so sure. Is it really worth the effort for content managers to use different elements to distinguish between proper grammar, content importance, or contact information if they all look the same to a reader? Why include a cite element for a citation or reference to a source if users can’t see it?

My recommendation is to implement the new container elements and ARIA roles but consider whether there’s sufficient payback for the effort needed to implement some of the phrasing (span) elements and attributes like time, cite, and dfn.

Leave a Reply

Your email address will not be published. Required fields are marked *