3. HTML Basic Structure

What you will learn

The parts every complete HTML page contains
The difference between <head> and <body>
How to write a valid page from scratch

The page skeleton

Every complete HTML page follows the same outline. Memorize it, because you will use it in every project.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My First Page</title>
</head>
<body>
  <p>Hello, world!</p>
</body>
</html>

Output

The browser tab shows the title My First Page, and the page shows:

Hello, world!

The code, line by line

<!DOCTYPE html> tells the browser this is a modern HTML5 document. It is not a tag, and it must come first.
<html lang="en"> wraps the whole page. The lang attribute states the page language, which helps screen readers and search engines.
<head> holds information about the page. Nothing inside it appears in the main page area.
<meta charset="UTF-8"> sets the character encoding so letters, symbols, and emoji display correctly.
<meta name="viewport" ...> makes the page scale properly on phones.
<title> sets the text shown on the browser tab and in search results.
<body> holds everything visitors see: text, images, links, and forms.

Head versus body

head: page title, character set, links to stylesheets. Invisible settings.
body: the visible content.

Indentation

Notice that tags inside other tags are pushed to the right by two spaces. Browsers ignore this, but it makes code much easier for humans to read.

Common mistakes

Putting visible content inside <head>.
Leaving out <!DOCTYPE html>, which can make browsers display the page in an old compatibility mode.
Forgetting the <title>. Every page needs one.
Forgetting closing tags such as </body> or </html>.

Exercise

Write a complete HTML page with the title About Me and a paragraph in the body that says My name is Sam.

Show solution

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>About Me</title>
</head>
<body>
  <p>My name is Sam.</p>
</body>
</html>

Knowledge check

1. Which element holds the content visitors see?

<body>

2. Where does the <title> text appear?

On the browser tab and in search results.

3. What does lang="en" declare?

That the page language is English.

Summary

Every page starts with <!DOCTYPE html> and an <html> element.
<head> contains page information. <body> contains visible content.
Indenting nested tags keeps code readable.

Next lesson: HTML Elements.