Semantic Markup

Semantics:

The study of meanings.

1. The historical and psychological study and the classification of changes in the signification of words or forms viewed as factors in linguistic development.
2. A branch of semiotic dealing with the relations between signs and what they refer to and including theories of denotation, extension, naming, and truth.

Meaningless HTML can validate; make sure your site is semantically pure. Think about what your content means, not just how it is going to look.

• Use markup elements how they were intended
  • h1 though h6 for headings instead of b or font.
  • ul for navigation and other link lists instead of br or td.
  • q and blockquote for quotes rather than adding quote characters directly.
  • address for footer contact info.
  • dl, dt, and dd for definition lists or other multi-part associative lists.

  View an example of semantic versus non-semantic markup and determine for yourself which is the better solution. For more examples of semantic markup and explanations for them, view Dan Cederholm’s SimpleQuiz.

• Benefits of semantic markup
  • User Agents (UA) can provide alternate uses of meaningful markup.
    • Heading outline navigation.

      Some UAs can provide a way to skip through internal page headers or view an outline of page headers.

    • Announce headers.

      Certain screen readers will announce a page header with a sound or voice change. Freedom Scientific JAWS says “heading” and the level. IBM Home Page Reader plays a sound.

      In the future (or in the present with Emacspeak), this could be controlled with Aural CSS using the cue-before, cue-after, and pay-during properties.

    • Data table navigation.

      If a data table is marked up properly, screen readers can navigate through the information in a way that is more logical to the listener.

    • Bibliography of quotes or cited material.
  • Better search engine results and other automated uses by programs.
  • User can set up their own styles (more on user styles later).
• Logical document structure.

  Current assistive technology ignores CSS positioning. Assistive technology reads in source code order. The following is from: How to Design an Accessible Web Site Presentation Order.

  The “ideal” web page would present text in a logical order to every browser (or “user agent” as the W3C standards describe it):

  1. The title of the page.
  2. For long pages, a summary or abstract of what is on the page.
  3. The main content of the page.
  4. Secondary content of the page (the kinds of things that might be displayed in a right column or inset box).
  5. Site navigation and other information not intrinsic to the main content.

  Instead, most pages on the web now display in this order, with no page summary:

  1. Site navigation, often a very long list of links.
  2. The title of the page.
  3. Secondary information displayed in a floating or inset box within the main page content.
  4. The main content of the page.
  5. Additional secondary content of the page to be displayed in a separate right column on the page.
  6. Other information not intrinsic to the main content.

  Solution: write your code to reflect the first list. Use CSS to display information in the preferred visual layout.