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.
Avoid skipping heading levels when structuring your document, as it confuses screen readers. For example, after using an <h2> in your code, the next heading used should be either <h2> or <h3>. If you need a heading to look bigger or smaller to match a specific style, use CSS to override the default size (see below).
Here are two headings beacause they are big - they look important.
Liverpool Waterfront
and
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.