Semantics

Removed

• Presentational elements: font, big, center, etc.
• Presentational attributes: border, bgcolor, etc.
• frame, frameset, noframes
• acronym
• axis, summary(?)

Changed

• a …may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within.
• b …a span of text to be stylistically offset from the normal prose without conveying any extra importance.
• i …a span of text in an alternate voice or mood, or otherwise offset from the normal prose.
• hr …a paragraph-level thematic break.
• small …small print (for side comments and legal print).

Extensibility

No matter how many elements we bolt on, we will always think of more semantic goodness to add to HTML. And so, having added as many new elements as we like, we still won’t have solved the problem. We don’t need to add specific terms to the vocabulary of HTML, we need to add a mechanism that allows semantic richness to be added to a document as required.

Extensibility

…social co-ordination brings the value in shared data and protocols, not infinite extensibility, which tends to encourage duplication of effort.

…making the points of extensibility into scarce, community-managed resources … is a good thing. It has positive political and social effects; it forces (or at least inclines) people to co-operate, whether they’re a multi-billion dollar behemoth, or a sole engineer who wants his fifteen minutes of fame.

New elements

• mark

  …a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.

• time

  This element is intended as a way to encode modern dates and times in a machine-readable way so that user agents can offer to add them to the user's calendar.

  <time datetime="2009-09-02T09:30:00">September 2nd, 9:30am</time>

New elements

• nav, article, section, aside
• header, hgroup, footer
• details, figure

header

…a group of introductory or navigational aids.

<header>
<h1>My awesome site</h1>
<p>Welcome to my site. It has lots of cool stuff:</p>
<ul>
<li>My lovely horse</li>
<li>My interesting rock collection</li>
<li>and more…</li>
</ul>
</header>

aside

…represents a section of a page that consists of content that is tangentially related to the content around it, and which could be considered separate from that content.

<aside>
<h1>Brighton</h1>
<p>Brighton is a town on the south coast of England.</p>
<p>It is built on the site of Brighthelmston.</p>
</aside>

hgroup

…used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.

<hgroup>
<h1>DOM Scripting</h1>
<h2>Web Design with JavaScript and The Document Object Model</h2>
</hgroup>

footer

…typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

<footer>
<p>Copyright 2009 <address>jeremy@adactio.com</address></p>
</footer>

figure

…some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document.

<figure>
<img src="horse.jpg" alt="a horse in a field">
<legend>My lovely horse</legend>
</figure>

nav

…a section of a page that links to other pages or to parts within the page: a section with navigation links.

<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>

section

…a thematic grouping of content, typically with a heading, possibly with a footer.

<section>
<header>
<h1>DOM Scripting</h1>
</header>
<h2>JavaScript</h2>
<p>JavaScript is a programming language.</p>
<h2>The DOM</h2>
<p>The DOM is an API.</p>
<footer>Written by Jeremy Keith</footer>
</section>

article

…a section of a page that consists of a composition that forms an independent part of a document, page, or site.

<article>
<header>
<h1>DOM Scripting</h1>
</header>
<h2>JavaScript</h2>
<p>JavaScript is a programming language.</p>
<h2>The DOM</h2>
<p>The DOM is an API.</p>
<footer>Written by Jeremy Keith</footer>
</article>

details

…additional information or controls which the user can obtain on demand.

<details>
<legend>Log in</legend>
<form method="post" action="login">
<label for="username">Username</label>
<input type="text" name="username" id="username">
<label for="password">Password</label>
<input type="password" name="password" id="password">
</form>
</details>

Next

Structure