Chunliang Lyu

I am a developer and researcher from China. Love to make fun and useful stuff. Co-founded Hyperlink.

HTML Resume with Semantic Markup

Published: 2015-11-19

I am graduating in a few months, and started job hunting a few weeks ago. A nice resume is a first step to reach people. Previously I have tried using Microsoft Words (in the era of Office 2000) and LaTex. Words is like a blackbox for me, sometimes it is hard to adjust tiny stuff and you have no idea what went wrong. The disastrous update of Word 2007 broke my heart and I have rarely touched Word ever since. There are some pretty Latex resume template over the Internet. However, customize the template does not come easy, you need to learn the old weird LaTex Language. My requirements is like it:

  • should be easy to edit with plain old text editor;
  • can be easily exported to PDF;
  • would be nice to be exported to HTML, so that I can put a copy on my website and point the URL to people.

Wait, did I just say HTML? Why not use HTML directly? Look at it, HTML is plain text and well standardized. Any modern browser, such as Google Chrome, can export a HTML page to PDF format. Besides, I have spent years with HTML/CSS/Javascript and knows how to tweak the pixels. So let's do it in HTML this time.

If you are eager to see the result, go check my resume here. You are welcome to check the source code, or check the repository at GitHub.

Resume Screenshot
Resume Screenshot


It is better to make the workflow right first, and start coding after. gulp is my favorite build tools. So first setup a node project and install necessary modules. I choose scss to write stylesheets. The repo is setup at GitHub.

HTML Structure

Now it is the era of HTML 5. So the first thing I do is try to use appropriate semantic tags.

  • everything is wrapped in the <main> element, thus only one resume in a single HTML document.
  • use <section> to hold a section, like Education or Projects.
  • inside a <section> element, use <details> and <summary> to divide multiple subsections. (In modern browsers such as Google Chrome, you can click the summary element to toggle the details element)
  • use <time> to wrap the dates and time spans.

PDF generation

Since the resume need to export to a PDF file and print out in the future, I need to make sure we have it on the right size. There is already a project named Sheets-of-Paper providing CSS styles of different paper sizes.

You can use the print media query to define look-and-feel for the PDF version of the resume. For example, a HTTP link may only useful in the Web version compared to the PDF version. I defined a class .web-only that can hide the elements during printing.

One thing I didn't know previously is that you can define the paper size, orientation and margins using CSS media query. Pretty cool, isn't it?

@page {
  /* Paper size and page orientation */
  size: A4 portrait;

  /* only works if you set Margin to Default in the print dialog */
  margin: 1.5cm 1.8cm;

Then you can just use your browser to generate a PDF version of the resume. Make sure to select the Margins to Default for our custom CSS to be effective.

Semantic Markup

During my PhD research of text mining, I know the pain to extract data from unstructured/unlabeled text. I know there are resume parsing solutions that my information on the resume would be extracted automatically, but isn't it more easier if we can provide a resume that machine care read with a common standard.

To my knowledge, I don't know any effort to markup PDF file. So let's focus on the HTML version. After some survey, I find that there are multiple choices to markup a resume. There is a standard called hResume microformat that using CSS class name to annotate the content. hResume uses other standards like hCard and hCalendar. I do not personally like the idea of using css as semantic markup, and it seems there are not much adoptions with hResume. In the end, I choose the for the markup, since it have been widely adopted by major search engines.

Using is pretty easy. With your existing HTML, you just need to add additional properties to HTML elements. The Getting started guide takes five minute to read. Here is some highlights:

You can test the markup using the Structured Data Testing Tool by Google.

Take a look at available vocabulary here, and find appropriate enties for your resume. The vocabulary of is still pretty limited in this use case. For example, I cannot define the programming languages that I speak. However, the current version does enable us to markup lot of information on the resume. If people adopts this approach, parsing resumes would be such an easy case for HRs.

Structured Data Testing
Structured Data Testing