Camen Design Forum

The Section Element

append delete NickPfen

After reading this article and following the links: http://camendesign.com/code/developpeurs_sans_frontieres I gained more clarity in the purpose of the section element and wrappers, thank you!

However, when it comes to styling, it is recommended to not style the section element. Now, when I read Kroc's CSS, it looks as if he did style the section element with box shadows, color, etc. This is not a jab at Kroc's CSS, I'm just trying to get more clarity on what I should do and not do with the section element.

1. @Kroc, is the use of your section element considered to be "styled"? Should a Div element be used? What would you do differently in context of your design?

2. Finally, if a Div element should be used, would this be a proper markup: 

%
<article>
<section id="style"> in which #style is the box shadow, color, border radius, etc
<h1> Title </h1>
content and blog post
</section>
</article>
<footer>
footer content in here
</footer>
%

What's anyone else's take on using the section element and where to use it?

Reply RSS

Replies

append delete #1. NickPfen

Update: After some poking around and reading, I believe 'why' it is not recommended to style the section element, http://html5doctor.com/the-section-element/, is mostly because of IE's and older browsers inability to read Html5 semantics.

I'm not sure if styling the section element will validate, but you can style the section element and I don't see why not.

I think it's stupid to do something like this 

%
<div id="style">
<section>
content
</section>
</div>
%

Why throw in that div when you can simply do this: 

%
<section id="style">
content
</section>
%

To me, the latter example is cleaner and faster. If you don't support IE, then the latter example, in my opinion, would be fine. If you do support IE, then the html5 shiv script should work or use modernizr: http://www.modernizr.com/

Your opinions and thoughts are still welcomed.

append delete #2. Ben

As far as the spec is concerned, I think it is perfectly fine to style section elements. However, they are not elements to be used for the purposes of styling. Neither are paragraphs, lists, or all sorts of other elements we style. The basic gist is, if you have a section, then mark it as such and style it if you want to style it. If you just have a chunk of content you want to style, then mark it as a div and style it.

Sections are sections, chunks of content you want to style are divs. If you happen to want to style your sections, then go ahead and do so. This is the case with nearly every semantic element we have. Where did you get the impression that sections were not to be styled?

append delete #3. NickPfen

The guideline specifically says it here: http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element

append delete #4. Martijn

What the spec says is:

“When an element is needed *only* for styling purposes […] use the `div` element instead.”

Note the emphasised (by me) word ‘only’. There is nothing that says you can’t style a `section` element, it says that you shouldn’t add `section` elements to your code because you want to style a block of content. It should only be used when it has meaning:

“[T]he `section` element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.”

Meaning is defined by the document’s outline. If you want to use the new semantic HTML tags such as `article` and `section` I recommend you learn about how the document outline works: http://html5doctor.com/outlines/

append delete #5. Ben

“There is nothing that says you can’t style a `section` element, it says that you shouldn’t add `section` elements to your code because you want to style a block of content.”

Exactly. This is also true of every semantic block element we use. I think the authors simply thought that since section could be construed as a section of the page as opposed to a section of the content they wanted to clarify that the former is not good usage.

append delete #6. NickPfen

Wow! thanks for the clarity and not only for the section element, but for how to use any semantic block in our code. Thanks @Ben and @Martijn.

Peace.

Reply

(Leave this as-is, it’s a trap!)

There is no need to “register”, just enter the same name + password of your choice every time.

Pro tip: Use markup to add links, quotes and more.

Your friendly neighbourhood moderators: Kroc, Impressed, theraje, Martijn