The frame of an HTML file

01 / 06

What you have been writing is the contents

In the exercises so far you have written headings and paragraphs and nothing else. Those were really one part of a whole HTML file.

A real HTML file has a fixed shape wrapped around the outside of that.

02 / 06

The shape of the whole file

Below is a whole HTML file. Three containers, nested one inside another.

<!DOCTYPE html> … a declaration saying "this is HTML"
<html> … the container for the whole file
<head> … where information about the page goes
<body> … where the things you want shown on screen go

<!DOCTYPE html><html>  <head>  </head>  <body>  </body></html>

03 / 06

head and body do completely different jobs

Nothing you write in <head> shows on screen. It is where you put information for the browser, like the name of the page or which set of characters it uses.

What you write in <body> is what appears. Every heading and paragraph you have written so far was really the contents of <body>.

<head>  <title>Willow Diner</title></head><body>  <h1>Willow Diner</h1></body>

04 / 06

title is the name of the page

The text in <title> becomes the name shown on the browser tab. It is also the headline you see in search results.

It does not appear inside the page, so you write it separately from your <h1>. The same words are fine, and so is something different.

<title>Willow Diner | Menu</title>

05 / 06

meta charset keeps the text from breaking

<meta charset="utf-8"> tells the browser which set of characters this document uses. Without it, text can come out as garbled symbols.

<meta> is a tag with no closing tag, like <img>. By custom it goes first inside <head>.

<head>  <meta charset="utf-8">  <title>Willow Diner</title></head>

06 / 06

How these exercises work

In these exercises the outer frame from <!DOCTYPE html> down to <body> is already there. You only write the tags that go inside.

Since <title> and <meta> do not appear on screen, the preview will look as though nothing has been added. The checks below still tell you whether you wrote them properly.