The Internet has changed quite a bit since the last HTML standard more than a decade ago. Some of the HTML 4.01 elements are now obsolete. These elements have been removed or re-written in HTML5.
Aside from deprecated elements, HTML5 brings a lot of new features to the HTML specification. Fortunately, there is already some limited browser support for these new features. Let’s take a look at some of these changes in more detail.
Basic Structure for an HTML5 Page
An HTML5 page is similar to most HTML pages. However, there are some key areas that have been simplified.
Implementing the structure of an HTML5 page can now be easily done from memory rather than looking back at a reference document to ensure that you have included all of the necessary components to get the page working across all browsers.
Here is the minimum number of elements and their attributes that you should use in any HTML5 document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example document</title>
<link href="stylesheet.css" rel="stylesheet"/>
<script src="script.js"></script>
</head>
<body>
<p>Example paragraph</p>
</body>
</html>One of the nicest things about HTML5 is the fact that web developers can stop worrying about the long Doctype. An HTML5 page structure is very easy it is to implement. You start with declaring the HTML5 doctype.
While this declaration is not required for HTML5, it is needed so that browsers will switch the content into “standard” mode. Omitting the doctype or having anything before it, even a blank line, will result in the browser invoking “Quirks” mode, which should be avoided. The declaration can be in all caps, or all lowercase, or a mix of both.
<!DOCTYPE html>Just as with the doctype, the next nicest thing to note is the easier to remember html tag. While there is no official language default in HTML5, you should always specify a language explicitly.
<html lang="en">Within the head element, you include your meta tags. Although it is not technically required to define the character set, failing to do so can open your app to cross-site scripting attacks in older Internet Explorer versions.
Fortunately, including this meta tag is simple. <meta charset="utf-8" /> is the equivalent to <meta http-equiv="Content-Type" content="text/html; charset=utf-8">.
<meta charset="utf-8" />The remainder of the elements shown in our examples are pretty much the same as you would find in pre-HTML5 documents. You may have noticed that the type attribute is not included with the link or the script element.
You can include them if you wish, but even older browsers will use text/css as the default type for style sheets and text/javascript as the default type for scripts.
Removed Elements
The following HTML 4.01 elements are removed from HTML5:
| Element | Description |
|---|---|
<acronym> | Defines an acronym |
<applet> | Defines an embedded applet |
<basefont> | Sets a default color, size, or font for the text in a doc |
<big> | Defines big text |
<center> | Defines centered text |
<dir> | Defines a directory list |
<font> | Defines font, color, and size for text |
<frame> | Defines a frame in a frameset |
<frameset> | Defines a set of frames |
<isindex> | Adds a search field |
<noframes> | Defines an alternate content for users that do not support frames |
<strike> | Defines strikethrough text |
<tt> | Defines teletype text |
New Page Structure Elements
HTML5 recognizes that web pages have a structure. In general, many web pages have navigation, body content, sidebar content, headers, footers, and other features. These new elements are semantic in nature.
For example, this approach gives meaning to certain common elements as opposed to creating a generic <div> element and adding style to use it to implement a component such as a header, or navigation bar.
| Element | Description |
|---|---|
<article> | Defines an article |
<aside> | Defines content aside from the page content |
<bdi> | Isolates a part of the text that might be formatted in a different direction |
<command> | Defines a command button that a user can invoke |
<details> | Defines additional details that the user can view or hide |
<summary> | Defines a visible heading for a <details> element |
<figure> | Specifies content such as an illustration or diagram |
<figcaption> | Defines a caption for a <figure> element |
<footer> | Defines a footer for a document |
<header> | Defines a header for a document |
<hgroup> | Groups a set of header elements (<h1> to <h6>) |
<nav> | Defines navigation links |
<section> | Defines a section in a document |
<wbr> | Defines a possible line-break |
New Inline Elements
These inline elements define some basic concepts and keep them semantically marked up, mostly to do with time:
| Element | Description |
|---|---|
<mark> | Defines marked or highlighted text |
<meter> | Defines a measurement within a known range |
<progress> | Represents the progress of a task |
<time> | Defines a date and/or time |
New Media Elements
HTML5 provides for new elements related to media.
| Element | Description |
|---|---|
<audio> | Defines sound content |
<canvas> | Used to draw graphics via scripting |
<embed> | Defines a container for an external application or plug-in |
<source> | Defines multiple media resources for <video> and <audio> |
<track> | Defines text tracks for <video> and <audio> |
<video> | Defines a video |
These are not the only items that have been introduced with HTML5, there are other elements as well as attributes.
