Headers and Paragraphs

Most people got in to the habit of using <font> tags to set the size, colour and style of the font. Then, when CSS started to take over and the <font> tag was depreciated, CSS classes were used instead. Although this works fine, it goes against the intended usage of headers and paragraph styles.

When a search engine reads your page, it gathers content keywords from the text. But how does it know what's more important? It can infer the main content from the <title> and <meta> tags, but it doesn't take any CSS formatting into account. So if you're using CSS to style a piece of text to be used as a header, it doesn't know that. It's much better to style a <h#> tag instead, so that it can derive meaning from there too. This helps the search engine make a lot more sense of the content, and adds value to the indexed text.

On the accessibility side of things, text-only browsers work in a very similar fashion. They can derive meaning and context from text split into headers and paragraphs and display them in different ways to the users. This is most beneficial.

If you want to see how text-readers and search engines 'see' your site, have a look at the WC3 Validator. Using the Advanced Options, check the 'Show Outline' option when validating your site. This splits areas of the page into headers and paragraphs and can help you see in what order your pages are read and broken down into sub-sections.