HTML Headings

Previous Page Next Page

Using Headings to Organize Content

The structure and hierarchy of the content on a web page are defined by headings.

<h1> through <h6> are the six levels of heading tags available in HTML; the lower the heading level number, the more significant the heading is. the <h6> tag defines the least important heading in the document, while the tag defines the most important heading.

Headings are displayed in a bolder, larger font than regular text by default in browsers. Moreover, headings with <h1> are shown in the largest font, while headings with <h6> are shown in the smallest font.

Example

Try this code »

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

— The output from the previous scenario will look like this:

Note: The built-in style sheets in web browsers automatically add a margin—a space—before and after each heading tag when you set one on a page. To change the browser's default style sheet, use the CSS margin property.

Tip: The CSS font properties make it simple to alter the appearance of HTML heading tags, including their font size, boldness, typeface, etc.

Importance of Headings

HTML headers are an excellent source of information because they draw attention to key points and the document's organization; therefore, make sure to properly optimize them to increase user engagement.
Headings are not the place to make your text appear bold or large. They should only be used to draw attention to the document's headline and outline its structure.
Make excellent use of headings on your website since search engines, like Google, use them to index the content and structure of web pages.
On your webpage, use the <h1> headings as the primary headings, then the <h2> headings, the <h3> headings, and so on.

Tip: Use the <h1> tag to mark the most important heading which is usually at the top of the page. An HTML document generally should have exactly one <h1> heading, followed by the lower-level headings such as <h2>, <h3>, <h4>, and so on.

Previous Page Next Page