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>