<title> gives a document its title, normally shown in a browser tab or window. It belongs in head, contains text, and is different from the visible page heading.
Observe the document title
The preview’s script displays document.title because an embedded frame has no separate visible browser tab. Open the copied document directly to see the tab title.
HTML and CSS
HTML
<h1>Watering herbs</h1>
<p id="title-value"></p>
<script>
document.querySelector("#title-value").textContent = "Document title: " + document.title;
</script>CSS
Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
Text and escaping
Use one descriptive title per ordinary standalone document. HTML tags inside title are treated as text, not heading or emphasis markup. Escape special characters when generating titles from data, including ampersands and anything that could close the title element.
Make the title distinguish this page from neighboring pages. A consistent site suffix can help, but repeated generic titles make tabs and bookmarks difficult to recognize.
Search and accessibility
Search systems may build title links from title and other page signals; a title is not a guarantee of the exact search presentation. Google does not prescribe a rigid character limit. Write the useful topic early and keep it accurate rather than packing in keywords.
Change only the title in the editor and compare the displayed title value with the unchanged h1. Both should describe the same subject, but they need not have identical wording.
Sources and browser support
MDN: title describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.
Google: supported metadata and title links explain search behavior without guaranteeing the displayed result.