Chapter 8. Defining Résumés: hResume

In today’s economy and job market, a résumé or CV is like air. You need it. And in the web industry, having an online résumé is just as important.

If you are currently unemployed, you know what I’m talking about. You also know the joys of having to maintain your résumé on all the various job sites out there, like Monster and CareerBuilder.

What’s even better is all of these job sites format their résumés differently. So you have to maintain information on multiple sites, often in different fashions. I’ve been there myself and it totally sucks . . . sucks time better spent actually looking for a job . . . sucks energy better spent improving the content of your résumé . . . sucks your will to live.

Can you imagine a world where this isn’t the case? A world in which you have one résumé that you can share across any and all job sites? A world where being unemployed or seeking a job is made less horrible because your résumé is exactly that: yours?

I can. Because I know about hResume.

What Is hResume?

hResume is a draft microformat. At its core, it is just a design pattern that adds semantic richness to online résumés and curricula vitae (CVs), providing both humans and machines information about your job skills and experience.

The properties (class values) for hResume were developed based on existing résumé formats (Europass and HR-XML) and common “fields” seen in today’s résumés:

• Education

• Work experience

• Specific skills

• Affiliations

One résumé to rule them all

Aside from its semantic yumminess, hResume was developed, in part, to provide a standard way for people to control their résumé data. Such standardization provides the foundation for résumé content to be created and maintained in one location, but made available to any application (the machines!) that needs résumé information.

This would mean an end to filling out all of those annoying résumé forms on all of the various employment sites. You would simply ping those sites and services when you had a new résumé or updated an existing one. And then those services would extract the data from your single résumé (which would, of course, be using hResume) and populate your account with the new information.

And because you would truly own your résumé in this context, you could present it in any fashion you cared to, rather than being tied to the often ugly, boring and homogenous résumés generated by services like Monster.

A standard for online résumés could also help connect employers and job seekers. Using standardized, structured data like hResume would help search tools better find candidates qualified for particular jobs.

As of today, however, all of this is pure potential that has yet to be realized. My guess is that the draft status of hResume may discourage implementation. But you and I, as founding members of the Microformats Are Way F’n Cool Club, know that is really no reason not to publish hResume.

Semantics are good. Standards are good. Microformats are good. And I believe in the “build it and they will come” philosophy, especially when “build it” is just a few class values.

Recognizing the potential

Of course, I’m not alone in this thinking. While hResume isn’t one of the more popular microformats, it is in use:

• Emurse offers templates that publish hResume.

• LinkedIn generates hResume for all of its 9 million (and counting) public profiles.

• Resolio publishes all résumés in hResume format.

Electronic business cards and calendars

hResume incorporates hCard, hCalendar, and rel-tag into its format. hCard is applied to content about the résumé owner, as well as information about employers (organizations, companies). hCalendar, meanwhile, is applied to content about previous jobs and education, both of which can be thought of as date-time–based events. And rel-tag is applied to links containing skill information.

So, with hResume you get all the benefits of hCard, hCalendar, and rel-tag. Four microformats in one!

Profile

Let’s start with the hResume profile that you can add to your document <head>:

<head profile="http://microformats.org/profile/hresume">

Because hResume uses hCard and hCalendar, be sure to include those profiles as well, separating each with a space:

<head profile="http://microformats.org/profile/hresume
http://microformats.org/profile/hcard http://microformats.
org/profile/hcalendar">

Syntax

• hresume is a required root property. All résumé content needs to be contained by an element assigned this class value. This property is used only once.

• contact is the other required property for hResume. It contains the person’s contact information and must be marked up with hCard. And because a résumé is about a single individual, this property is used once.

• summary is an optional property applied to content about the person’s objective, such as the job being sought and overall qualifications. You can use this property only once in a single hResume.

• The optional skill property is applied to content about a person’s specific skills, such as XHTML and CSS. These skills can be considered tags for the résumé, so they should be links (<a>) assigned the rel-tag microformat.

• The optional experience property is applied to content about a person’s previous work experience. This type of content is date-time based and, as such, can be considered an event and should be marked up with hCalendar. Additionally, experience content for job titles should be marked up with hCard.

• The optional education property contains information about a person’s education. Again, such content is date-time based and should also be an hCalendar.

• The optional affiliation property is applied to information about organizations with which a person is affiliated, such as a professional association or group. These organizations should also be marked up with hCard.

• You should use <cite> to indicate any publications the person has authored. Note that this is a standard HTML element, not a property; it doesn’t appear as a class value. Also, it is optional.

