HTML (HyperText Markup Language) is the backbone of every web page. It isn't a programming language — it has no logic, loops, or variables — it's a markup language that describes the structure of content: what's a heading, what's a paragraph, what's a link. Browsers read this structure and turn it into the page you see.

Every other technology on the front end builds on top of HTML. CSS styles it, JavaScript makes it interactive, but without HTML there's no page to style or script in the first place.

The Basic Document Skeleton

Every HTML document starts with the same handful of elements. Here's the minimum skeleton every page needs:

<!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>Hello, World!</h1>
  <p>This is a paragraph of text.</p>
</body>
</html>

This renders a simple page with one large heading reading "Hello, World!" followed by a paragraph underneath it.

Breaking that down: <!DOCTYPE html> tells the browser to render the page in modern standards mode rather than quirks mode. <html lang="en"> is the root element wrapping everything, with a language attribute that helps screen readers and search engines. The <head> holds metadata — things the browser needs but that aren't visible content themselves, like the character encoding, the viewport setting (critical for responsive design), and the page title shown in the browser tab. The <body> holds everything the visitor actually sees.

Elements, Tags, and Attributes

An HTML element usually consists of an opening tag, some content, and a closing tag: <p>content</p>. Some elements are "void" elements with no closing tag and no content, like <meta> or <img>.

Tags can carry attributes — extra information written inside the opening tag as name="value" pairs. The lang and charset attributes above are examples; so is src on an image or href on a link.

How the Browser Builds the DOM

When a browser receives your HTML, it doesn't just display the raw text — it parses it into a tree-like structure in memory called the DOM (Document Object Model), where each element becomes a node with a parent, and possibly children and siblings. This tree is what CSS selectors target and what JavaScript can read and modify. Getting your HTML structure right matters beyond just what it looks like — it's the actual data structure the rest of the page is built on.

Once you're comfortable with the basic skeleton, the next step is choosing the right elements for the content you're structuring — which is exactly what semantic HTML elements are for, instead of wrapping everything in generic <div> tags.