The section element

by .

Updated 22/01/2014 by Dr. Steve

We doctors are a bunch of chums using HTML5 and writing about how we do it. Apart from spurious requests for medical advice, the questions we receive most are about using the section element, and we realise that we’ve been using the section element incorrectly all this time.

Sorry.

What we’ve been doing wrong is using section to wrap content in order to style it, or to demarcate the main content area from the nav, header, footer etc. These are jobs for div, not section.

The section spec says

The section element represents a generic document or application section…The section element is not a generic container element. When an element is needed only 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.

section is a blob of content that you could store as an individual record in a database. It generally looks like this (and note that the heading goes inside the section element, not immediately before it):

<body>
...
<section>
<h2>level of heading = section nesting level</h2>
rest of the content
</section>
...
</body>

With very few exceptions, section should not be used if there is no natural heading for it.

The spec says

The theme of each section should be identified, typically by including a heading (h1h6 element) as a child of the section element.

Check your work in the HTML 5 outliner tool. If you see any instances of “untitled section” that corresponds to a section, you’re probably doing it wrong. (It’s fine for a nav or aside element to be untitled, however).

Section is also the most generic of the sectioning elements. Make certain that you don’t really need an article, which is defined as

a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

What about main content?

Use the main element to mark up the main content area of a document. Dr. Rich Clark explains how to use The main element

Rules of thumb for using section

Of course, there are always exceptions, but these should give useful guidance for 99% of cases:

  • Don’t use it just as hook for styling or scripting; that’s a div
  • Don’t use it if article, aside or nav is more appropriate
  • Don’t use it unless there is naturally a heading at the start of the section
  • The revised spec (as of ) says:

    Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.

    As blogposts and comments are often syndicated (by being pulled into other blogs or being linked via twitter, reddit etc) they should be articles.

Thanks to Opera’s Lachlan Hunt for fact-checking this article. Please also note that we haven’t yet changed the WordPress theme to get rid of extra sections, so for now please do as we say and not as we do!

