What are heading tags? How can you get one for free? Well, heading tags are always free, but for your users, they are seen as one of the most valuable parts of your website design.
Heading tags inform users about page organization, structure, and help classify content. They give clues to what is to follow in the paragraph below. They enhance skimming, and most importantly, they help your visitors to complete the desired task quickly.
A Heading Example
Heading tags should be used as often as possible. A perfect example is to how I just used it in this paragraph. Before reading this paragraph readers know it’s an example of how heading tags work. It’s a basic example. Go crazy with heading tags, and treat them as if they were free.
Here is a example of ROI Communication that has used them for every paragraph.
Are there too many headings used here? No way! It’s a perfect example to show how easy skimming can be made. Too much is when there is nothing in between the heading tags.
How To Code Heading Tags
Heading tags are commonly not used, abused, and misunderstood. When writing online think outline. Your content should be in outline format, even blog posts like this, and the easiest way to do this is by using heading tags. Reading this page the logo/title of this site is H1, my page title is H2, and my paragraph headers are H3 tags. It’s consistent throughout my site, which makes for easy skimmy, and also offers a consistent visual clues to content value.
Ranked #8 for top content on this site during the year 2009, here is my Heading Tag How To post. Are you using heading tags on your website? For me, after learning how to use them, they became one of the most important tools I ever had for building websites.
ariel (1)
Chris (1)
Curtis (1)
Another case where they are used is in screen readers: people who can’t see the screen rely on these to read out the content audibly, and they use the tags rather than the styling to determine what’s a header.
what should be size of headers in sites and blogs
It all depends on the site. Usually, h1 is largest, and then work your way down in size.
That they in the end may be rendered the same – or that it’s possible to render a paragraph the same way – is beside the point, making documents with a logical structure is good!
Those are great tips the easier you make it on the user the more they will get out of it.
We run a free web design lesson for local business owners and we took a look through this post and a lot of my students found it very useful and a real eye opener!
Thanks for sharing.
Great post about heading tag
Very cool! I just bookmarked it too so I look forward to seeing more