Will an ATS read an HTML resume?

Applicant-tracking systems generally parse the file you upload to the portal, and most portals want PDF or .docx — so upload what they ask for. What these templates protect is the parse itself: real headings, real lists, real text, no content baked into images, no icon fonts standing in for labels, and a single reading order that does not get scrambled by columns. Printing the Classic template to PDF gives you a file that parses cleanly. Use the link for humans and the file for the portal.

How do I turn it into a PDF?

Open it and press `Cmd + P` (or `Ctrl + P`), then choose Save as PDF. Each template sets `@page` margins and strips the screen background in its print stylesheet, so you get a document rather than a screenshot of a web page. Check "Background graphics" is OFF unless you want the tinted header.

Can I use my own photo?

Yes, but it has to travel with the file — an absolute URL to an image you host, or a data URI embedded in the markup. A relative path like `photo.jpg` has nothing to point at once the page is published, and will render as a broken image. Worth knowing that in the US, UK and Canada a photo is conventionally omitted, while in much of Europe it is expected.

Does the link expire?

A free link stays live for seven days, which is fine for a single application round and not fine for an email signature. A paid plan makes it permanent and lets you choose the slug, so the URL you put on a CV keeps working and you can edit the page behind it without the link changing.

Can I keep two versions?

Publish the file twice and you get two independent pages with their own URLs — useful when one studio wants the freelance work and another does not. Sign in first and both appear in one list, each editable in place, so you are not guessing which link went where.

HTML resume templates you can edit and publish

Three working files, not a tutorial. Edit the text above, print it to PDF, or publish it at a link you can put on an application.

Start from an HTML resume template

Three complete, self-contained files. Each one prints to a clean PDF and reads properly on a phone. Pick one and edit the text.

One column, ATS-safe, closest to what a recruiter expects.

