Semantic structure is the foundation for accessible markup, as they properly convey information to the user through the accessibility API via screen readers.
This article is about the proper usage of the HTML tag <title>, as this is the first thing a screen reader user will perceive.
Users who are blind cannot glance quickly at the web page's content to see what the page is about. Therefore, they rely on the page title to provide this information.
The <title> element in HTML is designed to provide a short piece of text and is often the same as the first heading of the page. The <title> is used in cases such as window title bars, bookmark lists or result lists from search services.
Having several tabs at once open in the browser, the title of the page displays in its tab, making it easy to identify open pages and to quickly switch between them.
Page titles also improve search engine optimization (SEO), as they are used when displaying search results to make the content of the page quickly recognizable to users going through those results.
Best practices
- add a title of text to each page (when the web address changes, the page title should change too)
- only one title per page
-
meaningful and unique text (not "Section one", but
<title>"Interstellar" (Christopher Nolan's Best Movies, Part 1)</title>) - short and descriptive: only 60 to 80 characters are displayed in many window titles. You can provide more information in the top level heading of the document!
- If the page is a result of an action like a search, add that action to the title, e.g.
<title>Nolan's Best Movies - Search Result</title>
Image source: WAI Tips: Writing for Web Accessibility
Read more about the HTML <title> tag in W3 WCAG2.1 Success Criterion Understanding Success Criterion 2.4.2: Page Titled.
Top comments (0)