I am trying to write semantic html for a business card.
I want to show the name,title,email and phone number on the mark up
here is my following markup
<span> Name :ABC</span>
<span> Title:XYZ </span>
<span class="email"> Email:email@example.com</span>
Your markup is technically correct but could subjectively be improved.
The HTML5 spec added many, more descriptive HTML properties like
<footer> that you are using but left implementation up to web developers. This has resulted in less than optimal usage of HTML properties in my experience.
For structural components of a document, the best guide I've found is produced by HTML5Doctor, which gives you a flow chart of usage guidelines for these properties.
In your specific case, I'd probably omit the use of
<footer> and switch how you are using
<div> like this:
<section class="businesscard-container"> <div class="businesscard-details"> <span> Name :ABC</span> <span> Title:XYZ </span> </div> <div class="businesscard-contact"> <span class="email"> Email:firstname.lastname@example.org</span> <span class="phonenumber">Mobile:123-123-123</span> </div> </section>