testing HTML Headlines - AKA HTML Headings with Examples
programminghead Logo

HTML Headlines or Headings :

HTML Headlines are used inside HTML Document to create Headings so our users can understand our Web-Page's content Easily and we also can highlights some Important Texts/Lines using Headlines. Headlines/Headings in HTML Document can help use to Defines Important things like Page's Heading, ParaGraph's Heading, Web-page Name, Topic Name, Page's Content and ETC.
For those things we have 6 Different HTML Headlines / Headings Tags.

HTML Headlines Image

Headline Tag

For creating Headlines inside HTML Document we have 6 Different Headline Tags. So these Different HTML Headlines works the Same for your HTML Document. But the only Difference you will going to notice is the Font size.
So each Headline gave Output in Different 6 Font Sizes.

H1 HTML HeadLine tag (<h1>...</h1>)
H2 HTML HeadLine tag (<h2>...</h1>)
H3 HTML HeadLine tag (<h3>...</h1>)
H4 HTML HeadLine tag (<h4>...</h1>)
H5 HTML HeadLine tag (<h5>...</h1>)
H6 HTML HeadLine tag (<h6>...</h1>)

H1 HeadLine tag (<h1>...</h1>) :

H1 Tag is the first Heading Tag and the Biggest Heading tag according to the Font Size. So If you want to gave a Huge Headline in your HTML Web-page then you can use <h1></h1> for that.

H1 HeadLine / Heading Syntax :

H1 HeadLine / Heading Syntax


    <h1> My H1 Headline </h1>

H1 HeadLine Example

H1 HeadLine / Heading Example


  <html>
   <head>
    <title>HeadLines</title>
   </head>
    <body>
     
      <h1>HTML's biggest Headline</h1>
     
    </body>
  </html>

Results :

HTML's biggest Headline


H6 HeadLine tag (<h6>...</h6>) :

H6 Tag is the Last Heading Tag and the Smallest Heading tag according to the Font Size. So If you want to gave a Very Small Headline in your HTML Web-page then you can use <h6></h6> for that.

H6 HeadLine / Heading Syntax :

H6 HeadLine / Heading Syntax


    <h6> My H6 Headline </h6>

H6 HeadLine Example

H6 HeadLine / Heading Example


  <html>
   <head>
    <title>HeadLines</title>
   </head>
    <body>
     
      <h6>HTML's smallest Headline</h6>
     
    </body>
  </html>

Results :

HTML's smallest Headline

Rest of the HeadLine Tags (<l2>,<l3>,<l4>,<l5>)

As we all know that h1 tag is the Biggest Headline Tag according to the Font Size, And h6 is the Smallest HeadLine tag According to the Font Size.
So rest of the HeadLine tags are smaller then h1 tag and greater the h6 tag according to font size.
If we compare all the Headlines together then we can easly understand the Real diffrence between these 6 Different Headlines.

H6 HeadLine Example


  <html>
   <head>
    <title>HeadLines Example</title>
   </head>
    <body>

      <h1>H1 HeadLine</h1>
      <h2>H2 HeadLine</h2>
      <h3>H3 HeadLine</h3>
      <h4>H4 HeadLine</h4>
      <h5>H5 HeadLine</h5>
      <h6>H6 HeadLine</h6>

    </body>
  </html>

Results :

HeadLine H1

HeadLine H2

HeadLine H3

HeadLine H4

HeadLine H5
HeadLine H6

As we all know that HTML Headlines have 6 different headline tags with different font size. But we don't know the exact font size of each HTML Headline tags.
Because it total depends upon Browser's Default style-sheet but here is some Headline Tags size with font size in pixels and em. So we can have some rough idea about HTML Headlines font size.

h1 to h6 font size in pixels

Headline Size in Pixels
h1 32px
h2 24px
h3 20.8px
h4 16px
h5 13.8px
h6 11.2px

h1 to h6 font size in em

Headline Size in em
h1 2 em
h2 1.5 em
h3 1.3 em
h4 1 em
h5 0.8 em
h6 0.7 em
Comments

Write to Us

Captcha