开发者

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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