SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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?

  2. #2
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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.

  3. #3
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face

    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.

  4. #4
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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.

  5. #5
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks once more for you trouble - much appreciated!


Tags for this Thread

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
  •