Learn how to use the HTML <title> element.
The HTML <title> element represents your website’s page title.
To see the page title of any website you’re on, move your mouse to the browser page tab and hold your mouse still over it for a few seconds, then you’ll see the full page title pop up.
Here’s me doing that on YouTube:
To create a title element, we use opening and closing <title> tags, and put text inside it:
<title>Document page title</title>The <title> element must only contain text!
The <title> element lives inside your documents <head> element:
<!DOCTYPE html>
<html>
<head>
<title>Document page title</title>
</head>
<body>
...
</body>
</html><title> affects your SEO
<title> is one of the most important elements for SEO (Search Engine Optimization), because the search engine’s algorithms use your page title (among other things) to determine your ranking in the search results.
For SEO, and UX purposes, the text you add inside the <title> element should be as descriptive of your page as possible. However, don’t use more than a total of 60 characters (including spaces between words), or the search engines won’t be able to display your full title.
Also, don’t just cram a list of keywords in there, assuming that it’s going to help your SEO. Instead, write a descriptive title, that includes your primary keyword(s) for that page.
Here’s an example of a descriptive page title:
<title>How to build a simple website with HTML, CSS, and JavaScript</title>The title above is fluid, descriptive, and includes 4 primary keywords for a tutorial website like TechStacker:
- website
- HTML
- CSS
- JavaScript
A common pattern you see on the web is that websites will use their pages’ main heading text element <h1>Main heading</h1> as their page title also. Some CMSs like WordPress will automatically do this for you. This approach generally works well, unless you need to differentiate between your main headings and page title descriptions — for whatever reason.
