Question

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">[e-mail]</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">[e-mail]</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.

Answer 1

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">[e-mail]</span></li>
   <li>Follow Us: <a href="#" class="headerRSS"></a><a href="#" class="headerTwitter"></a><a href="#" class="headerFacebook"></a></li>
  </ul>
</address>