HTML and CSS tips #3 "Don't forget to mark up the social media block using the address element"

github logo ・1 min read

When you need to markup a social media block or other contact info you can use the address element.

Don't do it

<div class="my-social">
  <ul>
    <li><a href="github.com">Fork me on Github</a></li>
    <li><a href="twitter.com">Follow me on Twitter</a></li>
    <li><a href="linkedin.com">My LinkedIn</a></li>
  </ul>
</div>

You can use it instead

<address class="my-social">
  <ul>
    <li><a href="github.com">Fork me on Github</a></li>
    <li><a href="twitter.com">Follow me on Twitter</a></li>
    <li><a href="linkedin.com">My LinkedIn</a></li>
  </ul>
</address>

P.S: If you'd like to see more of interesting content go to my Patreon account 👉 https://www.patreon.com/melnik909

twitter logo DISCUSS (1)
Classic DEV Post from Dec 29 '18

What's your 🎉New Year Resolutions🎉 ?

I know you all must be thinking, "Ugh... Not this again. These things never wor...

Stas Melnikov profile image
I'm a mentor and like to share my knowledge with people so I create training materials for designers, developers, managers and publish it on my Patreon account https://www.patreon.com/melnik909