An H1 or Heading 1 is an HTML tag that is used to display the most important heading of a web page – the Page Heading.
HTML has 6 Heading tags in total. The H1 tag defines the top heading of the page, with the levels H2-6 used for subheadings nested in logical order to structure your text. So any subheadings of your H1 should be marked as H2 tags; subheadings of these H2 headings should be H3 and so on through the levels. It’s important not to miss a level out or to use heading tags to format text that isn’t actually a heading. In practice you rarely need to use the lowest levels H5-6, which are styled using the smallest font, but they are available for that level of structure if it is genuinely required, for example in an official policy document transferred to the web.
Every page should have an H1 and they should only appear once at the top of the page. All of your web pages should have unique page headings because every page should contain unique content. (Note – on the University’s website you should also use Sentence case).
The HTML code for an H1 looks like this:
<h1>Page title displays here</h1>
A good page heading should describe the content of the page in just a few words, so one of the most important reasons to use H1′s properly is for usability purposes:
- When you select the H1 tag the text will automatically be styled so that it is bigger and bolder than the rest of the page’s text (including other headers) and this adds visual appeal and a hierarchy to the page.
- When people are reading online they tend to quickly scan pages for the information they are looking for so your page heading will be the first thing that your audience will read and as such should let them know that they are in the right place and that the content of the page is relevant to them.
- It will help people who are using a screen reader to access your content.
Search Engine Optimisation
The secondary purpose of an H1 tag is that search engines place importance on H1’s in their search algorithms (and – to a diminishing extent – to H2’s, H3’s etc.) Search engines such as Google use Search Spiders to index websites and these pay most attention to the content wrapped in H1 tags.
You can try placing keywords (words that you envisage people will use to search for your page) into your page heading to try and help your search engine position, but only try this if it makes sense to – the main emphasis should be choosing a heading that describes the page’s content.
How to create an H1 title
Most templates that you will use have an element called Heading. These include www Page with Feature Image and www Page with no Feature Image.
Add the text into the Heading element that you want to be the title for your page. The template will then automatically display this text as an H1.
On templates that do not have a dedicated heading element (eg: www Page) you will need to create your own H1 tag. Follow these instructions:
- Create your section and add the www Page template.
- Add a name for this piece of content in the Name field.
- In the Main Body field, enter the text you would like to be your H1.
- Highlight the text using your cursor.
- Go to the Format drop down box just above this field and select Heading 1.
- You will now see the text appear slightly larger and bolder.
- Press the Enter key on your keyboard and continue typing the text to display on the page.
- You can also use the above steps to add subsequent H2’s, H3’s etc… as sub titles to the page.
For further details on how to add heading please see Formatting text in T4 Site Manager on the Web Support Site.
By Dan Lott, University of Exeter Web Designer