latest versions of Chrome, Safari, and Opera all have support for key features of HTML 5, but Microsoft Internet Explorer (at least up to version 8) does not incorporate most features of HTML 5.

Validating HTML 5

Because the final specification for HTML 5 is still under review, validating HTML 5 code is not an exact science. The W3C validator has provisional support for HTML 5, but HTML 5 validation isn’t built into Tidy or other validation tools, yet.

Still, it makes sense to validate your HTML 5 code as much as you can because validation will prevent problems down the road.

Semantic Elements

One of the key features of HTML is the support for new semantic features. HTML is supposed to be about describing the meaning of elements, yet Web pages frequently have elements without HTML tags. Look at the following example of HTML 5 code:

semanticTags.html

Semantic Tags Demo

Section

Article 1

This is an article. It’s just a logical part of a page.

Article 1

This is an article. It’s just a logical part of a page.

This code validates perfectly as HTML 5, but it has several tags that were not allowed in XHTML or previous versions of HTML:

♦

: It’s very common for Web pages to have navigation sections. These often are menus or some other list of links. You can have several navigation elements on the page. The tags indicate that the block contains some sort of navigation elements.

♦

: This is a generic tag for a section of the page. You can have several sections if you wish. Sections are indicated by the

pair.

♦

: The

tag is used to denote an article, say a blog posting. In my example, I put two articles inside the section.

None of these tags has any particular formatting. The tags just indicate the general layout of the page. You’ll use CSS to make these sections look exactly how you want. (I didn’t show a screen shot for this reason; you won’t see anything special.)

The semantic tags aren’t absolutely necessary. They were added because many Web developers already do something similar with the generic

tag. Use of these semantic tags will clarify your code and reduce some of the excessive use of divs that tends to clutter even modern XHTML designs.

Using New Form Elements

Even the earliest forms of HTML had support for user forms — tools for retrieving information from a user. The basic form elements have changed very little since the original versions of HTML. HTML 5 finally adds a few form elements to make certain kinds of data input much easier to manage. Although browsers have been slow to accept these features, they promise a much-improved user experience while the Web becomes a primary form of application development. Figure 8-1 shows a number of the new HTML 5 elements.

As with any HTML tag, the tag itself indicates a certain kind of data, not any particular appearance or behavior. Likely, these specialized input elements will make data entry easier for users.

Figure 8-1: HTML 5 supports several new variants of the input elements.

The screen captures of the code that follows are shown in Opera 10.10. As of this writing, Opera is the only major browser that supports these form elements. As you look over the code, you’ll see that the extensions to the input element make a lot of sense.

formDemo.html

type = “text/css”

href = “formDemo.css” />

Online Book Reader

HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [62]

Semantic Tags Demo

Section

Article 1

Article 1

®Online Book Reader