The HTML Head
Store metadata, the page title, and settings inside the head element.
Syntax
<head>
<title>Page Title</title>
<meta charset="UTF-8">
</head>The <head> element contains information about the document that is not displayed on the page itself.
Common elements in the head
<title>— the title shown in the browser tab.<meta>— metadata such as character set and page description.<link>— links to external files such as stylesheets.
The <title> is required in a valid HTML document.
Example
Loading editor…
Press Run to see the result.
When to use it
- An SEO specialist adds <meta name="description"> inside <head> to control the search-engine snippet.
- A developer links an external stylesheet in <head> so styles load before the page body renders.
- A site owner sets the <title> tag to include the brand name so it appears correctly in browser tabs.
More examples
Essential head metadata
Groups the most critical metadata: charset, responsive viewport, SEO description, and page title.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Free tutorials on HTML, CSS, and JS.">
<title>SoundsCode - HTML Tutorial</title>
</head>Linking CSS and a favicon
Demonstrates linking external resources — icon, stylesheet, and a preloaded font — from the <head>.
<head>
<meta charset="UTF-8">
<title>Shop</title>
<link rel="icon" type="image/png" href="/favicon.png">
<link rel="stylesheet" href="/css/main.css">
<link rel="preload" as="font" href="/fonts/brand.woff2" crossorigin>
</head>Script loading with defer in head
Using defer on a classic script and type="module" prevents blocking the HTML parser.
<head>
<meta charset="UTF-8">
<title>App</title>
<link rel="stylesheet" href="styles.css">
<script src="analytics.js" defer></script>
<script type="module" src="app.js"></script>
</head>
Discussion