Wickham's HTML & CSS tutorial

Sitemap | Home | Search

HTML5 Features

View in Firefox, Safari, Opera and IE but IE6 often needs different solutions. In general IE7 and IE8 display like Firefox apart from the HTML5 and CSS3 features. The IE9 updates are mainly related to HTML 5 and CSS3 issues and it displays to a large extent like other main browsers. Google Chrome is based on the same WebKit engine as Safari.

Some of the examples are provided just to show problems, others show solutions that work in most major browsers. Use the example that suits you.
red icon problems   gold icon warning: works in some situations or some browsers or needs care to display as you wish   green icon OK in Firefox, Safari, Opera, Google Chrome and IE6 to IE9

 

HTML5 generally and useful links

HTML5 has not been formally released yet but some features are supported to a reasonable extent by latest versions of Safari and Google Chrome, to a lesser extent by Firefox and Opera and IE9 and badly by IE8.

The following links give information about HTML5 features:- HTML5 Overview and HTML5 differences from HTML 4 and HTML5 Doctype and X / HTML5 Versus XHTML 2 and caniuse.com and IE9 Guide. HTML5 & CSS3 Support will show what features are enabled for the browser you are using (provided that JavaScript/ActiveX is enabled) so if you change browsers you will see different features that work in that browser.

If you use any of the new HTML5 elements, like <header>, <aside>, <video> or <canvas> remember that some browsers (like IE6/7/8) won't process styles for the new elements until updated. In the case of IE6/7/8 you need to use the javascript conditional comment below (but the styles won't be processed if viewers have javascript/ActiveX disabled and your page layout and styling will not be displayed properly).

IE6/7/8 won't process styles for new tags like <header>, <aside>, <video> or <canvas> so IE6/7/8 won't recognise width, height, margins or other layout or styling codes but you can make IE6/7/8 process existing styles and display like modern browsers as shown on blancer.com website. Note the conditional comment enclosing the link to the javascript file which enables new HTML5 tags to be styled:-

The above comments mean that HTML5/CSS3 can be used even though HTML5 and CSS3 are still in the development stage. However, the javascript file, as far as I can see, merely allows the new tags to be styled, ie background, width, height, margin, font, etc. but doesn't allow the new processing that is required for some of the new tags like <video>, <canvas> that require special processing, but there are often other ways to make IE process the new features (like the object and embed tags for audio and video). It means that you can use the new tags and the IE page will show the elements in the correct places with some styling without disrupting the page layout, but without processing the new features inside the elements unless you find another method.

Internet Explorer 9 does include support for some of the new semantic elements such as <header> and <aside>as shown in IE9 Guide.

Many HTML5 features don't validate yet because they are new, but they should eventually as validators and browsers get up to date.

It's no longer necessary to state text/html in a meta tag like:-
<meta http-equiv="content-type" content="text/html; charset=utf-8"> but there must be a character code, so this is all that is required:-
<meta charset="utf-8">.

See also CSS3 Features.

HTML5 doctype

The doctype for HTML5 is <!DOCTYPE html>. You can use it now. Although HTML 5 is still in the draft stage it's preferable to test in as many browsers as possible and to use in conjunction with the javascript link shown above to enable the new tags to be processed in IE6/7/8.

HTML or XHTML coding

There are numerous articles discussing the merits of HTML or XHTML; see this Killersites thread. It's very technical but the gist is that HTML 4.01 is recommended until HTML5 becomes generally available and that XHTML 1.0 will, in practice, only be to HTML standards (known as "tag soup" because it's a mixture of XHTML markup and HTML standards). There is another comment by LSW on 16/02/08 here and posts by shelfimage and Zombie here.

Before 2007 many people thought that HTML was going to be superseded by XHTML and that one of the XHTML 1.0 doctypes was the appropriate doctype to use as preparation for the true XHTML 1.1 and 2.0 standards later. Many professional websites use one of the XHTML 1.0 doctypes, including mine, but times have changed. It now seems that XHTML will be for specialist XML based languages like SVG and MathML and inappropriate for normal websites. HTML 5.0 is being developed and XHTML 2.0 will be developed alongside for XML coding. XHTML 1.1 and the future 2.0 will never be processed as XML by IE6 when used properly with content="application/xhtml+xml" (they will probably just process as HTML or not at all).

