Complete Header tags in html – easy to learn

Posted on: March 22, 2021 in HTML , 13.4 K
blog img

H tags can be used to easily write headlines in HTML. There are 6 different types of H tags. These are <h1>, <h2>, <h3>, <h4>, <h5> and <h6>. The <h1> to <h6> tags are used to define HTML headings. These have their own default styles. <h1> is Defines the most important heading. <h6> is Defines the least important heading.

Example is below.

HTML Header display Code block
    
    <!DOCTYPE html>
    <html>
      <head>
       <title>Site title / Page title</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>

             <p> this is paragraph</p>

           </body>
    </html>

result : See the below image.

Default CSS style of H tags

See the image below for how to get the CSS value of the h tag

Most browsers display the <H1> tag element with the following default values.

Default CSS style of H1 tag

h1 {
    display : block;
    font-size : 2em;
    margin-block-start : 0.67em;
    margin-block-end : 0.67em;
    margin-inline-start : 0px;
    margin-inline-end : 0px;
    font-weight : bold;
}

<H2> tag element with the following default values.

Default CSS style of H2 tag

h2 {
   display : block;
   font-size : 1.5em;
   margin-block-start : 0.83em;
   margin-block-end : 0.83em;
   margin-inline-start : 0px;
   margin-inline-end : 0px;
   font-weight : bold;
}

<H3> tag element with the following default values.

Default CSS style of H3 tag

h3 {
   display : block;
   font-size : 1.17em;
   margin-block-start : 1em;
   margin-block-end : 1em;
   margin-inline-start : 0px;
   margin-inline-end : 0px;
   font-weight : bold;
}

<H4> tag element with the following default values. The font size of the H4 tag is 1em. So Most browsers will not display the font size.

Default CSS style of H4 tag

h4 {
   display : block;
   margin-block-start : 1.33em;
   margin-block-end : 1.33em;
   margin-inline-start : 0px;
   margin-inline-end : 0px;
   font-weight : bold;
}

<H5> tag element with the following default values.

Default CSS style of H5 tag

h5 {
   display : block;
   font-size : 0.83em;
   margin-block-start : 1.67em;
   margin-block-end : 1.67em;
   margin-inline-start : 0px;
   margin-inline-end : 0px;
   font-weight : bold;
}

<H6> tag element with the following default values.

Default CSS style of H6 tag

h6 {
   display : block;
   font-size : 0.67em;
   margin-block-start : 2.33em;
   margin-block-end : 2.33em;
   margin-inline-start : 0px;
   margin-inline-end : 0px;
   font-weight : bold;
}

Share your thoughts

Your email address will not be published. All fields are required.

Related post

  1. How to styled background – easy way

    CSS backgrounds define the background effects for elements in a…

  1. How to Adding CSS to HTML – easy way

    Adding CSS to HTML is essential for enhancing the visual…

  1. What is HTML and How to Start

    HTML (HyperText Markup Language) is the standard language for creating…

  1. Learn HTML in easy way

    Hypertext Markup Language, or HTML, is the standard markup language…

Popular post

  1. Eclipse IDE – Create New Java Project.

    Opening the New Java Project…

  1. How to start the project in android studio

    Android Studio Open the Android…

  1. How to use ACOSH function in excel

    The ACOSH function returns the…

  1. Complete Header tags in html – easy to learn

    H tags can be used…

  1. Best features in Python programme – easy to learn

    Python is the most widely…