📖 Programmer's Bible
First Chapter: From Zero to Your Own Website › Part 3: The Web › 55 of 60 · See on the map

HTML: Structure

⏱ 6 min read

In one sentence: HTML (HyperText Markup Language) is the language that describes the content and structure of a web page: it marks each part with tags, such as "this is a heading", "this is a paragraph" or "this is a link".

Why should I care?

In What Happens When You Type a URL, you saw that the first file a server sends is usually an HTML file. Almost every web page you have ever opened started as HTML.

Later in this course, you will build your own website, starting with an HTML file you write yourself.

Analogy

Imagine you give a friend a page of plain text with small paper labels on it: "title starts here", "title ends here", "this is a list". Your friend reads the labels and knows what each part of the text is.

HTML works like this. The labels are called tags, and the browser is the reader. Adding labels like these to text is called markup. That is the M in HTML.

Where the analogy breaks down: a friend can understand an unclear label. A browser follows exact rules. If you forget an "ends here" label, the browser has to guess, and it may guess differently from what you meant. Also, your friend sees the labels on the paper. On a web page, you do not see the tags. You see only the result.

How it actually works

Tags and elements

An HTML file is plain text. Some words in it are tags: a name inside angle brackets, < and >. Here is one line of HTML:

Diagram: the parts of one HTML element. The line <p>My cat is very grumpy</p> is split into three parts: the opening tag <p>, the content "My cat is very grumpy", and the closing tag </p>. Together, the three parts are one element.

  <p>My cat is very grumpy</p>
  └┬┘└─────────┬──────────┘└┬─┘
   │           │            └── closing tag (with a /)
   │           └── content
   └── opening tag
  └──────────── one element ─────┘

The opening tag <p> says "a paragraph starts here" (p is short for paragraph). The closing tag </p> says "the paragraph ends here". It has a / before the name. Between them is the content.

Together, these three parts form an element: one part of the page. Some elements have only one tag and cannot hold other content, such as <img> (a picture).

A few common elements:

  • <h1> to <h6>: six levels of headings. <h1> is the highest.
  • <p>: a paragraph.
  • <ul> and <li>: a list with bullet points (ul), and each item in it (li).
  • <a>: a link.

Attributes: extra information

A tag can carry extra information, called an attribute. It is written inside the opening tag, as a name, an equals sign =, and a value in quotation marks:

<a href="https://info.cern.ch">Visit CERN</a>

The href attribute holds the address that the link goes to. The browser shows "Visit CERN" as a link that you can click.

In the same way, <img src="cat.jpg"> puts a picture on the page. The src attribute holds the address of the picture file.

Elements inside elements

Elements can sit inside other elements. This is called nesting. A whole page is nested elements:

<!doctype html>
<html>
  <head>
    <title>My page</title>
  </head>
  <body>
    <h1>Hello</h1>
    <p>Visit <a href="...">CERN</a></p>
  </body>
</html>
The structure of the small HTML pageThe html element holds two parts: head and body. Head holds the title, which is shown on the browser tab. Body holds what you see on the page: an h1 heading and a paragraph, p. The paragraph holds a link, a.

html

head

body

title
(shown on the tab)

h1

p

a

  • <!doctype html> goes at the very top. MDN says it "needs to be included for everything else to work correctly".
  • <html> holds everything else.
  • <head> holds information about the page that is not shown in the page itself. For example, <title> is the name on the browser tab, not on the page.
  • <body> holds everything you see on the page.

When the browser reads this file, it builds the structure in the diagram above. It is called a tree: one element at the top branches into smaller parts, like a family tree. This tree is called the DOM (Document Object Model). The Elements tab of DevTools (in Firefox: Inspector) shows it.

Structure, not looks

HTML says what each part is, not exactly how it should look. The browser chooses a default look: the look it uses when you do not choose one. For example, the HTML standard suggests that an <h1> heading is bold and twice the normal text size. To choose your own colors, fonts and layout, you use a second language: CSS.

How it came to be

You do not need to remember these names and dates.

In 1990, Tim Berners-Lee at CERN was building the World Wide Web around hypertext: text with links. The idea of hypertext was not new. Academics had described it as early as the 1940s. His markup for these pages was HTML. It was mainly based on SGML, an older language for marking up documents. In 1991, Berners-Lee wrote down the rules of HTML.

The IETF, a group that develops standards for the internet, released HTML 2.0 in 1995. In 1996, the W3C (World Wide Web Consortium) took over the HTML work. Then the W3C almost stopped working on HTML. So, in 2004, people from Apple, Mozilla and Opera founded a new group, the WHATWG, and work on HTML continued. In 2019, the WHATWG and the W3C agreed to work together on a single version of HTML. It is called the HTML Living Standard: "living" because it is "continuously updated", says the WHATWG.

🧪 Try it in your browser

You will write a tiny web page, with no file. You type the HTML straight into the address bar, after data:text/html,. This tells the browser that the page is right inside the address. You need a computer with Chrome, Edge or Firefox. This is safe, and no file is created. (A web page is not allowed to open a data: address for you, because such addresses have been used to trick people. When you type one, the browser opens it.)

You can type each line or copy and paste it. If the result looks wrong, or your browser searches instead, check that the line starts with data:text/html, and try again.

  1. Open a new tab. Click the address bar, type this line exactly, and press Enter: data:text/html,<h1>Hello</h1><p>This is my first page.</p> What you should see: a big, bold Hello, and the sentence below it in normal text. You wrote a web page!
  2. Click the address bar again. Select all the old text and delete it. Type this new line, and press Enter: data:text/html,<h1>Hello</h1><p>I like:</p><ul><li>music</li><li>books</li></ul> What you should see: the same heading, then a list with a bullet point before each item.
  3. Now make a mistake on purpose. Delete the old text again. Type this line, without the closing tag </h1>, and press Enter: data:text/html,<h1>Hello<p>This is my first page.</p> What you should see: the sentence is now big and bold too. The heading never ended, so the browser had to guess where it stops.

Common misunderstandings

  • "Tags in capital letters are wrong." No. Tag names work in capital or small letters: <H1> and <h1> are the same. Writing them in small letters is the recommended habit.
  • "Extra spaces and empty lines in my HTML will show on the page." Usually not. In most elements, the browser turns many spaces and line breaks into one space.

Recap

  • HTML is the language for the content and structure of a web page. Almost every page starts as an HTML file.
  • An element is an opening tag, content and a closing tag, such as <p>...</p>. Attributes like href add extra information.
  • Elements nest inside each other, and the browser turns them into a tree. HTML gives structure; CSS gives the looks.

Sources

Written with AI · Reviewed by AI · Not yet checked by a human

Found a mistake, or something you did not understand? Report a problem.