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 in 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 in 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
<!DOCTYPE html>
<html>
<head>
<title>HTML is fun 🙂 </title>
<style type="text/css">
p{
width: 400px;
}
</style>
</head>
<body>
<h1>This is h1 header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h2>This is h2 header</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h3>This is h3 header</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h4>This is h4 header</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h5>This is h5 header</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h6>This is h6 header</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>Heading Styles in HTML
Headers by default has 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
<!DOCTYPE html>
<html>
<head>
<title>HTML is fun 🙂 </title>
</head>
<body>
<h1 style="font-size: 20px;">This is h1 header</h1>
<h2>This is h2 header</h2>
</body>
</html>Here you can see we’ve used <h1> element for the first header but then because we’ve used the font-size property (which is a CSS property to change the size of a text content) we can see that the size of the <h1> element is smaller compared to the <h2> header.
Example: heading color in HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML is fun 🙂 </title>
</head>
<body>
<h1 style="color: red; background: blue;">This is h1 header</h1>
<h2>This is h2 header</h2>
</body>
</html>Note: don’t worry if these CSS properties are unfamiliar and looks 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
<!DOCTYPE html>
<html>
<head>
<title>HTML is fun 🙂 </title>
<style type="text/css">
p{
width: 400px;
}
</style>
</head>
<body>
<h1 >This is h1 header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h2>This is h2 header</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h3>This is h3 header</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>