HTML5's Relationship to HTML 4x and XHTML
The WHATWG specification is intended to replace HTML4 and XHTML1 and introduce a new version of the DOM, called the
DOM Level 2 HTML Specification API.
One primary goal for HTML5 is to improve both HTML and XHTML, while still keeping structure and syntax as simple as possible. WHATWG has facilitated this by specifying just three fundamental requirements that an HTML5-compliant document must meet:
HTML5 Tags
The WHATWG specification defines some interesting new elements:
- section—a generic grouping of content in a document or application
- article—a section of a page that consists of a composition that forms an independent part of a document, page, or site, such as a forum post, newspaper article, etc.
- aside—a section of a page that consists of content that is slightly related to the content around the element, but could be considered separate from that content, such as a sidebar
- dialog—a conversation involving an explicit talker/speaker represented by a dt element and a discourse represented by a dd element
- footer—represents the footer for the section to which it applies and contains information such as the author, copyright data, and related links
- header—represents the header of a section used to denote summaries, outlines, etc.
- nav—a section of a page that links to other pages or to parts within the page
The WHATWG specification defines the following categories for HTML elements:
- Metadata elements—used to represent metadata in a document's head element. This includes elements such as title, base, and link
- Sectioning elements—used to divide a page into sections. This includes elements such as body, section, nav, and article
- Block-level elements—used for structural grouping of page content. This includes elements such as blockquote, section, p, and div.
- Strictly inline-level content—text, embedded content, and elements that annotate text without introducing structural grouping. This includes elements such as a, meter, and img
- Structured inline-level elements—block-level elements that can also be used as inline-level content, such as ol, blockquote, and table
- Interactive elements—elements that can be activate by a user agent via things like a mouse or keyboard. This includes elements such as a, button, and radio input elements.
- Form control elements
- Miscellaneous elements
The following existing HTML4 elements are not defined in HTML5:
- acronym (use <abbr> instead)
- applet (use <object> instead)
- basefont
- big
- center
- dir
- font
- frame
- frameset
- isindex
- noframes
- noscript (only in XHTML)
- s
- strike
- tt
- u
For more information, check out the complete cross-referenced list of
HTML5 tags defined by the WHATWG specification.
UI Widgets/Components of HTML5
HTML5 introduces new layout components, including such items as a
canvas element, a calendar control, an address card, a datagrid, progress meters, and other components.
The
canvas element embodies a bitmap canvas, which you can use to perform dynamic drawing tasks, such as rendering pie charts, graphs, and other graphical items.
The following code sample demonstrates the
<canvas> tag, which is currently supported in the Firefox browser. The sample shows how to draw boxes and lines dynamically using the
canvas tag and client-side JavaScript:
<html>
<head>
<title>HTML 5 Example</title>
<script type="text/javascript">
function drawOnCanvas()
{
var canvas = document.getElementById ('canvasEl');
if (canvas.getContext)
{
var ctx = canvas.getContext('2d');
ctx.strokeRect(25, 25, 450, 350);
ctx.moveTo(25, 25);
ctx.lineTo(475, 375);
ctx.stroke();
ctx.moveTo(475, 25);
ctx.lineTo(25, 375);
 | |
| Figure 2. Canvas Example: The figure shows the image rendered by the <canvas> tag example and the sample JavaScript code. |
ctx.stroke();
}
}
</script>
<style type="text/css">
canvas { border: 4px solid green; }
</style>
</head>
<body onload="drawOnCanvas();">
<canvas id="canvasEl" width="500" height="400"></canvas>
</body>
</html>
Figure 2 illustrates the canvas example as it appears in Firefox:
Previous Page
