HTML5 TAG using a .main class since in my website I have a lot of &lt;HEADER&gt;, &lt;FOOTER&gt; AND &lt;SECTION&gt; 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.
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:

&lt;article id="main"&gt;
    &lt;section id="introduction"&gt;
        &lt;header&gt;&lt;/header&gt;
        ...
        &lt;footer&gt;&lt;/footer&gt;
    &lt;/section&gt;
&lt;/article&gt;


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.