SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    html 5 reference

    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.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,321
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    There's a very nice site called Dive into HTML5, and this page may be useful:

    http://diveintohtml5.org/detect.html

  3. #3
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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/
    Simon Pieters

  4. #4
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by elduderino View Post
    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.
    Simon Pieters

  5. #5
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by zcorpan View Post
    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?

  6. #6
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh and thanks for the links guys

  7. #7
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  8. #8
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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).
    Simon Pieters

  9. #9
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    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).

  10. #10
    SitePoint Enthusiast
    Join Date
    Nov 2009
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  11. #11
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    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).

  12. #12
    SitePoint Enthusiast
    Join Date
    Nov 2009
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  13. #13
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,869
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by webfreak05 View Post
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  14. #14
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by webfreak05 View Post
    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>
    Simon Pieters

  15. #15
    SitePoint Member Santos Bulus's Avatar
    Join Date
    Dec 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •