I'm writing the markup for Corpora - A Business Theme:
And started from the header section:
Here is my markup for it:
<header>
<div class="topHeaderPart">
<a href="#" class="logo">
<img src="images/logo.png" alt="Corpora - A Business Theme">
</a>
<ul class="primaryContacts">
<li><address>Phone: <em class="headerPhone">1.800.corp</em></address></li>
<li><address>Email: <em class="headerEmail">office@corpora.com</em></address></li>
<li><address>Follow Us: <a href="#" class="headerRSS"></a><a href="#" class="headerTwitter"></a><a href="#" class="headerFacebook"></a></address></li>
</ul>
</div> <!-- topHeaderPart -->
<nav>
<a href="#">Home<br><span>go to start</span></a>
<a href="#">Services<br><span>what we do</span></a>
<a href="#">Gallery<br><span>our best products</span></a>
<a href="#">Our Clients<br><span>what we've done for others</span></a>
<a href="#">About Us<br><span>who we are</span></a>
<a href="#">Contact Us<br><span>let's keep in touch</span></a>
</nav>
<div class="slider">
<div class="slides">
<a href="#" class="slideButton prev"></a>
<a href="#" class="slideButton next"></a>
<section id="slide1">
<h1>Awesome business card design</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Curabitur eget metus ac diam laoreet luctus rhoncus non nisi. Aenean at lobortis augue.</p>
<a href="#" class="buyNow">Buy it now</a> <span>or <a href="#">Find Out More</a></span>
<img src="images/slide1.png" alt="slide1-image">
</section>
<section id="slide2">
<h1>Awesome business card design</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Curabitur eget metus ac diam laoreet luctus rhoncus non nisi. Aenean at lobortis augue.</p>
<a href="#" class="buyNow">Buy it now</a> <span>or <a href="#">Find Out More</a></span>
<img src="images/slide1.png" alt="slide1-image">
</section>
<!-- ... -->
<section id="slideN">
<h1>Awesome business card design</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Curabitur eget metus ac diam laoreet luctus rhoncus non nisi. Aenean at lobortis augue.</p>
<a href="#" class="buyNow">Buy it now</a> <span>or <a href="#">Find Out More</a></span>
<img src="images/slide1.png" alt="slide1-image">
</section>
</div> <!-- slides -->
</div> <!-- slider -->
</header>
Does it semantically correct? Special attention for tags address
, em
, span
, section
.
Many thanks to you all.