SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Zealot Luke Morton's Avatar
    Join Date
    Jul 2005
    Location
    Essex, England.
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Scrutinize my HTML5

    I have been experimenting with HTML5 and just wondered how other people are finding it really. I have a test page:

    http://lukemorton.co.uk/html5

    What do you think? Is there anything wrong with it, semantically or otherwise? Is there anything that can be wrong given the spec is unfinished?

    Has anyone else got any test HTML5 sites up and running?

    Plenty if question marks from an enquiring mind, I would like to hear other peoples opinions on the subject of HTML5 and it's usefulness today.

    Thanks.
    Luke Morton
    UK Web Explorer| lukemorton.co.uk

  2. #2
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://gsnedders.html5.org/outliner/....uk%2Fhtml5%2F

    If "LUKEHTML5" is intended to be the top-level heading, you need to wrap it an h1.

    I'm not sure about using section for the intro box; I'd probably use div there instead.

    You should drop the wrapping <section> in <article>. The <article> is a section already, and each h2 seems to be intended to start their own subsections.

    Otherwise it looks ok to me.
    Simon Pieters

  3. #3
    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)
    I have been considering using HTML5 for my new web design, the problem is that the spec isn't final, it's dependant on JavaScript and its support in IE is minimal if none at all, so I will probably skip it until later down the line. Your website looks ok though, so carry on creating!

  4. #4
    SitePoint Zealot Luke Morton's Avatar
    Join Date
    Jul 2005
    Location
    Essex, England.
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for both your comments guys.

    Quote Originally Posted by zcorpan View Post
    http://gsnedders.html5.org/outliner/....uk%2Fhtml5%2F

    If "LUKEHTML5" is intended to be the top-level heading, you need to wrap it an h1.

    I'm not sure about using section for the intro box; I'd probably use div there instead.

    You should drop the wrapping <section> in <article>. The <article> is a section already, and each h2 seems to be intended to start their own subsections.

    Otherwise it looks ok to me.
    I would say LUKEHTML5 would be classed as branding and thus doesn't need as much prominence within the hierarchy of the page. The current header for the page is the header for the article which is the main purpose of the page.

    As for a div, isn't it more semantically defined as a section rather than a division?

    As for subsections I think the draft states headings can be used to split sections into subsections rather than using the section element.

    @Alex I would say although there is not much point in making a site with html5 it is certainly worth a play with just for the shear fact of experimentation to see what it will be like. Plus the more you learn now the quicker you will pick it up when it takes over if not before.

    Saying that what is the predicted date for the finishing of the draft? ha
    Luke Morton
    UK Web Explorer| lukemorton.co.uk

  5. #5
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Luke Morton View Post
    I would say LUKEHTML5 would be classed as branding and thus doesn't need as much prominence within the hierarchy of the page. The current header for the page is the header for the article which is the main purpose of the page.
    As can be seen in the outline, the "page" doesn't have a heading at all, and the article heading is a few sub sections down in the hierarchy. If you don't intend to have further <article>s (i.e. a series of blog posts) on that page, then it might make more sense to put the heading straight under <body> and not use <article> (i.e. <body> would become your <article>).

    Quote Originally Posted by Luke Morton View Post
    As for a div, isn't it more semantically defined as a section rather than a division?
    A <section> generates a section (with or without a heading) in the outline. A <div> doesn't. If you intended to have setions without headings in the outline, then that's fine, but to me it doesn't seem to be the intent.

    Quote Originally Posted by Luke Morton View Post
    As for subsections I think the draft states headings can be used to split sections into subsections rather than using the section element.
    Yes, but it doesn't have the effect you may think it has. Right now, the first <h2> applies to the parent <section>, which means that it is a heading of the paragraphs that appear above the heading! The subsequent <h2>s will generate implied sections that are on the same level as the explicit <section>, which probably is not what you intended.

    Here's an example:
    Code:
    <!-- this will result in a confusing outline -->
    <article>
    <h1>test</h1>
    <section>
    <p>foo</p>
    <h2>bar</h2>
    <p>baz</p>
    <h2>quux</h2>
    <p>spam</p>
    </section>
    </article>
    The "bar" heading applies to the paragraphs "foo" and "baz". In effect it's basically equivalent to:
    Code:
    <article>
    <h1>test</h1>
    <section>
    <h2>bar</h2>
    <p>foo</p>
    <p>baz</p>
    </section>
    <section>
    <h2>quux</h2>
    <p>spam</p>
    </section>
    </article>
    However, had you omitted the <section> tag altogether, then it would be equivalent to the following, which is probably what you intended:
    Code:
    <article>
    <h1>test</h1>
    <p>foo</p>
    <section>
    <h2>bar</h2>
    <p>baz</p>
    </section>
    <section>
    <h2>quux</h2>
    <p>spam</p>
    </section>
    </article>
    Simon Pieters

  6. #6
    SitePoint Zealot Luke Morton's Avatar
    Join Date
    Jul 2005
    Location
    Essex, England.
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You certainly make some good points Simon.

    Quote Originally Posted by zcorpan View Post
    As can be seen in the outline, the "page" doesn't have a heading at all, and the article heading is a few sub sections down in the hierarchy. If you don't intend to have further <article>s (i.e. a series of blog posts) on that page, then it might make more sense to put the heading straight under <body> and not use <article> (i.e. <body> would become your <article>).
    I would kind of agree with this however by removing the article would mean there would be two header elements to the document, whereas the branding of my site is in a header or maybe it shouldn't be :S


    Quote Originally Posted by zcorpan View Post
    A <section> generates a section (with or without a heading) in the outline. A <div> doesn't. If you intended to have setions without headings in the outline, then that's fine, but to me it doesn't seem to be the intent.
    I would say in my eyes the intro is a section of the content, if I were to use this page as a feed, the <section class="intro"> would make more sense to me since it delivers an intro to the article so can be a standalone section, it is not necessarily part of the main content although it introduces it.

    Quote Originally Posted by zcorpan View Post
    Yes, but it doesn't have the effect you may think it has. Right now, the first <h2> applies to the parent <section>, which means that it is a heading of the paragraphs that appear above the heading! The subsequent <h2>s will generate implied sections that are on the same level as the explicit <section>, which probably is not what you intended.
    I completely agree with your point here, I have removed the additional section since it is unnecessary.
    Luke Morton
    UK Web Explorer| lukemorton.co.uk

  7. #7
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Luke Morton View Post
    I would kind of agree with this however by removing the article would mean there would be two header elements to the document, whereas the branding of my site is in a header or maybe it shouldn't be :S
    Good point. Although there's no rule saying you can't have two <header>s, I agree that it might look a bit confusing. I think what you have now is pretty good.

    Quote Originally Posted by Luke Morton View Post
    I would say in my eyes the intro is a section of the content, if I were to use this page as a feed, the <section class="intro"> would make more sense to me since it delivers an intro to the article so can be a standalone section, it is not necessarily part of the main content although it introduces it.
    Ok.

    Quote Originally Posted by Luke Morton View Post
    I completely agree with your point here, I have removed the additional section since it is unnecessary.
    Simon Pieters

  8. #8
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    BTW, the encoding thing is a known bug in validator.w3.org. Meanwhile you can use validator.nu instead.
    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)
    Quote Originally Posted by Luke Morton View Post
    @Alex I would say although there is not much point in making a site with html5 it is certainly worth a play with just for the shear fact of experimentation to see what it will be like. Plus the more you learn now the quicker you will pick it up when it takes over if not before.
    I have been experimenting with it (unofficially) and keeping a close eye on the evolving specification - I am a stickler for keeping my knowledge as up-to-date as humanly possible so I spend a lot of time keeping my education fresh and learning new things (I dedicate an entire day a week to all the latest advances!). Personally I wish more of us did it, I find it really helps me do my job well.

  10. #10
    SitePoint Enthusiast
    Join Date
    Jul 2007
    Location
    USA
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Good for you for using your valuable time keeping up with the "team". Imagine if everyone did what you did; the browsers in the world would all render every page equally. Even IE. They would have to.


    Quote Originally Posted by AlexDawson View Post
    I have been experimenting with it (unofficially) and keeping a close eye on the evolving specification - I am a stickler for keeping my knowledge as up-to-date as humanly possible so I spend a lot of time keeping my education fresh and learning new things (I dedicate an entire day a week to all the latest advances!). Personally I wish more of us did it, I find it really helps me do my job well.

  11. #11
    SitePoint Wizard bronze trophy cydewaze's Avatar
    Join Date
    Jan 2006
    Location
    Merry Land, USA
    Posts
    1,096
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Just for giggles, I viewed it IE6, which made the predictable mess out of it.

    Looks good in Firefox though.

  12. #12
    perfect = good enough peach's Avatar
    Join Date
    Jun 2004
    Location
    -Netherlands-
    Posts
    1,383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have to put a link up to Jos Buivenga's websites for embedding the fontin font:

    "ou may use this font for Font-Face embedding, but only if you put a link to www.exljbris.nl on your page and/or put this notice /* A font by Jos Buivenga (exljbris) -> www.exljbris.nl */ in your CSS file as near as possible to the piece of code that declares the Font-Face embedding of this font."

    http://www.josbuivenga.demon.nl/fontinsans.html

    Other than that the code looks really nice

  13. #13
    SitePoint Zealot Luke Morton's Avatar
    Join Date
    Jul 2005
    Location
    Essex, England.
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cydewaze View Post
    Just for giggles, I viewed it IE6, which made the predictable mess out of it.

    Looks good in Firefox though.
    Haha I didn't even want to look, I thought I might get queezy!

    @Peach I have now referenced the font, thanks for the heads up ^__^

    Thanks everyone for your input so far
    Luke Morton
    UK Web Explorer| lukemorton.co.uk

  14. #14
    SitePoint Enthusiast fvsch's Avatar
    Join Date
    Apr 2009
    Location
    Lyon, France
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks good as it is now.

    About the encoding issue

    It's a bug in the W3C's validator. They use the same HTML5 parser and validation mechanisms as validator.nu, but they are not as up-to-date as validator.nu i think.

    (Yet another reminder that the W3C's HTML validator, or any validator for that matter, is nothing but a tool.)

  15. #15
    SitePoint Enthusiast fvsch's Avatar
    Join Date
    Apr 2009
    Location
    Lyon, France
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks pretty much good as it is now.

    About the meta charset issue

    It's a bug in the W3C's validator. They use the same HTML5 parser and validation mechanisms as validator.nu, but they are not as up-to-date as validator.nu i think.

    (Yet another reminder that the W3C's HTML validator, or any validator for that matter, is nothing but a tool.)

    About sections

    I would argue that one should use as few sections as possible. When you overuse semantic elements, you increase the risks of using the wrong semantics, and of using redundant, far-fetched or unnecessary semantics that could produce an excruciatingly verbose rendering in screen readers.

    I think your section element for the article's introduction is unnecessary. HTML5 has no element for marking up article introductions. You may feel that this part of the article is special, but this specialness doesn't translate to a section element. Using a DIV should be preferred here.

    Obviously using one unnecessary section element is no big deal. Doing it repeatedly in template files for a website with a lot of content might be a bit more problematic. Well, that's if screen readers decide to render section elements in some way (maybe something like what they do for frames, or for per-title navigation). I can picture them ignoring section and article elements altogether, to filter out the noise caused by overly enthusiastic use on some websites. I'm a bit doubtful of their willingness to implement the outline algorithms beyond what they already do for HN elements, too. Well, we'll see.

  16. #16
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Isn't DIV superfluous now that SECTION, NAV, ARTICLE and friends exist? Surely they are just slightly more specific versions of DIV? They don't seem to have any more specific rendering requirements.

  17. #17
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No. <section> affects the document outline (just like e.g. <h2> does), <div> doesn't. If you want an element for styling or grouping together your <article>s in your archive, or similar, then unless that element starts with a heading, you should use <div> instead of <section>.

    Quote Originally Posted by HTML5
    Note: The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.
    http://www.whatwg.org/specs/web-apps...ection-element
    Simon Pieters

  18. #18
    SitePoint Zealot Luke Morton's Avatar
    Join Date
    Jul 2005
    Location
    Essex, England.
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Florent V. View Post
    About sections

    I would argue that one should use as few sections as possible. When you overuse semantic elements, you increase the risks of using the wrong semantics, and of using redundant, far-fetched or unnecessary semantics that could produce an excruciatingly verbose rendering in screen readers.

    I think your section element for the article's introduction is unnecessary. HTML5 has no element for marking up article introductions. You may feel that this part of the article is special, but this specialness doesn't translate to a section element. Using a DIV should be preferred here.
    Well an introduction in my opinion out be explicitly listed in an outline of an article so I think <section> is appropriate for the intro. And as previously quoted by zcorpan that is what the section element is for:

    Originally Posted by HTML5
    Note: The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.
    Luke Morton
    UK Web Explorer| lukemorton.co.uk

  19. #19
    SitePoint Enthusiast Yiwu's Avatar
    Join Date
    Mar 2008
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    most of your code are under the xhtml standard.

  20. #20
    SitePoint Member
    Join Date
    Jul 2007
    Location
    New York, NY
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Luke:

    Nice to see you diving into HTML5! [snip]

    You might want to consider this implementation of @font-face:
    http://paulirish.com/2009/bulletproo...tation-syntax/
    It handles IE and others in a single statement, and blocks unnecessary font file downloads!

    A note about linking to the off-site IE shiv: IE8's InPrivate Filtering tracks files that sites download from other domains. When it encounters the same file on "x-number" sites, it begins blocking that file (boldly assuming it must be ad-related or just to screw with Google's code base, I'll let you decide). You might want to download that file to your own server and serve it from there.

    According to the spec, you wouldn't use the nav element for the footer navigation, nav should only be used for "main navigation", which is a blurry description, but at the very least I think wouldn't include validation links...

    Otherwise, I think what you have right now looks beautiful! I, myself, find I now need to go back and revisit my use of section... My early interpretation of the spec seemed like section was more of a parent element, like we would have used something like div id="leftcolumn" of something, but that does not seem to be the case now... :-)

    The joys of rushing into still-forming specs!!

    Cheers,
    Atg
    Last edited by spikeZ; Sep 18, 2009 at 05:00. Reason: Keep personal links in your sig please Aaron :)
    Aaron T. Grogg
    aarontgrogg.com/


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
  •