In this section, we will learn what headers are and how to use them in an HTML document.

Headers in HTML: What is heading?

Headers in HTML are those elements that we use to create header and sub-headers in an HTML document.

For example, you might have an article on your page that needs a header (a bold text content). Well, this is where we can use the headers element.

Alright, let’s go and see these header elements in details now.

Header Tags in HTML Syntax and Declaration

In short, there are 6 header elements are supported in HTML. These elements are:

<h1>…</h1>

<h2>…</h2>

<h3>…</h3>

<h4>…</h4>

<h5>…</h5>

<h6>…</h6>

Here, the `<h1>` element has the largest and boldest text size! So we usually use this element on top of the page and usually the use of this element happens only once or twice!

After that, if we have sub-headers on the page, we usually use the <h2> and <h3> elements. (Note that the <h2> element renders its text content using larger font sizes compared to the <h3> element)

In short, the <h1> element brings the largest header and as you go along and use other headers <h2>, <h3> etc. the size of the header becomes smaller.

Example: header tag and subheadings in HTML

See the Pen header tag and subheadings in HTML by Omid Dehghan (@odchan1) on CodePen.

Heading Styles in HTML

Headers, by default, have a black color and a bold face. But these are the default style of headers and using CSS, we can easily change their styles.

Note: please check the style attribute section if you’re not familiar with this attribute.

Example: heading style HTML

See the Pen heading style HTML by Omid Dehghan (@odchan1) on CodePen.

Example: heading color in HTML

See the Pen heading color in HTML by Omid Dehghan (@odchan1) on CodePen.

Note: don’t worry if these CSS properties are unfamiliar and look strange to you! In the CSS section, we’ve explained all of them.

Largest Heading Tag in HTML: <h1>

As mentioned before, the <h1> element represents the largest header in HTML. We usually use this header on top of the page in order to render the most important header of the document.

Note: usually we use the <h1> header only once in a document in order to differentiate between the most important header of the page and the rest of headers that may come later in the document!

Example: using <h1> tag in HTML

See the Pen using <h1> tag in HTML by Omid Dehghan (@odchan1) on CodePen.