What is the use of HTML Heading Tags
2021-10-12 12:34 · 4 min read
Do you know?
HTML provides not only plain paragraph tags, but six separate header tags to indicate headings of various sizes and thicknesses. Enumerated as heading 1 through heading 6, heading 1 has the largest and thickest text while heading 6 is the smallest and thinnest, down to the paragraph level. This topic details the proper usage of these tags.
Headings can be used to describe the topic they precede and they are defined with the <h1> to <h6> tags. Headings support all the global attributes.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6> <h1> defines the most important heading.
<h6> defines the least important heading.
Correct structure matters
The HTML Headings
In general, an article should have one h1 element for the main title followed by h2 subtitles – going down a layer if necessary. If there are h1 elements on a higher level they shouldn't be used to describe any lower-level content.
Example
Here is a simple example of Headings.
<h1>element content</h1>Note: Search engines and other user agents usually index page content based on heading elements, for example to create a table of contents, so using the correct structure for headings is important
Note: Don't use headings to make text BIG or bold. heading is just to represent heading. to make text bold or increase size use css font-weight and font-size.
Learn more about CSS here
HTML Horizontal Rules (Hr)
The <hr> tag is known as a thematic break in an HTML page, and is most often displayed as a horizontal rule. The <hr> element is used to separate content (or define a change) in an HTML page:
Info: By default heading have some white space (a margin) before and after a heading.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<!-- some text -->
<p>This is some text.</p>
<!-- Horizontal Rules example -->
<hr>
<h2>This is heading 2</h2>
<hr>
</body>
</html>
