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>.
<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:
<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).
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 🍪