Home » Tutorials » HTML » Headings

Headings

Arguably the most powerful element in the HTML arsenal, is the various HTML heading tags. Not to be confused with the head tag, heading tags are organized in a hierarchy where the lowest number is the more important tag, which is generally demonstrated by font sizes and margins. A heading tag is written with an opening <h1> and a closing </h1> with content in between the opening and closing tag.

You might have noticed I have said headings, but have only referred to one. Well, there are actually h1-h6 headings. Let’s see how the tags show up in a browser.

Example
<html>
    <head>
        <title>HTML Head Tag - Tutorial and Reference</title>
    </head>
    <body>
        <h1> I am very very important </h1>
        <h2> I am very important </h2>
        <h3> I am important </h3>
        <h4> I am kind of important </h4>
        <h5> I am somewhere below important </h5>
        <h6> I am near the importance and size of a paragraph tag </h6>
    </body>
</html>
Result

I am very very important

I am very important

I am important

I am kind of important

I am somewhere below important
I am near the importance and size of a paragraph tag

The vast majority of web sites will stop after the <h4> tags because they are virtually useless. One practical rule is to use the h1 tag once and only once to signify the most important content. Try to make sure your value of your content is truly portrayed correctly by using the right heading tag. While evaluating your web page, search engines give extra weight to the heading tags based on the importance of each tag. It makes a lot of sense, right? When writing a paper, you title(s) or headings will be a shortened and accurate representation of the content following the title.

Another important rule is to stack your headings in an appropriate order. You should never have an h3 directly following an h1. Why? Well, you just defeated the purpose of the h2 tag. You shouldn’t want to have a hole in your hierarchy. Also, visually impaired users that read with a screen reader cannot see the tag following the “hole”. Always structure your tags to have the next larger tag before it. Of course, you can have an h2 tag with a paragraph following it and then placing a h3 tag. You just have to be certain that your tags follow the hierarchy with no gaps.

Browsers already have a default style for each one of the headings. I have superimposed styling on each one, but typically, you will see that the majority of these headings have a proportional margin and font size. Also, they are considered block elements, which means they will take up a whole “line” in your document forcing the following content to be positioned below them. However, you can always modify them using CSS, but we’ll get to that later.

References



Link/cite this page

If you use any of the content on this page in your own work, please use the code below to cite this page as the source of the content.

  • Stewart, Suzy. "Headings". After Hours Programming. Accessed on March 17, 2024. https://www.afterhoursprogramming.com/tutorial/html/headings/.

  • Stewart, Suzy. "Headings". After Hours Programming, https://www.afterhoursprogramming.com/tutorial/html/headings/. Accessed 17 March, 2024.

  • Stewart, Suzy. Headings. After Hours Programming. Retrieved from https://www.afterhoursprogramming.com/tutorial/html/headings/.



0 thoughts on “Headings”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.