Monday, September 05, 2011

Get Started with HTML5 Today!

There is a lot of buzz about HTML5 these days, which will be the successor to HTML 4 and replace XHTML. If you already use HTML 4 or XHTML to design web pages, you're probably wondering how to begin using HTML5.

Currently in draft statusMoved to Candidate Recommendation status by the W3C in late 2012, HTML5 is a superset of HTML 4, provides for the use of XHTML-like syntax (such as enclosing attributes within quotation marks, and always coding both opening and closing tags), and is intended to be backward compatible. The working draft of HTML5 is available at http://www.w3.org/TR/html5. An explanation of the differences between HTML 4 and HTML5 is located at http://www.w3.org/TR/html5-diff.

It’s possible to begin using HTML5 right away! The recent versions of popular browsers, such as Internet Explorer 9, Firefox 4(and later), Safari 5, Google Chrome, and Opera 10 already support some of the new features of HTML5. When new versions of each browser are released, you can expect increased support of HTML5. As you learn to design web pages you need to not only know what works today in current browsers, but also to get ready to use new HTML5 coding techniques. Since HTML5 is in draft status and may change, so consult http://www.w3.org/TR/html-markup for a current list of HTML5 elements.

Document Type Definition

Because multiple versions and types of HTML and XHTML exist, the W3C recommends identifying the type of markup language used in a web page document with a Document Type Definition (DTD). The DTD identifies the version of HTML contained in your document. Browsers and HTML code validators can use the information in the DTD when processing the web page. The DTD statement, commonly called a doctype statement, is placed at the top of a web page document. The DTD for HTML5 is
<!DOCTYPE html>
That’s a lot easier than the old HTML4 and XHTML DTDs!

Your First HTML5 Web Page

The syntax of HTML5 is streamlined and easier to use than HTML 4.0 and XHTML. You are free to code with upper and lowercase letters as well as optionally close container tags. However, that could lead to web pages with display problems and processing problems when you begin to add technologies such as CSS and JavaScript to the mix. So, I follow the coding conventions for HTML5:
  • use lowercase letters
  • place quotes around attribute values
  • always code closing tags for container elements.
This rigorous coding style will help to prevent many CSS layout and JavaScript processing issues that you might otherwise encounter.

Let's get started with your first HTML5 web page! Just as with XHTML and HTML 4.0, the HTML5 doctype statement is the first line in the document. Next, the web page begins with an opening <html> tag and ends with a closing </html>tag. These tags indicate that the text between them is HTML formatted and tells the browser how to interpret the document. Use the lang attribute on the opening html tag to indicate the language of the web page content. Since our web page is in English, we’ll use lang="en". For example, <html lang="en">
You’ll continue to use head, title, and body elements as you did in earlier versions of HTML/XHTML. Something that may be new is to use the self-contained <meta> tag to indicate the character encoding, which will typically be coded as
<meta charset="utf-8">
Note that self-contained, or stand-alone tags are referred to as void elements in HTML5. Although self-contained elements are coded with an ending slash in XHTML (for example, the XHTML line break tag is coded as <br />), the HTML5 syntax for void elements is more streamlined — the HTML5 code for the line break tag is <br>.
To summarize, every HTML5 web page contains the doctype statement followed by the html, head, title, meta, and body elements. A basic HTML5 web page template is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
<title>My First HTML5 Web Page</title>
<meta charset="utf-8">
</head>
<body>
Hello World
</body>
</html>

The figure below shows the web page source code displayed in the Notepad text editor.

The figure below depicts the browser display of the web page.


More About HTML5

Now that you’ve seen an example of the syntax; now let’s delve deeper into HTML5.

Structural Elements

Take a moment and think about how you typically structure a web page layout with div elements. You may find that it’s common to use ids or classes with names such as header, nav, or footer. HTML5 has several new structural elements that render as block display specifically intended for organizing web pages:
  • <header> contains the heading information for a page area section. The header element is block display and will typically contain one or more heading level elements (h1 through h6) and, optionally, the hgroup element
  • <hgroup>The hgroup element groups heading level tags and is useful if the logo header area of a web page contains both the website name and a tagline
  • <nav> contains a section of navigation links
  • <aside> contains sidebar, note or other tangential content
  • <footer> contains the footer of a section.
  • <article> contains an independent entry, such as a blog posting, comment, or e-zine article
  • <section> contains a “section” of a document, such as a chapter or topic. A section might contain <header>, <footer>, and other elements needed to display the content
  • <figure> and <figcaption> associates a caption with an image or video
