Headings used in HTML
In this tutorial, we will learn about HTML headings and how they are
implemented using examples. The heads of a page are specified using an HTML
heading tag. HTML defines headers at six different levels. These six heading
elements are designated by the letters
<h1>,<h2>, <h3>,
<h4>,
<h5>, and
<h6>, where
<h1> denotes the highest level
and <h6> the lowest.

Titles or subtitles that you want to appear on a web page as headers in
HTML.


Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset=“utf-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1”>
    <title>Headings used in HTML</title>
</head>
<body>

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


Result:
Heading Tag Result

The <h1> to
<h6> tags in HTML are used to
define headings.

The most significant heading is defined by
<h1>.

The least significant heading is designated as
<h6>.

Note:
Before and after a heading, a margin is automatically added by
browsers.

Headings Are Crucial

Search engines index the structure and content of your web pages using
the headers.
Users frequently scan pages for headers. Using headings to display the
document’s structure is crucial.
Main headings should start with a <h1> heading, then move on to
<h2> headings, <h3> headings, and so forth.
Reminder: Only use HTML heads for headings. Avoid using
headers to enlarge or bold text.


Expanded headings

There is a default size for each HTML heading. However, you may use the CSS
font-size property to determine the size for any heading using the style
attribute:


Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset=“utf-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1”>
    <title>Expanded headings</title>
</head>
<body>

    <h1 style=“font-size:80px;”>Heading 1</h1>
    <p>You can change the size of a heading by using the font-size element of the style attribute.</p>
    
</body>
</html>


Result:
Expanded heading


Rate this post

Categorized in: