What is HTML? How HyperText Markup Language works and why it matters

Every time you open a web page, your browser reads a document written in HTML — HyperText Markup Language. HTML is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies describe how a page looks (CSS) and how it behaves (JavaScript). Without HTML, a browser has nothing to render.

The word "HyperText" refers to the links that connect web pages to one another. Links are the fundamental feature that turns a collection of documents into a web — you upload content and link it to pages created by other people, becoming an active participant in the World Wide Web. The MDN HTML article describes it simply: HTML "uses markup to annotate text, images, and other content for display in a Web browser."

Elements and tags: the anatomy of HTML

HTML documents are built from elements. An element is made of three parts: an opening tag, the content, and a closing tag. The tags — written inside angle brackets < and > — tell the browser how to interpret the content between them.

<p>This is a paragraph element.</p>

<p> is the opening tag. This is a paragraph element. is the content. </p> is the closing tag. The forward slash before the element name signals the closing tag.

Some elements have attributes — additional values that configure the element or adjust its behavior. Attributes are written inside the opening tag:

<a href="https://example.com">Visit Example</a>
<img src="photo.jpg" alt="A landscape photograph" />

Here, href is an attribute of the <a> (anchor) element, and src and alt are attributes of the <img> element.

Element tag names are case-insensitive — <TITLE>, <Title>, and <title> all work — but the MDN recommendation is to write tags in lowercase. That is the universal convention.

Not all elements have content and closing tags. Void elements (also called empty elements) have no content and no closing tag. The <img> element is a common example: it embeds an image but wraps no text. These elements may optionally use a trailing slash in the opening tag (<img src="photo.jpg" alt="..." />), which is permitted but not required.

A complete HTML document

The MDN first-HTML tutorial shows a minimal complete HTML page:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My test page</title>
  </head>
  <body>
    <img src="" alt="My test image" />
  </body>
</html>

Here is what each part does:

• <!doctype html> is the doctype — a required preamble that tells the browser this is an HTML5 document. Modern browsers use it to switch to standards mode.
• <html lang="en"> is the root element. Everything on the page lives inside it. The lang attribute sets the document's primary language.
• <head> is the head — a container for content that is not displayed on the page. It holds the page title, character encoding, links to CSS stylesheets, and metadata.
• <meta charset="utf-8"> sets the character set to UTF-8, which covers characters from most written languages. There is no reason to omit this.
• <meta name="viewport" content="width=device-width"> tells the browser to match the page width to the device screen, preventing mobile browsers from shrinking the page.
• <title> sets the text shown in the browser tab and used when bookmarking the page.
• <body> contains all visible content — text, images, forms, links, and more.

Browsers do not display the HTML tags themselves. They use the tags to interpret the content and render the page. A paragraph <p>...</p> becomes a block of text; an <a href="..."> becomes a clickable link; an <img src="..."> becomes a displayed image.

Semantic HTML: meaning over appearance

One of the most important concepts in HTML is semantics — writing markup that describes the meaning of content, not just its appearance.

The MDN Semantics glossary explains: "In HTML, the <h1> element is a semantic element that gives the text it wraps around the role of 'a top level heading on your page.'" You can make any element look like an <h1> heading with CSS, but it will not carry the meaning of a heading for search engines, screen readers, or browser features.

The benefits of semantic HTML, according to MDN:

• Search engines treat semantic content as important keywords that influence page rankings.
• Screen readers use semantic elements as signposts to help visually impaired users navigate a page.
• Developers find meaningful markup easier to read and maintain than a wall of <div> tags.
• Semantic naming mirrors proper component naming in modern frontend frameworks.

There are roughly one hundred semantic elements in HTML5. The most important:

Compare a semantic page to one built only from <div> elements with classes like class="sidebar" or class="red-text". The semantic version carries machine-readable meaning; the <div> version is just a styled box.

The Wikipedia HTML article notes that the World Wide Web Consortium (W3C) "encouraged the use of CSS over explicit presentational HTML since 1997" — keeping HTML for structure and semantics, and CSS for appearance.

HTML, CSS, and JavaScript: the three layers

HTML handles content and structure. Two other technologies work alongside it:

CSS (Cascading Style Sheets) describes how HTML elements look — colors, fonts, spacing, layout. The Wikipedia HTML article describes the relationship: "It is often assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript." Separating CSS from HTML keeps both files easier to maintain.

JavaScript adds behavior and interactivity — handling clicks, validating forms, updating content without a page reload. JavaScript can read and modify the HTML document through the DOM (Document Object Model).

These three layers stack: HTML provides the structure, CSS makes it look right, and JavaScript makes it work. A well-built web page keeps them separate: HTML for content, CSS for presentation, JavaScript for behavior.

FAQ

What does HTML do?

HTML structures and annotates web content so browsers can render it. It marks up text as headings, paragraphs, lists, or links; embeds images, videos, and forms; and provides the semantic meaning that search engines and assistive technologies rely on. HTML does not style content (that is CSS) or define behavior (that is JavaScript).

Is HTML a programming language?

HTML is a markup language, not a programming language. A programming language can execute logic, loops, and conditions. A markup language annotates content to describe its structure and meaning. HTML describes what content is — a heading, a paragraph, a list — not what the computer should do. HTML, CSS, and SQL are the most common markup/data-query languages in web development, but they are distinct from Turing-complete programming languages.

Why does semantic HTML matter?

Semantic elements tell browsers, search engines, and screen readers what each part of a page means — not just how it looks. A <nav> element marks a navigation region; a <article> marks self-contained content; an <h1> marks the page title. This structure lets assistive technologies skip to the main content, lets search engines understand the page hierarchy, and makes the code readable by developers. MDN's Semantics article lists these as the primary benefits: better SEO, accessible navigation, maintainable code, and proper browser features.

How does a browser read HTML?

When you request a URL, the web server sends an HTML document. The browser reads the document from top to bottom, parsing each tag and building a tree structure called the DOM (Document Object Model). The DOM represents every element — headings, paragraphs, images, links — as objects the browser can manipulate. The browser then renders the DOM visually on screen. Tags are not displayed; they are instructions the browser follows to interpret the content.

What is the difference between HTML and HTML5?

HTML (the original) was developed by Tim Berners-Lee in 1993. The Wikipedia HTML article tracks its history: "HTML 4 was published in 1997; HTML5 was a major evolution, adding native support for video, audio, canvas graphics, and web applications." HTML5 also introduced semantic elements (<header>, <nav>, <article>, <section>, <footer>) that were absent in earlier versions. Today, "HTML" and "HTML5" are often used interchangeably — the WHATWG maintains a "living standard" that evolves continuously, and all modern browsers implement HTML5 features.

Verdict

HTML is the foundation everything else on the Web is built on. Understanding it means understanding the difference between structure (HTML), presentation (CSS), and behavior (JavaScript) — and why keeping those three layers separate makes sites faster, more accessible, and easier to maintain.

The key practical takeaways: write semantic HTML (use <article> when you mean an article, <nav> when you mean navigation), keep content separate from styling, and write <!doctype html> and <meta charset="utf-8"> in every document. A page built with meaningful HTML elements is automatically more accessible to screen readers, more readable to search engines, and easier for developers to work with — all without writing a single line of CSS or JavaScript.