Unit 2 · HTML: structure and meaning
HTML head vs body: what goes where
The head is information about the page, such as its title, styles and description, and none of it shows on the page. Everything visible goes in the body. Both sit inside one root element, <html>.
The mix-up
What people often think
“Anything at the top of the page goes in the head.”
What the tutor says
The head is information about the page (its title, its styles), never shown in the page itself. Everything people see goes in the body, including the heading.
How it works
Something at the top of the page is not automatically head material. A site banner, a logo and the main heading are all visible, so they belong in the body, usually inside a <header> element.
There is only one root. <head> and <body> are siblings inside <html>, not separate trees side by side.
An example
<html>
<head>
<title>Corner Bakery</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Corner Bakery</h1>
</body>
</html>Close cousins of this mix-up
The tutor watches for these in the same lesson.
“The body is its own separate thing next to html.”
There is only one root: html. The head and the body both live inside it.
Practise it with a tutor watching
Build the DOM tree
Read and build the tree of nested elements behind any web page.
Free with an account. The first two units need no account.