HTML5 - Section or Div?
I am learning HTML 5 - going pretty smoothly.
My question is that I have a home page, header, menu and below this 3 content blocks, evenly spaced. They each contain various copy, with header text. For example,
Column 1
About Us Lore Ipsum...
Our Advantage Lore Ipsum...
Column 2
Our Products Lore Ipsum...
Column 3
Contact Form
Twitter Feed
Contact Us Lore Ip开发者_StackOverflow中文版sum...
What is the best markup for this? Normally I would but each column in a div. Would this be best?
<div id="column1">
<section>
<h2>About Us</h2>
<p>Lore Ipsum...</p>
</section>
<section>
<h2>Our Advantage</h2>
<p>Lore Ipsum...</p>
</section>
</div>
<div id="column2">
<section>
<h2>Our Products</h2>
<p>Lore Ipsum..</p>
</section>
</div>
<div id="column3">
<form...
<div id="twitter">
<script...>
</div>
<section>
<h2>Contact Us</h2>
<p>Lore Ipsum...</p>
</section>
</div>
I'd say your posted code is fine, although personally I'd use <header><h1></h1></header>
, instead of <h2></h2>
, since the headings in this case are section headers (this is optional though).
More information on section headers can be found at:
- http://html5doctor.com/the-header-element/
- http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-header-element
Consider using the <article>
element instead of the <section>
element, at least for "About Us" and "Our Advantage". These are almost certainly going to be syndicatable units of content so <article>
is more appropriate. Possibly for the other sections too, but it really depends on what the lorem ipsum text says.
Otherwise, what you've got is good. <h2>
s for your headings are fine if that's what you want to use. Neither <h1>
nor <header>
are giving you anything extra.
I would have done the same as you. As long as the sections in each div aren't strongly related. In that case I would change the divs to sections that contains sub-sections. Divs are still valid in HTML5 but are more of general block level containers.
What is the purpose of the div? It serves no function from what I can tell. All the section elements can be styled as they are except 'column3', perhaps.
精彩评论