HTML Head Tags: title, meta charset, and viewport Explained
<head> is where a page keeps the parts that never show up on screen but still shape how the page works: the tab title, the character set, how the page scales on a phone, and what shows up in a search result. None of it renders in the "content area," the visible part of the page, but skip it and you'll notice.
This is the written version of my HTML head tags video, part of my HTML beginners course. It's embedded near the top.
Key Takeaways
- Everything inside
<head>is invisible to visitors. What renders on screen goes in<body>instead. <title>is the one exception you see indirectly: it's what shows in the browser tab.<meta charset="UTF-8">sets the character encoding. UTF-8 covers the overwhelming majority of pages.- The viewport meta tag controls how your page scales on phones and tablets. Leave it off and mobile visitors get a shrunk-down desktop layout.
- The meta description doesn't change how the page looks, but it's often what search engines show under your title in results.
The head tag: invisible by design
<head> is a pair, an opening tag and a closing tag, and everything nested inside it is metadata: information about the page for the browser and for search engines, not content for the person reading it. Open a page in your browser and none of it appears in the content area. Open a blank <body> next to a full <head> and you'll see an empty page with a populated tab, which is exactly the point.
<head>
<!-- metadata goes here, none of it renders on screen -->
</head>
<body>
<!-- what visitors actually see goes here -->
</body>The title tag
<title> is the one thing in <head> a visitor sees, just not on the page itself. It's what shows in the browser tab, in a bookmark, and as the clickable headline in a search result.
<title>HTML Head Tags | See Scott Dev</title>Don't confuse this with a heading. A <title> lives in <head> and never appears in the page body; <h1> through <h6> are visible content in <body>. HTML Headings covers that distinction in more depth if you want the full rundown.
Meta charset
The character set meta tag tells the browser which set of characters to expect, so accented letters, symbols, and emoji render correctly instead of turning into garbled boxes.
<meta charset="UTF-8">There are other character sets, but UTF-8 is the modern standard and it's what you want on close to every page you'll build. It's also self-closing, unlike <title>: no separate end tag.
The viewport meta tag
This one's small but it does a lot of work. Without it, a mobile browser renders your page at desktop width and shrinks the whole thing down to fit, which is why an un-viewported site looks tiny and zoomed-out on a phone until you pinch to zoom in.
<meta name="viewport" content="width=device-width, initial-scale=1.0">width=device-width tells the browser to match the page's width to the actual screen, whatever device that screen belongs to; a phone gets a narrower viewport than a desktop monitor, automatically. initial-scale=1.0 sets the zoom level when the page first loads, so it opens at 100% instead of zoomed out. Toggle this tag off on a page with an image and some text and you can watch everything balloon to a size built for a much wider screen. Toggle it back on and the layout snaps back to fit the device it's actually on.
Meta description
The description meta tag doesn't affect how your page looks in a browser at all. Its job is search results: it's frequently the snippet a search engine shows under your title to help someone decide whether to click through.
<meta name="description" content="A short, specific summary of the page, written for the person reading the search result.">Write it for the human reading the results page, not for the browser. A vague or generic description doesn't tell anyone what they'll get by clicking, and a search engine will sometimes replace it with a snippet pulled from your content instead.
Stylesheets and scripts
<head> is also where you link a stylesheet and, often, where you load scripts:
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>CSS controls how everything in <body> looks; JavaScript controls how it behaves and reacts to the visitor. Both get their own course further down the line. For now, know that <head> is where a page points to them.
Put together
A realistic <head> for a small page looks like this:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Page Title</title>
<meta name="description" content="A short, specific summary for search results.">
<link rel="stylesheet" href="styles.css">
</head>Order isn't strict here the way it is for <!DOCTYPE html> and <html>, but charset first is a good habit since it affects how the rest of the file gets read.
Where to go next
If you haven't already, Basic HTML Structure covers where <head> fits inside the full page skeleton. From here, the course moves into <body> content: headings, paragraphs, lists, and tables.
FAQ
What goes inside the HTML head tag?
Metadata the browser and search engines use but visitors never see directly: the character set, the viewport settings, the page title, the meta description, and links to stylesheets or scripts. Visible content goes in <body> instead.
Why does my page look tiny on mobile?
You're almost certainly missing the viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1.0">. Without it, mobile browsers render the page at desktop width and shrink it to fit, so everything looks small until you pinch to zoom.
Does the meta description affect SEO rankings?
Not directly as a ranking factor, but it's often the text a search engine displays under your title in results, so it affects whether someone clicks through. Search engines will sometimes swap in their own snippet if your description doesn't match the page well.
What character set should I use?
UTF-8, for almost every page you'll build. It covers the vast majority of characters and symbols you'll need, and it's the modern default.
Is the title tag the same as an h1?
No. <title> lives in <head> and shows up in the browser tab and search results, never in the page body. <h1> is visible content inside <body>, the page's main heading. A page needs both, and they can say the same thing, but they're different tags with different jobs.
