Personal Resume Webpage — Basic HTML

Personal Resume Webpage — Basic HTML

Your Internet Resume stays on the Web to be found by recruiters looking for job candidates like you.

Start with a Cyber-Safe ASCII text resume (go to creating an ASCII text resume before you come to this step).

Many websites are available that offer free hosting, which can include your resume. They have free tools built in to help you edit without knowing the tags below. These sites include: Wix.com, SquareSpace.com, and Weebly.com.

For the most visibility to recruiters, a well-done profile on LinkedIn.com is probably your best bet, which doesn’t require you to learn any HTML. Check out Job-Hunt’s free Guide to LinkedIn for Job Search for help with LinkedIn.

Basic HTML for an Effective Online Resume Page:

While understanding the tags are important, HTML standards are revised frequently, so using a current HTML editor, like Dreamweaver, or saving a word processed version of your personal resume as a web page may be your best option. The HTML tags on this page are the basic HTML tags.

HTML “tags” are interpreted by the browser software to modify what is seen by the person surfing the web. The problem is that there are hundreds of different browsers out there, in many different versions, so simple is best. You can create a resume web page with Microsoft Word and safe it as an html file, but creating “from scratch” using a simple text editor like Notepad is better because the HTML can be more complete.

How HTML Tags Work

HTML tags tell the browser what to do and also provide important clues for search engine spiders about the contents of the web page. Without tags, an HTML page would look like plain text and would not provide any information to the search engines.

Note: On this page, and in the other related pages for this section, HTML code will be presented in italics — like this.

The HTML structure tags work in pairs, with one opening the page, or a section of it, and the other closing the page or section. Most (not all) tags start and end an effect – like making words bold or italicized. Some tags just are an effect, but we’ll get to that later.

HTML tags are set apart from the regular text using the angle brackets.

< left angle bracket (above the comma on standard keyboards)

> right angle bracket (above the period on standard keyboards)

<HTML tag>

Most tags work in pairs, starting and ending a page, section, or effect (more below). Opening tags and closing tags look very similar, except that the closingtag has a forward slash – / – in front of the tag name, like this-

<HTML tag>impacted text or page section</HTML tag>

Tags are usually “nested” on a page. Like parenthesis in algebra, tags are closed in the opposite order in which they were opened, like this –

<tag1>
    <tag2>
      Page content
    </tag2>
    <tag2>
     More page content
    </tag2>
</tag1>

Basic Page Structure and Required Elements

Each HTML page has an HTML file that makes it visible to the browser. The browser interprets what the HTML is telling it is on the page.

Every HTML file must have some basic structure tags. Follow the order and the punctuation of these tags EXACTLY to ensure that your HTML file can be seen by every browser. Except for the <title> tag contents, the structure tags are invisible in a browser. They do provide information for search engines, however, which is very important to the visibility and effectiveness of the page.

<html> <== the first tag at the top of the page, with the closing </html> the last tag in the file at the bottom of the page, based on the “nested tags” rules

<head> <== housekeeping for the HTML file, opening the HTML file’s head.

<title>Resume – Mary Jane Smith, experienced optical engineer in Northern California</title>

The title tag is VERY important!  Your page will display in a browser without a title tag, but that is a very bad idea!

Use the title tag for marketing, to improve “find-ability” (SEO or “search engine optimization”), and to identify your resume if someone makes it a “favorite”or sets a browser “bookmark” on your page, but don’t exceed 100 characters and spaces in your title tag.

</head> <== closes the head (top, administrative) section of the HTML file.

Everything above this line is the “head” of your HTML file. Only the <TITLE> text will be seen by visitors to your Web page.

<body> <== where everything (except your META tags) goes…

The contents of your page’s <body> are what is visible in the main browser window. This is where you put your resume’s text using the HTML tags described below.
< /body>

</html> <== the last tag in your webpage file.

The HTML Tags that Control Appearance of Text Elements

How appearance tags work:

  • The appearance tags work in pairs and nested like all the other HTML tags.<starting tag> effected text or page section </closing tag>
  • Appearance tags are often nested to combine effects. When you “nest” tags, close them in the opposite order from how you opened them. So, if you start with <starting tag1>, end with </starting tag 1>, as below.<starting tag1><starting tag2>effected text or page section</closing tag2></closing tag1>

For example, these appearance tags add emphasis to words, clauses, sentences, or page sections using bold and/or italicized text –

This word is <strong>bold</strong>. ==>

This word is bold.

This word is <em>italicized</em> ==>

This word is italicized.

These words are <strong><em>bold and italicized</em></strong>. ==>

These words are bold and italicized.

Learn more about Appearance Tags to add bulletted lists, headlines, and images to your Internet resume.

To Get Started:

To get started, open up a plain text browser (like Notepad on a PC), and type in the Structure tags (top of this page), one on each line.  Save your file, and then add your resume, using the Appearance Tags to enhance the look of the page and to draw attention to important elements.

For Best Results:

Do what good web developers do – view your HTML file in more than one browser before you upload it to the host computer. Look at it using a Chrome and Firefox browsers as well as Microsoft Internet Explorer. If possible, check it out using a tablet computer (e.g. iPad) and smart phone (e.g. Droid), too, to make sure it looks OK.

(See Protecting Your Privacy and Choosing a Job Site for more information.)

More Information About Successful Resumes on the Internet:


Susan P. JoyceAbout the author…

Online job search expert Susan P. Joyce has been observing the online job search world and teaching online job search skills since 1995. A veteran of the United States Marine Corps and a recent Visiting Scholar at the MIT Sloan School of Management, Susan is a two-time layoff “graduate” who has worked in human resources at Harvard University and in a compensation consulting firm. Since 1998, Susan has been editor and publisher of Job-Hunt.org. Follow Susan on Twitter at @jobhuntorg and on Facebook, LinkedIn.
More about this author


Don't forget to share this article with friends!