Heading tags


HTML Headings:


HTML Headings usually contain a title or a main topic of a certain content.

HTML Headings are block-level elements.

Types of html headings

Example:

How to write html heading:

<h1> Heading 1 </h1>


<h2> Heading 2 </h2>


<h3> Heading 3 </h3>


<h4> Heading 4 </h4>


<h5> Heading 5 </h5>


<h6> Heading 6 </h6>


TRY IT YOURSELF▶


Output:


Heading 1

Heading 2

Heading 3

Heading 4 

Heading 5

Heading 6


As you can see on the example given above the elements used are the <h1>, <h2>, <h3>, <h4>, <h5> and <h6>.


You should have noticed that the size of a heading depends on its corresponding number after the

h.

And the lower the number the larger the font-size. 

How many heading levels are supported by html:

A Note! You can only use tags from <h1>to <h6>.


Aligning HTML Headings:

To align headings we need to use the text- align CSS property with values left, center or right.


Example:


<h1> style="text-align: left"> I am aligned left.</h1>

<h1 style="text-align: center"> I am aligned center.</h1>

<h1 style="text-align: right"> I am aligned right.</h1>



TRY IT YOURSELF


Output:


I am aligned left. 

I am aligned center.

 I am aligned right.


Heading Colors :

To change the color of our HTML Headings we simply need to use inline styling with the CSS color property and a color value.


Example:

 <h1 style="color: blue"> I am Blue.</h1>

 <h1 style="color: red"> I am Red.</h1>

<h1 style="color: green"> I am Green.</h1>


Output:

TRY IT YOURSELF

I am Blue.

I am Red.

I am Green.


Why Html headings is important:

what html header:

HTML headings are an important aspect of web development and play a crucial role in creating a clear and organized structure for a web page. They are used to create headings and subheadings for content on a page, making it easier for both users and search engines to understand the content.

How to write Html headings:

HTML headings are created using heading tags, starting with <h1> and ending with <h6>, with h1 being the highest level heading and h6 being the lowest. It is important to use the headings in a hierarchical manner, meaning the main heading of a page should be an <h1>, and subsequent subheadings should be <h2> to <h6> in descending order.


For example:

A blog post about the benefits of meditation might have the following headings:


<h1>The Benefits of Meditation</h1>

<h2>Introduction to Meditation</h2>

<h3>Reduced Stress and Anxiety</h3>

<h3>Improved Sleep</h3>

<h2>Types of Meditation</h2>

<h3>Mindfulness Meditation</h3>

<h3>Loving-Kindness Meditation</h3>

In addition to creating structure, HTML headings also provide information to search engines about the content and organization of a page. They are used to help search engines understand the importance of different sections on a page, and can impact search engine optimization (SEO) results.


It is also important to style headings properly using CSS, as this can affect the visual appearance of a web page. Headings should be easily distinguishable from other text, and the size and font should reflect the importance of the heading.


In conclusion, HTML headings play a vital role in creating a clear and organized structure for web pages. They provide information to both users and search engines, and are an important aspect of SEO. Proper usage and styling of headings can greatly improve the user experience and visibility of a web page