HTML

What HTML is for

HTML stands for HyperText Markup Language. Hypertext means that links can connect one document to another. Markup means that you add labels to content so a browser can recognise a heading, paragraph, link, image or form instead of treating everything as undifferentiated text.

HTML is a markup language, not a programming language. Its elements describe content and relationships; they do not, by themselves, define loops, calculations or an application’s decision-making logic. A page can still be useful with HTML alone: readers can follow links, read articles and submit forms.

HTML remains the foundation of modern websites and web applications, including pages generated by servers or JavaScript frameworks. Whatever creates the page, the browser ultimately needs a document structure that people and software can understand.

How HTML developed

Tim Berners-Lee developed the early World Wide Web at CERN to make research information easier to share and connect. By the end of 1990, the first web browser and server were running there; in 1991, Berners-Lee released the Web software more widely. Early HTML provided a way to describe documents and link them together.

As the Web grew beyond scientific documents, HTML gained elements for tables, forms, media and more. Earlier versions were published as numbered specifications, including HTML 4 and HTML5. Today the WHATWG maintains the HTML Living Standard as a continuously updated specification, in collaboration with the W3C under their 2019 agreement. “HTML5” is still used informally, but there is no separate latest numbered HTML release to install.

How a browser turns HTML into a page

When you open a local HTML file, the browser reads it from your computer. When you visit a website, the browser normally requests the page from a web server. In either case, it parses the HTML source into a document tree called the DOM (Document Object Model). Each element becomes part of that tree.

The browser then combines the document with CSS rules to work out layout and appearance, and paints the result on screen. JavaScript can respond to events and change the DOM after the page loads. Browsers can recover from some malformed HTML, but their repaired document may not match what you intended, so clear nesting and validation matter.

HTML, CSS and JavaScript work together

Think of a simple page with a “Show answer” button. HTML supplies the heading, question, button and answer as meaningful content. CSS controls their colours, spacing and layout. JavaScript can listen for a click and reveal the answer. Each technology has a different job, and a useful page does not need JavaScript for every interaction.

Elements, tags and attributes

An element is a piece of the document with a particular meaning or role. In <p>Hello!</p>, <p> is the opening tag, Hello! is the content and </p> is the closing tag; together they form a paragraph element. Some elements, such as <img>, have no closing tag or child content.

Attributes add information to an opening tag. In <a href="https://example.com">Visit Example</a>, href gives the link its destination. In <html lang="en">, lang identifies the document’s language. Nest elements so their tags close in the reverse order in which they opened; this makes the structure easier to read and keeps relationships clear.

• Links and href
• Document language
• DOCTYPE and standards mode

Meaning helps everyone use the page

Semantic HTML uses an element for the job it represents: <nav> for navigation, <main> for the main content, <button> for an action and headings for the page’s hierarchy. That structure helps browsers, assistive technologies and other tools understand the content. A generic <div> is useful for grouping, but it does not carry the same meaning as a suitable native element.

Accessibility begins with these choices. Give informative images suitable alternative text, label form controls, set the document language and use real buttons and links. Semantic elements provide built-in behaviour and meaning, but they do not guarantee accessibility on their own; wording, keyboard use and testing still matter.

• Main content
• Navigation
• Form labels
• Images and alt text

Make your first page

Copy the “Your first document” example below into a plain-text editor and save it as index.html. Open the file in a browser. The title appears in the browser tab; the heading and paragraph appear in the page. Change the heading, save again and refresh the browser to see your change.

Start with headings, paragraphs and links. Then learn images and semantic page sections before moving to forms, CSS and JavaScript. You can also edit the examples in Codectionary’s Playground to see changes without setting up a local project.

• Create your first HTML webpage
• Understand a complete HTML document
• Set up HTML in VS Code
• Connect HTML, CSS and JavaScript
• Try HTML in the Playground
• Debug and validate HTML
• Headings
• Paragraphs
• Links
• Forms

Syntax

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

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 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.

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.

Examples

<!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>

<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>

<!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>

<!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>

<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>

<!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>

HTML: background & uses

Used for

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. Product links describe documented uses.

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

Browser compatibility

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.

Related HTML documentation

Specifications & further reading

• CERN: a short history of the Web
• WHATWG: HTML history and the Living Standard
• WHATWG: document element and metadata
• WHATWG: sections and landmarks