179 Responses on the article “The section element”

  • […] This post was mentioned on Twitter by Remy Sharp. Remy Sharp said: Confused about the section element? @brucel doctor (whose bio is definitely getting longer) comes to the rescue: http://bit.ly/4kfvxY […]

  • Mike T. says:

    I’m interested in the cases where a section element wouldn’t have a heading. Anyone care to shed some light?

  • […] The section element. Useful article by Bruce Lawson on the correct use of the HTML5 <section> element, with a good tip about using the HTML5 Outliner tool to check your content for untitled sections as a way of identifying (possibly) incorrect usage. I may need to update the source of this site a bit! […]

  • Paul Burgess says:

    I am still a bit confused… when you say

    “section is a blob of content that you could store as an individual record in a database. It generally looks like this (and note that the heading goes inside the section element, not immediately before it):”

    In a real world application would it be used for say… the intro/excerpt part of a blogpost for instance? Is that a blob? Your code example seems to be just the whole page content surrounded by

    Am I missing something?

  • Joseph says:

    Mike,

    I am guessing in the instance that the element does not have or need a heading, you would not use a section element.
    As well as the new elements introduced in HTML5, div is still signifcant

  • Mike T. says:

    @Joseph,

    I think that’s a good rule of thumb that probably will cover most use cases.

    However, the spec does say A section, in this context, is a thematic grouping of content, typically with a heading, possibly with a footer.. (emphasis mine)

    Typically does not mean always, so presumably there exists a case where a headless section is warranted. Just trying to figure out what that might be.

  • Lachlan Hunt says:

    Mike, cases where a section wouldn’t have a heading are generally more relevant to web applications, as opposed to more traditional document structures.

  • Mike T. says:

    @Lachy

    Thanks! I need to remind myself that HTML5 ~= Web Applications 1.0. :)

  • Michael Johnson says:

    @Paul

    My mental model for section is turning out to be a chapter of a book. You could also include the foreword and preface, possibly table of contents. Then, each section could have subsections that make sense, e.g. technical works often break chapters down into sections.

    I would say that the intro bit of an article on Wikipedia would qualify as a section, so that would be an example that doesn’t have a heading. The heading would apply to the article, not that top section. Like:

    |article|
    |h1|
    |section id=intro|
    Intro content
    |section id=section1|
    |h2|
    First main section content

    Does that make sense? Doctors?

  • Aleksey says:

    @Michael Johnson: Almost. The article would already create a less generic section of the document, so the intro would not need to be in another section.

    I used to do the same thing with section as is mentioned in this article, but a few weeks ago, I realized this was wrong and started doing what is now advocated in this article. =)

  • Michael Johnson says:

    @Aleksey: That makes sense. Any other ideas for a non-titled section?

  • Alohci says:

    @Michael Johnson: I think your |h2| should be an |h1|. The fact that it is in section indicates that it is a subordinate heading to the |h1| of the article.

  • Alohci says:

    I can’t help thinking that if the doctors can’t get this right first time, that the requirements are far too subtle for the average web author. The absence of a main or content element, while perfectly reasonable once you understand the rules, is distinctly misleading to those who learn by copying and the result is inevitable misuse of the section element in exactly the way the doctors did.

    It’s noticeable that validator.nu does not even give a warning (or advice notice or similar) if the content of body contains a section element but no content that isn’t in a sectioning element.

  • John Faulds says:

    Even though I understand the theory behind when a section should be used, I can’t think of any good real-life situations where I would ever use it, based on this current definition. Anyone got any good examples?

  • @Alohci the validator is still evolving though and whilst I can’t speak for them, I’m sure they will be updating it when they feel it is necessary.

    @John Faulds I tend to agree with you, I still don’t find it 100% clear – If I had to use it right now, I would still use it to split the main content (article?) into sections such as main, comments, etc

  • Mike T. says:

    One thing that helped me a lot in understanding usage of the section element is by generating an outline for your html5 document:

    Here’s one implementation: by gsnedders.

  • Oli says:

    The spec is a little open to interpretation—“typically with a heading” is quite different to the “With very few exceptions, section should not be used if there is no natural heading for it” here. I’ve probably been using it a little more broadly than this too eg for next/previous navigation (with no title element). Exactly how related does the generic chunk of related content need to be? :)

    I think that a nice rule of thumb might be to consciously add a title for each <section>, even if you then hide the title with CSS (as is generally the case with <nav> for accessibility). If it seems like content that shouldn’t have a title when CSS is disabled, then it’s most probably not a section.

    Something else to keep in mind is:

    “Authors are also encouraged to explicitly wrap sections in elements of sectioning content, instead of relying on the implicit sections generated by having multiple headings in one element of sectioning content.” from WHATWG; Headings and Sections.

  • […] Read the rest here: The section element | HTML5 Doctor […]

  • Christopher says:

    From the sounds of this post I may be using Article / Section incorrectly but here’s what I am currently doing based on my understanding (which may be wrong):

    The whole paper, news story, blog post, etc is wrapped in a single as it constitutes one complete contextual similar grouping of text & media.

    Inside the paper I use for each seperate section within the that has a heading, again look at any scientific paper or news article for this layout.

    Exceptions: If a post, etc. is an aggregate of multiple stories I’ve been wrapping each story in an tag. Additionally for citations I am not wrapping them in tags.

    So what do you think? I’m I way off base?

    Cheers,

    Christopher

  • Christopher says:

    From the sounds of this post I may be using Article / Section incorrectly but here’s what I am currently doing based on my understanding (which may be wrong):

    The whole paper, news story, blog post, etc is wrapped in a single “article” as it constitutes one complete contextual similar grouping of text & media.

    Inside the paper I use “section” for each separate section within the that has a heading, again look at any scientific paper or news article for this layout.

    Exceptions: If a post, etc. is an aggregate of multiple stories I’ve been wrapping each story in an “article” tag. Additionally for citations I am not wrapping them in “article” or “section” tags.

    So what do you think? I’m I way off base?

    Cheers,

    Christopher

    P.S. Apologies for repost, comment system killed my tags, changed to “”.

  • Oli says:

    @Christopher entities are your friends, especially &lt; and &gt; ;)

    @doctors it’d be nice to have some notes about HTML in comments—”convert everything to entities” plus mentioning any allowed elements (links, ?). Zeldman’s blog is good for this

  • Christopher says:

    @Oli Thanks Oli, fixed with < and > – should have thought of that myself. :)

    From the sounds of this post I may be using Article / Section incorrectly but here’s what I am currently doing based on my understanding (which may be wrong):

    The whole paper, news story, blog post, etc is wrapped in a single <article> as it constitutes one complete contextual similar grouping of text & media.

    Inside the paper I use <section> for each separate section within the <article> that has a heading, again look at any scientific paper or news article for this layout.

    Exceptions: If a post, etc. is an aggregate of multiple stories I’ve been wrapping each story in an <article> tag. Additionally for citations I am not wrapping them in <article> or <section> tags.

    So what do you think? I’m I way off base?

    Cheers,

    Christopher

    P.S. Apologies for repost, comment system killed my tags, changed to “”.

  • Michael Johnson says:

    @Alohci: I think you’re right about the H2/H1 thing. I’m still basing it on my previous experience (H2 goes under H1). In this case, if I understand things correctly, since the section falls under the article, the article can have an H1 and the section can as well but it is a lower level heading than the initial H1. Is that correct?

    Yep…just checked the spec. The relevant section has an example that shows it specifically: http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements

  • I think it would be useful to specifically mark up the main content. The order of a element on a page will no longer matter to SEO.

    “In HTML 5 you can specifically mark up all the “secondary” content on a page such as navigation, branding, copyright notices, so it feels odd that you can’t specifically mark up the most important part of your page—the content.”

    What happens with ADs?
    It’s a secondary element, there is NO structural tag to make it secondary.

    I think HTML5 is extremely good when marking up a blog. However, for modular pages like Yahoo, Netvibes and iGoogle it doesn’t add much. We’ve been experimenting with HTML5 here at MySpace and so far, it hasn’t helped us as we think it would.

  • Bruce Lawson says:

    I think Oli has it right, above

    a nice rule of thumb might be to consciously add a title for each section, even if you then hide the title with CSS (as is generally the case with nav for accessibility). If it seems like content that shouldn’t have a title when CSS is disabled, then it’s most probably not a section.

    Ridrigo asked “What about ADs?” To me, ADs are only tagentially associated with main content and should be an aside.

    Note that many people are suffering from article/ section confusion: see Jeremy Keith’s article in which he suggest dropping one from the spec http://adactio.com/journal/1607/

  • @bruce I don’t think most of the ADs are related to the main content but to the website in general. An early article by Mike Robison (http://html5doctor.com/understanding-aside/) suggest not to use aside for ADs

  • Mike T. says:

    Unless you’re running something smart like Google AdSense, which *tries* to relate to the content on the page, most ads are just going to be whoever is paying the most. I don’t know about using aside in these cases.

  • Bruce Lawson says:

    Yeah, sorry Rodrigo; Mike T is right; I was thinking only of AdSense, so ignore what I said about ads.

  • Christopher says:

    @Bruce,

    So what are your thoughts on how I am using both article & section?

    See: http://html5doctor.com/the-section-element/#comment-947

    Thanks,

    Christopher

  • Oli says:

    @Christopher sounds good, but do you have a link?

  • Christopher says:

    Hi @Oli,

    Not yet, the project hasn’t launched yet but as I’m building this structure into all my templates I’m hoping to get clarity before launching something messed up on the world. :)

    Project is very document centric (as you can tell by my examples) so it’s using most of the semantic tags available in the HTML5 (most current) specification as well as a number of other “layers” including an rdf/owl based layer. That feeds into the presentation layer.

    Thanks,

    Christopher

  • Oli says:

    @Christopher so upload a template with dummy data already :P It’s hard to give more feedback that that without more info

    @Rodrigo and @Bruce the spec mentions using <aside> for advertising. If it was content-related you could add to an <article> <aside>, if not a <body> (ie page-level) <aside>. Alternatively you could use a <div>. (via WhatWG blog)

  • Christopher says:

    @Oli,

    Good Idea. :)

    I’ll rip one with each instance highlighted and post to git and post link here.

  • Bruce Lawson says:

    Breaking news: at my suggestion, the spec has been altered to clarify that article is for stuff that can be syndicated:

    section says:

    Note: Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.

    while article says:

    The article element represents a component of a page that consists of a self-contained composition that forms an independent part of a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication.

  • Christopher says:

    Happy, looking at the last comment by @Bruce how I described my usage or article and section is bang on. :)

    Will still upload a template though.

  • DRoss says:

    Working on a new version of my site and building with html5. I checked it in the outliner tool and am getting an “untitled section” – I found it’s because I don’t have a title in the nav element. If I add any heading inside the nav the untitled section goes away.

    Do I really need to title my nav? Is this a bug with the outliner? A problem with the new spec? Or just the way it is. If so it’s unnecessary. Nobody needs me to tell them this is the navigation. If there were more than one nav elements on the page I could possibly see a title being useful but for this is doesn’t make a lot of sense to me.

    Anyone know anything about this? Thanks.

  • Alohci says:

    @DRoss – There’s plenty of examples in the HTML5 draft of nav and other sectioning elements that don’t have headings. Sectioning-elements-should-have-headings is more a rule-of-thumb than a hard and fast requirement, and the outliner is just a tool to help you pick up the places where a heading might be appropriate, or where a sectioning element might be inappropriate. It’s not a validator.

    The article actually says “(It’s fine for a nav or aside element to be untitled, however)”. In addition, footer elements are often not going to need a heading.

  • Don says:

    Ok, it is clear to me WHEN and HOW to use section and article, now would somebody explain to my WHY?
    Who or what benefits from this?

  • Alohci says:

    @Don – One of the big problems with HTML 4 from a semantic extraction point of view is that it’s sometimes impossible to tell when a section ends. If you have <h1><p><h2><p><p>, then does the last <p> belong to the h2 or the h1? Using explicit sectioning containers resolves the ambiguity. It’s proposed that the outline algorithm, (of which the outliner tool is an implementation) could be used to automatically generate summary information about a page such as a table of contents.

  • Don says:

    It is impossible to tell in your example as the end-tags are missing. if the last p is nested inside the first p it is part of h1, else it is part of h2.
    If you mark up correctly it would be very easy to determine where the last p belongs. But even if not…why would you care…surely the third paragraph is of no matter to a summary?

    But let us say you are right: Even then you can never presume that every website author will use section/article correctly. So any outline algorithm will only be useful to a very small collection of sites. As such it has very little global use and every author today could already accomplish this task on his own sites with HTML4 and some php or js scripting.
    If such constructs would work wouldn’t we have used it already on the abbr (and acronym and dfn) tag to create an automated, multilingual reference?

  • Alohci says:

    @Don. Sorry, I thought my shorthand was clear enough – obviously not. What I meant was: a h1 element; followed by a paragraph; followed by an h2 element; followed by a paragraph; followed by a paragraph.

    In any case, in the normal text/html serialisation, a <p> tag implicitly closes a previous paragraph – they can’t be nested.

    As for the usefulness of the outline algorithm when dealing with tag soup, I think you may well have a point. It remains to be seen how well it will work in the real world. The draft says “User agents should provide default headings for sections that do not have explicit section headings.” I can foresee a user-agent generated table of contents being a morass of “Untitled Sections”. To avoid this, I can see user-agents inferring missing headings from the beginning of the content, and maybe taking other liberties with the algorithm to fix up other situations such as when a sectioning element only contains other sectioning elements.

  • Don says:

    @Alohci: Ah, my mistake…and you are right…p’s can’t be nested.
    You explain it a lot better than I do; replacing div-itis with section-itis.
    In the end, where it comes down to is that 90% of all HTML4 and HTML5 tags are nothing more than hooks for style and script (the only exceptions being things like img, object, abbr, etc.)
    Those tags that are not hooking-tags should have very simple rules and should not be ambiguous in any way. Not only that, they should be irreplaceable (you cannot change an IMG for a DIV for example).
    And my original question therefor stands..why? I can write scripts, algorithms and related stuff to apply to a div with class=”section” as easy as it is to a section-element . Sure, not everybody will use the same class-name, but then again, not everybody will use the section element correctly.
    Adding all these explicit element will only lead to non-semantics I fear, esp. when we find out it doesn’t work and we can’t change it back because of backwards compatibility.
    I love the video and audio elements, but other than those…HTML5 is not for me. I will trust HAL9000 to make semantics of my pages in the future.

  • David says:

    @Alohci

    Cool. Yea I wasn’t really thinking of the outliner as a validator but it’s still strange to “warn” me of an untitled section even though it’s really not warranted.

    Thanks for the info.

  • thinsoldier says:

    So, 99% of the time, 99% of authors on 99% of projects would not use the section tag?
    Yes or no.

  • Bruce Lawson says:

    @david

    @alohci is right: the outliner is not a validator. But I agree that “untitled section” isn’t helpful. There is a bug filed that the outliner should generate something meaningful – so when it encounters nav, which is sectioning content, it should show the top-level heading within the nav element (if there is one) or say “(navigation)” instead of “untitled section”. It’s perfectly legitimate not to have a heading in navigation, footer or aside.

    In my diagnosis, the main cause of sectionpox (the new div-itis) is people want to put it around “main content”. I think that the best reason for adopting a main or content element is to stop people misusing section. But I doubt that the working group will sanction a “safety tag” as it were.

    @Don asked “why? I can write scripts, algorithms and related stuff to apply to a div with class=”section” as easy as it is to a section-element . Sure, not everybody will use the same class-name, but then again, not everybody will use the section element correctly.”

    On Saturday I was listening to Jamie Knight, a sighted web developer with autism explaining that he sometimes uses a screenreader when stressed as it’s easier than reading. On a blog post on my own site, I wrote

    He made his own screenreader that listens out for certain ids or class names like “navigation”, “menu”, “sidebar” so that his screenreader can skip the peripheral information on repeated views.

    With the “baked-in” elements like nav, footer etc, this would be achievable with much greater precision.

    http://www.brucelawson.co.uk/2009/standards-next-cognition-and-accessibility/

    Having real elements takes away the ambiguity of different naming conventions and means that programmatic user agents – like search engines or screenreaders – can “understand” content better.

    @thinsoldier – you asked “yes or no”. No.
    Most people would use sections a lot; to wrap up areas of code to disambiguate where sections start and end; to surround areas demarcated with headings inside articles that were to be syndicated, so that the sites that import that content can apply CSS that works for the importing sites’ outline and so the outlining algorithm works correctly.

    Regarding non-blog sites, for example http://portal.opera.com or iGoogle http://www.google.com/ig, I would mark up each “lump” of content as a different section because, well, each is a different section.

  • Don says:

    @Bruce:
    Although I wholeheartedly agree with better accessibility constructs, I seriously doubt that things like section etc. will do the job. First of all, it will only work if everybody uses it correctly, and seeing as how ambiguous these new elements are…
    Secondly, I have a blind friend who on occasion tests my sites. At one point he told me to stop trying too hard. His view on the matter is this: Radio, spoken books, tv, etc. don’t use elements either. The best way to solve accessibility issues on websites for the blind is by having the site read by a real person. As long as that doesn’t cut is use headings correctly and make the rest of the text as “flat” as possible.
    Now obviously part of this is a personal preference, but it does show that perhaps we are forcing accessibility in a direction it should be taken.

  • Bruce Lawson says:

    Don

    r/e your blind friend: everyone is different. I have blind friends who scan a page using “L” to go to lists (eg, go round navigation etc), “T” to go to tables, etc. Most screenreader users rely on a proper hierarchy of headings to navigate a page with (See a video of a blind web dev doing this: http://www.youtube.com/watch?v=AmUPhEVWu_E). Having a “flat” structure makes this impossible.

    The sectioning content and outlining algorithm simplifies the ability to properly structure headings, particularly with syndicated content.

  • Rich Clark says:

    @oli & @christopher,

    thanks for the comments, we did have the notes for what is/isn’t allowed in but I accidentally commented them out when making some changes recently, thye’re no restored.

    Ta

    Rich

  • Steve says:

    @Don

    It is true that not everyone will use HTML5 correctly, just like the majority of existing content won’t be updated to HTML5. However, disabled users are picky about the websites they use and if HTML5 proves to be as useful as we hope, they will most likely prefer to access sites written in it. The big boys like Amazon and eBay can implement it and make it massively easier to navigate these large, complicated websites. And for the other small sites that don’t, the screen readers can fall back to the technology that they’ve been using throughout this century.

    In short, it is nothing but a benefit to the users at a small cost to the developers.

    As for the element confusion, remember that Web Developers need to read manuals too. In the most part, section can be completely ignored and replaced with proper heading elements, the outliner will create the sections itself.

  • The difference between div, article and section is indeed quite hard to grasp from the start. It probably helps to code a few sites first and to see how far you get with these items.

    I like the “natural heading” idea of a section to separate it from a div. Considering a homepage, you can have sections for “news”, “banners”, “focus items” etc etc. The danger of the section element is that people would obviously want to replace the div.

    What I don’t like about this article is that the div is put forward as an element needed for styling or javascript. The div is (and always has been) a generic structural element, and should still be considered as such. It’s probably best to keep using divs to structure content within an article or section element. I think the meta data of an article (author, date, whatever other info) should still be wrapped in a div, as it makes very little sense as a standalone blob of information.

    So on the homepage you could have a section class=”newsList”, containing a list of articles, containing a header with a heading and div for meta data.

    On a sidenote, the whole mess seems a result of the lack of structural understanding. Divitis is not only a disease, the counterreaction is a disease by itself. At least tags like section and article might change this again.

  • Ken says:

    This makes perfect sense to me as I’ve often wanted to attach a heading to specific paragraphs and content, and mark up nested headings and there appropriate content. This is the use of section :)

  • Chris Pratt says:

    Instead of theorizing what the draft spec says for <section>, shouldn’t we be trying to determine the reason behind adding <section> in the first place?

    As I’m coming to understand it, it looks, at least on the surface, that the motivation for <section> is to simply provide a grouping of heading+content that a machine could extract or manipulate. As it currently stands, content on the internet consists of any number of headings, paragraphs, lists, etc., in virtually random order (from a machine’s perspective). Say I wanted to programmatically pull out the second heading with its content from an article. Currently, this would be an audacious if not insurmountable task. But, if each logical division of a piece of content was wrapped in a <section> element, I could jump right into the DOM, and get what I wanted with something as simple as “getElementsByTagName(‘section’)[1]” (`1` here representing the second element in the array).

    <section> seems mostly if not entirely devoted to machines (i.e. web applications), only holding value to end-users by proxy of the greater abilities it gives to web applications.

  • Sorry, but after reading this article i do not understand the difference between section and article any more :(

  • Marcio says:

    When you state:
    “Don’t use it unless there is naturally a heading at the start of the section”
    This is not precise. And the mention above on the 99% is not precise either.

    Considering that:
    a)
    Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of the div element instead of more appropriate elements leads to poor accessibility for readers and poor maintainability for authors.
    http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-div-element

    and

    b)
    The article element represents a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable
    http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-article-element

    This, that is so empathize on this article, is getting less relevant:
    c)(…) A section, in this context, is a thematic grouping of content, typically with a heading.

    If we also consider that:
    c1)
    (…)A Web site’s home page could be split into sections for an introduction, news items, contact information.
    http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element

    So, it’s common to have a page with different sections, that allow us to give a structure to our page, semantic structure, without a header defined (when we are dealing with the section AS structural), and using
    a semantic sections without title, in those cases, will be better to use section without header, then using a DIV that we should avoid so that, our contents became semantically relevant.

    We will have frequently, hence the 99% isn’t accurate, situations/structure where:

    a) we have a semantic section (without header) to structure our page
    [and is not only a style thing, hence, a DIV will not fit, and should be avoided].

    b) article is not an option [because our content isn’t relevant for syndication, it isn’t independent by itself]

    c) we need to semantically group our elements without the need of a header. [because our group elements are part of our site structure].

    What are your thoughts on this?

  • Alohci says:

    @Marcio. I’m not entirely following your argument. How can you semantically group anything without being able to give a name to the group? Whatever name you would give it, that’s its heading. In the example c1 that you give, the sections have natural headings “Introduction”, “News Items” and “Contact Information” I don’t believe that is a requirement that the natural headings are actually part of the mark-up, just that the section conceptually has a natural heading.

  • Marcio says:

    Hi @Alohci,

    Thanks for your comments,

    “How can you semantically group anything without being able to give a name to the group?”
    Conceptually speaking, apparently and as far as I can see: we can’t.
    But that doesn’t mean that we want, always and for sure, or even often, that name to appear on the viewport.
    If however, we add a to our structural semantic , then we must provide a name to it, and that name should appear on the view port.

    What I’m stating is that, we will found, often or, at least, much more often the 1% of the cases, sections that, despite the fact that they conceptually allow/have headings, we don’t what to show them on the viewport.

    Should we use an empty element on our code just to say that, in the outline all goes well?
    Should we create a header to our sections, filled in, and then hide it with css?

    None of those options seems good on my eyes.

    I’m glad that doesn’t force us to have a declared.
    And I’m hoping that the statements on w3c are for conceptually cases as you stated.

    However, this last point is not clear and I’m suspecting that probably is not clear for a lot of other developers:
    Could it be, due to this header interpretation, that we can see so often the been used as the main content wrapper?

    Thanks again,
    Márcio

  • Marcio says:

    Lost the < > on the way, here it is again, sorry:

    Hi @Alohci,

    Thanks for your comments,

    “How can you semantically group anything without being able to give a name to the group?”
    Conceptually speaking, apparently and as far as I can see: we can’t.
    But that doesn’t mean that we want, always and for sure, or even often, that name to appear on the viewport.

    If however, we add a <header> to our structural semantic <section> , then we must provide a name to it, and that name should appear on the view port.

    Should we use an empty element on our code just to say that, in the outline all goes well?
    Should we create a header to our sections, filled in, and then hide it with css?

    None of those options seems good on my eyes.

    I’m glad that <section> element doesn’t force us to have a <header> declared.
    And I’m hoping that the statements on w3c are for conceptually cases as you stated.

    However, this last point is not clear and I’m suspecting that probably is not clear for a lot of other developers:

    Could it be, due to this header interpretation, that we can see so often the <article> been used as the main content wrapper?

  • Oli says:

    @Marcio — one situation where it’d make sense to use a heading-less section is for web applications, eg the main mail list in Gmail. Apart from that please consider that *not* having a heading on a section makes your content less accessible. For all but small spans of text it’s more difficult to skim. Also speech readers for example can give the user a list of the headings on a page allowing the user to quickly access the content they want. This is why we (and the spec) recommend using a heading.

    Remember you are not required to *display* the header — you can hide it via CSS as people have traditionally done for the semantic title on pre-HTML5 navigation lists

  • Marcio says:

    @Oli

    I do agree with the points above. I do agree that having a title is better then not having one, on some scenarios. Other scenarios, like having a header defined on a navigation list, I just can’t see the point for other machines to grab that. But still, if they have a good use for it, why not?

    If I do get your point, you are telling that the fact that we hide the header is not that bad, because the header is also and mainly (on this semantic context) for the machines first and humans second so, we should provide it so that machines can read it (and they don’t need to see it on the viewport), hence, that could be on a outline context only and doing a display:none; will be ok (assuming that the display:none will not take it from the outline as well).

    I still suggest that a clarification should be made on the article, based on the following points to discussion:

    1)
    Should be clearly stated that, besides the emphasis already made:
    adding this – conceptually – If section is taken as a semantic group of something, then a header with a semantic content should be provided.
    ?

    Should we have at least two main ways for dealing with sections:
    a) sections are inside articles and those sections could have a viewport visible element as well as a outline defined one, being the last one, strongly advisable.
    ?

    b) should we state that sections are NOT part of an article but, instead, they are there to sectioning parts of a group (like a website page components – intro, main headline, news… so the viewport visible element isn’t that often required, but the outline is still strongly advisable. (so a css hide could be required).
    ?

    2)
    The content?
    Should we state that: article is a miss use, mostly because our main web page contents are not that syndicated, and not that independent of all the rest. If they are, probably we have an issue on our “content site goals” – ?.
    Or, we semanticist profound activists assume that all content, no matter what, (private matters aside), should be syndicated, hence, let’s use article at will
    ?

    Should we state that div will be used for layout proposes and it is not advisable to use it if that is not for that propose only? (I believe this point is clear so, no alternatives were presented).

    Should we state that section is a strong candidate if we take it on the context b) above.
    Ex:
    if we are on a company presentation site page, then, lets call the main content “company presentation” (either showing that for the site user, or not, but it’s sure semantically better and appropriate then having a div. If we are at a homepage with the main content being displayed, let’s create a section called “main-site-info” for example. It could be relevant, so I presume, to some machines and later humans, to semantically grab the main-site-info.
    ?

    hm?

    Regards,
    Márcio

  • bruce says:

    Markus René Einicher said “after reading this article i do not understand the difference between section and article”.

    I’ve written an article called HTML5 articles and sections: what’s the difference?

  • coding horror says:

    Make certain that you don’t really need an article, which is defined as a composition that forms an independent part of a document, page, application, or site

    What does independent really mean? What would make some content dependent on a document, page, application? I can think of a date, or an author name. Everything else will be an article.

    I challenge the experts to define independence and more importantly dependency!

  • […] Doctor’s articles on header, section, aside, nav, […]

  • […] Doctor’s articles on header, section, aside, nav, […]

  • […] Doctor’s articles on header, section, aside, nav, […]

  • coding horror says:

    PLEASE DELETE MY ABOVE POST

    @Oli Studholme

    Strangely enough there is no page about article, like you have linked. I have read that article from bruce indeed—which is excellent—but I am still unsure about stand-aloneness. For example, when you have a photo album, would each photo+description an article?
    I can image this is a unit for (external) reuse. If stand-alone really means “a reusable unit”, I expect that I would have many articles.

    What about viewing an article as

    a means to enclose a group of non-article elements that together denote one thing that has a meaning without any context,

    or

    a means to enclose a single non-article element that has a meaning without any context.

    If articles can be nested it would be much harder to decide. Lets give me an example


    <article>
    <h1>Bunch of animals<h1>
    <article>
    <h1>Cow</h1>
    <figure>
    <img src="cow.png"></img>
    <figcaption>A cow eating grass</figcaption>
    </figure>
    <article>
    Some info about cows:
    <dl>
    <dt>habitat</dt>
    <dd>all over the world</dd>
    <dt>oher infos...</dt>
    <dd>...</dd>
    </dl>
    </article>
    </article>

    <article>
    ... other entry about the cat
    </article>
    </article>

    As you can see, everything has a standalone meaning an could be used elsewhere.

    If I am not allowed to nest articles I would mark a single animal entry as article.

    There is a problem though if you would like to put t both he complete bunch of animals as a single element in a rss-feed, and the cow-entry seperately in an other rss-feed also. The former requirement would force us to toggle between div and article dependent on the feed.


    <section>
    <h1>Bunch of animals<h1>
    <article>
    <h1>Cow</h1>
    <figure>
    <img src="cow.png"></img>
    <figcaption>A cow eating grass</figcaption>
    </figure>
    <div>
    Some info about cows:
    <dl>
    <dt>habitat</dt>
    <dd>all over the world</dd>
    <dt>oher infos...</dt>
    <dd>...</dd>
    </dl>
    </div>
    </article>

    <article>
    ... other entry about the cat
    </article>
    </section>

  • […] The section element | HTML5 Doctor great questions and answers (tags: html5 resource) […]

  • […] 5 structure — HTML 4 and XHTML 1 to HTML 5 (@boblet)HTML5 Doctor’s articles on header, section, aside, nav, footer@boblet’s articles on div, section, and article; nav, aside, figure, and […]

  • […] think Bender’s illustration portrays section correctly — see this explanation about section at the HTML5 Doctor site. One rule is that you should not have a section unless it has a unique […]

  • How do you deal with documents that already have a Article & Section structure in place? Case in point: The US Constitution. Should Articles be contained with or ?

    I’ve been wondering this myself and would love any feedback you all might have.

    http://cdharrison.com/sandbox/html5/constitution/
    http://github.com/cdharrison/constitution-html5

  • […] para por ejemplo utilizar efectos javascript conviene tener divs y no section o articles. En esta página encontré un resumen super bueno de lo que no se debe hacer al usar el tag section y la voy a […]

  • […] can use the <section> element to split the article into logical groups of content with […]

  • […] 5 structure — HTML 4 and XHTML 1 to HTML 5 (@boblet)HTML5 Doctor’s articles on header, section, aside, nav, footer@boblet’s articles on div, section, and article; nav, aside, figure, and […]

  • Chris Krycho says:

    I’ve been tossing around some ideas in my head for the blogger blog I rebuild in HTML5. One of the things I’ve been pondering is the use of sectioning inside articles (rather than outside) which seems one of the more natural uses of the element. Marcio’s (1)(b) seems to hit it on the head to me.

    For example, it’s pretty common for us to have the following in our flow on our blog:


    <article>
    <p>(intro content)</p>
    <hr/>
    <p>(main content of blog article)</p>
    <p>(main content of blog article)</p>
    <p>(main content of blog article)</p>
    <hr/>
    <p>(footnotes, etc.)</p>
    </article>

  • Chris Krycho says:

    I’ve been tossing around some ideas in my head for the blogger blog I rebuild in HTML5. One of the things I’ve been pondering is the use of sectioning inside articles (rather than outside) which seems one of the more natural uses of the element. Marcio’s (1)(b) seems to hit it on the head to me.

    For example, it’s pretty common for us to have the following in our flow on our blog:


    <article>
    <p>(intro content)</p>
    <hr/>
    <p>(main content of blog article)</p>
    <p>(main content of blog article)</p>
    <p>(main content of blog article)</p>
    <hr/>
    <p>(footnotes, etc.)</p>
    </article>

    Given those divisions, it seems to make a lot of sense to me to break that up this way:


    <article>
    <section class='intro'>
    <p>(intro content)</p>
    </section>
    <hr/>
    <section class='content'>
    <p>(main content of blog article)</p>
    <p>(main content of blog article)</p>
    <p>(main content of blog article)</p>
    </section>
    <hr/>
    <section class='foot'>
    <p>(footnotes, etc.)</p>
    </section>
    </article>

    Obviously the semantics could vary as necessary; class names could be ids instead, and so on. The point is: a section seems like a much more natural subdivision of an article, at least in normal blog usage, than almost any other arrangement. (I could also think of it as being useful for say a division between “New Content” and “Top Content” or things along those lines.)

  • Márcio says:

    I still believe that we can use SECTION on both ways.

    a)
    Either inside an article, if we are talking about an article that as several sections (like the sections of a book, or a law book (like above as been asked).

    b)
    And also, outside an ARTICLE. On that case we are talking about sections of our site. On both cases, we are not violating the concept of section.

    If we decide to use article to divide our structure:
    We should simple ask: This group of things that I’m containing, are they a “article” ? The article definition seems clear at this point: “An article about a birth can be on our site or, as well, on a nature section of a journal. Hence, we are having both conditions: 1) “a self-contained composition in a document, page, application, or site” and also something that is 2) intended to be independently distributable or reusable;

    So, the code above from Chris seems to be correct. No doubts there. We are talking about an article on a blog. That has both conditions fulfill. However, If that article (with sections inside that make sense there) makes part of a SECTION, like a section of articles about something, OR a section – as a part of a website structure then, I believe, we should put or ARTICLE(s) inside a SECTION.

    So, the above seems correct, but on a “website wider context”, maybe we will not end on the ARTICLE and, up and down on our code, we will use a SECTION to group things that can be semantically grouped.

    Does this makes sense to you? If not, please say so. Until now, is this thought that as been guiding me on website semantic structures that need to be produced.

    Regards,
    Márcio

  • Alohci says:

    @Márcio – Yes that’s exactly how Article and Section are designed to be used, Articles and Section can be nested inside one another as much as it makes semantic sense to do so.

    @Chris Krycho – This is open to reasoned debate, but in my opinion:

    1. The class=content part doesn’t have a natural header of it’s own so it shouldn’t be a section. Use a div here.
    2. The class=intro part could easily be a header element
    3. The class=foot part would almost certainly be better as a footer element.

    So I think your mark up should be

    <article>
    <header>
    <p>(intro content)</p>
    </header>
    <hr/>
    <div class=’content’>
    <p>(main content of blog article)</p>
    <p>(main content of blog article)</p>
    <p>(main content of blog article)</p>
    </div>
    <hr/>
    <footer>
    <p>(footnotes, etc.)</p>
    </footer>
    </article>

  • Márcio says:

    @Alohci is right about a lot of things that needed to be done on Chris code. I haven’t looked in detail.

    a) The footer should be used instead.
    b) The intro could be a section, we can call it abstract or, resume, It has a natural header. But is not a header. Is a intro. So I would, against Alohci, not use the header their.
    c) If you have a section, you should have a header, either hidden or not. The intro dimension and relevance plays a role here. If it’s only a few words (and that will be a header), then, now with Alohci, I would use a header, but I will also use h1,h2,h3 instead of p.

    On the content part, it depends. If it’s something that is meant to be a section on the site structure, then put a section and name it, “main-content-section”, and it will be the section were the main content will reside.
    If there’s no header (only with semantic content we can dispute this), then, a DIV will do it.

    About the NATURAL header that Alohci writes, I believe it makes sense at some extension but header, on HTML5 specs seems to be a much more wide concept.
    “The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos”. So we shouldn’t get to focus on natural headers only, so I believe.
    A doubt still remain, should we follow the “natural header” when we are talking about section headers?


    <section>
    <header><h2>articles about X</h2></header>