How To Use Heading Tags In A Web Page

The use of Heading tags in HTML is so important. It’s the way to set up
the headings of your page or parts of your page. Think of them as headlines
or sub-heads of a web document.

There are six Heading tags used to separate text from paragraphs or other
markup such as lists and data tables.

Not sure you know what I mean by “Heading Tags?” Keep reading!!

Whenever you use any Heading tag, make sure you use an end tag, For
example, use

</h4> if your start tag is <h4>.

Tag Name What It Does
<h1> H1 Used at the top of a page – or a part of the page – to designate
most important

copy.

<h2> H2 Used after h1 to designate second most important copy in a page
or a part of a page.
<h3> H3 Used after h2 to designate third most important copy in a page
or a part of a page.
<h4> H4 Used after h3 to designate fourth most important copy in a page
or a part of a page.
<h5> H5 Used after h4 to designate fifth most important copy in a page
or a part of a page.
<h6> H6 Used after h5 to designate sixth most important copy in a page
or a part of a page.

Like all HTML tags, Heading tags are not used for their apparent
size differences. They are only used to provide meaning to your content with
the h1 tag being the most important heading on any page or section in a a
page.

  1. The Heading tags are used to organize content by their order of importance.
    If you use Heading tags (and you really ought to), the h1 tag will
    be above all others.
  2. When using Heading tags, do them in order. That is, don’t skip from an h2
    tag to an h4 tag.
  3. Never use the Heading tags for presentational properties. True, h1 will
    render a larger font then h4, but that is not the purpose of its use. Controlling
    font sizes is handled by CSS. With CSS, you can actually make an h1 tag
    smaller than an h6 tag.

Two Ways To Use Heading Tags

There’s the old way and the new way. Both ways are perfectly fine.

The Old Way

The hallmark of this method is that the h1 element is used only once and it’s
at the top of the page. It signifies the most important content for the entire
page.

The other Heading tags can be used more than once to build a hierarchal
relationship of your copy. For example, take this page that you are reading
now. The Heading tags are used to define an order to the content like this:

  • h1 – Heading Tags
    • h2 – Two Ways To Use Heading Tags
      • h3 – The Old Way
      • h3 – The New Way

Had there been a third way to use headings, I would have used another h3 to
set up my sub-head. But, had the content not been about another way to use
heading tags, I would have started the next section with an h2.

As you can see, Heading tags do a lot to add good semantical structure to
your pages, which is exactly the sole purpose of HTML. Heading tags will help
you make well-formed documents.

The New Way

In this method, the h1 tag can be used, not only at the start of the page,
but at the beginning of any section inside of the page. For example, an h1
tag can be the heading of the page, of a sidebar, and/or of an article
inside of the page.

You’ll
get a better idea of this when you start to do your
Lab assignment, so I won’t elaborate here.

But, like the old way, h2 tags follow h1 tags, and h3 tags follow h2 tag,
and so on.

4 thoughts on “How To Use Heading Tags In A Web Page

  1. Pingback: 4 Tips To Writing Great HTML | Personal, One-On-One, Web Design Training |Joy Of Code

  2. Hi, thank for the post.

    Perhaps you can help me out with the following: Google says that H tags shouldn’t be used for styling text but for structuring the text. Makes sense.

    But, what do I do if I want to style text (like a “further reading” or “side note”) within a post (at the end), but I don’t want to be using inline html or internal css (and I obviously don’t want to use an h tag).

    I would like to make these changes externally, so that I can change the style anytime I want without having to go to every single post or page to do so.

    Would this be possible?

    Thank you.

    • Don’t think I understand your question.

      Can you use around your content and style that?

      Bottom line. Your content will need to be marked up and it sounds like you will need an inline element like . And yes, do not use, inline styling.

      Bud

Leave a Reply

Your email address will not be published. Required fields are marked *

Get Happy And Start Learning HTML Right Now

Do The First Two Lessons For Free!!

Joy Of Code girl happy at her laptop

All Of My Free Web Design Tutorials