html 5 reference

**elduderino** · Dec 8, 2009 15:57

Can anyone point me in a decent reference where I can see what html5 elements are supported by which browsers? I've been looking but can't find anything decent. I just want to know what elements such as <section> <header> <article> are suported by which browsers.

**ralph.m** · Dec 8, 2009 16:35

There's a very nice site called Dive into HTML5, and this page may be useful:

http://diveintohtml5.org/detect.html

**zcorpan** · Dec 8, 2009 17:45

You can look in the margin of the spec itself, it has little boxes showing implementation status in browsers.
http://whatwg.org/html5

There's also
http://wiki.whatwg.org/wiki/Implemen...n_Web_browsers
http://en.wikipedia.org/wiki/Compari...engines_(HTML5)
http://a.deveria.com/caniuse/

**zcorpan** · Dec 8, 2009 17:53

Originally Posted by elduderino

I just want to know what elements such as <section> <header> <article> are suported by which browsers.

None of those three are supported in any browser as far as I know. Browsers treat them as unknown elements, so if you want to use them you'll have to use a little script for IE (to be able to style them) and then you'll have to specify display:block (for all browsers). You should also be prepared that the spec might still change.

**elduderino** · Dec 9, 2009 02:10

Originally Posted by zcorpan

None of those three are supported in any browser as far as I know. Browsers treat them as unknown elements, so if you want to use them you'll have to use a little script for IE (to be able to style them) and then you'll have to specify display:block (for all browsers). You should also be prepared that the spec might still change.

Thanks for the reply

Right. I thought this was the case. I looked at a few compatibility charts and
noticed these tags were not supported. However, I've seen a few sites implementing these, and other, html5 tags which render in firefox. Some examples used conditional comments to feed ie div alternatives.

So, what gives? How comes ff renders these elements even though it doesn't support them? Where does display block come in to it?

**elduderino** · Dec 9, 2009 02:13

Oh and thanks for the links guys

**elduderino** · Dec 9, 2009 09:06

Right I think i've worked it out. Firefox and other browsers can deal with elements they don't recognise and apply associated styling...so I can safely use html5 elements, or at least the ones i mentioned above, safely.

Internet Explorer doesn't know how to render CSS on elements that it doesn't recognize. So i need to use a script that creates a dom element of the same name to get any css to be applied.

Is this all correct?

**zcorpan** · Dec 9, 2009 11:57

Yes... but you should be prepared that when browsers *do* support the new tags, your page might change (for instance you can't rely on these elements being display:inline, since they'll be display:block by default when they're supported in browsers).

**AlexDawson** · Dec 10, 2009 07:35

If you are using HTML5 I would highly recommend you create HTML5.js / .css file(s) so you can seperate all the required "hacks" to get the code working on older browsers, that way when browser support is better implemented (or if things change) and you feel it's safe to drop the redundant code you can simply delete the files rather than having to hunt down the deprecated / unrequired code. I did actually consider using HTML5 in my new website design but due to the instability of the spec (in terms of things changing their usage) I decided against it until it evolves to a candidate recommendation (at the minimum).

**webfreak05** · Dec 10, 2009 07:48

Can we practice using html5 first by doing some thing like this?

1) Using the following markup:

Code HTML4Strict:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
	<title>My first html5 page</title>
</head>
 
<body>
 
 
 
</body>
</html>

So now we can use some of the elements that are supported on both html 4 AND html5.

I'm just wondering if this will validate? And where can i find a html5 validator?

So before we start using elements like <header> <nav> and <section>, we practice getting comfortable using <div class="header">, <div class="nav">, <div class="section"> just to wrap things in our head.

I'm really new to this..hope i didn't ask something stupid..

But can i do what i've explained above?

Thanks for reading

**AlexDawson** · Dec 10, 2009 08:35

Here's the best HTML5 validator I'm aware of: http://html5.validator.nu/

Though on a side note you don't need the xmlns or xml:lang attributes unless you need to trigger the XHTML5 XML parsing bit's of HTML5.

PS: Yes you are right about using div's with ID's representing their replaced elements (if you want something that works cross browser), that would be the way I would recommend you do it too as you can just replace them out when their supported. Currently the only way to get the actual elements from HTML5 working would be to use JavaScript and CSS to force the element's creating (and block value setting on the display property).

**webfreak05** · Dec 10, 2009 21:24

Hi Alex,

So this means i can use the following markup, note i've removed

Code HTML4Strict:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

and just used

Code HTML4Strict:

<html>

So the following is perfectly valid html5?

Code HTML4Strict:

<!DOCTYPE html>
<html>
 
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
    <title>My first html5 page</title>
</head>
 
<body>
 
 
 
</body>
</html>

Thanks alot Alex

**felgall** · Dec 10, 2009 21:36

Originally Posted by webfreak05

So the following is perfectly valid html5?

Code HTML4Strict:

<!DOCTYPE html>
<html>
 
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
    <title>My first html5 page</title>
</head>
 
<body>
 
 
 
</body>
</html>

That would also be perfectly valid HTML2, HTML 3.2 and HTML 4 if you got rid of the unnecessary / at the end of the meta tag.

**zcorpan** · Dec 11, 2009 04:51

Originally Posted by webfreak05

So the following is perfectly valid html5?

Code HTML4Strict:

<!DOCTYPE html>
<html>
 
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
    <title>My first html5 page</title>
</head>
 
<body>
 
 
 
</body>
</html>

If you like removing cruft, the meta tag could be written as <meta charset=utf-8> in HTML5. If you specify charset with HTTP, you can remove the meta altogether.

If you want you can also remove the html, head, and body start and end tags, and still be valid (both in HTML4 and HTML5).

Code:

<!doctype html>
<title>My first html5 page</title>

**Santos Bulus** · Dec 15, 2009 06:14

In addition to the flexibility inherent in the technical benefits of the HTML 5 video element, open video also guarantees freedom from lock-in. The standard will be advanced collaboratively through inclusive processes, which means that all stakeholders have the ability to participate and are not beholden to any specific vendor. The availability of multiple interoperable implementations of the HTML 5 video standard, including some that are distributed under open source licenses, is paving the way for a more vibrant and healthy ecosystem in which no single company has complete dominance of the technology.

User Tag List

Thread: html 5 reference

Thread Tools

Display

html 5 reference

Bookmarks

Bookmarks

Posting Permissions