How to add sub heading using HTML ?

Last Updated : 30 Sep, 2024

In HTML, headings are used to structure the content, creating a clear hierarchy that improves readability and organization. Subheadings help break down sections of content, guiding users through the information.

There are several ways to add subheadings in HTML, and we'll explore two common methods to define the hierarchy of headings and subheadings on your webpage.

Ways To Add Sub Heading in HTML

1. Using HTML Tags

The easiest way to add subheadings in HTML is by using heading tags. HTML provides six levels of headings (<h1> to <h6>), where <h1> is the highest level, typically used for the main heading, and <h2> and beyond are used for subheadings. Subheadings are written in a tag with a lower level than the main heading, such as <h2> or <h3>.

Example: In the following example, the main heading uses the <h1> tag, and the subheading uses the <h2> tag to demonstrate the hierarchy of content.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Adding Sub Heading</title>
    <style>
    .container {
        height: 200px;
        width: 600px;
        background-color: green;
        color: black;
        border-radius: 10px;
        border: 2px solid gray;
    }
    </style>
</head>

<body>
    <div class="container">
        <h1>GeeksforGeeks - Main Heading</h1>
        <div>
            <h2>About GeeksforGeeks - Sub Heading</h2>
            <p>
                A Computer Science portal for geeks.
                It contains well written,well thought
                and well explained computer science 
                and programming articles, quizzes
            </p>

        </div>
    </div>
</body>
</html>

Output :

Note: HTML headings have a default size and styling. Users can alter them according to their needs.

2. Using a Combination of Heading Tags and Divs

Another method to add subheadings is by using the <div> tag along with CSS styling. The <div> tag is a generic block-level container and is often used to create sections within a webpage. While it doesn't inherently carry the same semantic meaning as heading tags, it can be styled to look and function like a subheading. This method gives more flexibility for custom styling.

Use the <div> tag to create a section, and apply custom CSS styles to make it visually similar to a heading tag. This method is useful when you want full control over how the subheading looks, without being limited to the default styles of HTML headings.

Example: In the following example, the <div> tag is used for the subheading, styled with CSS to look like a subheading.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Adding Sub Heading 2</title>
    <style>
    .container {
        height: 200px;
        width: 600px;
        background-color: green;
        color: white;
        border-radius: 10px;
        border: 2px solid gray;
    }
    
    .subHeading {
        display: block;
        font-size: 1.5em;
        margin-top: 0.83em;
        margin-bottom: 0.83em;
        margin-left: 0;
        margin-right: 0;
        font-weight: bold;
    }
    </style>
</head>

<body>
    <div class="container">
        <h1>GeeksforGeeks - Main Heading</h1>
        <div>
            <div class="subHeading">
                About GeeksforGeeks - Sub Heading
            </div>
            <p>
                A Computer Science portal for geeks. 
                It contains well written,well thought 
                and well explained computer science and
                programming articles, quizzes
            </p>

        </div>
    </div>
</body>

</html>

Output :

How to add description list of an element using HTML ?

siddharth01

Improve

Article Tags :

How to add sub heading using HTML ?

Ways To Add Sub Heading in HTML

1. Using HTML Tags

2. Using a Combination of Heading Tags and Divs

Similar Reads

Thank You!

What kind of Experience do you want to share?