Similarities and differences between headings in print and on websites
A designer’s responsibility is to communicate information. There are many tools they can use for this beyond just the words on the page. In this post I’ll be addressing the use of heading tags to enhance design and improve understanding.
What is a heading?
A heading is text that is separated from the body text. The main heading is the first design element a reader sees, then subheadings provide additional information. Designers style headings to distinguish them from simple paragraphs. Headings are generally larger in size and bolder than the main text, and the main heading is usually larger than a subhead.
Benefits of headings in layout and design
Headings:
- Enhance understanding. By organizing content in a design, it’s possible to make information easier to understand. Headings indicate to the reader what the succeeding section is about. They identify the main points and prepare the reader for what is ahead.
- Lead the reader through the page. Headings are akin to parts of an outline. They mark sections and subsections, keeping the text focused and organized.
- Improve scan-ability. Headings allow readers to understand the main points more quickly. Most people scan a page before reading it from top to bottom. The reader may be in a hurry and need only the main points. Others scan to determine if they should take the time to read it from beginning to end.
- Add structure. By visually styling headings, designers can help readers make sense of the information by assessing relative importance.
The benefits above apply to both print and digital design. However, this is where the similarities end. As long as the reader can distinguish a heading from a paragraph, a print designer’s job is done. However, on a website, there is more that needs to be done to qualify text as a heading. This is because humans are not the only ones reading.
Heading tags satisfy the bots
A web crawler is a bot operated by search engines that gathers information from across the internet. Bots index content by parsing code, which becomes part of a large database that can be accessed when someone enters a search query.
Bots don’t read like humans. They don’t just read the words on the page, they also evaluate the importance of every bit of content by reading the source code. Unlike in print, just because type is larger than regular text, or in bold, that doesn’t make it a heading. For Google to read text as a heading, it needs to be coded as a heading.
To do this, we apply heading tags to specific text. This allows Google to determine what your site is about. Words or phrases in a heading are deemed more important than words in regular text and will influence your search engine results.
Specifying heading tags
In HTML, heading tags are used to identify the headings on a page. The title of the page is an H1, and there is only one H1 per page. Lower-order headings can be used as often as desired, but should form a coherent hierarchy.
Whether you’re simply writing the content or building the page, understanding and properly using heading tags can affect your search engine rankings. Keep in mind that keywords work hand-in-hand with heading tags to optimize your website so that search engines are able to do their job—matching up people who need something with those who can meet their needs.
If you’re interested in improving the effectiveness of your website, an SEO evaluation is a good place to start. Learn more about our website design and development services or give us a call at 518.392.0846.