Item 1.6 HTML vs XHTML in the W3C HTML 5 page says The first such concrete syntax is the HTML syntax. This is the format recommended for most authors. It is compatible with most legacy Web browsers. If a document is transmitted with the MIME type text/html, then it will be processed as an HTML document by Web browsers. This specification defines version 5 of the HTML syntax, known as "HTML5".
Then it says The second concrete syntax uses XML, and is known as "XHTML5". When a document is transmitted with an XML MIME type, such as application/xhtml+xml, then it is processed by an XML processor by Web browsers, and treated as an "XHTML5" document. Authors are reminded that the processing for XML and HTML differs; in particular, even minor syntax errors will prevent an XML document from being rendered fully, whereas they would be ignored in the "HTML5" syntax. which means that IE6 will have serious problems and the slightest coding error will cause display problems in any browser.
It seems that they want us to return to HTML in future, but right now anything using the doctype XHTML 1.0 will be OK and will always be OK provided the XHTML 1.0 doctype still exists, but new websites should move on to HTML5 eventually.

HTML5 is also referred to as X/HTML 5.0 (note the /) as it will process as HTML when combined with the meta tag including content="text/html" and process as XHTML when combined with the meta tag including content="application/xhtml+xml". XHTML 2.0 will be much stricter than X/HTML5. When properly processed by browsers capable of processing XHTML 2.0 even the smallest coding error will cause the page to fail completely, so validation will be essential. X/HTML 5 is an incremental step forward and is influenced by the current state of the art (web browser technology, etc.) and how markup is currently used (ie not perfectly coded).

Even w3schools, which is considered the best tutorial, converted to XHTML 1.0 in 1999 and used these comments (since removed):- XHTML is the "new" HTML. The latest HTML recommendation is HTML 4.01. This is the last and final HTML version. HTML will be replaced by XHTML, which is a stricter and cleaner version of HTML. and here W3Schools was converted from HTML to XHTML the weekend of 18. and 19. December 1999, by Hege Refsnes and Ståle Refsnes. but the comments seem to be out of date now and the conversion premature.

However, many of us have already used XHTML 1.0 doctypes and it is timeconsuming to go back to HTML 4.01 but it doesn't matter as XHTML 1.0 combined with text/html will be to HTML 4.01 standards. Coding in lower case is no problem but changing all the XHTML closing tags with /> back to just > for HTML is not worth the effort. There are other differences between HTML and XHTML which would have to be reversed.

So if you have not started coding, use one of the HTML 4.01 doctypes, but if you have already used XHTML 1.0, don't worry.

Browsers are not ready for XHTML 1.1 or the future 2.0. The doctypes need to be associated with the code application/xhtml+xml instead of text/html. Some newer validators raise a warning about a conflict between Mime Type and Document Type relating to the use of text/html rather than application/xhtml+xml for the media type when using XHTML 1.1. This is only a warning and your page may be classed as valid in other respects; it is unlikely to result in your page displaying incorrectly but it is nevertheless incorrect. You will need to use text/html as IE6 and some other old browsers do not recognise application/xhtml+xml as a Mime type.

XHTML 1.0 was intended to be a link stage between HTML 4.01 and XHTML 1.1 and when used with <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/> (which is necessary for older browsers) will only apply HTML standards as the assumed Mime type of application/xhtml+xml has been contradicted by text/html. So why use XHTML 1.0 Doctypes if it is only HTML standards that are actually used by browsers? The main reason some of us did is that if you prepare your web pages for XHTML, which we thought was to supersede HTML, you will not have lots of time-consuming editing to do later. This was a valid reason, but probably not now that XHTML may never be used for normal websites, although the future of the two competing standards is still unclear.

HTML and XHTML in the future

There are some useful comments in X/HTML5 Versus XHTML2 under "background".

HTML 4.01 will be supeseded by HTML5 and must be used with <meta charset="utf-8"> although the charset can be varied. It won't need to include content="text/html; inside the meta tag if the new doctype is used. w3.org states that This is the format recommended for most authors. The doctype will be <!DOCTYPE html>. See w3.org HTML5.

