After leaving Opera, I traveled around for a while and have now set up base in Singapore. Although some might argue this, lying by the pool can be very unhealthy. Especially if you do it for 4 consecutive weeks. Especially if it comes with a decent serving of Mojitos and Caprinhas. So last week, I got sober and started looking for work.

Now, the search for jobs started online and the first thing on my to-do list was to update my resume. One thing I had noticed while checking other resumes on the web was that although, containing more or less the same type of information, they are almost always structured in a different way,. Most resumes look pretty much alike, but they aren’t necessarily structured alike.

Honestly, most resumes I have seen don’t pay any attention to the structure of the markup at all. Mind you, I have still seen some resume coded in tables.

Structuring the content

One aspect of authoring web pages which I enjoy a lot is putting semantic meaning into the content. It is very interesting, can be very useful and gets developers confused quite often.

A quick look at at how Wikipedia defines semantic HTML gives you the basics:

Semantic HTML is a way of writing HTML that emphasizes the meaning of the encoded information over its presentation (look).

The easiest way to start with semantic markup is to start with simple, unstyled HTML. That makes it easy to to structure your content without being distracted by the layout. While writing my resume, I broke down the markup into the following sections:

1. Name and other personal information
2. Profile summary or objective
3. Skills
4. Experience
5. Education

What these sections consist of:

Name and other personal information

List of attributes about you

Profile summary or objective

One or two lines of summary

Skills

List of skills

Experience

List of places you have worked at, ordered chronologically

Education

List of places you have studied at, ordered chronologically

The code

To begin the markup, I started with my headings:

<h1>Navjot Pawera</h1>
<h2>Profile Summary</h2>
<h2>Skills</h2>
<h2>Experience</h2>
<h3>Education</h3>

For the title of the page, I used <h1> and then <h2>‘s for the headings of different sections.

Next, I wanted to write my personal details in an explanatory manner; instead of just saying +65 96246234, I wanted to explicitly say it is my phone number, as in: Phone: +65 96246234

Based on this, I used a Definition List to write down my personal details:

<h1>Navjot Pawera</h1>
<dl>
	<dt>Website</dt>
	<dd><a href="http://www.navjotpawera.com" title="Personal website">http://www.navjotpawera.com</a></dd>
	<dt>Email</dt>
	<dd><a href="mailto:navjotpawera@gmail.com" title="Email">navjotpawera@gmail.com</a></dd>
	<dt>Phone</dt>
	<dd>+65 96246234</dd>
</dl>

Followed by, the profile summary, which was suitably defined as a paragraph.

<h2>Profile Summary</h2>
<p>A enthusiastic web technologist with a passion for creating efficient and innovative ways of using the internet. An evangelist of web standards, usability, accessibility and user interface design best practices.</p>

Next came the skills section. In this case, I was going for a short summary of my main skill sets, and hence I used a Definition List again:

<h2>Skills</h2>
<dl>
	<dt>Product Management</dt>
	<dd>Adept at managing product roadmaps, market research, product testing and public launches</dd>
	<dt>Evangelism</dt>
	<dd>Internationally experienced public speaker with extensive developer community outreach</dd>
	<dt>Web Technologies</dt>
	<dd>Exhaustive knowledge of web technologies and development methodologies</dd>
</dl>

Alternatively, if I wanted to go for a longer version, I could have put them down as a list (of my qualities) grouped under different headings to denote different skill sets. For example:

<h2>Skills</h2>
	<h3>Product Management</h3>
	<ul>
		<li>Adept in defining requirements, managing product roadmaps and specifications, researching, prototyping and usability testing</li>
		<li>Extensive knowledge of best practices in internet/mobile-internet technologies and cross-browser compatibility issues</li>
	.....
	</ul>
	<h3>Evangelism</h3>
	<ul>
		<li>Confident and internationally experienced public speaker ( see: <a href="http://www.navjotpawera.com/events.html" title="Events Navjot Pawera has spoken at">http://www.navjotpawera.com/events.html</a> )</li>
		<li>Led and participated in several consumer forums and developer communities via public conferences and developer meet-ups</li>
	.....
	</ul>

The experience section is where things get a wee bit messy, so bear with me. This section contains a few different related pieces of information:

• Time period
• Job title
• Company information
• Short summary
• List of tangible achievements (this one is, of course, a personal choice)

As the list is organised in a chronological manner, I put different time periods and decided to define what I did during that time. So, started with the list and the time in the <dt> tag (definition term):

<h2>Experience</h2>
	<dl>
		<dt>Sep, 2007 - Apr, 2010</dt>
		<dd>
		</dd>
	</dl>

Now, all the rest of the details go into the <dd> tag (definition description). But these details can do with a bit of organisation themselves. The job title is an important piece of information. It also holds the content below it together, as a title. So, I got confused as to whether it should go within an <em> tag, or be actually put as a sub heading in an <h4> tag. Checking with the W3C revealed the following:

A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.

It seemed about right and to me it seemed to fit in well. I decided to use the <h4> tag. The rest was fairly straightforward: a paragraph for the short summary and an unordered list for the list of achievements:

<h2>Experience</h2>
	<dl>
		<dt>Sep, 2007 - Apr, 2010</dt>
		<dd>
		<h4>Product Manager, Opera Software - Oslo, Norway (<a href="http://www.opera.com/" title="Opera Software">http://www.opera.com/</a>)</h4>
		<p>Took charge of the new products and contributed to the biggest innovations by the company in the past 4 years, including:</p>
		<ul>
			<li><strong><a href="http://unite.opera.com" title="Opera Unite">Opera Unite</a>:</strong> Led three successful internal releases, co-ordinated the final public launches and managed the Product Marketing team; clocking way more downloads than anticipated (numbers internal).</li>
			<li><strong><a href="http://widgets.opera.com" title="Opera Widgets">Opera Widgets</a>:</strong> Delivered mobile widgets specifications used for the final product.</li>
			<li><strong><a href="http://www.operamail.com" title="Opera Mail">Opera Mail</a>:</strong> Negotiated deals with partners and delivered guidelines for product redesign.</li>
		</ul>
		</dd>
		.....
	</dl>

The Education section was almost exactly the same as the Experience section. I filled up all the content and put my markup in an HTML5 document and I was good to go. Take a look at this unstyled HTML5 resume.

Also, with a bit of CSS I turned this into something a bit more visually appealing. Check it here.

Wrap up

To me, figuring out the correct semantics is usually just a matter of pausing and thinking of what the element actually consists of and does it fit – into the structure of the page – rather than into the visual layout of the page. Honestly, as soon as you become aware of it and try setting up things in the proper structure, it comes fairly easily and subconsciously. As an added bonus, to geeks like me, it’s quite a bit of fun as well.