Geeky Geeky - 1 month ago 13
CSS Question

Is the html markup sematically right?

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



<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

Can some one please help me on this

Answer

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>