Semantic HTML

Accessibility Meetup, May 29th 2017

Matthias Reuter, inovex
matt@gweax.de
@gweax

Note

This is the annotated version of the slides I showed at the accessibility meetup at Inovex.

The resulting semantic HTML was developed in a dialog between me and the attendees. For this annotated version, I put down the final semantic markup.

There are many further notes, so make sure to have a look at the source code.

[sɪˈmantɪks]

  1. The branch of linguistics and logic concerned with meaning.
  2. The meaning of a word, phrase, or text.

Why?

<html>

The html element represents the root of an HTML document.

<p>

The p element represents a paragraph.

<input>

The input element represents a typed data field, usually with a form control to allow the user to edit the data.

<kbd>

The kbd element represents user input (typically keyboard input, although it may also be used to represent other input, such as voice commands).

<i>

The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts.

<address>

The address element represents the contact information for its nearest article or body element ancestor.

<div>

The div element has no special meaning at all.

From design to semantics

From design to semantics

From design to semantics

I love you!

From design to semantics

From design to semantics

From design to semantics

From design to semantics

From design to semantics

inputmode

latin
Latin-script input in the user's preferred language with typing aids such as text prediction enabled.
latin-name
As latin, but for human names
numeric
numeric input
Katakana
Katakana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.

developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-inputmode

autocomplete

off
No autocomplete
given-name
given name :-)
bday-day
Day of the date of birth
address-line1
First line of address
billing address-line1
First line of billing address

developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete

From design to semantics

From design to semantics

The progress element represents the completion progress of a task.
The meter element represents a scalar measurement within a known range, or a fractional value; for example disk usage, the relevance of a query result, or the fraction of a voting population to have selected a particular candidate.

From design to semantics

From design to semantics

Limits of semantic HTML

John F. Kennedy was born on May 29th 1917 in Brookline, Massachussetts.

Semantic HTML

  1. Look up unknown elements of HTML
  2. Ponder and discuss
  3. Don't let design mislead you