Semantic HTML for a business card
html, semantic-markup
Solution
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 `<section>` and `<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:abc@abc.com</span>
<span class="phonenumber">Mobile:123-123-123</span>
</div>
</section>
Problem
I am trying to write semantic HTML for a business card. I want to show the name, title, email and phone number on the markup. ``` <div id="bussinesscardcontainer"> <section class="Details"> <span> Name :ABC</span> <span> Title:XYZ </span> </section> <footer class="contact"> <span class="email"> Email:abc@abc.com</span> <span class="phonenumber">Mobile:123-123-123</span> </footer> </div> ``` I just want to understand is my markup sematically right or not. This markup would end up looking as Difficulty in Designing Business card using CSS