Microformatting the Resume

When a computer script crawls across the web looking for information (like Google's search robot) they need to do a lot of thinking to figure out what information is located on a web page. After all, web pages are written by humans for humans, with the data and information contained in our complex, contextual language. Web developers can help a script understand their site with robots.txt, xml feeds, and designated syntax (like using h1 tags for headers), and more recently, microformats.

The best way a script can understand text is by tagging it. This is how some xml formats work - you wrap the title with a <title> tag, set relative priority with a <priority> tag, etc. However, xhtml and older html formats only let you wrap normal web pages with standard tags, like p (paragraph), h1 - h6 (headers), etc. Microformats uses attributes of tags (like class names) to help computers understand what the content of a page is instead of the actual tags.

I recently dove into microformats with my resume, located on my portfolio site. You can tag different sections of a resume with specific tags to show scripts that they've found a resume and help them parse out specific information about the resume. There really isn't anything too fancy about the resume specification (you can read the draft here) - all you need to do is add specific classes to a few of the tags.

You start off by wrapping the entire resume with a class of 'resume' - probably easiest to this as a div. The objective/summary text should be wrapped in a 'summary' class. It's a good idea to add more information for human readers as well, as they won't see these class names. At this point you might have something like this...

  1. 

  2. <h2>My Resume</h2>

  3. <div class="resume">

  4.   <h3>Objective</h3>

  5.   <p class="summary">/* add in a summary here */</p>

  6. </div>

Like I mentioned before, it's a good idea to add extra headers/descriptions for human readers. The microformat specification doesn't care about the h2 and h3 tags, but it will help a person read through your resume.

Work experience gets a little complicated. Since the information here is date-dependent the resume specification depends on another microformat, vCalendar. There is three main fields I focused on - title, date duration, and description. The title includes the position title, company, location, and your contact information. Date duration and description are relatively simple in comparison - start and end date and a short description. Here's a summary from from my work experience (each separate job would have its own 'experience vevent vcard' div)...

  1. 

  2. <div class="vcalendar">

  3.   <div class="experience vevent vcard">

  4.     <div class="htitle">

  5.       <a href="#jacob-contact" class="include" title="Jacob Emerick"></a>

  6.       <span class="title">/* the job position here */</span>

  7.       <span class="org">/* the company name here */</span>

  8.       <span class="location">/* where the company was located */</span>

  9.     </div>

  10.     <div class="date_duration">

  11.       <abbr class="dtstart" title="/* YYYY-MM-DD of the start date */">/* human-friendly version of the start date */</abbr> - 

  12.       <abbr class="dtend" title="/* YYYY-MM-DD of the end date */">/* human-friendly version of the end date */</abbr>

  13.     </div>

  14.     <div class="description">/* job description here */</div>

  15.   </div>

  16. </div>

There are a few odd things contained in this. Technically you should include your full contact information with each work experience, or a vCard (another microformat specification). To avoid repeating the same information for each position I linked to a single vCard div (with an id of jacob-contact) located further down the DOM for each job position. The other odd thing is the abbr tag, which helps computer scripts understand dates. I can customized the human-friendly date to be January 1, New Year's Day, or 'the first of the year', all of which may be hard for a script to understand. The abbr tag wraps this value and passes in a consistent format, 2010-01-01, which is very easy to parse out.

Now that I mentioned the vCard format it makes sense to explain it. More complicated and used than the resume format, the vCard specification (you can read the draft here) has a lot of customization options available. I kept my vCard simple, with only my name and some basic contact information.

  1. 

  2. <div class="contact vcard">

  3.   <div class="fn n" id="jacob-contact">

  4.     <span class="given-name">Jacob</span>

  5.     <span class="family-name">Emerick</span>

  6.   </div>

  7.   <div class="adr">

  8.     <div>

  9.       <span class="street-address">W5913 Geranium Drive</span>

  10.     </div>

  11.     <div>

  12.       <span class="locality">Appleton</span>, <span class="region">WI</span> <span class="postal-code">54915</span>

  13.     </div>

  14.   </div>

  15.   <div>Email: <a class="email" href="mailto:jpemeric@gmail.com">jpemeric@gmail.com</a></div>

  16.   <div>Site: <a class="url" href="https://home.jacobemerick.com/">https://home.jacobemerick.com/</a></div>

  17. </div>

The last three pieces of my resume are achievements, skills, and education experience. Achievements and skills are simple lists with some rel attributes, and the education listing uses the vCalendar descriptions. Here is a complete barebones resume...

  1. 

  2. <div class="resume">

  3.   

  4.   <div>

  5.     <h3>Objective</h3>

  6.     <div class="summary">

  7.       <p>/* add in a summary here */</p>

  8.     </div>

  9.   </div>

  10.   

  11.   <div>

  12.     <h3>Work Experience</h3>

  13.     <div class="vcalendar">

  14.       <div class="experience vevent vcard">

  15.         <div class="htitle">

  16.           <a href="#jacob-contact" class="include" title="Jacob Emerick"></a>

  17.           <span class="title">/* the job position here */</span>

  18.           <span class="org">/* the company name here */</span>

  19.           <span class="location">/* where the company was located */</span>

  20.         </div>

  21.         <div class="date_duration">

  22.           <abbr class="dtstart" title="/* YYYY-MM-DD of the start date */">/* human-friendly version of the start date */</abbr> - 

  23.           <abbr class="dtend" title="/* YYYY-MM-DD of the end date */">/* human-friendly version of the end date */</abbr>

  24.         </div>

  25.         <div class="description">/* job description here */</div>

  26.       </div>

  27.       <? endforeach ?>

  28.     </div>

  29.   </div>

  30.   

  31.   <div>

  32.     <h3>Skills</h3>

  33.     <div class="tags">

  34.       <ul>

  35.         <li class="skill" rel="tag">/* some skill here */</li>

  36.         <li class="skill" rel="tag">/* another skill here */</li>

  37.       </ul>

  38.     </div>

  39.   </div>

  40.   

  41.   <div>

  42.     <h3>Achievements</h3>

  43.     <div class="achievements">

  44.       <ul>

  45.         <li class="achievement">/* some achievement here */</li>

  46.         <li class="achievement">/* another achievement here */</li>

  47.       </ul>

  48.     </div>

  49.   </div>

  50.   

  51.   <div>

  52.     <h3>Education</h3>

  53.     <div class="vcalendar">

  54.       <div class="education vevent vcard">

  55.         <div class="htitle">

  56.           <span class="summary">/* summary of education here (degree, etc)</span>

  57.           <span class="org">/* university/college */</span>

  58.         </div>

  59.         <div class="date_duration">

  60.           <abbr class="dtstart" title="/* YYYY-MM-DD of the start date */">/* human-friendly version of the start date */</abbr> - 

  61.           <abbr class="dtend" title="/* YYYY-MM-DD of the end date */">/* human-friendly version of the end date */</abbr>

  62.         </div>

  63.       </div>

  64.     </div>

  65.   </div>

  66.   

  67.   <div>

  68.     <h3>Contact</h3>

  69.     

  70.     <div class="contact vcard">

  71.       <div class="fn n" id="jacob-contact">

  72.         <span class="given-name">Jacob</span>

  73.         <span class="family-name">Emerick</span>

  74.       </div>

  75.       <div class="adr">

  76.         <div>

  77.           <span class="street-address">W5913 Geranium Drive</span>

  78.         </div>

  79.         <div>

  80.           <span class="locality">Appleton</span>, <span class="region">WI</span> <span class="postal-code">54915</span>

  81.         </div>

  82.       </div>

  83.       <div>Email: <a class="email" href="mailto:jpemeric@gmail.com">jpemeric@gmail.com</a></div>

  84.       <div>Site: <a class="url" href="https://home.jacobemerick.com/">https://home.jacobemerick.com/</a></div>

  85.     </div>

  86.   </div>

  87.   

  88. </div>

And that's a microformat version of my resume! A computer script will be able to easly read, understand, and parse this information as it crawls through my pages. There are already some major sites who have started to adopt this standard, including LinkedIn and Xing, and now you can use it on your site as well.