HTML Headings

HTML headings, from <h1> to <h6>, indicate content hierarchy and importance. Search engines use them for indexing. Users navigate by headings. Employ <h1> for main titles, <h2> for subsections, and progressively lower levels for less important content to maintain structure and readability.

HTML provides six levels of heading elements, ranging from <h1> (highest level) to <h6> (lowest level).

Purpose and Usage of Heading Tags:

`1. <h1>` – Main Heading (Largest):

Represents the primary topic of the page.
Use it sparingly to maintain clarity.

`2. <h2>` – Subheadings:

Ideal for dividing content into sections.
If further subsections exist, employ <h3> elements.

`3. <h3>` to `<h6>` – Smaller Headings:

Gradually decrease in size.
Use them for finer subdivisions.

Syntax:

// the 'h' inside the tag should be in small case only.
<h1>Heading1</h1>
<h2>Heading2</h2>
.
.
.
<h6>Heading6</h6>

Why Do Headings are Important?

1. SEO Impact:

Search engines index headings to understand content structure.
Well-organized headings enhance visibility and ranking.

2. Highlighting Key Topics:

Headings emphasize essential information.
Readers quickly grasp the document’s structure.

Example: In this example illustrates the HTML heading tags.

HTML

<!DOCTYPE html>
<html>

<body>
    <h1>This is heading h1</h1>
    <h2>This is heading h2</h2>
    <h3>This is heading h3</h3>
    <h4>This is heading h4</h4>
    <h5>This is heading h5</h5>
    <h6>This is heading h6</h6>
</body>

</html>

Output:

Customization in HTML Heading Tags

The default size of HTML headings can be changed, using the style attribute.

Example: In this example explains the HTML heading tags by specifying the size of the font.

HTML

<!DOCTYPE html>
<html>

<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

Supported Browsers:

Tags:

#HTML-Basics #HTML #Technical Scripter #Web Technologies

HTML Attributes

HTML Paragraphs