Semantic HTML Rules

Alex Bea / @alexbea
Singlebrook Technology, Inc.

Running on Reveal.js by Hakim El Hattab

Why talk about HTML?

  1. Because we don't enough.
  2. It's the foundation of the internet interface.
  3. It means something.

Why use semantic HTML?

  • No new presentational value
  • More to think about in markup
  • Dramatically improved accessibility
  • Better CSS selectibility
  • SEO value
    … follow Google’s time-honored guidelines: write valid, cross-browser, accessible HTML, don’t misuse markup or “cloak” with CSS, make a site with a clear hierarchy and text links, and write good content.
    Bruce Lawson, HTML5 Doctor

Semantic Thoughts

Presentational elements

<p>, <blockquote>, <code>, <strong>, <h1-6>

Structural elements

<aside>, <main>, <article>, et al.

Semantic Thoughts

  1. Not to be used only once.
  2. Context matters. What's the parent?
  3. Location matters little.

RSS fodder

The <article> element represents an independent item section of content.

Default role: Article

  • magazine/newspaper/blog article
  • blog post teaser
  • static pages
  • forum post
  • user-submitted comment

Not just for sidebars anymore (or ever)

The <aside> element represents a section of a page that consists of content that is tangentially related to the content around the aside element…

Default role: Complementary

  • pull quotes
  • sidebars
  • advertising
  • group of in-page nav

Wrap it up, b

The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element.

Default role: ContentInfo

  • authorship
  • copyright info
  • limited navigation
  • appendix
  • NOT a sectioning element

Introducing... the section

The header element represents introductory content for its nearest ancestor sectioning content or sectioning root element.

Default role: Banner (if in <body>)

  • page banner
  • article headings and bylines
  • navigation
  • NOT a sectioning element

the Highlander of HTML

The main content of the body of a document or application. [It] is unique to that document and excludes content that is repeated across a set of documents.

Default role: Main

  • unique to that document or page
  • excludes repeated content (e.g., site sidebar)
  • "Must not" be a descendent of <article>, <aside>, <footer>, <header>, <nav>
  • NOT a sectioning element

for nav, but not all nav

The nav element represents a section of a page that links to other pages or to parts within the page.

Default role: Navigation

  • primarily for "major navigation", per spec
  • top nav, sub-nav
  • in-page nav to document sections
  • breadcrumbs(?)
  • not necessarily footer links
  • not aside reference links

div's more interesting cousin

The section element represents a generic section of a document or application.

Default role: Region

  • like div, limited semantic meaning
  • thematically relates contents
  • a clear branch of the page's outline
  • could start with an <h1-6>

what is it good for?
(means absolutely nothing)

The div element has no special meaning at all.

Default role: none.

  • represents its children
  • friend of complex designs

The choir

  • article
  • aside
  • footer
  • header
  • main
  • nav
  • section

Backwards compatibility

Full support in most modern browsers, partial in Opera Mini and IE 9-11 (no main semantic meaning).

For IE <=8:

  • document.createElement("section"); and display: block; OR
  • html5shiv.js by Remy Sharp.

Rapid fire

blockquote: sourced content, not indentation

strong and em for emphasis, not styling. <i> for tone change.

<h1-6> for true headings, not styling.

If it walks and talks like a button, use <button>

Rapid fire

<address> is only those for the page/doc/site.

There is a <menu>, but it's not the nav menu

<hr> is a "paragraph-level thematic break"

Semantics resources

  • HTML5 For Web Designers by Jeremy Keith
  • HTML5 Doctor element index
  • W3C HTML element spec

Final thoughts

  • We call it a language, so we should treat it like one.
  • Client content markup won't be ideal.
  • CSS layout specs will mean even fewer divs.


Alex Bea


divs || semantics