HTML headings

      No Comments on HTML headings

HTML headings are important in HTML documents. HTML defines six levels of headings. A heading element implies all the font changes, paragraph breaks before and after, and any white space necessary to render the heading.

The heading elements are <h1> , <h2> , <h3> , <h4> , <h5> and <h6> with <h1> being the highest (or most important) level and <h6> the least.

Example:
<h1>I am heading h1</h1>
<h2>I am heading h2</h2>
<h3>I am heading h3</h3>
<h4>I am heading h4</h4>
<h5>I am heading h5</h5>
<h6>I am heading h6</h6>

Result:


I am heading h1

I am heading h2

I am heading h3

I am heading h4

I am heading h5
I am heading h6

Key points about HTML headings:

  • HTML headings outline structure of your web page.
  • Headings are important as search engines use headings to index the content of a webpage.
  • A web page should have only one main heading i-e the <h1> tag.
  • <h1> headings should be used for main headings, followed by <h4> headings, then the less important <h3>, and so on.
  • The default value of most browser of <h1> – <h6> tags is:
  • h1 {
        display: block;
        font-size: 2em;
        margin-top: 0.67em;
        margin-bottom: 0.67em;
        margin-left: 0;
        margin-right: 0;
        font-weight: bold;
    }
    h2 {
        display: block;
        font-size: 1.5em;
        margin-top: 0.83em;
        margin-bottom: 0.83em;
        margin-left: 0;
        margin-right: 0;
        font-weight: bold;
    }
    h3 {
        display: block;
        font-size: 1.17em;
        margin-top: 1em;
        margin-bottom: 1em;
        margin-left: 0;
        margin-right: 0;
        font-weight: bold;
    }
    h4 {
        display: block;
        font-size: 1em;
        margin-top: 1.33em;
        margin-bottom: 1.33em;
        margin-left: 0;
        margin-right: 0;
        font-weight: bold;
    }
    h5 {
        display: block;
        font-size: .83em;
        margin-top: 1.67em;
        margin-bottom: 1.67em;
        margin-left: 0;
        margin-right: 0;
        font-weight: bold;
    }
    h6 {
        display: block;
        font-size: .67em;
        margin-top: 2.33em;
        margin-bottom: 2.33em;
        margin-left: 0;
        margin-right: 0;
        font-weight: bold;
    }
    
    

Horizontal Rule:

The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.The <hr> element is used to separate content (or define a change) in an HTML page.

Example:
<h1>I am a heading h1</h1>
<p>Text...</p>
<hr>
<h2>I am a heading h2</h2>
<p>text...</p>
<hr>

Result:

I am a heading h1

Text…


I am a heading h2

text…


Browser support for headings

HTML headings

Leave a Reply

Your email address will not be published. Required fields are marked *