Semantically correct markup at practice

Question

I'm writting a mark up for:

And here is my HTML:

<div id="container">
 <header>
 <h1><img src="images/logo.png" alt="Jessica Priston - Photographer"></h1>
 <nav id="mainNav">
 <ul>
 <li><a href="#">home</a></li>
 <li><a href="#">blog</a></li>
 <li><a href="#">works</a></li>
 <li><a href="#">mail</a></li>
 </ul>
 </nav>
 </header>
 <div id="categories">
 <ul>
 <li>
 <img src="images/weddings.jpg" alt="weddings">
 <h4>Weddings</h4>
 <p>Praesent vestibulum aenean Nonummy hendrerit mauris. Hasellus porta. Fusce suscipit</p>
 </li>
 <li>
 <img src="images/nature.jpg" alt="nature">
 <h4>Nature</h4>
 <p>Praesent vestibulum aenean Nonummy hendrerit mauris. Hasellus porta. Fusce suscipit</p>
 </li>
 <li>
 <img src="images/fashion.jpg" alt="fashion">
 <h4>Fashion</h4>
 <p>Praesent vestibulum aenean Nonummy hendrerit mauris. Hasellus porta. Fusce suscipit</p>
 </li>
 <li>
 <img src="images/family.jpg" alt="family">
 <h4>Family</h4>
 <p>Praesent vestibulum aenean Nonummy hendrerit mauris. Hasellus porta. Fusce suscipit </p>
 </li>
 </ul>
 <nav>
 <button class="prev"></button>
 <button class="next"></button>
 </nav>
 </div> <!-- categories -->
 <div id="main">
 <header>
 <h2>View a collection of fantastic portfolio that reflects</h2>
 <h3>my true passion towards what I do</h3>
 </header>
 <p>Praesent vestibulum aenean Nonummy hendrerit mauris. Hasellus porta. Fusce suscipit varius mi cum sociis natoque penatibus. et magnis dis parturient montes nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio. Morbi nunc odio gravida at cursus nec luctus a lorem. Maecenas</p>
 <p>Praesent vestibulum aenean Nonummy hendrerit mauris. Hasellus porta. Fusce suscipit varius mi cum sociis natoque penatibus. et magnis dis parturient montes nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio. Morbi nunc odio gravida at cursus nec luctus a lorem. Maecenas</p>
 <a href="#" class="read-more">Read more</a>
 <ul>
 <li><img src="images/seo.jpg" alt="seo"></li>
 <li><img src="images/growth.jpg" alt="growth"></li>
 <li><img src="images/good-cook.jpg" alt="good cook"></li>
 <li><img src="images/prospect.jpg" alt="prospect"></li>
 <li><img src="images/puresofr.jpg" alt="pure soft"></li>
 </ul>
 <nav>
 <button class="prev"></button>
 <button class="next"></button>
 </nav>
 </div>
 <aside>
 <section>
 <h3>hi, friends!</h3>
 <p>Praesent vestibulum aenean Nonummy hendrerit mauris. Hasellus porta. Fusce suscipit</p>
 <img src="images/myphoto.jpg" alt="My photo">
 <p>Praesent vestibulum aenean Nonummy hendrerit mauris. Hasellus porta. Fusce suscipit </p>
 <a href="#" class="read-more">Read more</a>
 </section>
 <section>
 <h3>Services</h3>
 <ul>
 <li>Lorem ipsum</li>
 <li>Lorem ipsum</li>
 <li>Lorem ipsum</li>
 <li>Lorem ipsum dolor</li>
 <li>Lorem ipsum dolor</li>
 <li>Lorem ipsum</li>
 <li>Lorem</li>
 <li>Lorem ipsum</li>
 <li>Lorem ipsum</li>
 <li>Lorem</li>
 </ul>
 </section>
 <section>
 <h3>What a new?</h3>
 <article>
 <h4><time>Nov 09, 2012</time></h4>
 <p>Praesent vestibulum aenean Nonummy hendrerit mauris. Hasellus porta. Fusce suscipit</p>
 </article>
 <article>
 <h4><time>Nov 12, 2012</time></h4>
 <p>Praesent vestibulum aenean Nonummy hendrerit mauris. Hasellus porta. Fusce suscipit</p>
 </article>
 <article>
 <h4><time>Nov 18, 2012</time></h4>
 <p>Praesent vestibulum aenean Nonummy hendrerit mauris. Hasellus porta. Fusce suscipit</p>
 </article>
 </section>
 <section>
 <h3>Testimonials</h3>
 <blockquote>
 <p><strong>Praesent vestibulum aenean</strong> 
 Nonummy hendrerit mauris. Hasellus porta. Fusce suscipit varius mi cum sociis natoque penatibus et magnis dis parturient montes nascetur.</p>
 <footer>
 <span class="name">Tom ford</span>
 <span class="post">Manager</span>
 </footer>
 </blockquote>
 <blockquote>
 <p><strong>Hasellus porta. Fusce suscipit varius mi cum</strong> sociis natoque penatibus et magnis dis parturient montes nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio.</p>
 <footer>
 <span class="name">Tom ford</span>
 <span class="post">Manager</span>
 </footer>
 </blockquote>
 </section>
 </aside>
 <footer>
 <img src="images/logo.png" alt="small logo">
 <small>© 2012 | Privacy Policy</small>
 </footer>
 </div> <!-- container -->

