Semantic HTML

Joseph Lindsay

ERMA New Zealand

Overview

Some definitions

Syntax
Sentence structure and language rules
Semantic Markup
Mark Pilgrim

…you use tags that have specific meaning assigned to them, either in the (X)HTML specification, or in generally accepted use.

Jason Kottke

As much as possible, the tags surrounding the content of a document should describe what that content is and/or what it's for.

…more

In the beginning…

HTML Version 2.0

Versions 3-4

Current version

Aside: HTML vs. XHTML

The pedant's view

A good web page is made up of layers

  1. Copy (the text)
  2. Semantics (<h1>, <ol>, <p>)
  3. Structure (<head>, <body>, <div>)
  4. Presentation (CSS)
  5. Behaviour (JavaScript)

The speaker's analogy

  1. Monotone, mono-rhythmic speech
  2. Changing tone to indicate meaning
  3. Changing rhythm/timing to indicate structure (punctuation)
  4. Facial expression
  5. Body language

The real world

Mark Pilgrim

In visual browsers it doesn't really matter whether you use semantically correct markup or generic markup that happens to look the same, because the meaning of your page is going to be determined by the human being with eyes who reads it on a screen.

Increasing your HTML vocabulary

"We went to the park. I rode on my bike."

"On Saturday, Dad took me and Oscar to the BMX track. We rode there on our bikes, but Dad carried Oscar across the road."

Some real examples

<head> elements
<title>, <link>
Headings
<h1> - <h6>
Forms
<label>
Lists
navigation lists
Citations and Quotations
<blockquote>, <q>, <cite> and cite attribute

The <title> element

W3C

Authors should use the <title> element to identify the contents of a document. Since users often consult documents out of context, authors should provide context-rich titles. Thus, instead of a title such as "Introduction", which doesn't provide much contextual background, authors should supply a title such as "Introduction to Medieval Bee-Keeping" instead.

Benefits of a good <title>

Presentation in search engines
Most search engines use <title> element as link text in search results
Most search engines give high relevancy to title text
Bookmarks/favourites
Most browsers use the <title> element for bookmark text

Examples of the <title> element

The benefit

Scrren dump of a Google.com search for the phrase: youth court, showing the NZ youth cout 4th on the list

The <link> Element

W3C

This element defines a link. Unlike A, it may only appear in the HEAD section of a document, although it may appear any number of times. Although LINK has no content, it conveys relationship information that may be rendered by user agents in a variety of ways (e.g., a tool-bar with a drop-down menu of links).

Benefits of good <link>s

Some examples of the <link> element

Heading elements

W3C

A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.

There are six levels of headings in HTML with H1 as the most important and H6 as the least. Visual browsers usually render more important headings in larger fonts than less important ones.

Benefits of good headings

Some examples of heading elements

The <label> element

W3C

Some form controls automatically have labels associated with them (press buttons) while most do not (text fields, checkboxes and radio buttons, and menus).

For those controls that have implicit labels, user agents should use the value of the value attribute as the label string.

The <label> element is used to specify labels for controls that do not have implicit labels

Benefits of <label> element

Some examples of the <label> element

Lists

Incorrect use of Lists

Incorrect non-use of Lists

Navigation Lists with style

Quotations and Citations

Examples of Quotations and Citations

The usual method – short quote:

<p>As Bill Gates said, &quot;640K should 
be enough for anybody.&quot;</p>

Examples of Quotations and Citations

The way W3C intended – short quote:

<p>As <cite>Bill Gates</cite> said,
<q cite="http://tinyurl.com/9dr2t">640K should 
be enough for anybody.</q></p>
W3C

Visual user agents must ensure that the content of the <q> element is rendered with delimiting quotation marks.

Examples of Quotations and Citations

Longer Quote

<p>blah…<cite>Bill Gates</cite> said:</p>
<blockquote cite="http://tinyurl.com/b2xzh">
<p>Information technology and business are 
becoming inextricably interwoven. I don't think 
anybody can talk meaningfully about one without the 
talking about the other.</p></blockquote>

Elements without semantics

<div> and <span>
No semantic meaning, although semantics can be added to class and id attributes
<br>, <b> and <i>
No semantic meaning, but do affect presentation in visual browsers

Use class with Semantics in mind

Bad names
white3pxborder, page2bg, left, newstyle
Good names
warning, important, alert, submenu

It's OK to use <b> and <i>

Summary

Finally…

Inline styling hook – which is better:

<span> or <b>?