tutorialstonight logo
A Platform To Learn To Code

HTML HEADINGS



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.

HTML headings

First level heading <h1>

Second level heading <h2>

Third level heading <h3>

Fourth level heading <h4>

Fifth level heading <h5>
Sixth level heading <h6>

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:

Example

Run the code

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>.


Heading Style

We can add style (CSS) to headings and can make elements colorful,bigger,smaller etc.

Example


We can also add class,Id,attribute to these elements.Here is an example of color to heading element.

Example


Here is a working example of heading style.

Example

Run the code

Output:

font-size of h1 changed to 20px(default size of h1 is 32px)

color of h3 tag changed to brown