Elements, Tags and Attributes

The page you made in Chapter 1 worked, but its lines were a set of symbols you copied without knowing why each one was there. HTML is a way of labelling content: this text is a heading, this one is a paragraph, these words are a link. Every label in the language has the same shape, and once that shape is clear, every element you meet from here on reads the same way.

Think of the labels on boxes when you move house. The label does not change what is in the box; it says what the box holds, so the right box ends up in the right room. A box can sit inside a bigger box, and the inner one still has its own label. HTML labels content in exactly that way, and the browser, like the removal team, decides what to do with each box from its label.

What Is an Element?

A label in HTML is called a tag. An opening tag is a name between angle brackets and marks where a piece of content starts. A closing tag is the same name with a forward slash before it and marks where that content ends. The opening tag, the content and the closing tag together make an element.

The name inside the tag says what the content is. The name p means a paragraph, h1 means the main heading, a means a link, short for anchor. The tags themselves never appear on the screen. They are instructions to the browser, and what you see is the content they wrap.

<p>Read the <a href="https://developer.mozilla.org">MDN documentation</a> first.</p>

That one line holds two elements. The outer one is a paragraph. Inside it, the words "MDN documentation" are a link element. The browser shows a single line of text, "Read the MDN documentation first.", with the two middle words underlined in blue, and clicking them opens MDN. The angle brackets, the letters p and a, and the address itself are nowhere on the screen.

Attributes: Extra Information in the Opening Tag

Some elements need more than a name. A link is useless without the address it leads to. That extra information goes in an attribute, written inside the opening tag after the element's name. An attribute is written as a name, an equals sign and a value in double quotes; a few attributes, met in later chapters, need only the name. In the link above, the attribute's name is href, short for hypertext reference, and its value is the address of MDN.

Three attributes appear constantly in this book. href gives a link its destination, and topic 3 of this chapter is about it. lang says which human language the content is written in. class gives an element a name of your choosing, so that CSS can find it later, in Chapter 3. An element can carry several attributes, separated by spaces, in any order.

Elements Inside Elements

An element can hold other elements, as the paragraph above holds the link. This is called nesting, and it has one rule: an element that opens inside another must close inside it too. So the tags close in the reverse order they opened, the way you close the inner box before you tape up the outer one.

<p>This is <strong>very <em>important</em></strong> news.</p>

<p>This is <strong>very <em>important</strong> news</em>.</p>

Both lines use strong, which marks words as important and shows them in bold, and em, which marks stress and shows it in italics. In the first line the tags close in reverse order: the em closes, then the strong. In the second line they cross: the strong closes while the em inside it is still open.

The browser shows both lines without complaint, and the second even looks the way its author probably meant. But it cannot store crossed boxes, so it quietly repairs the second line. It closes the em where the strong ends, then opens a second em for the word "news". Your one element has become two. Topic 6 shows how to see the repaired version for yourself; for now, the lesson is that the browser builds what it can, not always what you wrote.

Indentation, the spaces at the start of each line, is how people show nesting to each other: each level moves two spaces to the right. The browser ignores it completely. A page written on one long line works the same, but nobody can read it, including you in a month.

Elements with Nothing Inside

A few elements have no content at all, so they have no closing tag either. They are called empty elements, or void elements. An img places an image, and everything it needs is in its attributes. A br forces a line break, and a meta gives the browser a fact about the page. You write only the opening tag. You may see a slash before the closing angle bracket in other people's code; it does nothing, and this book leaves it out.

The Skeleton of Every Page

Every full HTML page, however large, starts from the same few lines. Here is the version this book uses as its template.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Your Name</title>
  </head>
  <body>
    <h1>Your Name</h1>
    <p>I build small, useful things for the web.</p>
  </body>
</html>

The first line, the doctype, tells the browser this is a modern HTML page. Without it, browsers fall back to an old compatibility mode that imitates the bugs of browsers from the 1990s, and some of your CSS will behave strangely. It is not an element. You will see it written in capitals as often as in lowercase, and both work.

Everything else sits inside the html element, whose lang attribute says the page is in English. That one attribute tells a screen reader, the software from Chapter 1 that reads pages aloud, which voice and pronunciation to use.

The html element holds exactly two children. The head is information about the page, and none of it is drawn in the window. The first meta declares the character encoding, the code table that turns the bytes of the file into letters; UTF-8 covers every alphabet. The second meta, the viewport line, stops phones from shrinking the page to a tiny desktop-sized view; Chapter 5 explains it properly. The title is the text on the browser tab and in bookmarks.

The body holds everything that is shown in the window. In the browser this template looks exactly like your page from Chapter 1: "Your Name" as a large bold heading, the tagline beneath it, and "Your Name" on the tab. Your index.html already has every line except the viewport one, so add that line now. Every page in the rest of the book starts from this skeleton.