Of all of these properties (and <cite>), the root hresume, contact, and summary can be used only once. The others can be used as many times as necessary.

Practical Markup

Résumé content is, by its very nature, straightforward. In turn, the markup for résumés is (or should be) as well. You may have some headings, some lists, a few paragraphs and links—which means <h1>s (and/or other heading elements), <p>s, <a>s, <ul>s maybe even <dl>s.

No rocket surgery or brain science here, but it’s still worth taking a look at some POSH implementations of hResume.

Simple résumé

There may be instances when you have a very basic résumé, with just your contact information, objective, and skill set. Maybe it’s your first résumé, so you don’t have any relevant job experience. Or maybe you just want to provide the basics and have prospective employers contact you for further details. Or maybe you are lazy (I suffer from that disease myself).

Required root property: hresume

Because the root hresume needs to contain all of the résumé content, I add a containing <div> with class="hresume" to my markup:

Required property: contact

Because the contact property must contain all of the person’s contact information, I need to add another <div> to my markup so I can apply that class value:

Adding hCard

hResume specifies that contact also be an hCard, so I’ll add the relevant properties from hCard:

Combining microformats: XFN

While it isn’t part of the hResume spec, the contact information provides an opportunity to combine another microformat, XFN. If you recall, rel-me is assigned to hyperlinks that reference URLs about you, which is exactly what a website in a résumé is.

<li><a href="http://shiny.com" class="url" rel="me">shiny.
com</a></li>

Optional property: summary

Next I add the summary property to the element containing my résumé objective statement:

Optional property: skill

The skill property must be assigned to a link, so I have to add <a>s to my skill content before assigning the property:

Adding rel-tag

Note that the href values for the new links are tag spaces. That’s because skill links should also be assigned rel-tag, which requires that the destination href for tag links be a tag space:

Personally, I don’t really care for this part of the hResume specification. Seems a bit link crazy. And these are links that I have a difficult time believing would be relevant to potential employers, not to mention they could take attention away from why an employer is reading my résumé.

If you feel the same way, then don’t include this property. It is optional. But if you think skill makes sense for your résumé, now you know how to implement it (you can thank me later).

The end result

Properly marked up with hResume, our example looks like:

The logic behind the markup

Not much to explain in this example. The content dictated my markup: <p> for paragraph content, <ul> for lists, <h1> and <h2> for headings.

I could’ve easily used a <dl> for my contact content—with the name contained by <dt>—and job title, telephone, email, and website contained by <dd>s. This works semantically and means that I wouldn’t need that nonsemantic <div> I added. But I really want the potential SEO boost for the name and job title, so heading elements are appropriate.

Detailed résumé

For some folks, the more detailed the résumé, the better. And I would be one of those folks, so let’s use an abbreviated version of my résumé:

Required root property: hresume

To assign the root hresume, I first have to add a containing <div>:

Required property: contact

As in the first example, I need to contain all of my content with a new <div> assigned class="contact":

Adding hCard

But don’t forget, it isn’t just a matter of adding the contact property; you also have to add hCard:

Note that for my n and adr subproperties, I had to add <span>s to contain the content. Also note that, once again, I added rel-me.

Optional property: summary

The content in this résumé example doesn’t include an objective, but it does include some highlights of qualifications, which is perfect content for the summary property:

Optional property: skill

To assign the skill property, I once again add links to the content and assign each rel="tag" along with class="skill":

Optional property: experience

In order to apply the experience property, I have to add another <div> containing all of the experience content:

This résumé example includes only one work-experience reference (for brevity’s sake—oh, and the trees), but remember that the experience property can be used as many times as needed.

Adding hCalendar

But just adding the experience property isn’t enough. You also need to add hCalendar because work-experience content should be considered a date-time event.

I will be the first to admit that when I learned hResume, it was this particular use of hCalendar that had me stumped. I never thought of my previous jobs as events, so it took me a while to understand hCalendar’s place in hResume.

Once I did, I realized a few things:

• Job title = event name (summary)

• Employer = where event was held (location)

• Dates of employment = start and end dates (dtstart and dtend)

• Responsibilities and accomplishments = details about the event (description)

Note that because my experience included only date information (rather than both date and time), I’m using <abbr> with the value class pattern.

Adding hCard

We still aren’t done with experience yet. The hResume spec requires that the job title and employer content be marked up with hCard. But wait! My content for experience doesn’t include my name, which is the only required property for hCard.

What to do? Add my name to each instance of experience? Not only would that be tedious, but also I’m fairly certain that a prospective employer would see that and file my résumé under “idiot.”

