Informs and engages the UNB community on IT developments and news

The importance of HTML headings

Author: ITS

Posted on Dec 18, 2013

Category: General Interest , Design Desk

When designing a webpage, most put plenty of attention on the content to make it stand out and accessible to all. One important component to this that many people over look, however, are HTML headings.
HTML headings not only help your webpages stand out more but also help readers and those with visual impairment better understand your website.

The next time you’re designing a webpage, keep the following in mind:

• The most important use of HTML headings - Accessibility. Assistive technologies such as, a screen reader, uses the headings to “skip” from heading to heading within the webpage. This provides the end-user a quick way to navigate through the webpage. This principle also applies to end-users that use browser plugins to do the same.

• HTML headings are based on levels of importance – varying from the most important H1 to H6. This not only logically breaks up the content of the page {semantically correct}, but also helps with search rankings.

o The proper document structure will apply a consistent visual flow throughout your pages

• The content section of the page should have a logical structure that starts with a H1 and goes to H6 {if necessary} and doesn’t skip levels

     o There should only be one H1 tag on a page. Usually the need of two H1’s on a page indicates a new content page to be created – due to the content importance / or change of subject.

• The page title of the document should be reflected in the H1 per page {or at the very minimum use the same keywords as the page title}.

     o One global page title should never be used, since each page is unique and should have a unique title & H1

• Never try to style a paragraph to look like a heading – make it a heading. Making a fake heading does not work as needed, the browser, search engine, assistive technology looks at it like regular content with no heading importance.