HTML5: Your visual blueprint for designing rich Web pages and applications

By Adam McDaniel

Use the latest version of HTML to create dynamic Web pages

HTML5 is the latest iteration of the standard markup languagefor creating Web pages. It boasts extensive updates from itspredecessor and allows you to incorporate rich media content into asite without any dependence on extra software such as Flash. Packedwith hundreds of screen shots, this visual guide introduces you tothe many new features and abilities of HTML5 and shows you the manyexciting new possibilities that exist for designing dynamic Webpages.

• Offers visual learners a solid reference on HTML5, the latestversion of the standard markup language for designing Webpages
• Demonstrates how to use HTML5 to create Web pages that featurethe latest in rich media content
• Provides easy-to-understand examples that cover a variety oftopics to get you up and running with HTML5
• Features a companion Web site that contains all the codeneeded to learn HTML5
• HTML5: Your visual blueprint for designing effective Web pagesopens your eyes to the world of possibilities that exist with thenew version of the popular markup language.

Adam R. McDaniel  is a Web developer, technicalarchitect, and security analyst, who has contributed to the LinuxKernel.

• Language: English
• Publisher: Wiley
• Release date: Oct 20, 2011
• ISBN: 9781118204764

Book preview

Chapter 2: Getting Started with HTML5 Page Layout

Create an HTML5 Web Page

A web page identified as an HTML5 web page means different things to different web browsers, depending on whether the browser itself supports HTML5, along with which specific features. Chapter 1, Introducing HTML5, discusses how to identify which features an HTML5 browser supports; you can use this information later in building your web page, but first, you must identify that your page is designed for HTML5.

Every HTML5 web page requires a special doctype element as the first element on the page. The whole line becomes a doctype declaration, or DTD. If you are familiar with HTML 4.01, the DTD was a long, cumbersome string that described which version of HTML or XHTML the page supported. For example, the following describes a web page designed for the HTML 4.01 Transitional standard:

-//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd>

In HTML5, the DTD tag has been simplified immensely:

The doctype element is required for legacy reasons. It ensures that the browser runs in standards mode, which basically ensures that it follows the latest HTML specification that it is coded for, as closely as possible.

So, when an HTML5 browser sees this, it knows that the page supports the new HTML5 standard, which is the latest version that it understands. When an HTML 4.01 browser sees this, it knows to follow HTML 4.01 Transitional standard, as this is what it falls back to when the doctype legacy string, the latter part of the DTD plus the URL, is missing.

Following the DTD, other HTML container tags that you are already familiar with from HTML 4.01 and earlier, such as , ,

Create an HTML5 Web Page

9780470952221-fg0201.eps

001 Open a text editor.

002 Type .

003 Type .

004 Type .

Note: The html element must be begin on the second line and end on the last line of your web page.

9780470952221-fg0202.eps

005 Type .

006 Type .

007 Type .

008 Type .

Note: The head and body tag groups must follow one another. All unique page content appears within one or the other.

9780470952221-fg0203.eps

009 Type Page Title within the head tag group.

010 Insert some content within the body tag group.

011 Save the HTML5 web page as pagename.html.

9780470952221-fg0204.eps

012 Open the pagename.html file in an HTML5 web browser.

A The title appears.

B The body content appears.

Note: Because this HTML5 example follows HTML 4.01 standard, this particular page will render correctly in a pre-HTML5 browser as well.

Apply It

Note that in HTML5 and HTML 4.01, the doctype element and attributes are not case sensitive. So you can use , and it will still be considered valid.

The doctype element is also used by third-party validator services to check for compliance against the various HTML standards, as described in Chapter 1. There is one caveat, though: An HTML 4.01 browser will not understand HTML5 tags, but your doctype element will say that it supports the latest HTML specification, according to this older browser. So how do you test an HTML5 web page for compliance against earlier standards, such as HTML 4.01 Transitional?

TRY THIS

Go to the W3C Markup Validation Service, at http://validator.w3.org, type in an HTML5 website URL, and click More Options.

Select a non-HTML5 Document Type option, such as HTML 4.01 Transitional, and run the test.

ApplyItArrow

RESULT

The number of errors and warnings will increase, compared to the same test run with an HTML5 Document Type option. This indicates the HTML5-specific code that is not perfectly HTML 4.01 compliant.

As you start to implement the HTML5 features described in this book, this test can produce more and more supposed failures. Fortunately, fallback procedures inherent with HTML5 tag structure will prevail, allowing the page to render correctly, and these errors become