File types · Explainer

The HTML file (.html, .htm)

An HTML file is a plain-text document that a web browser turns into a web page. This guide explains what's inside one, how browsers read it, the quirks worth knowing, and has free sample HTML files to download for testing.

Sample HTML filesPut an HTML file online

At a glance

Full name
HyperText Markup Language
Extensions
.html, .htm
MIME type
text/html
Kind
Plain text (markup)
Encoding
UTF-8, which the current standard requires
Standard
HTML Living Standard, maintained by the WHATWG
First described
1991, by Tim Berners-Lee at CERN
Opens with
Any web browser to view, any text editor to edit
Typical size
About 18 KB for a web page's HTML (median, 2024)
Magic number
None; most files start with <!DOCTYPE html>

The basics

What is an HTML file?

An HTML file holds the text of a web page together with tags such as <h1>, <p> and <a> that say what each piece is: a heading, a paragraph, a link, an image, a form. A browser reads those tags and draws the finished page. The file itself is plain text, so you can open it in any text editor and read it.

Every web page reaches your browser as HTML, whether someone wrote it by hand, exported it from a design tool, built it with a framework or had an AI assistant produce it. A page saved to your computer, an email newsletter, a report exported from analytics software and the entry point of a web app are all HTML files.

Three things HTML is not, which explains a lot of confusion:

  • Not a programming language. HTML describes structure and meaning. Behaviour (what happens when you click) comes from JavaScript, often embedded in the same file.
  • Not the styling. Colours, fonts and layout come from CSS, either inside the file in a <style> element or in a separate .css file.
  • Not a server. An HTML file is static: it can't store form answers or read a database by itself. It needs something behind it for that.

Anatomy

What's inside an HTML file

HTML is made of elements: a start tag like <p>, the content, and an end tag like </p>. Tags can carry attributes, such as the href of a link. Here is a small but complete page, part by part.

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My first page</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello</h1>
    <p>Read the <a href="about.html">about page</a>.</p>
    <img src="photo.jpg" alt="A lighthouse at sunset">
    <script src="app.js"></script>
  </body>
