Your first page: tags, a heading, a link

HTML is a markup language: tags mark a heading <h1>, a paragraph <p> and a link <a> in a text, and the browser draws the page from those marks.

A page is text with marks

Every web page starts as ordinary text. For the browser to know which part of the text is a heading, which is a paragraph and which is a link, the text is marked up: marks are added to it. The language of those marks is called HTML, HyperText Markup Language.

HTML is not a programming language. It calculates nothing and decides nothing. It only says: “this is a heading”, “this is a paragraph”, “this is a link to another page”. The browser reads the marks and draws the page.

Check yourself: what does HTML do?

It marks the parts of a text so that the browser knows what each one means: a heading, a paragraph, a link.

Tag and element

A mark is written in angle brackets and is called a tag. The tag <p> opens a paragraph, and the tag </p>, with a slash, closes it. All three together, the opening tag, the text and the closing tag, are called an element.

Inside an opening tag there can be attributes: extra details written as name="value". A link’s main attribute is href, the address it leads to. Press the parts of the line below to see what it is made of.

<ahref="tel:+1 000 000 0000">Call</a>

The start of the opening tag

The letter a stands for anchor, which is what HTML calls a link.

Some tags are single: they have no content and no closing tag. An example is <meta>, which gives the browser background information about the page.

Check yourself: how does an element differ from a tag?

A tag is one mark in angle brackets. An element is the opening tag, the content and the closing tag together.

The skeleton of a document

Every page has the same skeleton:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>The tab’s name</title>
  </head>
  <body>
    Everything visible on the page
  </body>
</html>

The first line, <!doctype html>, tells the browser: this is modern HTML. The html element wraps the whole page, and its lang attribute gives the page’s language. A screen reader uses it to choose a pronunciation, and a translator or a search engine uses it to know which language it is dealing with.

The head holds what you can’t see on the page itself: the text encoding and the tab’s name in title. The body holds everything that is visible.

Check yourself: where do you write the tab’s name, in the head or in the body?

In the head, in the title element. Everything visible on the page goes in the body.

A heading, a paragraph, a link

<h1> is the page’s main heading, and there is usually one. For subheadings there are <h2>, <h3> and so on down to <h6>. Headings exist for meaning, not for big letters: people and programs use them to understand what a page is made of.

<p> is a paragraph. The browser separates paragraphs from one another by itself. But it doesn’t see the line breaks inside your file: until the text is marked up, it all runs together in one line. You’ll see that in the practice.

<a href="..."> is a link. The address can lead to another page (https://), to an email address (mailto:) or to a phone number (tel:). On a phone, a tel: link opens the dialer straight away.

Check yourself: how many h1 elements does a page usually have?

One: it’s the main heading, and it says what the whole page is about.

What the browser forgives

Forgot to close a </p>? Put an <h1> inside a <p>? The browser won’t show an error: it quietly finishes the page however it sees fit. Remember the lesson on how a browser draws a page: from the text it builds a tree of elements, the DOM, and everything in it has to be nested properly. If you make a mistake, the browser repairs the tree itself, and the result may not be what you meant.

So it’s a useful habit to close everything you open, and to nest tags like dolls. The last one opened is the first one closed: <p>text <a href="...">link</a></p> is right, and <p>text <a href="...">link</p></a> is not. You can check yourself in the “Elements” panel of the developer tools. It shows the tree as it really turned out, not as you wrote it.

Comments and special characters

Sometimes you want a note to yourself that visitors won’t see. That’s what a comment is for: the browser skips everything between <!-- and -->.

<!-- The phone number goes here once it is approved -->

And if the text itself needs a less-than sign or an ampersand, you can’t write them as they are: the browser would take < for the start of a tag. There are special codes for that: < instead of <, > instead of >, & instead of &. So the phrase “Alder & Sons” looks like Alder & Sons in the markup.

Practice

Below is your first page. It already holds your details, or Kate’s from the example if you haven’t entered your own. Right now it’s plain text, and the browser shows it in one line. Mark it up, and the checks on the right will light up one by one.

What was wrong with the first pages

As you remember, the first page in history was plain text with links, and that was its strength: any document could be read in any program. The weakness was different. A heading looked like a heading only because the browser decided so, and the author couldn’t change anything: not the color, not the font, not the width. When sites wanted to look good, authors began using markup for things it wasn’t meant for. That’s the next lesson. And what you’ve just done has outlived every era: a heading, a paragraph and a link are still the basis of every page today.