6

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?

1 Answer 1

5

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.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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