Semantic HTML for a business card

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: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

I'm voting to close this question as off-topic because it is requesting a [code review](http://codereview.stackexchange.com/help/on-topic) — Quentin, Oct 18 '16 at 08:57

score 6 · Answer 1 · edited Sep 25 '17 at 06:39

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:abc@abc.com">abc@abc.com</a></dd>

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

This is the best answer in terms of the semantics for the name:value pairs themselves. — dmbaughman, Mar 01 '19 at 00:40

score 4 · Accepted Answer · answered Oct 17 '16 at 14:14

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>

shouldn't this be wrapped with a div instead of a section since it doesn't have a H tag? — Divern, Aug 25 '21 at 23:37
@Divern - the tags are just semantic guidance. It doesn't matter their order, at least to a browser. — serraosays, Aug 27 '21 at 17:11

score 2 · Answer 3 · answered Oct 17 '16 at 14:14

HTML not have semantic for this purpose. You have tu use microformat (http://microformats.org/). This standard is created for business card, address, recipes and many more.

Is used by search engine, browser and other.

h-card is the html microformat standard you need (http://microformats.org/wiki/h-card). An example:

<p class="h-card">
  <img class="u-photo" src="http://example.org/photo.png" alt="" />
  <a class="p-name u-url" href="http://example.org">Joe Bloggs</a>
  <a class="u-email" href="mailto:joebloggs@example.com">joebloggs@example.com</a>, 
  <span class="p-street-address">17 Austerstræti</span>
  <span class="p-locality">Reykjavík</span>
  <span class="p-country-name">Iceland</span>
</p>

Semantic HTML for a business card

3 Answers3