Did you find this useful?
Socialize it today.


What's New in HTML5

Wednesday, October 03, 2012

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 example are pretty much the same as you would find in pre-HTML5 documents. You may have noticed that the "type" attribute is no 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:

ElementDescription
<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.

ElementDescription
<article>Defines an article
<aside>Defines content aside from the page content
<bdi>Isolates a part of 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:

ElementDescription
<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.

ElementDescription
<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 elmenets as well as attributes that we will be covering in the upcoming articles in this series.

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

HTML CSS and JavaScript HTML5: The Missing Manual Murachs HTML5 and CSS3