Get a free trial // Grow your CSS skills // Land your dream job

Classes on header, section, article, footer ?

  • # May 29, 2013 at 2:00 am


    I came across the following article which suggests the _header, section, article, footer_ tags in html5 should not be used for styling content… therefore classes/ ids should not be used to target css. The article is dated 2011, so Im curious if the suggested practice has changed at all. I continue to see other sites using classes and ids on the mentioned tags.

    If anyone as any ideas or can suggest an updated article stating otherwise… I would much appreciate it. Thank you.


    # May 29, 2013 at 2:07 am

    I would agree they are not for styling content in that they are implemented for making a more semantic markup and should first and foremost be used in this way.

    # May 29, 2013 at 2:56 am

    I’m not really sure I’m following how you mean. Admittedly I just glanced through it this time, but I didn’t get the impression that he advocated against using them for styling content, and I certainly didn’t get the impression he suggested not to use classes/ids to target CSS.

    My impression of the article is that they should not be used as wrapping-elements, ie this: If you look at an element, it has no semantic meaning, but you need something to contain something else (for backgrounds, for borders, for floats, for whatever), then use a div rather than section/article/footer/header.

    Also, be careful when targeting header/footer directly, since they are explicitly allowed to be in several places, so it might lead to unexpected side-effects.

    I think that the best practices currently is to set classes on them and target them through that.

    # May 29, 2013 at 3:00 am

    You don’t style div, span, h1, and p tags directly. Thus, you shouldn’t style header, article, section and footer directly.

    # May 29, 2013 at 3:17 am


    which is exactly why in the OP I mentioned the use of classes / ids

    # May 29, 2013 at 3:17 am

    @Rugg yeah it’s generally a bad idea to style elements and IDs directly.
    A bad idea for ID’s since they add 100 points to the specificity and this can/will start creating specificity wars.

    # May 29, 2013 at 3:20 am

    Now I’m not sure how you mean @HugoGiraudel, so I think I want to get a bit more details =)

    Yes, I style both h1 and p tags directly: I set margins, font-sizes, occasionally line-heights, font-family… Do you mean something else when you say they shouldn’t be styled directly? (Note that my confusion/disagreement is not with div/span, but rather with p and headings)

    # May 29, 2013 at 3:26 am

    So correct me if Im wrong… but the following markup is incorrect…

    AND should simply be this…

    Every article or question on stack overflow seems to agree that the second method is preferred over the first… HOWEVER I continue to see people using the first method

    # May 29, 2013 at 3:34 am

    Well, it’s probably because it’s a bit of a grey zone, and people don’t always read up on best practices. Generalised, yes, the second method is the correct one. Where it would probably be less correct is the following case:

    In the above case it’s probably a better idea to just put the class “wrapper” on the section.

    # May 29, 2013 at 3:35 am

    This article is a little out of date to me. (hgroup for instance)

    I style html and body ,with or without attributes.

    header,section,article, … do inherit styles and gets resets most of the times , like any other tags.

    I do not understand how it could be a “bad practice” to style some of them and not (wich) others ?

    # May 29, 2013 at 3:40 am

    @melinda Thanks for the reply, but your example seems to contradict my previous post. All I’m looking to know is whether classes / ids can be used on the section tag or if they are simply used for semantic reasons as @unasaquila suggests. It’s not rocket surgery.

    # May 29, 2013 at 3:40 am

    The article is talking about “style” as in the markup not styling ie

    Generic header

    Something else generic

    is more semantic than say

    Generic header

    Something else generic

    but that is not to say that the second is wrong

    or as to the

    If this this the wrapper for this section then there is no problem using a class for styling as long as the section is being used correctly.

    The issue is people doing this

    Blog header

    some blog stuff…

    when all they need is

    Blog header

    some blog stuff…

    # May 29, 2013 at 3:45 am


    Thanks for the suggestions. So apparently the section and article tag can be assigned a class or id then

    # May 29, 2013 at 3:48 am

    Thanks for the input everyone!

    # May 29, 2013 at 3:49 am

    @Rugg Aha, that explains it. Just an easy miscommunication.

    Yes, you can use classes on headers/articles/etc, it is even best practice to use classes to target them rather than the tags themselves (outside of basic styling). So, it’s preferred to have

    .site-header {
    color: blue;

    matched with `


    rather than

    header {
    color: blue;

    matched with `

    ` as the second case would also target any headers for articles (which might, for instance, have the article title, the subtitle, post meta and a summary).

    Any clearer? If we’re still talking around each other, just let me know.

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed