Semantically correct html5 markup

Question

I'm writing the markup for Corpora - A Business Theme:

And started from the header section:

Screenshot of header

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">[email protected]</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.

• Adam: Welcome, SakerONE! Thanks for your question; I embedded the header screenshot for you.

Answer 1

address

I'd enclose the ul.primaryContacts in one address element (not every item separately):

<address>
 <ul class="primaryContacts">
 <li>Phone: <em class="headerPhone">1.800.corp</em></li>
 <li>Email: <em class="headerEmail">[email protected]</em></li>
 <li>Follow Us: <a href="#" class="headerRSS"></a><a href="#" class="headerTwitter"></a><a href="#" class="headerFacebook"></a></li>
 </ul>
</address>

links without content

Your follow links don't contain any content: <a href="#" class="headerRSS"></a><a href="#" class="headerTwitter"></a><a href="#" class="headerFacebook"></a>

Screenreader users wouldn't be able to make sense of these links.

Either add the text to it (and visually hide it, and display the icons via CSS), or use img here (together with the alt attribute, of course).

Same problem with the two slideButtons (<a href="#" class="slideButton prev"></a>).

em

I don't think the em element is correct in these cases:

• <em class="headerPhone">1.800.corp</em>
• <em class="headerEmail">[email protected]</em>

http://www.w3.org/TR/html5/text-level-semantics.html#the-em-element:

The em element represents stress emphasis of its contents.

And, important:

The placement of stress emphasis changes the meaning of the sentence.

In your cases the em doesn't change any meaning. You wouldn't stress the phone number or the email address while reading.

contact URIs

You could link your contact details:

• <a class="headerPhone" href="tel:...">1.800.corp</a> (with the tel URI scheme)
• <a class="headerEmail" href="mailto:[email protected]">[email protected]</a> (with the mailto URI scheme)

br

You use br in the navigation (<a href="#">Home<br><span>go to start</span></a>), but this is not a correct use:

br elements must be used only for line breaks that are actually part of the content, as in poems or addresses.

site heading

Your page should probably have a site heading. Currently your outline would be:

Untitled Section
 Untitled Section
 Awesome business card design
 Awesome business card design
 Awesome business card design

In your case, the logo (resp. the alt value) is the site/page heading, so you'd have:

<h1>
 <a href="#" class="logo">
 <img src="images/logo.png" alt="Corpora - A Business Theme">
 </a>
</h1>

slider

It depends on content and context of your page if the slider should be part of header or not. Is the slider present on all pages? Then it's probably correct to place it in the header. But if it would be part of the main content of a page, it shouldn't be in the header.

I think you should enclose the whole slider in a section (resp. aside); if possible, find a heading for it. As soon as you use such a sectioning element for the slide, you can enclose the two slide buttons in a nav element (as they are the main navigation for that sectioning element). Also, each slide could be an article (instead of a section).

Then you'd get the following outline (together with the site heading mentionend before):

Corpora - A Business Theme
 Untitled Section (this is your site nav)
 Untitled Section (this is the slider heading)
 Untitled Section (this is your slider nav)
 Awesome business card design
 Awesome business card design
 Awesome business card design