Every HTML page has two big parts: the <head> and the <body>. The body is the part you see — text, images, buttons, all of it. The head is the part you don’t see. Nothing inside it is drawn on the screen. So why does it matter? Because the head is where you tell the browser, search engines, and social networks how to treat your page: what character encoding to use, what title to show in the tab, how to scale on a phone, what summary to display in Google, and what image to show when someone shares your link.
In other words, the head is small but it does a lot of heavy lifting. A page with a sloppy head can render with broken characters, look terrible on mobile, or show an ugly preview when shared — even if the body is perfect. Let’s go through exactly what belongs in there.
Where the head lives
You met the overall shape of a document back in the document structure article. As a quick refresher, the head sits at the top, right after the opening <html> tag and before the <body>:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- everything here is invisible -->
</head>
<body>
<!-- everything here is visible -->
</body>
</html>The browser reads the head first, before it starts drawing the page. That order matters: things like the character encoding and the viewport need to be known before any content appears, which is why they go near the top of the head.
The title
The one tag in the head that the user actually sees — sort of — is <title>:
<head>
<title>Pricing — ACY Partner Indonesia</title>
</head>The title doesn’t appear on the page itself, but it shows up in the browser tab, in your bookmarks, in browser history, and — importantly — as the big clickable headline in Google search results. So it’s worth writing properly. A good title is descriptive and specific: “Pricing — ACY Partner Indonesia” tells you exactly what the page is, while “Untitled Document” or “Home” tells you nothing.
Put the page topic first
Search engines and tab bars cut off long titles, so lead with the most specific part. “Pricing — ACY Partner Indonesia” reads better in a narrow tab than “ACY Partner Indonesia — Pricing,” because the part that distinguishes this page from every other page on the site comes first. Keep titles roughly under 60 characters so they don’t get truncated in search results.
Every page should have exactly one <title>, and each page’s title should be unique. Reusing the same title on every page is one of the most common SEO mistakes there is.
Meta tags
Most of the head is made up of <meta> tags. A meta tag is a self-closing element that carries a piece of metadata — data about your page rather than content for it. They don’t display anything; they just hand the browser or other tools a fact. There are a handful you’ll use on nearly every page.
The character encoding
This is the single most important meta tag, and it should be the very first thing in your head:
<head>
<meta charset="UTF-8" />
<title>My Page</title>
</head>charset tells the browser which character encoding the file uses. UTF-8 is the universal answer — it covers every character in every language, plus emoji, accents, currency symbols, and more. Without it (or with the wrong value), accented letters and special characters can turn into garbled symbols like é instead of é.
charset comes first — and there's a reason
Put <meta charset="UTF-8" /> as the first line inside <head>, before the title or anything else. The browser needs to know the encoding before it reads any text, including the title. The spec actually requires the charset declaration to appear within the first 1024 bytes of the document. If you put it after a long title full of special characters, you can get a flash of broken text. First line in the head — make it a habit.
The viewport
If you build a page without this tag, it will look fine on a desktop and then appear tiny and zoomed-out on a phone, as if someone shrank a desktop page to fit. This one line fixes that:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />Here’s what it’s saying. width=device-width tells the browser to make the page as wide as the actual device screen, instead of pretending to be a wide desktop and scaling down. initial-scale=1.0 sets the starting zoom level to 100%, so the page isn’t zoomed in or out when it loads. Together they’re what make a page responsive-ready — your text is readable and your layout fits the screen on any device.
No viewport tag = a broken-looking mobile site
This is not optional in modern web development. Leave the viewport tag out and your site will be barely usable on phones — tiny text, horizontal scrolling, the works — no matter how good your CSS is. Copy this exact line into every page’s head. It’s the foundation that responsive design is built on.
This tag pairs directly with the CSS responsive techniques you’ll learn later. The viewport tag prepares the page; the CSS then adapts the layout to fit.
The description
The description is the summary search engines often show under your page’s title in the results:
<meta name="description" content="Compare ACY Partner Indonesia pricing plans. Transparent monthly rates, no hidden fees, and a plan for every team size." />It doesn’t appear on the page, and it isn’t a direct ranking factor, but it heavily influences whether people click your result. A clear, inviting description that matches what the searcher wants is the difference between a click and a scroll-past. Aim for roughly 150–160 characters, write it for humans rather than stuffing keywords, and give each page its own.
Other meta tags you’ll see
A few more turn up regularly:
<meta name="author" content="ACY Partner Indonesia" />
<meta name="robots" content="index, follow" />
<meta http-equiv="refresh" content="5; url=https://acy-partner.com" />authornames who created the page. Informational; no big SEO weight.robotstells search engines whether to index this page (index) and follow its links (follow). The default is to do both, so you only really need this when you want the opposite —noindexto keep a page out of search results.http-equiv="refresh"auto-redirects or reloads after a number of seconds. It works, but a real server-side redirect is better for SEO — treat this one as a last resort.
Notice that name meta tags use name="..." content="...", while a few special ones like the refresh use http-equiv="...". The charset one is its own shorthand. You don’t need to memorize the categories — just recognize the shapes.
Social media previews (Open Graph)
Ever noticed how pasting a link into WhatsApp, Facebook, or LinkedIn produces a nice card with a title, a description, and an image? That doesn’t happen by magic — it comes from a special family of meta tags called Open Graph, written with a property attribute that starts with og::
<meta property="og:title" content="Pricing — ACY Partner Indonesia" />
<meta property="og:description" content="Transparent monthly plans for every team size." />
<meta property="og:image" content="https://acy-partner.com/preview.jpg" />
<meta property="og:url" content="https://acy-partner.com/pricing" />
<meta property="og:type" content="website" />When someone shares your link, the social platform reads these tags and builds the preview card from them. og:image is the one people notice most — it’s the picture in the card, and a missing or ugly one makes a shared link look untrustworthy. Twitter/X has its own similar set (twitter:card, twitter:image) but will fall back to Open Graph if those aren’t present.
og: tags use property, not name
Open Graph tags break the usual pattern: they use property="og:title" instead of name="...". That’s because Open Graph is a separate standard (originally from Facebook), not part of core HTML meta. If you write name="og:title" by mistake, the preview won’t pick it up. Match the property= spelling exactly.
You don’t need Open Graph on a personal practice page, but for anything public — a business site, a blog, a product page — these tags are what make your links look professional when shared. They’re well worth the five lines.
Other things that live in the head
Two more tags belong to the head, even though they aren’t <meta>:
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" href="styles.css" />
<title>My Page</title>
</head><link rel="stylesheet">is how you attach an external CSS file — this is the standard way to give a page its styling, and it goes in the head so styles load before the body is drawn.<link rel="icon">sets the favicon, the little icon shown in the browser tab next to the title.
You can also drop <style> blocks and <script> tags in the head, though scripts are often placed at the end of the body instead so they don’t block the page from rendering. The point to take away: the head is the staging area where the page’s settings, styles, and identity are declared before any visible content appears.
A complete, well-formed head
Putting it all together, here’s a head you could ship on a real page — the order is deliberate, with charset first:
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pricing — ACY Partner Indonesia</title>
<meta name="description" content="Transparent monthly plans for every team size, with no hidden fees." />
<meta property="og:title" content="Pricing — ACY Partner Indonesia" />
<meta property="og:description" content="Transparent monthly plans for every team size." />
<meta property="og:image" content="https://acy-partner.com/preview.jpg" />
<link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" href="styles.css" />
</head>That covers the essentials: correct encoding, a mobile-ready viewport, a useful title and description, a clean social preview, an icon, and your styles. Copy this as a starting template and adjust the text per page.
Wrapping up
The head is invisible, but it’s where a lot of a page’s quality is decided. Here’s what to carry forward:
- The
<head>holds settings and metadata; nothing in it is drawn on the page, but it controls how the page is treated. <title>is the tab name and the headline in search results — make it unique and descriptive.<meta charset="UTF-8" />comes first and prevents garbled characters.<meta name="viewport" ...>is mandatory for the page to look right on phones — never skip it.<meta name="description">is your pitch in search results; write it for humans.- Open Graph (
og:) tags control the preview card when your link is shared. <link>tags in the head attach your stylesheet and favicon.
Get the head right once and you can reuse most of it across every page, tweaking only the title, description, and social tags. It’s a small block of code that quietly makes the difference between a page that works everywhere and one that breaks in surprising ways. Next, with the structural and meta foundations in place, you can dive deeper into the visible content — like working with images in depth.
