What a web page is

Every page you open starts as a plain text file. Right-click almost any page, choose View Page Source, and you can read the HTML the server sent.

A page is a text file

When you type an address into a browser, the browser asks a server for a file and gets back plain text. That text is written in HTML, the HyperText Markup Language. The browser reads it from top to bottom, works out which parts are headings, paragraphs, links and pictures, and then draws the page you see. You can check this on almost any site: right-click the page and choose View Page Source. Behind the colors and the layout there is a long, readable text file.

HTML is a markup language, not a programming language. It has no loops and does no arithmetic. Its job is to label content: this line is the main heading, these three lines are a list, this phrase links to another page. Two other languages usually travel with it. CSS decides how things look (colors, fonts, spacing, layout), and JavaScript makes the page react to clicks and typing. This course covers the first layer. The CSS course covers the second.

The skeleton every page shares

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Corner Bakery</title>
  </head>
  <body>
    <h1>Corner Bakery</h1>
    <p>Fresh bread every morning from 7 am.</p>
  </body>
</html>

The first line, <!DOCTYPE html>, is a leftover from the early web. Its only job today is to tell the browser to use standards mode instead of an old compatibility mode that copies the bugs of 1990s browsers, so always keep it. Next comes the <html> element, which wraps the whole document. Its lang attribute names the language of the page. Screen readers use it to pick the right pronunciation, and translation tools use it to know what they are translating.

Inside <html> there are two parts. The <head> holds information about the page that is not drawn in the page itself. <meta charset="utf-8"> says which character encoding the file uses; UTF-8 can store the letters of every writing system, Korean included, so text will not turn into strange symbols. The <title> is the name shown on the browser tab, in bookmarks and in search results, and it is the first thing a screen reader announces when the page opens. The <body> holds everything that appears on screen.

From text to a tree

The browser does not keep your HTML as one long string. It parses it into a tree of objects called the DOM, the Document Object Model. Each element becomes a node, and elements written inside another element become its children. In the figure below, title is a child of head, and h1 and p are children of body. CSS selectors and JavaScript both work on this tree, which is one reason careful nesting matters.

Browsers are forgiving. If you forget a closing tag, the parser follows repair rules written into the HTML standard and still builds a tree, but the repaired tree may not be the one you meant. Getting into the habit of writing the structure correctly saves a lot of puzzled debugging later.

Who writes the rules

Tim Berners-Lee wrote the first proposal for the World Wide Web in March 1989 while working at CERN, and by the end of 1990 the first web server and browser were running there. HTML has grown a great deal since then. Today it is defined by the HTML Living Standard, maintained by the WHATWG, a group set up by browser makers. In 2019 the W3C and the WHATWG agreed to work on this single version. Living means the document has no version numbers and is updated continuously, so the name HTML5 that you will still see in books is only a loose label.

The editor below works like a tiny browser. Type on the left and the result appears on the right a moment later. Play redraws the result at once. When you think you are done, press Check: the page runs a few tests on your HTML and tells you which ones still fail. Start over brings back the starting code.