HTML Reference, Syntax & Examples

About HTML

HTML (HyperText Markup Language) describes the structure and meaning of web content. It gives browsers the headings, links, images and forms that make up a page.

Web pages
Forms
Accessible content

Created by: Tim Berners-Lee at CERN
First released: 1991 · first public description
Version / standard: HTML Living Standard
Continuously updated; there is no single latest numbered release.

In the real world

GOV.UK: Government service pages and forms
PayPal: Checkout page markup
GitHub: Primer web interface components

Facts checked 8 September 2026. Links open the sources; examples describe specific products or documented uses.

Syntax

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <!-- Content goes here -->
  </body>
</html>

Examples

Your first document

A complete page you can save as index.html.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My learning journal</title>
</head>
<body>
  <h1>Today I learned HTML</h1>
  <p>Every page starts with structure.</p>
</body>
</html>

Meaningful sections

Give a page useful landmarks.

<header><h1>Learning journal</h1></header>
<main>
  <section aria-labelledby="today">
    <h2 id="today">Today</h2>
    <p>I built my first page.</p>
  </section>
</main>
<footer>Written by a curious developer</footer>

A small resource page

Combine metadata, navigation and readable content.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML resources</title>
</head>
<body>
  <a href="#resources">Skip to resources</a>
  <header><h1>Developer reading list</h1></header>
  <main id="resources">
    <h2>Start here</h2>
    <ul><li><a href="https://html.spec.whatwg.org/">HTML Standard</a></li></ul>
  </main>
</body>
</html>

Basic Page Structure

A minimal HTML document with proper structure including DOCTYPE, head, and body sections.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Page</title>
</head>
<body>
  <h1>Welcome to HTML</h1>
  <p>This is a paragraph.</p>
</body>
</html>

Semantic Structure

Using HTML5 semantic elements like header, nav, main, and footer for better document structure and accessibility.

<header>
  <h1>Website Title</h1>
  <nav>
    <a href="#home">Home</a>
    <a href="#about">About</a>
  </nav>
</header>
<main>
  <article>
    <h2>Article Title</h2>
    <p>Article content...</p>
  </article>
</main>
<footer>
  <p>&copy; 2024 Company</p>
</footer>

Complete Website Template

A comprehensive HTML template with meta tags, semantic structure, and common elements.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Website description">
  <title>Professional Website</title>
</head>
<body>
  <header>
    <h1>Site Name</h1>
    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section id="home">
      <h2>Welcome</h2>
      <p>Main content here</p>
    </section>
  </main>
  <footer>
    <p>Contact: info@example.com</p>
  </footer>
</body>
</html>

Best practices

Always include a DOCTYPE declaration at the beginning of your HTML documents
Use semantic HTML5 elements (header, nav, main, article, footer) for better structure and accessibility
Include proper meta tags for character encoding and viewport settings
Ensure all images have descriptive alt text for accessibility
Validate your HTML using the W3C Markup Validation Service
Keep your HTML structure clean and properly indented for maintainability

At a glance

Purpose: Structure and meaning for web content
File extension: .html · .htm
Runs in: Web browsers
Usually used with: CSS and JavaScript

In plain English

HTML gives a page its structure and meaning. The browser turns your markup into a tree of elements; CSS styles that tree and JavaScript can change it.

What you’ll learn

Build a complete document.
Separate page metadata from visible content.
Choose meaningful elements and set the page language.

Breaking down the syntax

<!DOCTYPE html>: Requests standards mode; it is a declaration, not an element.
<html lang="en">: The document root. lang identifies the human language.
<head>: Holds metadata such as the title and character encoding.
<body>: Contains the page content users interact with.

How it works

HTML source

You write elements, attributes and text.

Document tree

The browser parses the source into a DOM tree rooted at html, with head and body children.

Page on screen

The browser combines the tree with styles to lay out and paint the page.

When should I use this?

Start here when creating a web page or understanding the markup produced by a framework. Use CSS for appearance and JavaScript for behaviour.

Common mistakes

Visible content inside the head

The head is for metadata. Browser error recovery can move misplaced content, so the resulting DOM may differ from the source.

Incorrect

<head>
  <h1>Hello</h1>
</head>

Corrected

<head><title>Welcome</title></head>
<body><h1>Hello</h1></body>

Compare approaches

<div>: A generic container when no semantic element fits.
<section>: A thematic section, normally identified by a heading.

Accessibility

Set lang to the actual language of the content.
Use a clear heading hierarchy and landmarks such as main and nav.
Use meaningful alt text for informative images; decorative images usually need alt="".

Explore deeper

Source markup and the DOM can differ

The HTML parser has defined error-recovery rules and can insert missing elements. Inspect the DOM as well as the page source when debugging. Some HTML end tags may be omitted under specific rules; explicit tags are often easier for beginners to read.

HTML