HTML Headings

HTML provides six types of headings to display titles or subtitles in a page. They are

  • Heading 1
  • Heading 2
  • Heading 3
  • Heading 4
  • Heading 5
  • Heading 6

Heading 1 is superior to Heading 2, Heading 2 is superior to Heading 3, and so on, in the hierarchy of titles. The superiority is displayed in terms of font-weight and/or font-size CSS properties.

Tags

The following table provides the tags used for different types of headings in HTML.

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

Examples

In the following example, we display the six headings in a HTML file.

index.html

<!DOCTYPE html>
<html lang="en">
<body>
  <h1>This is Heading 1</h1>
  <h2>This is Heading 2</h2>
  <h3>This is Heading 3</h3>
  <h4>This is Heading 4</h4>
  <h5>This is Heading 5</h5>
  <h6>This is Heading 6</h6>
</body>
</html>

The following is an example article that demonstrates the usage of different headings in a HTML web page.

index.html

<!DOCTYPE html>
<html>
  <body>
    <h1>Programming Languages</h1>
    <p>Many programming languages have been developed over time to address specific challenges.</p>
    <h2>Server Side Programming Languages</h2>
    <p>Some of the server side programming lanagues are Java, PHP, etc.</p>
    <h3>Java</h3>
    <p>Java is the most used programming language on Server side.</p>
    <h2>Client Side Programming Languages</h2>
    <p>Some of the client side programming lanagues are JavaScript, etc.</p>
    <h3>JavaScript</h3>
    <p>JavaScript is a scripting language used to make dynamic pages.</p>
  </body>
</html>

HTML Heading Tutorials

The following tutorials explain each of the HTML Heading in detail with examples. Also, we will learn the default styles of these headings, and how to apply specific styling using CSS.

Conclusion

In this HTML Tutorial, we learned about HTML Headings, the tags used for these Headings, with examples.