<div class="h-card">
    
    <span class="p-name">
        <span class="p-given-name value">John</span> 
        <abbr class="p-additional-name" title="Peter">P</abbr>  
        <span class="p-family-name value ">Doe</span> 
    </span>
    <data class="p-honorific-suffix" value="MSc"></data>
    
    
    <br class="p-honorific-suffix" />BSc<br />
    <hr class="p-honorific-suffix" />BA
    
    
    <img class="p-honorific-suffix" src="images/logo.gif" alt="PHD" />
    <img src="images/logo.gif" alt="company logos" usemap="#logomap" />
    <map name="logomap">
        <area class="p-org" shape="rect" coords="0,0,82,126" href="madgex.htm" alt="Madgex" />
        <area class="p-org" shape="circle" coords="90,58,3" href="mozilla.htm" alt="Mozilla" />
    </map>
</div>