1

I'm tying to markup some content semantically. The content is company information, which may have multiple addresses, multiple phone numbers, multiple email addresses.

The hCard generators that I see seems to expect a person's details (e.g. first name, last name, etc.).

Is there a way to markup just company details? If so, how?

Also, is hCard the correct format to use?

unor
  • 92,415
  • 26
  • 211
  • 360
StackOverflowNewbie
  • 39,403
  • 111
  • 277
  • 441

2 Answers2

2

you can use multiples of most microformats' properties, as long as you heed the parental element(s), so in your case, as long as all the multiple data properties are children of .vcard and not .vcard as well, all is good. actually threw this together from two of their examples on http://microformats.org. here you go: 

  
<div id="contact" class="vcard">  
   <h2>Contact Me Yo!</h2>  
   <h3 class="fn">Jane Doe</h3>  
   <p>You can contact me via email to   
    <a class="email" href="mailto:jane@example.com">jane@example.com</a>,   
    or reach me at the following address:</p>  
   <div class="adr">  
     <span class="type">home</span> address:  
     <div class="street-address">123 Main Street</div>  
     <span class="locality">Any Town</span>, <span   class="region">CA</span>,   
     <span class="postal-code">91921-1234</span>  
   </div>  
   <div class="adr">  
     <span class="type">work</span> address:  
     <div class="street-address">789 Main Street</div>  
     <span class="locality">Any Town</span>, <span   class="region">CA</span>,   
     <span class="postal-code">91921-1234</span>  
   </div>  
</div>

references:
http://microformats.org/wiki/hcard-faq#Can_you_have_multiple_value_elements
http://microformats.org/wiki/hcard-faq#How_do_I_markup_multiple_addresses

is hcard the correct format to use?
100% absolutely...microformats are part of the html5 spec, they are the most widely used semantic web technology, they fit your exact needs, and they are (currently) indexed by the major search engines. microformats add levels to your document that most refuse to believe, but all you have do to is follow instructions, and you've got a pre-baked api in your markup.

that said, google/bing/yahoo!/yandex (? the russian search engine), have all openly endorsed schema.org, and while they support microformats (have for years), you'd be a fool to think they won't give their method(s) incentive(s) to be used. i'm not aware of any that are entirely microformats vs. schema.org yet, but i'm sure they are on the way. at the moment, imo, its more about tying everything into g+ for google right now, so everything else is taking a backseat. which only speaks to my point(s)...

clearly i am biased, but that's about as clear and dry as i can be. i actually have the same mental debate for each and every client that puts me in the position to run wild with their markup...i have yet to break down and start using schema, however, i am quite prepared for them to ping me randomly, should google magically stop harvesting microformats.

albert
  • 8,112
  • 3
  • 47
  • 63
  • (1) Microformats are *not* part of HTML5. (2) schema.org is a vocabulary, not a syntax. You can use schema.org with Microdata, RDFa, JSON-LD, …. – unor Feb 05 '14 at 19:48
  • Nope. (Unfortunately, I can’t link to something in the spec that *doesn’t* exist. So you should provide a link supporting your claim.) WHATWG’s [HTML Living Standard](http://www.whatwg.org/specs/web-apps/current-work/multipage/) specifies [Microdata](http://www.whatwg.org/specs/web-apps/current-work/multipage/microdata.html#microdata) (not Microformats!). W3C’s [HTML5](http://www.w3.org/TR/html5/) doesn’t specify Microdata nor Microformats. ([Microdata](http://www.w3.org/TR/microdata/) is separate specification at W3C.) – unor Feb 06 '14 at 10:41
  • interesting how my comment was deleted. You already linked to it, if you actually read what you linked to and followed your own advice, you'd see microdata is referencing microformats as its schema. moreover, microformats are html classes, plain and simple. until html5 drops the class attribute, they support them. You should follow your own advice. – albert Feb 08 '14 at 19:51
  • (I guess it got deleted because you called me 'asshole'.) This still doesn’t make Microformats part of the HTML5 spec (the link you mention is about Microdata vocabularies, which (re)use Microformat profile URIs!). As you just said, Microformats are (among some other things) `class` values, but those [values are *not* part of the HTML5 spec](http://www.w3.org/TR/2013/CR-html5-20130806/dom.html#classes). Of course Microformats are "supported" in HTML5, in the way that they can be used validly. But that doesn’t make them, quote, "part of the html5 spec". – unor Feb 09 '14 at 02:05
  • "5.4 Sample microdata vocabularies The vocabularies in this section are primarily intended to demonstrate how a vocabulary is specified, though they are also usable in their own right. " http://www.whatwg.org/specs/web-apps/current-work/multipage/microdata.html – albert Feb 09 '14 at 06:10
  • Again: This is Microdata (`itemtype`, `itemprop`, …), not Microformats (`class`, …). -- They just happen to use Microformats profile (!) URIs (and *not necessarily* the Microformats definition (!), as they are defined in the Microformats wiki) for these sample vocabularies. – unor Feb 09 '14 at 06:14
  • you haven't made a single point dude. why would they link to something that wasn't covered? i'm well aware of how they map. make sense. i am. those vocabularies are covered. rdfa isn't in the spec either. microdata is because it was created by the working group. – albert Feb 09 '14 at 09:11
2

To add company informations you have to simply add an org at the same level of the fn of your hCard.

Here is example:

<div class="vcard">
 <a class="url fn org" href="http://compa.ny">Company Name</a>
</div>

Or you can try it with Microdata/Schema.org which will be more supported by the great search engine providers: http://schema.org/Organization

Matthias Pfefferle
  • 483
  • 5
  • 12