HTML Tutorial
HTML Page Title
The title tag names the tab, bookmarks, and search results. It is not the same as h1.
title lives in the head
The <title> element sits in <head>. It does not appear in the page body. The browser uses it as the tab label. Bookmarks store it. Search engines often show it as the clickable headline in a result list.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lab scores — Week 3</title>
</head>
<body>
<h1>Week 3 lab scores</h1>
<p>The tab says “Lab scores — Week 3”. The page heading can be a little longer.</p>
</body>
</html>Open this example in /html/try and look at the preview tab or the document title. Changing<title> does not change the <h1> on the page.
title is not h1
<h1> is the main heading in the body. Visitors read it as the start of the article.<title> is metadata for the chrome around the page. They should agree, but they do not have to be the same string.
| title | h1 | |
|---|---|---|
| Where | <head> | <body> |
| Visible on the page? | No (tab, bookmarks, results) | Yes |
| Job | Name this document among others | Introduce this document’s content |
| Typical extra | Site name, short context | No site name required |
Example
<head>
<title>HTML Page Title - StudyGrid</title>
</head>
<body>
<h1>HTML Page Title</h1>
<p>
The title includes the site name because tabs from many sites sit in one strip.
The h1 does not repeat “StudyGrid”; the reader is already here.
</p>
</body>Make each title unique
Every URL should have its own title. Ten pages named “Untitled” or “Home” are useless in a tab strip and in search. Put the specific topic first, then the site if you add a brand.
- Good:
HTML Tables - StudyGrid - Good:
Week 3 lab scores | East Lab - Weak:
Welcomeon every page - Weak:
StudyGridwith no chapter name
Duplicate titles make it hard to tell tabs apart and they waste a signal search engines use to tell pages apart. If two documents share a topic, add the difference: “HTML Tables” vs “HTML Tables: colspan”.
Keep the length usable
Tabs clip. Search results clip. Aim for a title that is complete in about 50 to 60 characters. Front-load the words that distinguish the page. If you must cut, drop the slogan, not the topic.
Example
<!-- Clear and short enough for a tab -->
<title>HTML Lists - StudyGrid</title>
<!-- So long that the unique part may be cut off -->
<title>StudyGrid free beginner web tutorial chapter about HTML lists including ul ol and dl with nested examples</title>There is no hard HTML limit. There is a practical limit: what a person can read on a tab. Write for that, not for stuffing extra keywords.
One title per document
Use a single <title> in <head>. If more than one is present, browsers pick one (often the first) and ignore the rest. Do not put <title> in the body. That is invalid and unreliable.
Saving a file as page.html does not set the tab name. The file name and the title tag are separate. Name the file for you; name the title for the reader.
A small writing pattern
- Start with the topic the reader searched for or clicked.
- Add a short qualifier if the topic is common (Week 3, beginner, reference).
- Add the site name at the end if the tab might sit next to other sites.
That pattern matches this tutorial: HTML Page Title - StudyGrid. The heading in the article can then stay focused on the lesson.
Worked examples
The short listings above show the tag in isolation. These pages use the same markup on documents you would actually publish: a lab report, a clinic form, a timetable, a weather card.
HTML does not calculate. It names the pieces so a browser, a screen reader, and a search engine can tell a heading from a paragraph. The numbers below are classroom values — the same Ohm, pH, and pulse figures as the C track — now sitting in real page structure.
Preview them in the HTML editor at /html/try. Change a heading or a number and watch the page, not a print log.
Physics
Tab name versus page heading
title lives in the head. It names the tab, the bookmark, and the search-result line. h1 lives in the body. Visitors read h1 first on the page.
A good pattern: title is “Drop test · Riverside lab”. h1 is “Drop test”. They agree, but title can add the site name.
Example
<h1>Drop test</h1>
<p>The tab should read something like “Drop test · Riverside lab”, not only “Untitled”.</p>Biology
A clinic page people can bookmark
Bookmarks store the title. “Hours” is a weak bookmark when you have twelve clinic pages. “Riverside clinic hours” is the one you can find later.
Example
<h1>Opening hours</h1>
<p>Bookmark name comes from <code><title></code>, not from this h1.</p>