Is it semantically correct? Can #categories be presented as 4 figures or articles. And also Im afraid for nav for my buttons and span.name, span.post for author, is there more semantic one? Thank you everyone for help)

Answer 1

#categories

#categories needs to be a section element (instead of div), otherwise the nav would be in scope of the whole page (but it is only for the categories). Besides that, you shouldn't overjump heading levels.

Each category should get its own sectioning element, too, otherwise the headings will make problems because they are in a ul. Maybe article is suitable here (depends on the actual content), otherwise section.

However, I don't "understand" the categories ... are they relevant to the main content for that page? If not, probably aside should be used. Or are they navigation? If yes, and if it is not included in the main nav, it should be nav, too, probably.

#main

It should be section instead of div, otherwise the header would be in scope of the whole page.

I'm not sure I understand the content here. Are the icons (in the ul) part of this main content? Or are they secondary information? If so, they should go in aside. Then the "Read more" link would be the main navigation for that main content.

#main > header

The header inside of #main should be a hgroup (you could use header in addition, if you like/want it), otherwise the "subheading" would be included in the outline.

<header> <!-- header could be omitted -->
 <hgroup>
 <h2>View a collection of fantastic portfolio that reflects</h2> <!-- could be h1 -->
 <h3>my true passion towards what I do</h3> <!-- could be h2 if h1 is used before -->
 </hgroup>
</header>

blockquote

The footer shouldn't be inside of blockquote, as it is not part of the quoted content. You could use article here to group it. Also, the name and job title shouldn't be in span, use div instead.

<section>
 <h3>Testimonials</h3>
 <article>
 <blockquote>
 <p>...</p>
 </blockquote>
 <footer>
 <div class="name">Tom ford</div>
 <div class="post">Manager</div>
 </footer>
 </article>
 <article>
 ...
 </article>
</section>

• Artem Svirskyi: Thank you, Unor again) but I didn't understand: "#categories needs to be a section" - they don't have a heading, is that okay? "Besides that, you shouldn't overjump heading levels" - So for each category I have to use h2? But it will be at the same heading level with the #main. "The footer shouldn't be inside of blockquote, as it is not part of the quoted content" - but I've read at html5doctor.com/blockquote-q-cite/#change-2012年02月14日 - "... <footer> element, allowing us to add semantically separate information about the quote" And footer is used for the same thing there.
• unor: @SakerONE: Regarding footer in blockquote: Your link points exactly to the statement that html5doctor.com was wrong about using it that way.
• unor: @SakerONE: Regarding section for #categories: They don't have to have a heading, but what is important is that they could have a natural heading. So in your case it would be perfectly fine to use the heading "Categories" (or similar). If you don't want to display it, hide it visually (so that screenreaders still read it) or omit it altogether.
• unor: @SakerOne: Regarding heading levels: Well, yes, that is exactly the point. When you use a section (see previous comment), the (implicit) heading of that section will be on the same level (while each category will be one level deeper). If the categories don't belong to the main content, they should be on the same level like the main content and the navigation.
• Artem Svirskyi: "Your link points exactly to the statement that html5doctor.com was wrong about using it that way" - oh...