title: Semantic HTML for a business card
body: <p>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.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="bussinesscardcontainer"&gt;
           &lt;section class="Details"&gt;
                 &lt;span&gt; Name :ABC&lt;/span&gt;
                 &lt;span&gt; Title:XYZ &lt;/span&gt;
             &lt;/section&gt;
        &lt;footer class="contact"&gt;
              &lt;span class="email"&gt; Email:abc@abc.com&lt;/span&gt;
              &lt;span class="phonenumber"&gt;Mobile:123-123-123&lt;/span&gt;
          &lt;/footer&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>I just want to understand is my markup sematically right or not.</p>
  
  <p>This markup would end up looking as 
  <a href="https://stackoverflow.com/questions/40050363/difficulty-in-designing-business-card-using-css">Difficulty in Designing Business card using CSS</a></p>