The head holds information about the document rather than its main visible story. It typically contains the page title, character encoding, viewport rule, metadata, and file relationships.
What You Need to Know
A title can affect the browser tab even though it is not printed in the body. Do not move the main heading into head to make it easier to find.
Do not put ordinary visible page content into the head. Browsers may repair this mistake by ending the head early.
Think of an HTML document as a small book: the browser needs a title and some information about how to read it, while visitors need the actual chapters and text.
Example: See It in Action
Take a look at this small piece of HTML. You can use it in a practice document and change the text to make it your own.
If this is only part of a document, place metadata and style elements in the head of a complete HTML page. Keep ordinary visible content in its body.
<head>
<meta charset="utf-8">
<meta name="description" content="A beginner coding club.">
<title>Code Club</title>
</head>Let’s Understand the Example
- The head contains useful page information for the browser, such as its title and character encoding.
- A meta element gives the browser short information about the document. Different attributes control different hints.
- The title names the page in the browser tab. It is different from the heading shown on the page.
- Charset tells the browser how to decode the page text; UTF-8 is the usual choice.
- Name is the key the browser normally sends when a form control is submitted.
- Content stores the value supplied by a meta element.
Some of the markup affects the browser tab or page settings rather than appearing as visible text. Check the browser tab and inspector as well as the page itself.
What Should You See?
The browser tab should show “Code Club”.
Open the page and compare what appears in the browser tab with the heading inside the document. Both have different jobs.
Try It Yourself
- Add a meta description and leave the visible page heading in body.
- Save your changes, open or refresh the page, and compare the result with the original example.
- Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.
Common Beginner Mistakes
- Treating head like a page header or putting user-facing article content inside it.
- The title in the browser tab and the heading visible in the page are different pieces of information.
Key Takeaways
- The head holds information about the document rather than its main visible story.
- The head contains useful page information for the browser, such as its title and character encoding.
- Do not put ordinary visible page content into the head. Browsers may repair this mistake by ending the head early.