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 and polishing an ASCII text resume before you come do this step). Once you have converted your resume to HTML, add the final touches to make it employer and search engine friendly.
Note: On this page, and in the other related pages for this section, HTML code will be presented in italics -- like this.
Basic HTML for an Effective Online Resume Page:
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.
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)
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 closing tag 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 -
More page content
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.
</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.
<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 Viewing Your HTML file for more information.
© Copyright, 1998 - 2013, Susan P. Joyce. All rights reserved.
About 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, 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 Google+.