How HTML structures a web page: doctypes, elements, tags and attributes

Every web page you have ever opened began as a plain text file of HTML.

HTML (HyperText Markup Language) does not make anything look pretty and does not make anything move: it says what each piece of content is (a heading, a paragraph, a link, a picture, a form) so that a browser knows how to show it and a screen reader knows how to read it.

This is AS Level content for Unit 2, the WIT12 practical paper, where you open real HTML files in a text editor, fix or extend them and save them, so everything here is something you will type, not just describe.

Your syllabus expects you to understand how HTML is used to structure web pages: a. doctypes; b. elements; c. tags; d. attributes.

Ravenscar Climbing Wall wants a page listing its routes.

The words "Climbing routes" are just text until you wrap them: <h1>Climbing routes</h1> tells the browser "this is the main heading", so it is shown large and bold, search engines treat it as the page's topic, and a screen reader announces it as heading level 1.

HTML is called a markup language because it marks up existing content with labels; it is not a programming language, because it has no variables, decisions or loops.

You need to know four words for the parts you use to build that structure.

Doctype. The very first line of an HTML5 file is <!DOCTYPE html>.

It is not an element and has no closing tag.

It is an instruction to the browser that says which version of HTML the page is written in, and so how to interpret it.

With it, the browser uses standards mode and follows the current HTML and CSS rules exactly.

Without it, browsers fall back to quirks mode, which copies the habits of very old browsers so that pages from the 1990s still display; layout, box sizes and some CSS then behave differently from what you wrote.

So the doctype is there to make the page display the same, correctly, in every modern browser.

Older HTML versions had long doctypes naming a DTD file; HTML5 shortened it to the one line, and it is not case-sensitive, though <!DOCTYPE html> is the usual way to write it.

Element. An element is one complete piece of the page's structure: usually an opening tag, some content and a closing tag.

<p>Open until 10pm</p> is a paragraph element.

Elements nest inside each other like boxes inside boxes: a list element contains list-item elements; the body element contains everything visible.

Some elements have no content at all and so no closing tag; these are void (empty, or "self-closing") elements such as <img>, <br>, <hr>, <input>, <meta> and <link>.

Tag. A tag is the label in angle brackets that starts or ends an element.

The opening tag is <p>; the closing tag repeats the name after a forward slash, </p>.

Tag names are what the browser reads to decide what kind of element it is building.

"Element" and "tag" are often used loosely as if they meant the same thing; in an answer, keep them apart: the tag is the marker, the element is the whole thing from opening tag to closing tag.

Attribute. An attribute adds information to an element and is written inside its opening tag as a name, an equals sign and a value in double quotes: <a href="routes.html">.

Here href is the attribute name and routes.html its value, which tells the link where to go.

An element can have several attributes, separated by spaces, in any order: <img src="wall.jpg" alt="The bouldering cave" width="400">.

Attributes never go in a closing tag.

The figure takes one link apart.

Read it from the outside in: the whole bracket is the element; the box on the left is the opening tag, carrying the tag name a and one attribute; the middle box is the content the user sees and clicks; the box on the right is the closing tag.

In the file it is written <a href="routes.html">Climbing routes</a>.

When you open a page, the browser reads the file from the top.

The doctype sets the mode.

Then it reads tags one by one and builds a tree of elements in memory: html at the root, head and body under it, and so on down to each paragraph and link.

That tree (the Document Object Model, which Topic 9 uses to let JavaScript change the page) is what is drawn on screen.

This is why structure matters: a missing closing tag does not stop the page loading, but the browser has to guess where the element ends, and its guess often swallows the content after it.

In the debugging items, that guess is exactly what you see go wrong.

Every HTML5 page has the same skeleton:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Ravenscar Climbing Wall: routes</title>
  </head>
  <body>
    <h1>Climbing routes</h1>
    <p>New routes are set every Friday.</p>
  </body>
</html>

• <!DOCTYPE html>: the doctype, always line 1.

• html: the root element; everything else sits inside it. Its lang attribute declares the page's language (the next section).

• head: information about the page, not shown in the page area: the character set, the title shown on the browser tab, links to style sheets and scripts.

• body: everything the user sees in the window.

1. State what the doctype declaration is for at the start of an HTML document. (1) Total [1]

2. Give the name of the part of <a href="prices.html">Prices</a> that tells the browser which page to open. (1) Total [1]

3. Explain one difference between a tag and an element. (2) Total [2]

4. A student says: "HTML is a programming language, because the browser follows the instructions in it." Explain why this is not correct. (2) Total [2]

5. A page should show a heading "Route grades" and, under it, the paragraph "Grades run from 3 to 8a". Lines 9 and 10 of grades.html are:

 9  <h2>Route grades</h3>
10  <p>Grades run from 3 to 8a<p>

The page contains two errors.

Open the file in a browser, then Amend the code in your editor to correct both errors.

Save it as gradesFINISHED.html (2) Total [2]

6. Describe what a void element is. (2) Total [2]