The <head> & <title> elements
The <head> tag holds information about a page that isn’t shown in the page itself: its title, character set, description, stylesheets and scripts. The <title> tag, which every page needs exactly one of inside the head, sets the text shown in the browser tab, in bookmarks and as the clickable headline in search results.
Last updated: October 3, 2026
Quick facts
| Category | <head>: none (it’s the first child of <html>). <title>: metadata content |
| Content model | <head>: metadata content, including exactly one <title>. <title>: text only |
| Tag omission | <head> tags can technically be omitted (the browser adds them), but writing them is best practice. <title> needs both tags |
| Permitted parents | <head>: <html>, as its first child. <title>: A <head> element |
| DOM interfaces | HTMLHeadElement, HTMLTitleElement |
Syntax
Live example
Edit the code below and watch the preview update instantly.
Attributes
| Attribute | Description |
|---|---|
| — | Both elements accept only the global attributes. The old profile attribute on <head> is obsolete. |
Common examples
A complete head for a modern page
Charset first, then viewport, title and description — the essentials every page needs.
Good title patterns
Put the most specific words first and your brand last.
Changing the title with JavaScript
Apps can update the tab title to show new messages or the current step.
<title> vs og:title
The <title> is used in the browser tab, bookmarks and usually as the blue link in Google results. The og:title meta tag is used when the page is shared on social networks and messaging apps.
They can be the same, but they don’t have to be: a search title is often keyword-focused (“HTML Cheat Sheet – All Tags with Examples”), while a social title can be more conversational (“Every HTML tag on one page”). If og:title is missing, most platforms fall back to the <title>.
| <title> | og:title | |
|---|---|---|
| Shown in | Browser tab, Google results | Social & chat previews |
| Required | Yes | No (recommended) |
| Style | Keyword-focused | Click-friendly |
Common mistakes to avoid
- The same title on every page. Each page needs its own title that describes that page.
- Titles that are too long. Google cuts them off around 60 characters; put the important words first.
- Visible content in the head. Text, images or headings in the
<head>are moved into the body by the browser and can break the page. - Keyword stuffing. “Shoes, Cheap Shoes, Buy Shoes” looks like spam and rarely gets clicked.
Accessibility & SEO tips
- Screen readers announce the title when a page opens, so it should tell visitors where they are.
- Google sometimes rewrites titles that are vague or stuffed with keywords — a clear, honest title is more likely to be shown as written.
- On WordPress, SEO plugins such as Yoast let you set a search title separately from the page heading.
Browser support
Supported in every browser, including Chrome, Edge, Firefox, Safari and their mobile versions — it has been part of HTML since the very first versions.
Tutorial: How to link CSS to HTML