A small piece of HTML can change what a visitor sees or how the browser understands a page. In this lesson, you will explore titles for homepages vs article pages using a short example that you can inspect and change.
The Idea in Plain English
The title element is the page name that normally appears on its browser tab. A homepage usually identifies the website and its purpose; an article title should identify the particular topic before or alongside the site name.
You can test this using a small local HTML file. Change one part at a time and check the result in the browser before adding more code.
A Working Example
Read the sample once before copying it. Notice the element names and attribute values, then compare them with the explanation below.
<head>
<meta charset="utf-8">
<title>Build Your First Robot | Science Club</title>
</head>
<body>
<h1>Build Your First Robot</h1>
</body>What Each Part Does
- The meta element supplies machine-readable settings; its name or charset decides which setting.
- The title gives the document a name in tabs and other browser surfaces.
- The h1 identifies the principal page heading.
- charset identifies the character encoding used by the document.
The browser tab shows the title, while the h1 is visible in the page body. They can differ slightly but should describe the same content.
Keep the example small while learning. Once it behaves as expected, try it inside a larger page and make sure the URLs, files and surrounding HTML are correct.
Try It Yourself
Try this next: create one complete head or structured content example focused on HTML Titles for Homepages vs Article Pages, including a working example and an incorrect example to correct. Then inspect the page and explain what changed.
Common Beginner Mistakes
- Using “Home” or “Article” as every page title, or stuffing keywords into it.
- Changing several parts of the example at once, making it difficult to see which part caused a different result.
- Choosing a tag only because its default appearance looks right, without checking whether it describes the content correctly.
Key Takeaways
- The title element is the page name that normally appears on its browser tab. A homepage usually identifies the website and its purpose; an article title should identify the particular topic before or alongside the site name.
- The browser tab shows the title, while the h1 is visible in the page body. They can differ slightly but should describe the same content.
- Test the markup in a browser, and check accessibility and real-world behavior where relevant.