Html5 section or not to section?
I'm learning about HTML5, and honestly I can't say I'm really impressed. Semantics are nice and all, but I think that they introduced new elements with a very thin line between them, and a even thinner line between them and the old divs.
Everything is very clear if you do a generic purpose site, like a blogging engine, news publishing portal, and similar, but web apps... I'm having a lot of dilemmas about new html elements.
Here is my situation. I'm developing an ordering system. On the sellers interface I have 3 columns (inline), which represent the status of the order. When the status is changed element is moved from one column into another (background ajax, and js manipulation).
In Html4 I would use 3 divs and put a heading with a title on top of each one. Elements inside the columns would also be divs.
But what about HTML5? I have been looking at the section element, but I'm not really sure how to use it. Here are the options:
- P开发者_开发问答ut everything inside one section - I don't think that is the way to go
- Put a section around each of the column divs, and heading inside the section
- Replace the divs with sections
- Put sections inside column divs
So, which way to go?
EDIT: first of all thanks everyone for your quick replies. In the end I'll probably go with Ian Devlins suggestion, and put each column as section. Anyway, just to point out my dissatisfaction with html5, multiple permitted options aren't always a good thing. I'm afraid what will the html5 web look like in a few years, when we can't fully agree on a simple question like this.
EDIT2: one more thing. I'll ask it here so I don't have to open another question. In addition to these 3 columns I have another div which contains order details, when any of the orders are selected. Should it be an article since its self-contained content, or to use an aside tag?
div
is a perfectly valid HTML5 tag. If the new tags don't make any sense in your project, don't feel forced to use them.
To quote the w3.org 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.
And another quote from the w3.org people:
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.
Given the definition for section
by w3 we can conclude that your example would be a good use of section because:
- The elements have a header
- It is a thematic grouping of content
- It is a part of the document outline.
EDIT:
To expand upon your comment below, the new HTML5 elements are NOT supposed to replace the old HTML4 elements. For example, going through a page and replacing all the div
elements with section
elements would be flat out wrong. The section
element was, in my opinion, intended to make it easier for machines to parse certain pages (think: feedburners) by giving a more semantic structure to a page. After all, what's easier to parse, a page with 30 div
elements, or a page with 10 div
5 header
5 section
5 article
and 5 footer
elements?
In this particular case I would have an overall div around them, and then each column as a section as each one has a different meaning, each of which I assume has a heading indicating its status.
e.g.
<div>
<section id="col1">
<header><h1>Column 1</h1></header>
content....
</section>
<section id="col2">
<header><h1>Column 2</h1></header>
content....
</section>
<section id="col3">
<header><h1>Column 3</h1></header>
content....
</section>
</div>
精彩评论