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 & above updates are mainly related to HTML 5 and CSS3 issues and display 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 IE

 

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 which is old but still relevant. It's very technical but the gist is that HTML is recommended (the current HTML 4.01 or the draft HTML5) and that XHTML 1.0 will, in practice, only be to HTML standards (known as "tag soup" because it's a mixture of XHTML syntax markup and HTML processing) as stated in Wikipedia which used to say:- 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.. There is another comment by LSW on 16/02/08 here and posts by shelfimage and Zombie here. However, now there is HTML5 and XHTML5 (X/HTML5), see below.

The comment above and a lot of the comments below are now irrelevant as the way forward for normal websites is supposed to be X/HTML5 (see below). Wikipedia says However, in 2004, the Web Hypertext Application Technology Working Group (WHATWG) formed, independently of the W3C, to work on advancing ordinary HTML not based on XHTML. The WHATWG eventually began working on a standard that supported both XML and non-XML serializations, HTML5, in parallel to W3C standards such as XHTML 2. In 2007, the W3C's HTML working group voted to officially recognize HTML5 and work on it as the next-generated HTML standard. In 2009, the W3C allowed the XHTML 2 Working Group's charter to expire, acknowledging that HTML5 would be the sole next-generation HTML standard, including both XML and non-XML serializations. Of the two serializations, the W3C suggests that most authors use the HTML syntax, rather than the XHTML syntax. Some of the references to XHTML 1.0, XHTML 1.1 and XHTML 2.0 below are now largely irrelevant but useful if you want to code pure XHTML (not appropriate for a normal website).

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 a transition towards the true XHTML 1.1 and 2.0 standards later. Many professional websites use one of the XHTML 1.0 doctypes, including some of mine, but times have changed. It now seems that pure 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 was being developed alongside for XML coding. XHTML 1.1 and 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). Now wikipedia says In 2009, the W3C allowed the XHTML 2 Working Group's charter to expire, acknowledging that HTML5 would be the sole next-generation HTML standard, including both XML and non-XML serializations.

Item 1.6 HTML vs XHTML in the W3C HTML5 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 "HTML" 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.

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; charset=utf-8" and process as pure XHTML when combined with the meta tag including content="application/xhtml+xml". Pure XHTML including content="application/xhtml+xml" or having <?xml version="1.0" encoding="UTF-8"?> above the doctype will be much stricter than X/HTML5. When properly processed by browsers capable of processing XHTML even the smallest coding error will cause the page to fail completely, so validation will be essential. X/HTML5 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 in many cases, so it will still display, even with errors).

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 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 were 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 syntax but it doesn't matter as XHTML 1.0 combined with text/html will be to HTML 4.01 standards. Coding element and attribute names in lower case is valid in HTML and XHTML 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 or the HTML 5 doctype, but if you have already used XHTML 1.0, don't worry.

Older browsers will not process pure XHTML. 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 the XHTML 1.1 doctype. 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 transitional stage between HTML 4.01 when used with <meta http-equiv="content-type" content="text/html; charset=utf-8" /> (which is necessary for older browsers) and pure XHTML when used with <meta http-equiv="content-type" content="application/xhtml+xml" />. When using the XHTML 1.0 doctype with text/html 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 going to supersede HTML, you will not have lots of time-consuming editing to do later and it seemed neater to close all tags properly and to use lower case for element and attribute names. This was a valid reason, but probably not now that pure XHTML will never be used for normal websites.

HTML syntax markup

See HTML Syntax and HTML4 Specification regarding elements and attributes. These standards also apply to HTML5.

XHTML syntax markup

The following comments relate to XHTML syntax markup coding, so if you are coding HTML, ignore the different codes except that it is often (unofficially) recommended that you use lower case for element and attribute names even for HTML.

If you do choose or have already chosen XHTML 1.0 doctype and syntax it is good discipline for you. It is only slightly more onerous than HTML coding and worth the extra effort. Although browsers may be processing to HTML standards, validators will be checking that your coding conforms to XHTML syntax standards so validate (check) your XHTML and CSS code using the validators (see Links) and you will have code ready for true XHTML standards if you ever want to upgrade to pure XHTML. Major browsers can tolerate a surprising number of errors but don't rely on that, especially with XHTML.