XHTML 1.0 will be superseded by XHTML2 and this must be used with <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8"/> which is for pure XML languages like SVG and MathML and not recommended for normal websites. IE6 will never process XHTML2 with the correct content type and XHTML2 will be so strict that any minor error like a missing period or comma will result in the page not rendering at all, possibly just an error statement like incorrect PHP shows. Pure XHTML can be written now with XHTML 1.1. A doctype is optional but an XML declaration <?xml version="1.0" encoding="UTF-8"?> above the html tag is essential. See w3.org XHTML2.

X/HTML5 is a curious compromise. The doctype will be <!DOCTYPE html>. Markup can be to HTML standards, like closing tags with > and other matters, or to XHTML markup standards like closing tags with /> and using lower case for codes and other matters. HTML5 markup can use merely <meta charset="utf-8">, while XHTML markup must use <meta http-equiv="content-type" content="text/html; charset=utf-8"/> (or another charset) and both will be processed as HTML, hence being called "tag soup" as stated in Wikipedia which says:- 5 Use of XHTML syntax in a document which is served as HTML. Serving XHTML code to browsers and telling them it is HTML constitutes serving tag soup, because the browser has no choice but to interpret it as HTML-like markup with "syntax errors". This particular use of tag soup is recommended by Appendix C of the XHTML 1.0 specification as a way of serving XHTML to browsers that do not support it..
If the markup is written to XHTML standards and doctype is excluded and the <?xml version="1.0" encoding="UTF-8"?> declaration above the html tag is included and <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8"/> is included, full XHTML standards will apply.

You may see references on this site to HTML and XHTML and to a large extent the terms are interchangeable.

Canvas

1 gold icon The canvas element works in Firefox, Safari, Google Chrome, Opera, IE9 and Konqueror provided javascript is enabled, but not in IE8 or earlier versions. Canvas must use javascript to draw the image to be put on the canvas.

The code for the canvas is:-

<canvas id="my-canvas" width="728" height="120"><span style="color: #ff0000;">Your browser does not support the canvas element or javascript is disabled.</span></canvas>

Look at the source code of this page to see the CSS in the head section style tag. Use of CSS for width and height distorts the image in the canvas in Firefox (and probably other browsers) because the image seems to be changed in proportion to the canvas size and doesn't retain the size stated in the javascript code; so you must use attributes explicitly in the <canvas>, not styles in CSS. For this example only the border and background-color are in CSS.

The html markup doesn't need to be within javascript tags with the image script but I found that when javascript is disabled Firefox showed the canvas with nothing in it but other browsers didn't show the canvas at all which is preferable. You only want the <noscript>...</noscript> code to display if javascript is disabled, without an empty canvas, so I put the canvas html markup inside the javascript using getElementById and putting a \ in front of " to prevent " from being processed as javascript, like this:-

var mycanvasouter2 = document.getElementById('mycanvasouter'); mycanvasouter2.innerHTML = "<canvas id=\"my-canvas\" width=\"728\" height=\"120\"><span style=\"color: #ff0000;\">Your browser does not support the canvas element or javascript is disabled.</span></canvas>";

I then created an empty div with no border, padding or margin with id="mycanvasouter" which won't show if javascript is disabled, but it contains the canvas div and the javascript images if javascript is enabled.

I wrote the javascript code in a separate canvas.js file so that it would not cause errors in a validator and added the javascript for the images in the same file. If the previous link doesn't work to see the javascript code for the images, use Firefox View Page Source and click on the canvas.js script link in the source file or copy/paste this url:- http://www.wickham43.net/canvas.js into your browser window, save it and open it with Notepad.

The sizes in cxt.fillRect(10,30,200,75); are 10px from the left, 30px from the top and an image size of 200*75px.

For a circle cxt.arc(170,55,25,2.4,Math.PI*2,true); the numbers relate to x and y positions, the radius and start angle (start angle 0 for full circle if with Math.PI*2,true; decimal places work). The start angle (and end angle if used) are radians. True or false make a reverse image.

The canvas script is followed by <noscript>...</noscript> text to advise people who have javascript disabled.

