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:
- Put 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?
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.