RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/html/html-heading/ below:

HTML Headings - GeeksforGeeks

HTML Headings

Last Updated : 17 Jul, 2025

HTML headings are used to define the titles and subtitles of sections on a webpage. They help organize the content and create a structure that is easy to navigate.

Proper use of headings enhances readability by organizing content into clear sections.
Search engines utilize headings to understand page structure, aiding in SEO.

HTML


 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>HTML</title>
</head>
<body>
    <h1>This is the Main Heading</h1>
	<h2>This is a Subheading</h2>
	<h3>This is a Smaller Subheading</h3>
	<h4>This is a Sub-Subheading</h4>
	<h5>This is a Minor Subheading</h5>
	<h6>This is the Smallest Heading</h6>
</body>
</html>

This code uses HTML heading tags (<h1> to <h6>) to create headings that range from the main heading to the smallest subheading.
Each tag shoes the hierarchy of the content, helping organize the structure of the webpage.

Note: the 'h' inside the tag should always be in lowercase.

HTML offers six levels of heading tags, each serving a different purpose in structuring your content:

<h1> – Main Heading (Largest)

Represents the primary focus of the page, usually used for the main title.
Use only one <h1> tag per page for the best SEO practices.
Makes it clear to both users and search engines what the main topic is.

<h2> – Subheadings

Ideal for dividing the content into major sections.
If the content has further subsections, use <h3> to create a logical flow.

<h3> to <h6> – Smaller Headings

These heading levels are used for finer subdivisions, gradually decreasing in size and importance.
<h3> is used for subsections under <h2>, while <h4> to <h6> are used for additional, less important subdivisions.
<h6> defines the least important heading.

Example: Here’s how you can apply basic styles to HTML heading tags:

HTML


 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>HTML</title>
</head>
<body>
    <h1>H1 Heading</h1>

    <!-- With the help of Style attribute you can customize
           the size of the heading, As done below-->

    <h1 style="font-size: 50px">H1 with new size.</h1>

    <!-- Here font-size is the property by which  we can 
           modify the heading. Here we kept it 50px i.e. 50 pixels -->

</body>

</html>

Output:

HTML Headings Example Output Best Practices for Using HTML Headings

Use Only One <h1> per Page: The <h1> tag should be reserved for the main title of the page. Too many <h1> tags can confuse both users and search engines about the content’s priority.
Maintain a Logical Structure: Follow a logical hierarchy of headings (<h1> → <h2> → <h3>) to ensure content is organized. Don't jump directly from <h1> to <h4>, as it can make the content harder to navigate.
Keep Headings Descriptive: Headings should clearly describe the content that follows. This makes it easier for readers to understand what each section is about.
Avoid Overusing Heading Tags: Headings are for organizing content, not for styling text. Use them where appropriate and avoid using heading tags for emphasis or styling alone.

HTML Headings in Web Development

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4