The HTML Head Section: Meta Tags, Title and Links

The HTML head section holds information about your page: the title, meta tags like charset, viewport and description, and links to stylesheets, icons and scripts.

What goes in the HTML head?

Every HTML page has two big parts. The <body> holds what people see. The <head> holds information about the page. Think of a book: the body is the story, and the head is the cover, the back-cover summary and the barcode. Readers don't read the barcode, but the shop needs it.

Nothing inside <head> appears on the page itself. Instead, the browser, search engines and social media sites read it. Here are the most common things you will put there:

• <meta charset="utf-8"> tells the browser which character set the file uses.
• <meta name="viewport"> makes the page work well on phones.
• <title> sets the text in the browser tab and in search results.
• <meta name="description"> gives a short summary for search results.
• <link> connects other files, like a CSS stylesheet or a favicon.
• <script> loads JavaScript (you will usually add defer).

Charset, viewport and title: the three must-haves

A character set (charset) is the list of letters and symbols a computer can show. UTF-8 covers almost every language and emoji, so always use it. Put it first in the head, because the browser needs to know it before it reads any other text.

The viewport is the visible area of the screen. Without the viewport meta tag, phones pretend to be a wide desktop screen and shrink your page until the text is tiny. With width=device-width, initial-scale=1, the page uses the real width of the phone.

The <title> is short text that names the page. It shows in the browser tab, in bookmarks and as the blue link in Google. Make each page title unique and clear, for example "Contact Us - Green Leaf Cafe". Aim for about 50–60 characters.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Fresh Coffee and Cakes - Green Leaf Cafe</title>
</head>
<body>
  <h1>Welcome to Green Leaf Cafe</h1>
</body>
</html>

Open this file in a browser. You will see only the heading on the page, but look at the browser tab: it shows the title. On a phone, the text appears at a normal size because of the viewport tag.

Common mistake: Forgetting the viewport meta tag. Your page may look fine on a laptop but tiny and hard to read on a phone. Add it to every page.

How to write a good meta description

The meta description is a summary of the page in one or two sentences. Search engines often show it under the title in search results. It does not directly raise your ranking, but a clear description makes people more likely to click.

• Keep it under about 155 characters so it is not cut off.
• Describe what the reader will get from this page.
• Write a different description for every page.

Linking a stylesheet, a favicon and scripts

The <link> element connects your page to other files. It has no closing tag. The rel attribute says what kind of file it is, and href says where it is.

A favicon is the small icon in the browser tab, like a logo stamp. Modern browsers accept SVG and PNG icons. The apple-touch-icon is used when someone saves your site to an iPhone home screen.

For JavaScript, use the <script> element. If you put it in the head, add the defer attribute. defer means "download this now, but run it after the page HTML is ready". Without it, the browser stops building the page until the script has loaded. The other common option is to put the script at the very end of the body.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Fresh Coffee and Cakes - Green Leaf Cafe</title>
  <meta name="description" content="Green Leaf Cafe serves fresh coffee, homemade cakes and light lunches in the city centre. See our menu and opening hours.">

  <link rel="stylesheet" href="css/styles.css">
  <link rel="icon" href="images/favicon.svg" type="image/svg+xml">
  <link rel="icon" href="images/favicon-32.png" sizes="32x32" type="image/png">
  <link rel="apple-touch-icon" href="images/apple-touch-icon.png">

  <script src="js/menu.js" defer></script>
</head>
<body>
  <h1>Welcome to Green Leaf Cafe</h1>
  <p>Coffee, cake and good company.</p>
</body>
</html>

This is a complete, professional head. The browser loads styles.css to style the page, shows your icon in the tab, and runs menu.js after the HTML is ready. If the files don't exist yet, the page still works; the browser just skips them.

Tip: Keep the order simple: charset first, then viewport, title, description, stylesheets, icons, and scripts last. It is easy to read and works well. You can learn more on MDN: The head element.

Practice exercise

Create a page called about.html for a small bookshop. Give it a full head section with charset, viewport, a unique title, a meta description under 155 characters, a link to css/style.css, and a favicon link. Add one <h1> in the body.

Hint: Start from the second example above and change the text. Check the browser tab to make sure your title appears.

Key takeaways

• The head holds information about the page; nothing in it shows on the page itself.
• Always include <meta charset="utf-8"> first and the viewport meta tag.
• Write a unique <title> and meta description for every page.
• Use <link> for stylesheets and favicons, and <script defer> for JavaScript in the head.