HTML - Headings

Quiz

HTML headings define the hierarchy (levels) and structure of content on a webpage. They create a visual hierarchy, with the highest-level heading, which is h1, indicating the most important content or the main heading, and lower-level headings like h2, h3, h4, etc. for subtopics.

Reason to use Headings

Headings are crucial for structuring content and providing a clear visual indication of the beginning of new sections or topics. Properly structured headings enhance readability and user experience on websites, ensuring that information is organized and easy to navigate.

Heading Impact on SEO: The well-organized headings help search engines to understand the content structure and indexing.
Highlighting Important Topics: The use of heading tags properly keeps the content readable.

HTML Heading Tags

The headings are defined with headings tags (<h1> to <h6>). It is important to use heading tags to show the content structure on a webpage. HTML has a different level of heading tags. The hierarchy determines the importance of content and aids in creating a clear information flow for both users and search engines.

Example

The following example shows the different levels of the HTML heading −

<!DOCTYPE html>
<html>
  <body>
    <h1>This is Heading 1 (H1 Tag)</h1>
    <h2>This is Heading 2 (H2 Tag)</h2>
    <h3>This is Heading 3 (H3 Tag)</h3>
    <h4>This is Heading 4 (H4 Tag)</h4>
    <h5>This is Heading 5 (H5 Tag)</h5>
    <h6>This is Heading 6 (H6 Tag)</h6>
  </body>
</html>

Hierarchical Structure of Heading Tags

Below is the list according to the hierarchy of the heading tags (most to least significant) −

The <h1> Tag − The top-level heading denotes the main topic or title of the entire page.
The <h2> Tag − Subheadings under <h1> represent major sections related to the main topic. They provide a more specific context to the content.
The <h3> to <h6> Tags − These tags are used for further subsections or nested content within <h2> headings. They offer a deeper level of hierarchy for organizing content within specific sections.

Examples of HTML Headings

In these examples, you will see the usage of all the heading tags to create different types of headings and styling them using the CSS −

Headings Using <h1> to <h6> Tags

In this example, we will use the heading tags (h1 to h6); each of them has a different size and weight for the content −

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example of HTML Headings</title>
  </head>
  <body>
    <h1>Heading 1: Main Heading of Page</h1>
    <h2>Heading 2: Section</h2>
    <h3>Heading 3: Subsection</h3>
    <h4>Heading 4: Sub-subsection</h4>
    <h5>Heading 5: Lower-level heading</h5>
    <h6>Heading 6: Lowest-level heading</h6>
  </body>
</html>

Styling Headings With CSS

In the following example, we will apply the style such as font family, font color, font size, etc. to the headings −

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example of HTML Headings</title>
    <style>
      h1, h2, h3, h4, h5, h6{
       font-family: Verdana;
      }
      h1{
       color: Red;
       font-size: 32px;
      }
      h2{
       color: Green;
       font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h1>Heading 1: Main Heading of Page</h1>
    <h2>Heading 2: Section</h2>
    <h3>Heading 3: Subsection</h3>
    <h4>Heading 4: Sub-subsection</h4>
    <h5>Heading 5: Lower-level heading</h5>
    <h6>Heading 6: Lowest-level heading</h6>
  </body>
</html>

Here, we have applied "Verdana" font style to all heading tags, defined the "Red" color to H1 heading with the font size 32px, and defined the "Green" color to H2 heading with the font size 30px.

Using HTML Tags Within Heading Tags

HTML headings (h1 to h6) serve as the main titles and subheadings for content organization. Within these heading tags, you can use various other HTML tags to enhance and structure your content effectively. Here are some examples −

The <span> Tag

You can use the <span> tag to apply inline styles or classes to specific portions of the text within a heading. This allows for custom styling of text within the heading.

<!DOCTYPE html>
<html>
<head>
   <title>Using <span> Tag</title>
</head>
<body>
   <h2>This is a <span style="color: blue;">blue</span> word.</h2>
</body>
</html>

The <a>Tag for Links

To create a link within a heading, use the <a> tag. This is useful for headings that lead to other pages or sections of your website.

<!DOCTYPE html>
<html>
<head>
   <title>Using <a> Tag for Links</title>
</head>
<body>
   <h1><a href="https://www.tutorialspoint.com">Visit our website</a></h1>
</body>
</html>

The <em> and <strong> Tags

These tags are used for emphasizing text within headings. The <em> tag italicizes the text, while <strong> makes it bold.

<!DOCTYPE html>
<html>
<head>
   <title>Using <em> and <strong> Tags</title>
</head>
<body>
   <h3>This is <em>emphasized</em> and <strong>important</strong> text.</h3>
</body>
</html>

The <sup> and <sub> Tags

In heading, to include superscript or subscript text within a heading, use <sup> and <sub>.

<!DOCTYPE html>
<html>
<head>
   <title>Using <sup> and <sub> Tags</title>
</head>
<body>
   <h4>The 10<sup>th</sup> floor is at the top.</h4>
   <h5>The chemical formula for water is H<sub>2</sub>O.</h5>
</body>
</html>

The <abbr> Tag for Abbreviations

When you need to include an abbreviation or acronym in a heading, use the <abbr> tag. It often provides a tooltip with the full meaning.

<!DOCTYPE html>
<html>
<head>
   <title>Using <abbr> Tag for Abbreviations</title>
</head>
<body>
   <h2>HTML stands for <abbr title="Hypertext Markup Language">HTML</abbr>.</h2>
</body>
</html>

The <br> Tag for Line Breaks

Sometimes, you might want to create line breaks within a heading for better formatting. The <br> tag serves this purpose.

<!DOCTYPE html>
<html>
<head>
   <title>Using <br> Tag for Line Breaks</title>
</head>
<body>
   <h3>This is the first line.<br>This is the second line.</h3>
</body>
</html>

The <mark> Tag

Use the <mark> tag to highlight specific text within a heading. It's often used to indicate search results or selected portions of text.

<!DOCTYPE html>
<html>
<head>
   <title>Using <mark> Tag</title>
</head>
<body>
   <h1>Search for "<mark>important</mark>" information here.</h1>
</body>
</html>

Mistakes to be Avoided

Make sure we avoid the following mistakes while using the heading tag −

Skipping Levels − Always follow the proper hierarchy (h1, h2, h3, etc.). Don't skip levels.
Overusing h1 − Reserve h1 for the main title; don't use it multiple times on a page.
Styling Overload − Avoid excessive styling; CSS should handle the aesthetics, not headings.

Print Page