Head and Metadata
What Is It?
The head holds information about the page. Most of that information is not shown in the page body.
What the Tags Mean
head: wraps page information.meta: describes settings or content.title: names the tab.link: connects a file such as a stylesheet.
Example 1
Save each example as index.html and open it in your browser. Each code block is a complete page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My HTML notes</title>
</head>
<body>
<h1>My example page</h1>
<p>Look at the browser tab to check the title or icon. Meta tags describe the page without adding visible text.</p>
</body>
</html>Browser preview
What you see: The tab gets a title. The page can display UTF-8 text and use the device width on phones.
Example 2: Another Use
Use a description to explain the page in one sentence.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Head and Metadata</title>
<meta name="description" content="Simple HTML notes for beginners.">
</head>
<body>
<h1>My example page</h1>
<p>Look at the browser tab to check the title or icon. Meta tags describe the page without adding visible text.</p>
</body>
</html>Browser preview
Simple Tip
Put visible paragraphs in body, not head.
Try It Yourself
Write a description for your own page.