The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

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!

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

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>).

Originally Posted by Luke Morton

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.

Originally Posted by Luke Morton

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.

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

Originally Posted by zcorpan

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.

Originally Posted by zcorpan

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.

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.

Originally Posted by Luke Morton

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.

Originally Posted by Luke Morton

I completely agree with your point here, I have removed the additional section since it is unnecessary.

@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.

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.

Originally Posted by AlexDawson

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.

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."

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.

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>.

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.

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.

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... :-)