Im writing a markup and have a doubt at this part:
And here is my markup:
<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>
Have I used tags address
and em
in right way or maybe there are more semantic ones? And maybe some other mistakes.. Thanks everyone for help.
[Edit]:
According to the answers I've written this:
<ul class="primaryContacts">
<li>Phone: <span class="headerPhone">1.800.corp</span></li>
<li>Email: <span class="headerEmail">office@corpora.com</span></li>
<li>Follow Us: <a href="#" class="headerRSS"></a><a href="#" class="headerTwitter"></a><a href="#" class="headerFacebook"></a></li>
</ul>
This contact information is really not mine and as I understand address
have nothing to do here. Also I've changed em
's on span
's. Thanks for help.
I think you're using <address>
the wrong way. Based on what you can read from the specs, a better way to have your code is to have the <address>
as parent. Moreover, the <em>
is to specify stress emphasis and this is not the case. So you should get rid of it. However, if you want it so style differently, you can use a <span>
element to have your CSS hook:
<address>
<ul class="primaryContacts">
<li>Phone: <span class="headerPhone">1.800.corp</span></li>
<li>Email: <span class="headerEmail">office@corpora.com</span></li>
<li>Follow Us: <a href="#" class="headerRSS"></a><a href="#" class="headerTwitter"></a><a href="#" class="headerFacebook"></a></li>
</ul>
</address>