Return to Answer

• 1

• 2.7k
• 15
• 24

• 2.7k
• 15
• 24

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 if your slider should be part of header or not.

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