CODEWITHSUNDEEP
htmlsemantic-markup
Sven
Sven

Reputation: 13295

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?

Upvotes: 1

Views: 205

Answers (3)

Oriol
Oriol

Reputation: 288290

See http://www.w3.org/wiki/HTML/Elements/section

The element represents a generic section of a document or application.

  • A section, in this context, is a thematic grouping of content:

    • chapter
    • various tabbed pages in a tabbed dialog box
    • numbered sections of a thesis

  • A Web site's home page could be split into sections for an introduction, news items, and contact information.

  • The section element is not a generic container element. The section element is appropriate only if the contents would be listed explicitly in the document's outline. [Example A]

  • A section typically with a heading.

You can use <section class='wrapper'> because adding a class is semantics, it's not styling purposes. But of course, then you can style the class.

Then, you should use <section class='wrapper'> if the wrapper is something big and important (if it contains a section). If not, better use <div class='wrapper'>.

But

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

it's very awful because you add unnecessary code, which is not semantic.

Upvotes: 1

zzzzBov
zzzzBov

Reputation: 179116

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.

Upvotes: 5

Jezen Thomas
Jezen Thomas

Reputation: 13800

There is nothing wrong with it.

Upvotes: 2

Related Questions