6 HTML Headings Every Blogger Should Know

01

of 05

The Benefits of Using HTML Headings

<h1> is the most important heading, and <h6> is the least important heading. Each HTML heading must have a corresponding closing tag, and should only contain heading text. Heading font size and weight usually reflects its importance, but headings can also serve other purposes.

Heading elements should be used to convey the document structure by nesting them correctly. <h2> elements should be below <h1> elements, <h3> elements below <h2> elements, and so on. This structure helps readers quickly skim through a document by navigating its headings.

02

of 05

Heading Tags and Search Engine Optimization

Search engine spiders may promote documents that have correctly sequenced headings, as they can use the headings in their index. They assume that headings are likely to describe the document’s content, so it is useful to include meta keywords from the document’s head section in the document’s headings.

03

of 05

Different Types of HTML Heading Tags

H1 – The most important tag.

The tag is used for the main title of a page. It should appear at the top of the page.

<h1>The most important tag</h1>

H2 – A secondary heading tag.

The tag is used for subheadings. It’s usually used for secondary titles.

<h2>A secondary heading tag</h2>

H3 – A tertiary heading tag.

You can also use the tag for third-level headings. This is typically used when there are multiple subheadings within an article.

<h3>A tertiary heading tag</h3>

H4 – A fourth-level heading tag.

Subheads are used to break up large sections of text into smaller chunks. They are often used as headers for lists, tables, or other blocks of text.

<h4>A fourth-level heading tag</h4>

H5 – A fifth-level heading tag.

You can use subheadings to organize your content by breaking down larger topics into more manageable pieces. This helps readers navigate through your site and find what they need.

<h5>A fifth-level heading tag</h5>

H6 – A sixth-level heading tag.

Subheading tags are used when there is a lot of text in one section. They are usually used with H1 tags.

<h6>A sixth-level heading tag</h6>

04

of 05

How to Use HTML Heading Tags

The <h1> element is the most important heading and should ideally only appear once to proclaim the document heading. Often, this can be a succinct version of the document title. Below that, a number of <h2> headings can proclaim topical headings for long documents. The articles on each topic are organized into headings within <h3> elements, with the actual content appearing in paragraph <p> elements beneath.

Find the steps to add HTML Heading tags

1. Create an HTML document (Tutorial)

2. Within the body section, insert the main document heading

<h1>Document Heading</h1>

3. Next, within the body section, insert a topic heading

<h2>Topic Heading</h2>

4. Now, within the body section, insert some article headings followed by paragraphs containing the article content

<h3>Article Heading</h3>
<p>Article content…</p>
<h3>Article Heading</h3>
<p>Article content…</p>

Finally, add another topic with two more articles

<h2>Topic Heading</h2>
<h3>Article Heading</h3>
<p>Article content...</p>
<h3>Article Heading</h3>
<p>Article content...</p>

Save the HTML document then open it in your web browser to see the headings and document structure

See the Pen HTML heading tags by w3tweaks (@w3tweaks) on CodePen.

The document structure created by the sequenced headings is referred to as the document “outline.” Properly constructed outlines enable a section of the page, such as a single article, to be easily syndicated to another site. The outline for the document is illustrated in the demo above.

05

of 05

Conclusion

HTML Headings are an important part of HTML and can be used to improve the readability of your web page. Heading tags can also help improve your search engine optimization.