The wireframe below shows a page layout using the new header, nav, section, figure, and footer elements.



Phrase Elements

HTML5 revisits the former physical style and logical style elements – now called phrase elements. Semantic uses of common phrase elements follow:
  • <b> Bold text with no particular importance
  • <strong> Bold text with strong importance
  • <i> Italic text with no particular emphasis
  • <em> Italic text that is emphasized
  • <small> Small-size text that semantically indicates small or fine print – like a legal notice
HTML5 adds new inline display elements that are intended to provide more options for semantic markup of web page content. For example, the new <mark> element configures text as “marked” or highlighted.

New Multimedia Elements

HTML 5 contains several new elements that are intended to simplify displaying multimedia in web pages.
  • <video> configures embedded video.
  • <audio> configures embedded audio.
  • <embed> configures plug-in content
  • <canvas> provides for dynamically drawing graphics and interactive games with scripting (JavaScript)
     

More New Elements

HTML 5 contains new elements for a variety of purposes, such as progress, meter, dialog, menu, and more. New HTML5 form controls are configures using new attribute values for the input element. And there's even more! See http://www.w3.org/TR/html-markup/ and explore the list of elements.

Elements Eliminated

A number of elements were listed as deprecated in HTML 4 and XHTML. Some of these deprecated elements were eliminated from HTML5, such as <big>, <center>, <frame> , <frameset>, and <noframes>.

HTML5 & Today’s Browsers

Internet Explorer 9 and current versions of Safari, Chrome, Firefox, and Opera offer good support of HTML5 structural elements. The issue is that many people still use earlier versions of browsers. There are two different approaches you can follow if you’d like to begin using HTML5 today: a conservative, straightforward approach and a progressive approach that is more involved and requires JavaScript.

Conservative Approach to Using HTML5 Today

For the best chance at compatibility, code using either HTML5 or XHTML syntax and avoid using the new HTML5 elements. Instead, use <div> tags to structure page areas and configure the new element names as class names or id names. For example, the opening div tag that contains the page footer area could be coded as
<div class="footer"> instead of using the new HTML5 <footer> tag. In this way you’ll become used to the new element names and it will be easier to update the pages to all HTML5 later on. As time goes by and older browsers are used less and less, you’ll be all set!

Progressive Approach to Using HTML5 Today

Code using new HTML5 elements and include CSS that configures older non-supporting browsers to render the HTML5 header, hgroup, figure, figcaption, footer, nav, section, article, and aside elements as block display (use display: block;). This will work well in all browsers except for Internet Explorer 8 and below. The CSS code follows:

header, hgroup, nav, footer, figure, figcaption, section, aside, article { display: block; }

So, what to do about Internet Explorer 8 and below? Remy Sharp offers a solution, called the HTML5 Shim,  to enhance the support of Internet Explorer version 8 and earlier (see http://remysharp.com/2009/01/07/html5-enabling-script). The technique uses conditional comments that are only supported by Internet Explorer and are ignored by other browsers. The conditional comments cause Internet Explorer to interpret JavaScript statements that configure it to recognize and process CSS for the new HTML5 element selectors. Remy Sharp has uploaded the script to Google’s code project and has made it available for anyone to use. Add the following code to the head section of a web page after CSS to cause Internet Explorer (versions 8 and earlier) to correctly render your HTML5 code:

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
 

What's the drawback to this approach? Be aware that your web page visitors using Internet Explorer (version 8 and earlier) may see a warning message and must have JavaScript enabled for this method to work.

Keep in mind that the W3C still needs to complete the process to move HTML5 from draft to recommendation status. Although new browser versions will offer increased support for HTML , not all your website visitors will install the latest version and workarounds will be likely (such as the CSS styles and script shown above). However, it’s important to be aware of HTML5—it’s the way of the future! And, you can confidently use it in a conservative manner today!

Explore the following resources to learn more about HTML5:

2 comments:

David said...

Terry, thanks for this concise summary of HTML5 and suggestions for being to use it today. I just completed a training class on HTML5 and CSS3, and your article was a good review of many of the concepts that were taught.

PS - I believe that you may have a small typo in the last sentence about the doctype (should be old HTML 4 instead of 5?)

Terry Morris said...

@David -- I'm glad the article was a good review of concepts from your HTML5/CSS3 training class. I've fixed the typo you mentioned. :-)