🎓 A1Learner
🔍

HTML Head Element

The head element is the top part of a page that holds information about the page. The body element holds the content that readers see.

What sits in the head

The title and meta elements live inside the head. Neither one prints text on the page.

<head>
<title>My Page</title>
<meta charset="UTF-8">
</head>

The visible part lives in the body

The heading and paragraph below sit in the body. They are the part of the page that readers see.

<h1>My Page</h1>
<p>Welcome to the page.</p>

Files and code connect in the head

The link element loads an outside file, like a stylesheet. A stylesheet is a file that holds styling rules.

<head>
<link rel="stylesheet" href="styles.css">
<style>p { color: green; }</style>
</head>

Example

<!DOCTYPE html>
<html lang="en">
<head>
<title>About Trees</title>
<meta charset="UTF-8">
<style>h1 { color: darkgreen; }</style>
</head>
<body>
<h1>About Trees</h1>
<p>Trees give shade in summer.</p>
</body>
</html>

Key points

  • Head: the part of a page that holds information about the page itself
  • The head describes the page, and the body presents it
  • Title: the element that names the page on the browser tab
  • Meta: an element that carries facts about the page
  • Link: an element that connects the page to an outside file
  • Style and script elements can also live in the head

In this example, the head holds three items and none of them prints on the page. The title names the page on the browser tab. The meta element sets the character set for the text. The style element paints the heading dark green. The body then shows the heading and the paragraph as the visible page.

Note

Nothing in the head appears as page text, so its contents stay invisible to readers

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

Exercise

Which element holds the title of a page?