Learn HTML5

Category: CSS 2 Tutorial | 1,714 views |

HTML 5 introduces new elements to HTML for the first time since the last millennium. New structural elements include aside, figure, and section. New inline elements include time, meter, and progress. New embedding elements include videoand audio. New interactive elements include details, datagrid, and command

Even well-formed HTML pages are harder to process than they should be because of the lack of structure. You have to figure out where the section breaks go by analyzing header levels. Sidebars, footers, headers, navigation menus, main content sections, and individual stories are marked up by the catch-all div element. HTML 5 adds new elements to specifically identify each of these common constructs:

section: A part or chapter in a book, a section in a chapter, or essentially anything that has its own heading in HTML 4
header: The page header shown on the page; not the same as the head element
footer: The page footer where the fine print goes; the signature in an e-mail message
nav: A collection of links to other pages
article: An independent entry in a blog, magazine, compendium, and so forth

his new version of HTML—usually called HTML 5, although it also goes under the name Web Applications 1.0—would be instantly recognizable to a Web designer frozen in ice in 1999 and thawed today. There are no namespaces or schemas. Elements don’t have to be closed. Browsers are forgiving of errors. A p is still a p, and a table is still a table.

As well as the structural elements, HTML 5 adds some purely semantic block-level elements:

aside
figure
dialog

I use the first two all the time in articles like this one and in my books. The third I don’t use so much myself, but it’s common in much written text.

<aside>
<h3>.xf-value</h3>
<p>
The <code type="inline">.xf-value</code> selector used here styles the input
field value but not its label. This is actually inconsistent
with the current CSS3 draft. The example really should use the
<code type="inline">::value</code> pseudo-class instead like so:
</p>

<pre class="displaycode">input::value { width: 20em; }
#ccnumber::value { width: 18em }
#zip::value { width: 12em }
#state::value { width: 3em  }</pre>

<p>
However, Firefox doesn't yet support this syntax.
</p>
</aside>

These icons link to social bookmarking sites where readers can share and discover new web pages.