elements. Another HTML5 manual used a

for the container or wrapper; this enclosed

elements, which in turn enclosed . Which practice is correct? I tried them all and they all worked because HTML5 is currently quite lax. Even my favorite HTML5 gurus at HTML5 Doctor (http://html5doctor.com) discovered they had been using the

element incorrectly; their revised web site stated: “…we realize that we’ve been using the

element incorrectly all this time. Sorry, what we’ve been doing wrong is using

to wrap content in order to style it, or to demarcate the main content area from the

etc. These are jobs for

, not

.” The http://www.whatwg.org specification was revised as follows: “The

element is not a generic container element. When an element is needed for styling purposes…authors are encouraged to use the

element instead.” See the full version of the W3C statement on this topic at http://www.w3.org/TR/html5/sections.html#the-section-element

19

www.it-ebooks.info

CHAPTER 1 ■ MOVING TO HTML5

is best used as a sub-section of an

and should always contain and enclose a heading, something like the following:

A heading, any level from h1 to h6

some content

A heading, any level from h1 to h6

some content

HTML5 Doctor gives the following helpful rules for using

: •

Don’t use

as a target for styling or scripting; use a

for that.

•

Don’t use

, or

is more appropriate.

•

Don’t use

unless there is naturally a heading at the start of the section.

Check your page in http://gsnedders.html5.org/outliner/. If you see an “untitled section” notice referring to a

, it means you omitted a heading for that

.

The

Element An

is a stand-alone item, such as a self-contained piece of information that could be lifted from the page and published in a forum, magazine, RSS feed, or newspaper. It should contain and enclose a heading (h1 to h6) and it can contain two or more sections. The key words are STAND ALONE. This is the essential characteristic of the

element. The www.whatwg.org specification states: “Authors are encouraged to use the

element instead of the

element when it would make sense to syndicate the contents of the element.” A blog containing ongoing and interesting discussions on this topic is at http://www.brucelawson.co.uk/2010/html5-articles-and-sections-whats-the-difference/ The controversy still simmers. Blogger/web developer Estelle Weyl of Standardista also speaks on the subject at http://www.standardista.com/html5-section-v-article Estelle uses the analogy of a newspaper containing sections such as sport, fashion, food, and so forth. Each section contains articles that contain sections. The sections in a newspaper are “main topics,” the articles are sub-topics. Each sub-topic is complete in itself which matches the W3C definition of

. However, the analogy falls down if one web page deals with only one topic (which is best practice). One topic (article) per web page makes a better user experience and it helps search engines to index a page. To add to the confusion, it could be said that a section (such as sport) in a newspaper is complete in itself and is, therefore, a large article which could be syndicated. Although a page seems to work whether you have an article inside an article, a section inside an article, or an article inside a section, Bruce Lawson’s model provides a useful guideline. My own solution is to forget

and use

; after all, the two new tags

and

are for the benefit of browser vendors, blogs, and web sites that provide RSS feeds; they are not particularly helpful for traditional web sites. Because

is unambiguous and clearly defined, I sometimes use it in HTML5 pages together with the JavaScript hack for IE 7 and IE 8.

20

www.it-ebooks.info

CHAPTER 1 ■ MOVING TO HTML5

■ Note The

element is treated as display:inline;. In current browsers, this may change eventually, but meanwhile set the

element to display:block;.

The

Tag The

tag separates a piece of text from the main content. It can have a border and/or a background color to make it stand out from the surrounding text. This means the

can contain an interesting extract to tempt a user to read the main body of text. An

with a border is shown in Figure 1-8.

Figure 1-8. The aside element can create a pull quote (shown inset with border). Listing 1-8 provides the pull quote separated from the main body of text. Listing 1-8. Demonstrating the Semantic

Tag (aside.html) (The text has been abbreviated and an internal style is used to save space) HTML5 exercise, an aside

Which browser should you design for?

The answer is all of them. If you survey a group of computer aficionados you will get very different answers…Internet Explorer. None had ever heard of Mozilla Firefox…a strong swing towards IE 9 from 2011.

The Tag Highlighting certain words or phrases can be achieved either by formatting them or giving them a colored background. In HTML5 you can use the tag; the effect is similar to using a highlighter pen on printed text, as shown in Figure 1-9.

22

www.it-ebooks.info

CHAPTER 1 ■ MOVING TO HTML5

Figure 1-9. The mark tag can be used to highlight text.

■ Tip The tag could be used in conjunction with a search, perhaps by employing Stuart Langridge’s searchhi script, which can be downloaded from http://www.kryogenix.org/code/browser/searchhi/

In Listing 1-9 for the tag, the markup uses the full word . Some manuals offer the abbreviation , but because the abbreviated version does not behave itself in all browsers, it is better to use the full word. Listing 1-9. Creates Text With Certain Words Highlighed as Shown in Figure 1-9 (mark.html) (The text in the listing has been abbreviated to save space and an internal style sheet is used.) HTML5 exercise, mark

A demonstration of

Which browser should we design for?

The answer is all of them. If you survey a group of computer aficionados you will get very different answers compared with the general public’s answers. I worked as a freelance computer technician for over eleven years, During that period I never came across a single person who was using a browser other than Internet Explorer. None had ever heard of Mozilla Firefox, although I did meet one person whose son had put Firefox on his computer, he wanted me to remove it because he did not know what it was. The great majority of ordinary folk are using IE because it came pre-installed with their computers. When reading magazine surveys, it would be safer to increase their survey figures for Internet Explorer. The results show that you should ensure that your web sites work in IE7 and IE8 because these are the most used (by default). It would be safe to predict that there will be a strong swing towards IE 9 from 2011.

The

The river Coly — tag, this is the companion tag to the
tag. To save space an internal style sheet is used in Listing 1-10. Listing 1-10. The HTML Markup Using the
Tag That Links a Caption to an Element (figure.html) Using the figure and caption tags

Fig 10 Using the HTML5 figure tag

25

www.it-ebooks.info

CHAPTER 1 ■ MOVING TO HTML5

The Tag The tag is a container for two or more headings (h1, h2, h3 ,h4, h5, and h6). It indicates that the headings are closely related, so it will be used to group together headings with subheadings, titles, and subtitles. Prior to the release of the tag, grouping headings resulted in problems with the outline of a document; this problem was called phantom nodes. Using avoids this problem because it combines the two headings into one node. The tags can only contain headings. The following is an example:

I put our holiday dates and address on a social network

An idiot’s tale

We returned to a ransacked house, even the furniture was taken.
Your friend,
Loopy Lou

tags on the same page.

The New HTML5 Form Controls The HTML5 recommendation for forms is almost complete. HTML5 forms are not straightforward because other factors affect them. A hack-proof form needs a handler in PHP, ASP.NET, or Perl. The handler must match the new HTML5 form tags. Accessibility will be compromised unless great care is taken to integrate the new HTML5 form elements with the requirements of screen readers. For some time, IE conditionals and alternative style sheets will have to be used so that surfers using IE 7 or IE 8 can see and use HTML5 forms. At the time of writing, IE 9 does not support HTML5 forms. IE 10 will most likely support the current forms as well as HTML5 forms. Only Opera 9.5+ supports all the new form elements at the time of writing. Mozilla Firefox 5+ supports most of the HTML5 form elements. Safari supports most of the form elements except for autocomplete. Chrome supports all elements except autocomplete and list. To see which browsers currently support forms, visit:http://www.w3schools.com/html5/html5_form_input_types.asp. The new form input controls are backwardly compatible so that you can use the new input for fields such as e-mail addresses. Browsers that don’t yet support will read it as if it was .

■ Note Even though formatting checks are built into HTML5, robots and criminals can still enter dodgy URLs. Therefore, you still need the protection of an anti-hack form handler for some fields.

26

www.it-ebooks.info

CHAPTER 1 ■ MOVING TO HTML5

The list of new HTML5 input controls includes the following: date (such as date of birth) email (e-mail address) number (a number) tel (a telephone number)

datetime datetime-local color range

search time url week month

The first four input controls in the left-hand column will probably be the most useful. The url input control in the right-hand column is positively dangerous because it will allow users to insert an address linked to a nasty web site. I never include a field for URL. If the user wants me to access a URL because no URL field is provided, they email me to request permission to send a URL; a robot can’t do that. The HTML5 form controls also have the following new attributes: autofocus

autofocus="autofocus"

required

required="required"

maxlength

maxlength="25"

Opera has a demo page that gives an indication of how the new inputs might eventually work. Open the demo in Opera 9.5 or later and try it out at:http://devfiles.myopera.com/articles/4582/html5-forms-example.html. The forms have a different appearance in different browsers, but they all function in the same way. The appearance in Opera is shown in Figures 1-11, 1-12, and 1-13.

Figure 1-11. The Opera HTML5 form demo shows what happens after you click the submit button.

27

www.it-ebooks.info

CHAPTER 1 ■ MOVING TO HTML5

In this case, I did not fill out an essential field. As a result, that field is surrounded with a double red border and a drop-down warning appears. In Opera, required fields have a red border, as shown in Figure 1-12. If the field is filled in correctly, a green border appears.

Figure 1-12. In this case, the e-mail address contained an illegal space. Although not displayed in this Opera demo, other Opera demos show that in some fields a dropdown choice is presented when the field is clicked. Other fields have a color picker or a slider for a range of values. Clicking a date field brings up a calendar to choose a date, as shown in Figure 1-13.

Figure 1-13. When the date-of-birth field is clicked, a calendar pops up, permitting the user to select the date of birth. As I stated at the start of this section, Opera has produced a demo page and some guidelines that describe how the Opera browser applies the HTML5 form elements. Listing 1-13 was taken from the Opera guide. It creates the interface shown in Figure 1-11 and will produce the error messages and the drop down list shown in Figures 1-11 through 1-13. Listing 1-13. Taken from the Opera Demo Page and Guide. In this case, only the main elements are listed (new_form_features_in-html5.html).

HTML5 forms example

This is an example for the article

28

www.it-ebooks.info

CHAPTER 1 ■ MOVING TO HTML5

Mobile Devices The HTML5 form controls will improve the inputs for touchscreen mobile devices that have no proper keypad. For instance, the date input control would pop up a calendar so that the user can select a date to avoid the tedium of typing it in from the touchscreen. When the e-mail field is focused, an @ symbol will be included in the touchscreen keyboard.

SVG Images So many HTML5 manuals refer to SVG (scalable vector graphic) images that you could be forgiven for thinking they are a new feature. They are not new, SVG images have been around since 1999, and they are currently experiencing a revival in association with new browser releases. Also an

30

www.it-ebooks.info

CHAPTER 1 ■ MOVING TO HTML5

Figure 1-14. An SVG Image The file must be saved as an .svg file. I have saved it as mysvg.svg in the companion web site. The red square can be seen by simply right clicking mysvg.svg and opening it in a browser (but not Safari, IE 7 or IE 8). It will not open by double-clicking the file. Adobe Photoshop and GIMP (GNU Image Manipulation Program) can import and display an SVG image. The file cannot be regarded as a normal image; for example, this won’t work, . Currently IE 9, Mozilla Firefox, and Chrome support inline SVG code like Listing 1-14 (that is, there is no need for