</html>
  1. 1<!DOCTYPE html>

    The doctype

    Always the first line. It tells the browser to render the page in standards mode. Leave it out and browsers fall back to quirks mode, which imitates old browser bugs, so layouts can come out differently.

  2. 2<html lang="en">

    The root element

    Wraps everything else. The lang attribute tells screen readers how to pronounce the text and helps browsers translate and hyphenate it.

  3. 3<head> … </head>

    The head

    Information about the page that isn't shown on it: the encoding, the title, links to stylesheets, the description search engines and link previews use.

  4. 4<meta charset="utf-8">

    The character encoding

    How the bytes of the file map to letters. It must come within the first 1,024 bytes of the file, which in practice means first in the head.

  5. 5<meta name="viewport" …>

    The viewport

    Makes the page fit a phone's screen. Without it, phones show a zoomed-out desktop layout.

  6. 6<title>My first page</title>

    The title

    Shown in the browser tab, in bookmarks and as the headline of a search result.

  7. 7<link rel="stylesheet" href="style.css">

    A linked stylesheet

    Loads the page's CSS from a separate file. The page now depends on style.css sitting next to it: move the HTML file without it and the styling is gone.

  8. 8<body> … </body>

    The body

    Everything that appears on the page.

  9. 9<a href="about.html">

    A link

    href is a relative address: it points to about.html in the same folder. Relative links keep working when the whole folder moves together.

  10. 10<img src="photo.jpg" alt="…">

    An image

    Images are never inside an HTML file; it only points to them (unless they're embedded as a data: URL or drawn with inline SVG). The alt text is read out by screen readers and shown if the image fails to load.

  11. 11<script src="app.js"></script>

    A script

    Loads JavaScript, which can make the page interactive. Placed at the end of the body, it runs after the elements above it exist.

Under the hood

How a browser opens an HTML file

  1. 1It gets the bytes. Either from a web server over HTTPS, which labels them Content-Type: text/html, or straight from your disk through a file:// address.
  2. 2It works out the encoding, from the server's header, a byte order mark at the start of the file, or the <meta charset> tag.
  3. 3It parses the markup into the DOM, a tree of elements. The parser is forgiving: missing end tags and typos are repaired by rules written into the HTML standard, which is why broken HTML usually still shows something.
  4. 4It fetches what the page refers to: stylesheets, scripts, images and fonts, each a separate request unless it's embedded in the file.
  5. 5It applies the CSS and lays out the page, then paints it on screen.
  6. 6It runs the JavaScript, which can change any part of the page after it has loaded.

Why the extension matters less than you'd think

On the web, the browser goes by the Content-Type header, not the file name. A file called page.txt served as text/html renders as a page, and a page.html served as text/plain shows up as raw code. On your own computer it's the other way round: the extension decides which app opens the file.

The ins and outs

Opening it from your computer vs from a web address

Double-click an HTML file and it opens in your browser from a file:// address. It looks like a web page, but browsers treat local files more strictly than pages that come from a web address:

From your computer (file://)From a web address (https://)
Who can see itOnly you, on that deviceAnyone you give the link to
Links to files in the same folderWork, if the folder came alongWork
JavaScript modules and fetch() of other filesUsually blocked by the browserWork
Features that need a secure origin (service workers, installing as an app)Not availableAvailable over HTTPS
Preview when the link is shared in a chat appNoneTitle, description and image from its meta tags

The usual reasons an HTML file breaks when it's moved, emailed or put online:

  • Files that didn't come along. The stylesheet, images or scripts it links to stayed behind. Saving a page with "Webpage, complete" creates a separate _files folder for exactly this reason.
  • Paths that only exist on your machine, like C:\Users\you\photo.jpg or /Users/you/photo.jpg. Use relative paths like images/photo.jpg instead.
  • Upper and lower case. Windows and macOS treat Logo.png and logo.png as the same file; most web servers don't.
  • Insecure resources on a secure page. An https:// page that loads a script over plain http:// has it blocked.

Packaging

Single-file pages vs pages with separate files

A page can keep everything inside one HTML file: CSS in a <style> element, JavaScript in a <script> element, images as inline SVG or data: URLs. Most pages that AI assistants write are built this way. A single-file page is easy to email, store and put online, because nothing can go missing.

Larger sites split things up: an index.html plus folders of CSS, scripts and images that several pages share, so the browser downloads and caches each one once. That folder has to travel as a whole, as a folder or a ZIP file.

If you're not sure which kind you have, open the file in a text editor and look for href= and src= attributes pointing at other files. If there are none (or they're all full https:// addresses), the page is self-contained.

Related formats

.html vs .htm, and other formats that look similar

.html and .htm are the same format. The three-letter version dates from MS-DOS and early Windows, which limited extensions to three characters. Browsers and servers treat both identically; .html is the usual choice today.

ExtensionWhat it is
.html, .htmA standard HTML page.
.xhtmlHTML written to XML rules and served as application/xhtml+xml. Much stricter: a single error stops the page from rendering.
.mhtml, .mhtA web archive that packs a page and its images into one file. Chromium-based browsers can save and open them; not every browser can. Safari's equivalent is .webarchive.
.shtmlHTML with server-side includes, pieces the web server inserts before sending the page.
.php, .asp, .jspPrograms that run on a server and output HTML. The browser only ever sees the HTML they produce.
.mdMarkdown, a simpler writing format that tools often convert into HTML.

Characters

Character encoding: why text turns into é

A file stores bytes, not letters. The encoding is the agreement on which bytes mean which characters. The current HTML standard requires UTF-8, which covers every language and emoji. When a browser reads UTF-8 text as the old Windows-1252 encoding instead, é turns into é and ’ into ’. That kind of garbled text is called mojibake.

  • Put <meta charset="utf-8"> at the top of the <head>, within the first 1,024 bytes.
  • Save the file as UTF-8 in your editor. A byte order mark (BOM) at the start is allowed and also signals UTF-8.
  • If a server sends a charset in its Content-Type header, that wins over the meta tag, so the two must agree.

The sample-utf8.html file below is a quick way to check an editor, a server or an upload pipeline: if any line comes out garbled, something along the way isn't treating the file as UTF-8.

How to

How to open, edit and convert an HTML file

  • Open it: double-click it, or drag it into a browser window. To send it to someone, put it online and share the link rather than attaching the file: some email services and company filters block or flag .html attachments.
  • See any page's HTML: press Ctrl+U on Windows or Linux. On a Mac it's Option+Command+U in Chrome or Command+U in Firefox; Safari needs the Develop menu switched on first.
  • Edit it: use a code editor such as VS Code, or any plain-text editor. Avoid word processors, which add their own formatting. On a Mac, TextEdit shows HTML as a formatted page unless you turn on "Display HTML files as HTML code instead of formatted text" in its settings.
  • Check it for errors: paste it into the W3C Markup Validation Service, or preview it with our HTML tester.
  • Turn it into a PDF: open it in a browser, choose Print, and pick "Save as PDF".

Security

Is it safe to open an HTML file?

Opening an HTML file runs whatever JavaScript it contains, inside your browser's sandbox. The sandbox stops it reading your other files, but HTML files are still a favourite tool for attackers, for two reasons:

  • Fake sign-in pages. An attached .html file can look exactly like a Microsoft or bank login and send whatever you type to someone else. Because it opens from your computer, there's no suspicious web address to warn you.
  • HTML smuggling. The page's script assembles a harmful download inside the browser, so the file never travels through the email filter as a file.

Treat an unexpected .html attachment like an unexpected program: don't open it, and never type a password into a page that opened from a file on your computer. A real sign-in page always comes from the service's own web address.

Free downloads

Sample HTML files to download

Free sample HTML files for testing uploads, parsers, previews, encodings and size limits. Each one is a valid HTML5 document that passes the W3C validator.

sample-page.html · 7.5 KBDownloadOpen

What's inside sample-page.html

The file is commented: open it in a text editor and each numbered comment marks one of these parts.

  1. Comments 1 to 5: the head

    The encoding comes first, then the viewport, the title, a description and link-preview tags, and a favicon embedded as a data: URL, so the tab icon needs no extra file.

  2. Comment 6: embedded CSS

    All styling is in a <style> element, with CSS custom properties and a prefers-color-scheme rule, so the page switches to dark colours when your device is in dark mode.

  3. Comment 7: semantic structure

    <header>, <nav>, <main>, <section> and <footer> give assistive technology and search engines a map of the page.

  4. Comment 8: text

    Headings, paragraphs, inline elements (<strong>, <em>, <abbr>, <code>, <mark>), entities such as &lt; and &amp;, both kinds of list, and a <details> section that opens without any JavaScript.

  5. Comment 9: a data table

    With a <caption> and <th scope="col"> header cells, so screen readers can announce each cell's column.

  6. Comment 10: an image with no image file

    A small bar chart drawn in inline SVG, with a <title> that serves as its text alternative.

  7. Comment 11: a form

    Labelled fields, a select, a checkbox and a button. It deliberately sends nothing: a static HTML file has nowhere to send it to.

  8. Comment 12: embedded JavaScript

    A script at the end of the body. It rewrites the "JavaScript status" line at the top and answers the form, so you can tell at a glance whether scripts run where you've opened the file.

All sample HTML files

  • Complete sample page

    sample-page.html · 7.5 KB (7,642 bytes)

    A realistic single-file page: embedded CSS with dark mode, a script, an inline SVG image, a table, a form and semantic structure, with numbered comments explaining each part.

    • Checking a viewer or host renders CSS and runs JavaScript
    • Teaching the parts of an HTML page
    DownloadOpen

  • Minimal HTML5 document

    sample-minimal.html · 150 bytes

    The smallest sensible valid page: doctype, html, head with encoding and title, and a body with one paragraph.

    • Parser and validator tests
    • A starting point for a new page
    DownloadOpen

  • UTF-8 encoding test

    sample-utf8.html · 1.8 KB (1,863 bytes)

    Text in 12 languages, including right-to-left Arabic and Hebrew, plus currency symbols, maths and emoji.

    • Spotting encoding bugs in editors, servers and pipelines
    • Checking fonts and right-to-left layout
    DownloadOpen

  • 100 KB HTML file

    sample-100kb.html · 100 KB (102,400 bytes)

    A valid page of numbered sections, padded to exactly 102,400 bytes.

    • Upload and size-limit tests
    • Compression tests
    DownloadOpen

  • 1 MB HTML file

    sample-1mb.html · 1 MB (1,048,576 bytes)

    The same structure at exactly 1,048,576 bytes (1 MiB).

    • Upload limits and timeouts
    • Parser and rendering performance
    DownloadOpen

Ways to test with them

  • Upload limits: the 100 KB and 1 MB files have exact sizes, so you can test a limit at the boundary.
  • Rendering vs raw code: if sample-page.html shows as source code, whatever served it didn't send Content-Type: text/html.
  • Scripts allowed or blocked: the page reports "JavaScript status: running" only when scripts are allowed, which makes sandboxes and email previews easy to check.
  • Encoding: run sample-utf8.html through a pipeline and compare; any à or †means a step didn't treat the file as UTF-8.

Free to use for testing, teaching and demos, commercially or not, with no attribution needed. A link back to this page is always appreciated.

Put it online

Have an HTML file? Give it a link.

Drop an HTML file on 99helpers and it becomes a real web page at its own address in seconds: styles applied, scripts running, ready to share. No server, no build step, free to start.

Put an HTML file onlineTest some HTML first

Questions

HTML files, frequently asked

What does HTML stand for?

HyperText Markup Language. "Hypertext" is text with links to other text, and a "markup language" adds tags to text to describe its structure.

What's the difference between .html and .htm?

None in the content. .htm comes from old systems that only allowed three-letter extensions. Browsers and servers treat both the same; .html is the usual choice today.

Is HTML a programming language?

No. HTML describes what's on a page and how it's structured. Logic and interactivity come from JavaScript, and appearance from CSS, though both are often included inside the HTML file.

How do I open an HTML file?

Double-click it to open it in your default browser, or drag it into a browser window. To see or change its code, open it in a text editor such as VS Code or Notepad.

Why does my HTML file show code instead of a web page?

Either it's opening in a text editor instead of a browser, or the file isn't really an .html file: Windows hides extensions, so page.html may actually be page.html.txt. Online, a server sending it as text/plain has the same effect.

Can an HTML file contain images?

Usually it only points to image files, which must travel with it. Images can be embedded in the file itself as data: URLs or drawn with inline SVG, which is how single-file pages carry their graphics.

How big can an HTML file be?

The standard sets no limit, and browsers open files of many megabytes. The HTML of a typical web page is about 18 KB, according to the HTTP Archive's 2024 Web Almanac; the images and scripts it loads usually weigh far more.

Is it safe to open an HTML file someone sent me?

Be careful. HTML files can run JavaScript and are often used for phishing: fake login pages that send your password elsewhere. Only open ones you expected, and never sign in through a page that opened from a file on your computer.

How do I share an HTML file as a link?

Put it online. On 99helpers you drop the file in and get a link like your-page.99helpers.site in seconds, which anyone can open in a browser.

Related formats

Other file types explained

CSS fileJavaScript fileSVG fileXML fileMarkdown fileJSON fileAll file types

Keep going

Related

Host an HTML file

Publish an HTML page at its own address in seconds.

Share an HTML file

Send an HTML page as a link instead of an attachment.

Test HTML online

Paste HTML and see it rendered, free.

Host a website

Put a whole folder of pages, styles and images online.

Sources

Last reviewed 27 October 2026.