Search code examples
htmlsemantic-markup

Semantical Markup: address, em


Im writing a markup and have a doubt at this part:
PrimaryContacts

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.


Solution

  • 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>