Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I have read this article http://diveintohtml5.org/semantics.html#new-elements on the different new elements in html5. Now I want to create my new portfolio with the this new markup. It is quite important for me that the content is indexed as good as possible by the crawlers, and at the same time set an example on how html5 should be written.

Note: this is just an example, i'm not really doing this

Let's say I have a page for my skills. Normally I would have something like this:

<div><!-- header -->
  <ul id="menu">the menu</ul>
  <h1>My Skills</h1>
</div>

<div><!-- content 1 -->
  <h2>html</h2>
  <p>tell the people about the html skills</p>
</div>
<div><!-- content 2 -->
  <h2>css</h2>
  <p>tell the people about the css skills</p>
</div>

<div><!-- footer -->
  <p>some footer text</p>
</div>

Pretty basic. So how far do you take this in html5. I can see the header, section, nav and footer are important, but that do you do inside. Do you go all the way?

<header><!-- header -->
  <nav>the menu</nav>
  <h1>My Skills</h1>
</header>

<section><!-- content 1 -->
  <header>
    <h2>css</h2>
  </header>
  <section>
    <p>tell the people about the css skills</p>
  </section>
</section>

<section><!-- content 2 -->
  <header>
    <h2>css</h2>
  </header>
  <section>
    <p>tell the people about the css skills</p>
  </section>
</section>

<footer><!-- footer -->
  <p>some footer text</p>
</footer>

Do you need the inside elements for such a small example? If not, when do you use the inside elements?

share|improve this question
add comment

1 Answer

up vote 5 down vote accepted

I recommend reading the article from Smashing Magazine "HTML5 And The Document Outlining Algorithm" You will find detailed explanations on how to structure your html.

share|improve this answer
    
+1 Thanks nice article. Explains a lot. –  Saif Bechan Aug 17 '11 at 22:42
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.