Canvas has not been implemented in Internet Explorer, however there is excanvas, a JavaScript library that implements most of the canvas functionality in IE. Example script is shown on the storiesinflight.com website.

There is more information on Canvas on the w3schools website and on the Mozilla website and on the html5 doctor website and on the w3.org website.

Audio and Video elements

2 gold icon The CSS3 <video>...</video> video tag is processed by Firefox, Safari and Google Chrome but not by IE6, IE7, IE8 or Opera as at 07/09/10. IE9 supports the H.264 video format with the <video> tag. These pages from Mozilla and Safari Reference Library and Kaltura show the code and the working draft of the HTML5 video and audio standard is at whatwg.org. The audio element is similar.

At present browsers process different formats from each other but you can code the same video or audio in several different source types (formats) and a browser will play the first format that it is able to play.

It seems that for .swf Flash files the <embed>...</embed> tags will be used instead of the video tags. The embed tag has been reintroduced in HTML 5 and will validate in the future but at present it remains an IE vendor-specific tag which doesn't validate:-

HTML markup:-

<embed src="flash.swf"></embed>

CSS:-

embed { width: 500px; height: 450px; }

How to use the new HTML5 element tags

3 green icon There are lots of discussions about the semantic use of the new HTML5 tags.

Whether you have several <section> tags with <article> tag(s) inside or several <article> tags with <section> tag(s) inside depends on the nature of the page content. The <article> tag should be for independent content which can stand on its own - content that could be syndicated, possibly extracts or links to an external document.

You might need a <header> tag in one or more <section> tags or <article> tags if a section or article needs a div to hold an h tag, logo, links, etc.

The <nav> tag should be for navigation around the website, not for external links. The <nav> tag could be within the <header> tag or separate as I've shown if it's shown under the header or in a sidebar.

The new tags may appear to be just bloat as sometimes they are unnecessary, for instance the <ul> tag for site navigation doesn't need a containing <nav> tag and the other tags may not do anything if they aren't styled. However, the new tags are designed for semantic use and should help computer analysis by search engines and screen readers. The new tags are also probably necessary for positioning on the page and if you have different backgrounds or styles for each element.

Each time you want to use an h tag in a new HTML5 element you should start with a highly ranked h tag, then continue in numerical order, but you can repeat <h1> to <h6> within the same element, perhaps using <h2> then several <h3> tags, then <h2> again with more <h3> tags. Note: Each section can have its own heading hierarchy. Therefore, even a nested section can have an <h1>.

Adapted from the Sections and Outlines tutorial:- Note that the rank of the parent element (<h1> for a first top-level section, <h2> for the subsection and <h3> for a second top-level section) is not important: though less clear and not recommended, any rank can be used as the heading of an explicitly-defined section. So you can start a new element which is a top-level parent with a lower ranking h tag like <h3> (as long as other h tags and those in any nested elements have the same or lower rank eg <h4>, etc., but not a higher rank).

Note that the <nav> and <footer> tags may also have an h tag (as in this page) but if it doesn't need to show as it's purely semantic (only for screen readers), hide it by displaying off-screen to the left with text-indent in a class like this:-

If you want some h tags to have a different style from others of the same rank, give them an id or class with different CSS code.

Use of <h1> tags

<h1> tags should only be used sparingly. My view is that the page title should be a <h1> tag, probably within a <header> tag. Every <section> tag should start with <h1> although nested sections could start with either <h1> or a lower-rated h tag. Elements like <header>, <footer>, <nav>, <aside>, etc. may justify a <h1> tag if the content is important enough for SEO (Search Engine Optimisation) purposes but generally I would not use a <h1> tag for <nav> or <footer> tags as these warrant a <h2> to <h6> tags for use by screen readers for blind people but the content is unlikely to be important enough to justify a <h1> tag for SEO purposes. The old recommendation to use <h1> only once on a page is now out of date.

Outliner to demonstrate page structure

This Sections and Outlines tutorial shows how your page should be structured and Outliner can be used to show how the various new html5 tags form an outline of your document structure. This Page Outliner is the outline of this tutorial page.

Here is my take on it for the body section of a theoretical tourism website:-

The above code gives this outline in the Outliner link above:-

This Page Outliner is the outline of this tutorial page.