Search code examples
htmlsemantic-markup

HTML5 - section element is no styling hook?


I've heard that the HTML5 section element should not be used for styling purposes as its a semantic element. So <section class='wrapper'> as a replacement for a div would be wrong, using <div class='wrapper'> would be better.
But what when it makes sense to use the section element AND there is need for wrapper? Is it alright to do <section class='wrapper'> in that cases? Or do I have to to

<section>
  <div class='wrapper'>
    ..
  </div>
</section>

which seems a bit bloated to me?


Solution

  • I've heard that the HTML5 section element should not be used for styling purposes

    Not sure what your source is, but they're wrong. Style away!

    That being said, <section> elements should be used when they're semantically appropriate, as per the HTML5 spec:

    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.