How to use the header tag in HTML

problem

In web pages, we often see headlines. That is a one line text in big size that appears as a heading. For example, the title of an article. In this post we will see how to put headers on a web page.

SOLUTION

Using the headers tags. Even though we can say it’s one tag, it has 6 variations in size. The tag we will see first is the <h1>. That’s used for the primary header, it has an opening <h1> and closing tag </h1>.

headers.html

				
					<h1>Example header 1</h1>

output

smaller size header tags

If we wish to use a header of a smaller size we can do so by using one of the followings:

<h2>
<h3>
<h4>
<h5>
<h6>

For example, put all together so we can see their difference in size:

headers.html

				
					<h1>Example header 1</h1>
<h2>Example header 2</h2>
<h3>Example header 3</h3>
<h4>Example header 4</h4>
<h5>Example header 5</h5>
<h6>Example header 6</h6>

output

We have available 6 different sizes of header. <h1> is the biggest and the smallest is the <h6> one. By default their sizes are predefined; but that can be changed by using a CSS rule (font-size).

Note: Using a single h1 is considered best practice. I.e avoid more than one on the same page.
Also use them in their ascending order: e.g. h2, h3, h4 . Not h3, h2, h4 . [1]

conclusion

In this post we saw how to use the <h1> to <h6> tags that are for headings.

References:

[1] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements

Share it!

Ellion

Professional IT consultant, writer, programmer enthusiast interested in all sorts of coding.
Eats all cookies 🍪

Tagged user-interface

0 0 votes

Article Rating