We would like to thank the community @Microformats.org for all their hard work and dedication to making the web more accessible. They promote semantic-HTML and microformats like hCard that are the application of semantic class names.
semantic: an adjective pertaining to syntax, meaning: linguistic, well-formed – the different meanings of words
^In terms of HTML, this equates to using the language and its vast library of descriptive tags to encapsulate the page’s informational. Web browsers can interpret and export these details. Basically, we are making the data in a page much more useful.
What this all means is that we must implement HTML to the intended specification. Using CSS to position and style elements like text, while also naming the IDs and Classes semantically. Writing semantic HTML is actually easy, and once you get used to it, your code will be much more efficient to maintain (for anyone responsible.)
Watch how easy this is:
Styling a email link has class=”email”, your social profile link with class=”url” or class=”org” around your company name; more. Wrap text with <em>instead of <i></em>, <strong>instead of <b></strong>, <p>paragraphs instead of <br />’s</p>, <address> (take it further and add spans with hCard classes), <abbr title=”abbreviation”>abbbr</abbr>, <acronym title=”Plain Old Semantic HTML”>POSH</acronym>, <cite> or even <q>quote</q>. («ex: Not valid HTML)
So why would we do this, instead of just using a WYSIWYG editor that spits out everything wrapped in spans with arbitrarily class names? Because the former is abusing the HTML! >> The old way of laying out anything (other than data – think excel) with tables, using transparent 1×1 gifs to position something or <br>eaking up text instead of using <p>paragraphs</p> is gone; please never return—thank you. (We survived the dot-com era~haha)
HTML was engineered to make sense.
When we use the tags properly, it opens the door to the impaired (through screen readers tools and the like) and to programs that recognize the named patterns within the page text. Giving the proper class names, thus creating an hCard in your code means that your “e-Business Card” or Geo-Location (as ex.) can be automatically recognized and/or saved. Contact lists can be generated using looped code patterns that make every person exportable. Not just copy-and-paste anymore; this is actually technology becoming Useful .
Technology is supposed to make life easier, more efficient. Look out the window at the technological wonder that surrounds you. Many things are designed without a shred of Usability considered; only cost. Things which are poorly designed only make life more frustrating. It is time we make the web more Usable, and we can do this simply by adding technologies like microformats. The more sites use it, the more data we can easily extract. The more popular it becomes, the more useful it becomes: via its creative use. A lot can be shared; a lot more than is today, and all web professionals need to work on this grand semantic goal.
Being long-term semantic advocates, we joined the Microformats.org community to help the world in this project. After producing our own “classy” icon
for vCard/hCard use, and being an OpenSource house, we added this graphic to GitHub and shared it on the microformats wiki.
We hope that this 10×12 in-line image will make its way around the web as a familiar icon to save vCards and indicate the presence of hCard(s).
We encourage you to thoroughly study their wiki; there is so much great information you are bound to find something new and interesting!
If you use the icon, leave a comment below or on Microformats.org
Best of luck, and as always we welcome your questions if you need help.