Semantic HTML for a business card [closed]

Question

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:[email protected]</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

Answer 1

Your use of the section and footer element is not correct. These two lines shouldn’t form a section, and the footer would belong to the parent section (which might be the whole document), instead of the business card only.
If you need a sectioning content element (it depends on the context), it should wrap the whole business card. It seems that you don’t need a footer (or header) at all here.

For the actual content, you could use a dl element, as your card consists of name-value pairs.

The email address and the telephone number could become hyperlinks, with the a element.

So that gives you:

<dl class="business-card">
  <dt>Name</dt>
  <dd>ABC</dd>

  <dt>Title</dt>
  <dd>XYZ</dd>

  <dt>Email</dt>
  <dd><a href="mailto:[email protected]">[email protected]</a></dd>

  <dt>Mobile</dt>
  <dd><a href="tel:123123123">123-123-123</a></dd>
</dl>

Answer 2

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:[email protected]</span>
    <span class="phonenumber">Mobile:123-123-123</span>
  </div>
</section>