HTML supplies “headers” to organize web content. These headers are codes that indicate, like an outline, the name and level of each section of your webpage. The title of the page is the largest font and is a “Header 1” , designated as <h1> in code. There should only be a single <h1> in each web page. Every section at the next level should be an <h2> and so on.
Headers do a couple of positive things for the website visually, and even more important things for Accessibility and SEO – when the page is being read by machines.
Visual Benefit of Headers
First we know that readers, especially web readers, do a lot of scanning. Rarely do people read an entire page word-for-word. Big blocks of undifferentiated text are mostly skipped, or only lightly scanned. To make it easier for web readers, avoid heavy blocks of text, using headers (and lists) to break the content into separate sections that are easily scannable. Breaking the content into small visual blocks helps readability.
Headers, like an outline or the headers of a document, help the reader understand the structure of the page at a glance. We have learned that larger fonts denote higher level sections and that detail will be found under section headers with smaller fonts. At a glance we can decipher the structure of the document, and this helps with comprehension.
Readability and Comprehension, as presented so far, do not require actual headers. This same effect can be achieved by making larger and smaller bolded text, and this is an error we see on many pages throughout Western’s web presence. But we strongly urge you to use actual <h1> through <h5> codes rather than making up your own classes of headers. First, it’s easier. We have already defined attractive headers for all the templates we provide and using these is as simple as highlighting the text and selecting the level of header (Dreamweaver, WordPress and Drupal all allow this). Second, machines that read your webpages look for the actual <h…> codes in order to understand the structure of your pages. Two kinds of machines you should be trying to assist in this task are screen readers (see Accessibility) and search engines (see SEO below).
Just as headers help the sighted to scan a page, headers also help screen readers to scan a page. Screen readers literally read the webpages aloud to visually impaired folks using them. Since reading aloud is so much slower than reading visually, the screen readers have incorporated lots of tools to allow their users to “scan” the page looking for pertinent content. One such command is the command to read just the Headers, another to read just the links. When the screen reader reads out the header text and header level, the user can understand the structure of the page and jump immediately to the section of interest. If you’ve provided real <h…> codes.
The search engines also look for standard web coding practices to decipher your page. It assumes you are using Headers (<h1>, <h2> etc) to outline your page structure. It will assume that your most important keywords will be found in those headers as well as in the text. Well-structured webpages will always perform better in the SEO stakes.
Using H1 well
Your h1 announces what your page is about – it’s not just a friendly greeting. If you waste your header statement with “Welcome to our site,” you’re not telling the search engine – or your users – anything valuable. Instead tell them why they should be here: “Web Services provides technical assistance for Western’s website developers and website content managers” is a lot more useful than “Welcome to Web Service’s Home Page”.
The search engines will assume that your h1 says the most important thing about what you do. There must be only one h1 on each web page. The h2s through h5s should be used sequentially in the same way that you would use indents in a document outline. Don’t skip from h2 to h4 – you’ll confuse the browser, the search engine, and possibly your reader.