Jun 15, 2016

HTML Headings

There are 6 levels of document heading available in HTML, <h1>, <h2>, <h3> is the mostly used except <h6>.

HTML headings are defined with the <h1> to <h6> tags:

There are six header tags:
 h1
h2
h3
h4
h5
h6

Example: The following code shows all the heading levels, in use.


<h1>Greed never pays</h1>
<h2>Sometimes cunningness outwits itself</h2>
<h3>Sometimes, the solution is within the problem</h3>
<h4>Listen to all but do what you feel is right</h4>
<h5>Never trust an enemy's words</h5>
<h6>We often don’t realize the true value of the things we have </h6>


Here is the result of this code respectively: 


Greed never pays
Sometimes cunningness outwits itself
Sometimes, the solution is within the problem
Listen to all but do what you feel is right
Never trust an enemy's words
We often don't realize the true value of the things we have


Usage note:


  • Avoid skipping heading levels: always start from <h1>, next use <h2> and so on.
  • We should consider avoiding using <h1> more than once on a page
  • You should use one <h1> per section
  • The highest level is bigger and more prominent than the lower levels. It is not necessary to use <p> because all headers are rendered with a paragraph break before and after.