since in my website I have a lot of <HEADER>, <FOOTER> AND <SECTION> do you think is appropriate if i use a .main class for the main HEADER, main FOOTER AND main SECTION?

In the CSS I will never style the .main class like this:

.main { ... }

but always like this:

header.main { ... }
footer.main { ... }
section.main { ... }

Of course it will be total different styling.


2 Answers 2


As a general rule, if you want your markup to be semantic, you should be using classes, IDs and document structure to describe the content as clearly as possible, to whatever level is required to achieve the styling you need. Don't just add classes and IDs with the motivation "I need something to hook a CSS selector to", try thinking about what it is you want to style and use your tools to describe the thing.

Pragmatic design means you will have to be non-semantic to support particular browsers, particularly those that can't take advantage of the more advanced selectors, but you should only append these as required, if you can't achieve your desired design easily another way.

For your scenario, I would question whether main is a very good class name. Classes are intended to classify something, such that several instances of that thing can appear in a document (and be styled in the same way). If you intend to have several things in the page classified as main, it doesn't add a great deal of semantic value - I can't understand what that element really contains, other than that it's probably more important than non-main elements.

If you are trying to say "this is the primary content of the page", you should instead use an id. Use of an ID implies "there is only one of these per page", which gives you faster-performing scripts and the ability to reference the element with anchors (#main).

Additionally, if the header, footer and section elements are being given the main class because they're all related, you could try representing this relationship more strongly by nesting them inside a parent element and applying an ID to that element, e.g:

<article id="main">
    <section id="introduction">

As an aside, the way you've listed section with header and footer makes me wonder if you're using it correctly.

The HTML5 specification says:

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

It specifically warns:

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.

So, the idea of a "main" section probably isn't right. Sections are meant to be ways partition a large article into headed-sections, in very much the way a Wikipedia article is laid out. You could easily say you have a "main" article, but a "main" section doesn't make as much sense.



I think you are referring to page header, page footer and page main content.

Simple example:






The definition of HTML5 makes already clear that the last footer applies to the whole page, while the footer inside the section applies to this section content only.

footer element:

When the nearest ancestor sectioning content or sectioning root element is the body element, then it applies to the whole page.

(Similar meaning can be assumed for header, but afaik it's not explicitly defined in the spec, probably because it may span several sectioning elements).

Now, if you want to style the top-level header/footer/section differently, you could use CSS selectors like:

body > header {…}
body > section {…}
body > footer {…}

These selectors only match the elements if they are direct childrens of body.

Or you could give these elements a class and use the CSS class selector. main might be a candidate. However, I'd use page resp. site.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.