Don't use upper case (capitals) for element and attribute names in styles. XHTML forbids the use of capitals for codes although HTML does not. This is a major difference and conversion of HTML files to XHTML requires all capitals in codes to be changed.

Another principal difference is that all tags need to be closed where in HTML many could be left unclosed; notably meta tags, image tags, <br>, <hr>, form input tags and object parameter tags which need closing with /> in XHTML instead of just >. Also HTML allows some tags like <p> to be left unclosed (without a </p> tag) but tags must be closed in the XHTML syntax.

XHTML is a reformulation of HTML. The w3.org XHTML 1.0 and 1.1 links do not repeat all the basic codes. For basic coding use HTML 4.01 and then check with XHTML 1.0 for code differences and with XHTML 1.1 if you are using XHTML 1.1 for pure XHTML. See the comments regarding XHTML 1.0 and 1.1 in Doctypes above. However, most of the content of the last two links is irrelevant if you are moving on to the HTML5 standard.

Note that Wikipedia says Of the two serializations, the W3C suggests that most authors use the HTML syntax, rather than the XHTML syntax.. However, many people prefer to use the XHTML syntax because it seems neater and more logical to close all tags and use lower case for all element and attribute names. In fact, the official HTML 4 Specification says that all element names should be in upper case and all attribute names should be lower case to distinguish them, but many developers still prefer to use the XHTML syntax with HTML doctypes as HTML is case insensitive.

HTML and XHTML in the future

There are some useful comments in X/HTML 5 Versus XHTML 2 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 HTML5 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 was going to be superseded by XHTML 2 but XHTML 2.0 has been terminated and XHTML5 must be used with <meta http-equiv="content-type" content="application/xhtml+xml" /> for pure XML languages like SVG and Math ML and is not recommended for normal websites. IE6 will never process pure XHTML with the correct content type and pure XHTML 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 XHTML5 and an XML declaration <?xml version="1.0" encoding="UTF-8"?> above the html tag is essential. See w3.org XHTML 2.

X/HTML5 is a curious compromise. The doctype will be <!DOCTYPE html>. Markup can be to HTML syntax standards, like closing tags with > and other matters like case insensitive element and attribute names, or to XHTML syntax markup standards like closing tags with /> and using lower case for element and attribute names and other matters. HTML5 markup can use merely <meta charset="utf-8">, while XHTML5 markup for use in normal websites (ie not pure XHTML) must use <meta http-equiv="content-type" content="text/html; charset=utf-8" /> (or another charset) and both will be processed as HTML. However, using the XHTML syntax with HTML5 is called "tag soup" as stated in Wikipedia which used to say:- 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". HTML5 doesn't seem to mind which syntax you use provided it is written with content="text/html; charset=utf-8" or another charset.
If the markup is written to pure XHTML standards with the <?xml version="1.0" encoding="UTF-8"?> declaration and <meta http-equiv="content-type" content="application/xhtml+xml" /> 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 HTML5 <video>...</video> video tag is processed by Firefox, Safari, Google Chrome and Opera but not by IE6, IE7 or IE8. However, IE9 and above support the H.264 (for mp4) video format with the <video> tag. These pages from Mozilla (Theora - ogg type ogv format) and Safari Reference Library (H264 - mp4 format) and Kaltura and dev.opera.com (Theora - ogv format) show the code. The working draft of the HTML5 video and audio standard is at whatwg.org. The audio element is similar and html5doctor is a tutorial.

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. If the following video doesn't play in your browser it's because I haven't coded an extra format suitable for your browser. This Wikipedia page lists appropriate formats for different browsers.

The .ogv format is a .ogg type and was given when I converted from another format using this online converter from online-convert.com.

Flash in HTML5

It seems that for .swf Flash files the <embed.../> tag will be used instead of the <video>...</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. There is no closing tag, as shown in this w3resource.com tutorial:-

HTML markup:-

The code is:-

<embed src="yourflashfile.swf">

The CSS code is:-

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.

Dropdown and flyout menus on touch screens

Note that drop down menus and flyout menus won't show the drop down or flyout levels when using a touch screen as you can't hold the hover and click a nearby link at the same time with a finger unless you use the HTML5 ARIA codes described here:- HTML5 aria-haspopup with a tutorial here:- HTML5 ARIA.