HTML headings are used for giving headlines to the web page.There are six levels of HTML heading and are defined with <h1> to <h6>.
<h1> is the most important heading element and content written in this element has the biggest size whereas <h6> is least important and has smallest content size among all heading elements.
First level heading <h1>
Second level heading <h2>
Third level heading <h3>
Fourth level heading <h4>
Fifth level heading <h5>
Sixth level heading <h6>
Note: Browser makes the content enclosed in heading tag bold. Don't use heading tag just for making content bold it is used by search engine.(see below)
Here is an Example:
▶ Run the code
<h1>First level heading (h1)<h1/> <h2>second level heading (h2)<h2/> <h3>Third level heading (h3)<h3/> <h4>Fourth level heading (h4)<h4/> <h5>Fifth level heading (h5)<h5/> <h6>Sixth level heading (h6)<h6/>
Importance of heading
HTML headings are used for indexing structure and contents of web pages by search engine.Users unknowingly use heading elements for making content bigger and bold which is not recommended.
Heading tags should only be used in indexing web pages.You can provide <h1> as main heading, <h2> as second important heading and so on up to <h6>.
We can add style (CSS) to headings and can make elements colorful,bigger,smaller etc.
<h1 style="font-size:30px;">font-size of h1 changed to 20px(default size of h1 is 32px).</h1>
We can also add class,Id,attribute to these elements.Here is an example of color to heading element.
<h3 style="color:green;">color of h3 tag changed to brown.</h3>
Here is a working example of heading style.
▶ Run the code
<!DOCTYPE html> <html> <head> <title> Title of page </title> </head> <body> <h1 style="font-size:30px;">font-size of h1 changed to 20px(default size of h1 is 32px)</h1> <h2 style="color:green;">color of h2 tag changed to brown</h2> </body> </html>
font-size of h1 changed to 20px(default size of h1 is 32px)
color of h3 tag changed to brown