HowToCodePage

HTML: getting started

What HTML actually is, how a browser turns it into a page, and the smallest valid document you can write.

What HTML is (and is not)

HTML is a markup language: it describes the structure and meaning of content. It is not a programming language — there are no variables, loops, or conditions. Structure comes from HTML, presentation from CSS, behavior from JavaScript.

A browser reads your HTML and builds an in-memory tree called the DOM (Document Object Model). Everything you later do with JavaScript — changing text, reacting to clicks — is really an operation on that tree.

💡
Mental model: HTML answers what is this thing? (a heading, a list item, a link). CSS answers what does it look like? JavaScript answers what does it do?

The smallest valid document

Every modern HTML document starts with <!DOCTYPE html>, which tells the browser to use standards mode rather than the old quirks mode. Include lang on the root element for screen readers and translation tools, and always set a character encoding.

<!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>
</head>
<body>
  <h1>Hello, world</h1>
  <p>This is a paragraph.</p>
</body>
</html>
  • <head> holds machine-facing metadata: title, encoding, viewport, styles.
  • <body> holds everything a human sees.
  • The viewport meta tag is what makes the page respond correctly on phones — without it mobile browsers pretend to be ~980px wide and zoom out.

Writing and viewing it

  1. Create a file named index.html (the name index is special: servers serve it for a directory).
  2. Paste the snippet above and save.
  3. Open it by double-clicking, or serve a folder with python -m http.server and visit http://localhost:8000.
  4. Right-click → Inspect to see the DOM the browser built.
⚠️
Opening a file with file:// is fine for learning, but some features (fetch, modules, service workers) only work over http:// or https://. Use a local server when you get to those.

FAQ

Do I need to memorize every tag?
No. About 30 elements cover the vast majority of real pages. Learn what exists, then look up the details.
Is HTML5 different from HTML?
'HTML5' is the marketing name for the modern living standard. Prefer it over the versionless older spellings; there is no HTML6 — the spec is updated continuously.

Elements and attributes Semantic layout

Last refreshed 2026-09-17.