The title element names the document for the browser tab and can influence how a search engine labels the result. It is separate from the visible h1 heading.
What You Need to Know
Make each page title specific and readable, such as Recipe | Site Name. Search engines sometimes choose a different search-result title, so this is guidance rather than a guarantee.
Example: See It in Action
This example keeps the idea small. Copy it carefully, then follow the explanation instead of guessing what the browser will do.
If this is only part of a document, place metadata and style elements in the head of a complete HTML page. Keep ordinary visible content in its body.
<head>
<meta charset="utf-8">
<title>Easy Pasta Recipe | Home Kitchen</title>
</head>
<body>
<h1>Easy Pasta Recipe</h1>
</body>Let’s Understand the Example
- The title names the page in the browser tab. It is different from the heading shown on the page.
- The head contains useful page information for the browser, such as its title and character encoding.
- A meta element gives the browser short information about the document. Different attributes control different hints.
- Charset tells the browser how to decode the page text; UTF-8 is the usual choice.
Some of the markup affects the browser tab or page settings rather than appearing as visible text. Check the browser tab and inspector as well as the page itself.
What Should You See?
The browser tab should show “Easy Pasta Recipe | Home Kitchen”. The page itself shows “Easy Pasta Recipe” as a heading; those two labels are allowed to be different.
Open the page and compare what appears in the browser tab with the heading inside the document. Both have different jobs.
Try It Yourself
- Give two pages different titles while keeping their visible headings suitable.
- Save your changes, open or refresh the page, and compare the result with the original example.
- Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.
Common Beginner Mistakes
- Using the same vague title, such as Home, on every page of a website.
- The title in the browser tab and the heading visible in the page are different pieces of information.
Key Takeaways
- The title element names the document for the browser tab and can influence how a search engine labels the result.
- The title names the page in the browser tab. It is different from the heading shown on the page.
- Make each page title specific and readable, such as Recipe | Site Name. Search engines sometimes choose a different search-result title, so this is guidance rather than a guarantee.