What Is HTML? Beginner Guide, Uses & Examples

What is HTML?

HTML stands for HyperText Markup Language. It is the standard language used to create and structure content on the web. Every web page you visit is built with HTML at its core.

HyperText - text that contains links to other documents
Markup Language - uses tags to annotate and structure content
HTML is not a programming language - it describes structure, not logic
Browsers read HTML and render it as a visual web page

HTML Versions

Version	Year	Key Changes
HTML 1.0	1991	Basic text and links
HTML 2.0	1995	Forms, tables
HTML 3.2	1997	Scripts, style sheets
HTML 4.01	1999	CSS separation, accessibility
XHTML 1.0	2000	Stricter XML-based syntax
HTML5	2014	Semantic elements, audio/video, Canvas, APIs - current standard

Basic HTML Page Structure

Every HTML document follows this fundamental structure:

<!DOCTYPE html> - tells the browser this is an HTML5 document
<html lang="en"> - root element; lang helps screen readers and search engines
<head> - contains metadata (not visible on the page)
<meta charset="UTF-8"> - supports all characters including special symbols
<meta name="viewport"> - makes the page responsive on mobile devices
<title> - text shown in the browser tab
<body> - all visible page content goes here

Basic HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>Welcome to my first web page.</p>
</body>
</html>

How Browsers Work with HTML

When you open an HTML file in a browser, the browser reads the HTML top to bottom, builds a DOM (Document Object Model) tree, and renders it visually. You don't need to install anything - just create a .html file and open it in any browser.

After the DOM is built, CSS styles are applied and JavaScript can update the page dynamically. This is why clean HTML structure is important before adding design or interactivity.

Semantics Drive Accessibility and Browser Features

HTML describes document meaning. A button represents an action, a link represents navigation, headings create an outline, labels name controls, lists group related items, and tables associate tabular headers with data. Native elements already carry keyboard behavior, focus rules, form participation, and accessibility semantics that a generic div does not provide.

Choose elements from their purpose before styling. Inspect the accessibility tree as well as the visual page, and keep source order meaningful when CSS changes placement.

Parse, Validate, and Inspect the Delivered Document

Browsers recover from many markup errors, but recovery can move nodes or close elements differently from what the author intended. Validate nesting, unique identifiers, form associations, language metadata, character encoding, and resource URLs. Use developer tools to compare the network response, parsed DOM, computed accessibility information, and console diagnostics.

The first response should contain useful structure even when CSS or JavaScript is delayed. Test keyboard navigation, zoom, narrow screens, missing images, and script failure before treating a page as complete.

What semantic HTML example

<section aria-labelledby="what-title">
  <h2 id="what-title">What</h2>
  <p>This block uses meaningful tags so browsers, users, and assistive technology understand the content.</p>
  <a href="/learn/what">Read the full What note</a>
</section>

What accessibility check example

<form>
  <label for="what-input">What value</label>
  <input id="what-input" name="what" required>
  <button type="submit">Save</button>
</form>
<!-- Check: every interactive element has a name, purpose, and keyboard path. -->

Before you move on