HTML

HTML Headings

Headings are essential tags in the body of an HTML document. Headings display title or subtitle of different sizes.

The opening tag for a heading is <hn>, whereas the closing tag for a heading is </hn>, where n is the size of the heading.

The value of n ranges from 1 to 6. The value 1 represents the biggest, and the 6th signifies the smallest heading size.

Use headings at different levels to organize your content effectively, like titles, subheadings, and sub-subheadings. The main heading, usually tagged as <h1>, should introduce the topic of your content. Then, use <h2> for subtopics related to the theme and <h3> for further breakdowns or details under subtopics.

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

Attributes

Some significant attributes of the heading tag are as follows:

Align: It specifies the alignment of the heading. The possible values are center, left, and right. The default value is left.

Heading tags in HTML, such as <h1>, <h2>, <h3>, and so on, come with some properties that define their orientation within a web page. However, their appearance can be further customized using CSS. CSS offers a range of styling options for headings, including font size, color, alignment, margin, and padding.

<!DOCTYPE html>
<html>
<body>
    <h1 align="center">HTML Headingss</h1>
    <h2 align="right">HTML Headingss</h2>
</body>
</html>

The above code displays heading one in the center and heading two on the right side of the page.

Impact of Headings on Content

Headings help people understand what’s on the page. Headings break down the content into smaller, easy-to-read sections, making it easier to read.

Search engines like Google also pay attention to headings to find what your page is about. Therefore, using headings makes your page easier to read and helps it rank better in search results.

Example

<!DOCTYPE html>
<html>
<body>
    <!-- Main Heading -->
    <h1>HTML Headingss</h1>
    
    <!-- Main Heading Content -->
    <p>This is the content for main heading</p>
    
    <!-- Subheading -->
    <h2>HTML Headingss</h2>
    
    <!-- Sub Heading Content -->
    <p>This is the content for subheading</p>
</body>
</html>