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 figure
s or article
s. And also Im afraid for nav
for my button
s and span.name, span.post
for author, is there more semantic one? Thank you everyone for help)