HTML h1 to h6 Tags

How these tags can help screen readers

We all understand what a title is, but do we.

Wikipedia for example states a title of a book, or any other published text or work of art, is a name for the work which is usually chosen by the author. A title can be used to identify the work, to place it in context, to convey a minimal summary of its contents, and to pique the reader's curiosity.

Equally a title might be a heading like on this page.

Technically the title here is heading defined as <h1>

These tags range from H1 to H6 in a hiracrcial order. This is useful for search engines but visually it doesn't mean much.

Here are two headings.

Liverpool Waterfront


Liverpool Waterfront

Visually they look similar but only the first one is a <h1> tag. That tag allows us to understand that it is the most important heading of the page and gives us textural clues to content below.

They do have another function. If <h1> is the first and only <h1> tag on a page, <h2> would then be a sub-heading and so on. However for screen readers they can be used as stepping stones or direction indicators allowing the user to have a better understanding of a page.

So for example on a home page on a website

Liverpool Waterfront (h1 tag)

A website exploring the history of the waterfront (h2 tag)  

Timelines (h3 tag)

Buildings (h3 tag)

Famous Events (h3 tag)

So very quickly you can see a skeleton in an order appearing - essentially this is one of the elements that screen readers can employ to help the user understand the text.

Make A Selection


Paletton For Color Schemes

UserWays Accessibility Widget

Creating Web Experiences For Disabled People

Interaction With The Screen

Share this page
Contact Me
Email This Page
Print This Page