The solution is the include design pattern I mentioned way, way, way back in Chapter 1, which provides a means for reusing content (my name) without having to repeat it. To implement the include pattern, I first have to assign a unique id value to my name content in the contact hCard:

<h1 class="fn n" id="emily-hcard-name"><span class="given-
name">Emily</span> <span class="additional-name">Paige</
span> <span class="family-name">Lewis</span></h1>

Next, I add a link assigned class="include" with an href value equal to the id value for each instance of experience:

And that hyperlink must contain inner text. Unfortunately, this still results in the repeated display of my name within the résumé. The solution? Hide it with a bit of CSS:

.include {display:none;}

Including a hyperlink is the preferred method for the include pattern. If, however, your publishing process or system prevents you from adding a hyperlink with inner text, you can use an alternate method with <object>.

For the <object> approach, I still have to assign an id to my name in the contact hCard:

<h1 class="fn n" id="emily-hcard-name"><span class="given
-name">Emily</span> <span class="additional-name">Paige
</span> <span class="family-name">Lewis</span></h1>

Then, instead of including a link in each instance of experience, I add an <object> assigned class="include", which has a data value equal to the id value on my name:

This method will be understood by machines, but results in some pretty wonky browser rendering. You should resort to it only when publishing constraints keep you from using the hyperlink method.

Now let’s get back to the rest of the hCard properties required for experience:

Optional property: education

Because I don’t have a containing element for my education content, I add a <div>:

Even though I’m showing only a single education instance in this example, the property can be used multiple times within an hResume.

Adding hCalendar

Like experience, education content should be considered date-time events, assuming the following:

• Type of education = event name (summary)

• Institution = event (location)

• Dates of attendance = start and end date-time (dtstart and dtend)

Again, I’m using <abbr> with the value class pattern because I’m only dealing with dates and I like consistency within an implementation.

Optional property: affiliation

My résumé example includes affiliations, so I will assign the affiliation property to each:

Adding hCard

Per the hResume spec, the organizations referenced in each affiliation should be hCards:

Optional element: <cite>

While hResume does not have a property to indicate publications, it does recommend the use of the <cite> element. Since you are reading this book and it has thus gone to print, I can add it as a publication on my résumé:

<p><cite>Microformats Made Simple</cite>, October 2009</p>

Machines will parse the content contained by <cite> as a publication authored by the person the résumé is about.

The end result

Adding all of those properties and subproperties gives us a résumé fully marked up with hResume:

The logic behind the markup

As in the first example, I used an <h1> for my name content in order to get a potential SEO boost. However, the use of <h2>s in this example is less for SEO and more for structure (and, admittedly, a bit of presentation). As I hope you know, heading elements help define the structure of the page in terms of sections. What I mean by this is that where I use a heading element, the content that follows is related to the heading.

Heading elements also have an added accessibility benefit. Screen-reader and keyboard-only users can use shortcuts to skip from heading to heading as they navigate.

I also like that by using heading elements for my structure and semantics, I have less CSS styling to do. The default rendering of headings in today’s browsers include font sizing and weight. Of course, you can override this presentation, but I personally like my headings in bold (weight), so I don’t need to specify that in my CSS.

For the remainder of the content in this example, I use list elements for education and experience content, because it makes sense to me to reference it as a list. Of course, <p>s would be perfectly acceptable and make just as much semantic sense, depending on your personal perspective.

Also, just as in the first example, I could’ve used a <dl> for my contact content, but I would’ve lost the SEO on my name, since a <dt> can’t contain block level elements like <h1>.

Authoring Tools

Efficiency is just as important as a good résumé in today’s job market and economy. And I want to help you be efficient (because I’m that invested in you—and I’m just cool), so check out some of these tools to make your life a bit easier when publishing hResume:

• hResume Creator: http://hresume.weblogswork.com/hresumecreator/

• Optimus Microformats Transformer (for validation): http://microformatique.com/optimus/

• CV Antix Build Your CV: http://cv.antix.co.uk/Build/

• hResume Cheatsheet: http://microformats.org/wiki/hresume-cheatsheet

• For more hResume tools, see http://microformats.org/wiki/hresumeimplementations

The Journey Continues

I bet you are really feeling comfortable with microformats now. You’ve not only learned hResume in this chapter, you’ve also gotten loads of practice with rel-tag, hCard, and hCalendar.

And while we are more than halfway done with our microformats journey (at least as far as this book will take you), there is still more microformatty goodness ahead. Next up: defining syndicated content with hAtom.