New elements in HTML5

A question please about the new elements in HTML5, such as section, article, aside and nav: as I understand they are block elements, and therefore function exactly the same as a div (assuming we take care to specify display:block to keep IE happy).
Now, there is a lot of debate about the correct usage, but am I correct in saying that the distinction is ONLY w.r.t. semantics? In other words, the browsers treat them exactly the same, technically they can be interchanged, and the person viewing the page will see no difference whatsoever? :agree:

but am I correct in saying that the distinction is ONLY w.r.t. semantics? In other words, the browsers treat them exactly the same, technically they can be interchanged, and the person viewing the page will see no difference whatsoever?

Yes.

Browsers without HTML5 parsers (except IE) treat unknown tags as inlines by default, so indeed you set those to display: block and then yes, they act like any other block element visually.

(assuming we take care to specify display:block to keep IE happy).

No, it’s worse. IE doesn’t treat unknown tags as inlines. It ignores their existence completely and doesn’t include them in the DOM.
You must use document.createElement(‘theElement’); to add new HTML5 elements to the IE DOM.

Remy Sharp’s famed “HTML5shim/shiv” does this, but you can also roll your own. It’s a simple one-liner, and you only have to create the elements once regardless of how many of them you have on the page.

and therefore function exactly the same as a div

Function is a funny word. I would say, once the new elements are made blocks for browsers who need you to do that for them, they follow the same visual formatting rules that every other block element does. “Function” doesn’t really make sense in this context.

Additionally, browsers can select elements by tag name (IE can as well once you’ve created them once in the DOM), meaning you can use new HTML5 tag names in CSS and Javascript.

The new elements, in browsers who do have an HTML5 parser, are supposed to come by default with one or more roles, an idea stolen from XHTML2. Whether technology other than screen readers will eventually react in some way to these roles, I don’t know, but I know for example NVDA recognises at least some roles such as the default “navigation” role on <nav> elements.

Lastly, the hippy ideal is that multiple devices and softwares will actually do something useful with these new semantics, rather than also treating them “like divs”. Other than screen readers, though, I don’t actually know of any who do today. Someone working on HTML5 can correct me though.

Thanks once more for you trouble - much appreciated! :smiley:

To sum up: if I use the elements “section” and “article” incorrectly, then the world is not going to fall apart.

The world doesn’t fall apart when people remove outlines from focussed elements without adding some other visual cue either, but I could breathe fire : )

One thing to be careful of if you are going to be using <article> and <section>:
HTML5 (so this should be for browsers with an HTML5 parser, which today I know is latest Firefox, Opera, and the two webkits I believe, and IE10 supposedly will) creates something known as the document outline, which is new from HTML4.

The document outline is created by elements who can section a document. This includes section and article elements.

Supposedly this creates a hierarchy, and one of the reasons for this was to implement another idea stolen from XHTML2: automatically-leveled heading tags.

XHTML2 had a <h> tag for “overall header”. Its “level” (h1, h2, etc) would be determined not by the tag name, but where in the document nesting level it was sitting in.

HTML5 aims to do this, except they use <h1> for this (because browsers already knew what h1 was). So theoretically, incorrectly using section and article tags could cause unintentional strangeness with your headers (I don’t know if any browser actually uses the document outline, and I don’t know if other heading tags are affected (h2-6)).

Lastly, if you are using these elements and want a better idea of when to use what, I’ve found html5doctor.com to be a pretty good place to find the current “best practices” regarding when to use which tag.

I’ll actually disregard their older posts, simply because as the spec matures and slowly makes its way to candidate recommendation, opinions and ideas on how the markup works best changes.
example article

Many of the “doctors” are themselves writing the specs.

Thank you Stomme for your comprehensive reply, that clears it up well for me.
I forgot to mention about using the HTML5shiv for IE, and THEN adding display:block.
I follow your reasoning about “function”, but I was trying to avoid using the word “behave”, because “behaviour” has other implications.
To sum up: if I use the elements “section” and “article” incorrectly, then the world is not going to fall apart.
Dankie, vriend. :slight_smile: