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 beacause they are big - they look important.

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. The other one is simply a font at 40px but contains no heading references.

Headings in a document 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 all the way down to h6. 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. The <H> tag allows a person to better understand the content within that section.