How to Create a Resume in HTML

Creating a resume in HTML gives you a simple web page you can open in a browser, share online, or print to PDF. You’ll need a text editor and a browser; the steps below build a clean, accessible resume from a single file, then show how to check it on screen and on paper.

What You’ll Need

A plain-text editor, such as Notepad, TextEdit in plain-text mode, or a code editor.
A current web browser for previewing your page.
Your resume details: contact information, work history, education, skills, and any relevant projects or certifications.
Optional: a profile photo or links, if they support your application and you are comfortable sharing them.

Step-by-Step

Plan the content before writing HTML. Gather accurate dates, job titles, organization names, education, and achievements. Put the most relevant and recent information first. Use concise bullet points that describe what you did and, where possible, the result. Do not include sensitive details such as government identification numbers, account credentials, or a full home address.
Create a new HTML file. Open your editor and create a blank document. Save it as resume.html, making sure the extension is .html rather than .txt. If your editor offers file-type or encoding choices, use plain text and UTF-8. Keep a separate copy of the file before making major changes.

Add the basic document structure. Start with this skeleton, then replace the placeholder text with your own information:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Jordan Lee — Resume</title>
  <style>
    body { font-family: Arial, sans-serif; line-height: 1.5;
      max-width: 800px; margin: 2rem auto; padding: 0 1rem; color: #222; }
    h1, h2 { line-height: 1.2; }
    h2 { border-bottom: 1px solid #bbb; padding-bottom: .25rem; }
    .role { margin-bottom: 1.25rem; }
    @media print { body { margin: 0; max-width: none; } }
  </style>
</head>
<body>
  <!-- Resume content goes here -->
</body>
</html>

The doctype tells the browser to use modern HTML rendering. The language, character encoding, and viewport settings help browsers interpret and display the page correctly. The title appears in the browser tab; it is not the visible resume heading.

Add your name and contact details. Inside <body>, add one main heading and a short contact line. For example:
```
<header>
  <h1>Jordan Lee</h1>
  <p>Portland, OR · jordan.lee@example.com · (555) 010-1234</p>
  <p><a href="https://example.com">Portfolio</a></p>
</header>
```
Use a professional email address and verify that each link works. A location such as city and region is usually enough; include only contact information you want prospective employers to see.
Build clear sections with semantic headings. Add sections such as Summary, Experience, Education, and Skills. Use an <h2> for each section and paragraphs or lists for its contents. For example:
```
<section>
  <h2>Experience</h2>
  <article class="role">
    <h3>Project Coordinator — Example Company</h3>
    <p><time datetime="2022-04">Apr 2022</time>–Present</p>
    <ul>
      <li>Coordinated schedules across a five-person team.</li>
      <li>Improved handoff documentation to reduce repeat questions.</li>
    </ul>
  </article>
</section>
```
Repeat the article structure for each role. Use <time> when you can provide a machine-readable date, and write dates consistently. A summary can be a short paragraph; skills can be a concise list. Include only sections that add useful evidence for the role you want.
Use simple styling and readable structure. The sample CSS provides a comfortable line length and spacing. You can adjust colors, font sizes, and margins, but maintain strong contrast and avoid tiny text. Keep the content in a logical reading order. Use headings, lists, and links for their intended purposes rather than styling unrelated elements to look like them. A resume should remain understandable if the CSS is disabled.
Preview and test the page. Save the file, then open it in a browser. Check spelling, dates, heading order, bullet spacing, and links. Resize the browser window to make sure the page does not require horizontal scrolling. If a character such as an apostrophe or accented letter looks wrong, confirm the file is saved as UTF-8 and that the charset line is present.
Check printing and make a PDF when needed. Use the browser’s print command and preview the pages before printing. Confirm that headings are not stranded at the bottom of a page, links and text remain legible, and no content is clipped. Choose the browser’s option to save or export as PDF if available. Open the saved PDF and inspect every page. Keep the HTML source so you can update it later; send the file format requested by the employer.

Common Mistakes

Saving the wrong file type: A file named resume.html.txt may display as text. Show file extensions in your file manager or use the editor’s Save As options to verify the name.
Forgetting to close tags: Missing closing tags such as </section> can make later content appear in the wrong place. Indent nested elements and compare each opening tag with its closing tag.
Using headings only for appearance: Skipping from h1 to h4 or using headings for ordinary body text makes the document harder to navigate. Use headings in a sensible hierarchy.
Overdesigning the page: Complex layouts, decorative graphics, and unusual fonts may print poorly and can interfere with copying or automated resume processing. Favor straightforward text and familiar sections.
Publishing private information: A resume hosted online may be visible to anyone with access to its URL. Review contact details and remove anything you do not want shared.

Tips

Tailor the summary and experience bullets to the position, but keep every claim accurate and supportable.
Use specific verbs and concrete outcomes where you can do so truthfully. Avoid unexplained abbreviations and long blocks of text.
Test links by clicking them, and use descriptive link text such as “Portfolio” rather than “click here.”
Keep a clean, unstyled version of the content or a backup copy. This makes edits easier if you change the design later.
Review the resume in both a browser and a PDF. A page that looks fine on screen can still break awkwardly when printed.

Troubleshooting

The browser shows the HTML code instead of a resume: Check that the file ends in .html, not .txt, and open it with a browser rather than the text editor. If it still opens as text, use the browser’s Open File command.

The page is blank or parts are missing: Confirm that the content is inside the body element, save your latest edits, and reload the page. Look for a missing angle bracket, quotation mark, or closing tag near the point where the display goes wrong.

The layout looks different on another device: Keep the viewport meta tag and use flexible widths such as max-width instead of fixed page-wide dimensions. Check at a narrower window size and avoid tables or positioned elements for the main layout.

The PDF has extra pages or cut-off text: Reopen print preview, reduce excessive margins or spacing, and check for long unbroken links or lines. Do not shrink the text until it is difficult to read; simplify the layout or shorten content instead.

Frequently Asked Questions

Do I need to know JavaScript to create a resume in HTML?
No. A static resume needs only HTML, and optional CSS controls its appearance. JavaScript is unnecessary for a standard resume page.

Can I create the file in a word processor?
You can, but a word processor may add formatting that is not plain HTML. A plain-text editor or code editor makes it easier to control the tags and file extension.

How do I add a clickable email address?
Use a link such as <a href="mailto:jordan.lee@example.com">jordan.lee@example.com</a>. Test it in the browser and consider whether you want your email exposed on a public page.

Will an HTML resume work with applicant tracking systems?
Compatibility varies by employer and system. Keep the document text-based and simple, and submit the file type requested. A plain PDF or document may be preferable when HTML is not accepted.

How can I host my resume online?
Use a web hosting service that accepts static HTML files, upload resume.html, and follow that service’s instructions for publishing. Check its sharing and privacy settings before distributing the link.

Should I include a photo?
Only if it is appropriate for the application and you choose to share one. A photo is not necessary for a useful HTML resume, and omitting it keeps the page simpler and more focused on your qualifications.

General steps for current mainstream versions; menus can differ by device and version. See the disclaimer or report an error.

More in this bed

The whole Tech How-To bed →