格式自动识别

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dana Whitfield — Résumé</title>
<style>
  :root { --ink:#16191d; --muted:#5b646e; --line:#dfe3e8; --accent:#1f6feb; }
  * { box-sizing: border-box; }
  body {
    margin: 0; padding: 40px 22px 64px; background: #f6f7f9; color: var(--ink);
    font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  main { max-width: 760px; margin: 0 auto; padding: 44px 48px; background: #fff; border: 1px solid var(--line); border-radius: 4px; }
  h1 { margin: 0; font-size: 30px; letter-spacing: -.02em; }
  .role { margin: 4px 0 0; font-size: 16px; color: var(--muted); }
  .contact { margin: 14px 0 0; font-size: 14px; color: var(--muted); }
  .contact a { color: var(--accent); text-decoration: none; }
  h2 {
    margin: 32px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--line);
    font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  }
  .job { margin-bottom: 22px; }
  .jobTop { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
  .jobTitle { font-weight: 600; }
  .dates { font-size: 14px; color: var(--muted); white-space: nowrap; }
  .where { margin: 2px 0 8px; font-size: 14px; color: var(--muted); }
  ul { margin: 0; padding-left: 20px; }
  li { margin-bottom: 5px; }
  .skills { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
  .skills li { margin: 0; padding: 4px 11px; border: 1px solid var(--line); border-radius: 4px; font-size: 14px; }
  @media (max-width: 600px) { main { padding: 28px 22px; } h1 { font-size: 25px; } }
  /* The résumé's real output is a PDF. Without this the page background
     prints as a grey slab and the card border becomes a stray box. */
  @media print {
    @page { margin: 14mm; }
    body { padding: 0; background: #fff; font-size: 11pt; }
    main { max-width: none; padding: 0; border: 0; border-radius: 0; }
    a { color: var(--ink); }
    .job { break-inside: avoid; }
  }
</style>
</head>
<body>
<main>
  <header>
    <h1>Dana Whitfield</h1>
    <p class="role">Senior Backend Engineer</p>
    <p class="contact">
      Bristol, UK · <a href="mailto:dana@example.com">dana@example.com</a> ·
      <a href="https://example.com">example.com</a> ·
      <a href="https://github.com/example">github.com/example</a>
    </p>
  </header>

<h2>Experience</h2>
  <div class="job">
    <div class="jobTop"><span class="jobTitle">Senior Backend Engineer</span><span class="dates">2022 — present</span></div>
    <p class="where">Foldwork · Bristol</p>
    <ul>
      <li>Cut p99 checkout latency from 1.9s to 340ms by replacing a synchronous fan-out with a queue.</li>
      <li>Led the Postgres 13 → 16 migration for 4TB of live data with 11 minutes of total downtime.</li>
      <li>Mentored three engineers; two now run their own services.</li>
    </ul>
  </div>
  <div class="job">
    <div class="jobTop"><span class="jobTitle">Backend Engineer</span><span class="dates">2019 — 2022</span></div>
    <p class="where">Meridian Health · Remote</p>
    <ul>
      <li>Built the appointment-reminder service that reduced no-shows by 23%.</li>
      <li>Owned the on-call rotation and cut paging volume by half in two quarters.</li>
    </ul>
  </div>

<h2>Skills</h2>
  <ul class="skills">
    <li>Go</li><li>Python</li><li>PostgreSQL</li><li>Kafka</li><li>Terraform</li><li>AWS</li>
  </ul>

<h2>Education</h2>
  <div class="job">
    <div class="jobTop"><span class="jobTitle">BSc Computer Science</span><span class="dates">2015 — 2019</span></div>
    <p class="where">University of Bristol</p>
  </div>
</main>
</body>
</html>

可见性

去掉 dochost 品牌自定义链接（可选）

dochost.co/d/

密码保护（可选）

A resume written in HTML gives you two things a Word document does not: exact control over the layout, and a URL. The layout part is obvious. The URL part is the one people underrate — a link in your email signature or at the top of an application is always the current version, opens on a phone without downloading anything, and does not arrive as a 400KB attachment that a mail filter might quietly hold.

The three templates above are complete, self-contained files: markup, styles and content in one document, nothing to install and nothing to link out to. Pick one, replace the words, and either hit Cmd/Ctrl + P to get a PDF or publish it to get a link. Both work from the same file — which is the actual argument for writing a resume in HTML.

How to use these templates

1. Pick a template above. Classic is a single column and the safest bet for anything going through an applicant-tracking system; Modern adds a sidebar; Minimal is serif, text-first and prints to almost exactly one page.
2. Replace the text directly in the editor. Everything you need to change is plain text in the markup — no build step, no config file, no framework.
3. Print to PDF for an attachment, or publish for a link. Every template carries an `@media print` block, so the printed page drops the screen background and sets sane page margins instead of coming out with a grey slab across the top.

A real example

A designer applying to eight studios kept a PDF in Dropbox and pasted a share link into each application. Two of them opened it in Dropbox’s viewer with a sign-in prompt in the way; one hiring manager on a phone got a download rather than a page. Halfway through, one studio asked for a version with the freelance work removed — which meant a second PDF, a second link, and remembering which application had which.

Rebuilt from the Modern template, the resume is one HTML file. The published link opens as a page in any browser with nothing in front of it, and prints to a clean PDF when a studio wants a file. The trimmed variant is a copy of the same file published at a second slug, so both stay editable and neither overwrites the other. The honest limit: an HTML resume does not fill in a form for you. If a company’s portal wants a .docx to parse, you still upload a .docx — these templates just make sure the version you hand a human is the one you designed.

Questions about HTML resume

Keep your links forever

Free links last 7 days with a free account. On a paid plan every page you create stays online permanently.

See pricing

Related use cases

How to use these templates

1. Pick a template above. Classic is a single column and the safest bet for anything going through an applicant-tracking system; Modern adds a sidebar; Minimal is serif, text-first and prints to almost exactly one page.

2. Replace the text directly in the editor. Everything you need to change is plain text in the markup — no build step, no config file, no framework.

3. Print to PDF for an attachment, or publish for a link. Every template carries an `@media print` block, so the printed page drops the screen background and sets sane page margins instead of coming out with a grey slab across the top.

A real example