What Is the HTML Head Element?
28 August 2026 · 5 min read
In the first article of this series, we looked at the basic skeleton every HTML page is built on: the doctype, the html element, the head and the body. This time, we’ll open up the head element specifically, since it does a surprising amount of quiet, invisible work for such an unassuming part of the page.
None of what lives in the head is visible to a visitor scrolling through your site. That is exactly why it gets overlooked, and exactly why it is worth understanding, because it shapes how your page is represented everywhere except the page itself.
What Actually Lives in the Head
The head element sits between the opening html tag and the body, and it holds metadata, information about the page, rather than content the visitor reads directly.
<head> <meta charset=”UTF-8″> <title>Page Title</title> <meta name=”description” content=”A short summary of the page.”> <link rel=”stylesheet” href=”styles.css”></head>
Each line here has a distinct, specific job, and together they control how the page is read, styled and represented, well before a visitor ever sees a single word of the actual content.
The Elements That Matter Most
The Title
The title element sets the text shown in the browser tab and typically appears as the clickable headline in search results. It is one of the single most important pieces of on-page SEO, which is why this site’s own writing rules cap it at sixty characters, to avoid it being cut off in search listings.
The Meta Description
This is the short summary shown beneath your title in search results. It doesn’t directly affect rankings, but it strongly influences whether someone clicks through, so it deserves real thought rather than being left to whatever text a search engine pulls automatically.
The Character Set
The meta charset declaration tells the browser which character encoding the page uses, almost always UTF-8 on a modern site. Without it, special characters, accents, currency symbols and punctuation like apostrophes can render incorrectly or turn into garbled text.
Stylesheet and Script Links
The head is also where a page typically links to its CSS stylesheets, so the browser knows how to style the content before it appears. Scripts can go here too, though many are placed at the end of the body instead so they don’t delay the visible page from loading.
Why the Head Matters More Than It Looks
- Search engines read the title and meta description to decide how to represent your page in results, directly affecting click-through rates
- AI answer engines and social platforms rely on head metadata, including Open Graph tags, to generate accurate previews when your page is shared or cited
- A missing or incorrect charset declaration can cause visible text rendering problems that have nothing to do with your actual content or design
- Stylesheets linked in the head let a page render with its intended styling from the very first paint, rather than flashing unstyled content briefly first
A Quick Head Checklist
☐ A unique, descriptive title under sixty characters on every page
☐ A written meta description under 160 characters, not left to auto-generate
☐ A UTF-8 character set declaration near the very top of the head
☐ Open Graph and Twitter Card tags for accurate previews when a page is shared
☐ Stylesheets linked in the head, with any non-essential scripts moved to the end of the body
Frequently Asked Questions
Does WordPress handle the head element for me?
Largely, yes, your theme generates most of it automatically, and a good SEO plugin gives you control over the title and meta description for individual pages and posts. It is still worth checking that these are being filled in properly, since a default or missing description is a common, easy-to-fix oversight.
Can the head element affect how fast my page loads?
Yes, particularly if scripts are placed there unnecessarily. A script in the head can block the browser from rendering the page until it has finished loading, which is why performance-conscious sites often move non-essential scripts to the end of the body instead.
What happens if I don’t include a meta description?
Search engines will typically generate one automatically by pulling text from the page itself. This often works reasonably well, but it is unpredictable and rarely as compelling as a description written specifically to encourage a click, so it is worth writing your own rather than leaving it to chance.
Do I need Open Graph tags if I am not active on social media?
It is still worth including them. Open Graph tags control how your page previews when shared anywhere, not just social platforms, including in messaging apps and some AI tools. A page shared without them often displays with a broken or generic preview, which looks unpolished even for an occasional share.
Is the head element the same thing as the head tag in HTML5 semantic layout?
No, and this trips people up. The head element covers page metadata and sits outside the visible content entirely. The semantic header element is different altogether: a visible layout element inside the body, typically used for a site’s banner or introductory content. The similar names are a coincidence worth knowing about.
Want Your Site’s Metadata Checked Properly?
If you would like a second opinion on whether your titles, descriptions and metadata are actually pulling their weight, get in touch for a straightforward conversation with no obligation and no sales pitch.
Browse by topic
Further reading