The Head & Viewport Metadata
What is the Page Head?
Think of a webpage like a book. The head is the metadata printed on the copyright and details page—like the publisher, ISBN, and language. The reader doesn't read this page as part of the story, but it is essential for libraries and bookshops to categorize the book.In HTML, the <head> element is a container for metadata (data about data). It sits between the <html> tag and the <body> tag. The content inside the head is invisible to the visitors on the page itself, but it gives instructions to the browser on how to behave, style, or scale the page.
One of the most important tags in the head is the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This tells the browser how to scale the website when viewed on mobile screens.
Why does it matter?
Without the<head> and viewport tags, websites would look tiny and unreadable on smartphones, loading the desktop version and forcing mobile users to zoom in and out. The <meta charset="utf-8"> tag is also critical—it ensures special characters (like emojis or foreign letters) render correctly instead of showing up as broken symbols (e.g., ).
How to write it
Metadata goes inside the<head> element:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Responsive View
Common Mistakes
<p>), headings (<h1>), or images (<img>) inside the <head>. These tags belong in the <body>.<meta charset="utf-8">, you might run into issues where users see weird box symbols instead of quotes or emojis.Quick Reference
<head> — A container for document settings and metadata.<meta charset="utf-8"> — Sets character encoding to support all standard text characters and emojis.<meta name="viewport" content="width=device-width, initial-scale=1.0"> — Ensures mobile responsiveness.Your Task
Inside the HTML wrapper, add a `<head>` element. In it, place a `<meta charset="utf-8">` tag and a viewport meta tag with `name="viewport"` and `content="width=device-width"`.
index.html
Type code above to start the lesson.
Live Preview