HTML Headings

HTML Headings


In this tutorial you will learn how to create headings in HTML.


Organizing Content with Headings

Headings help in defining the hierarchy and the structure of the web page content.HTML offers six levels of heading tags, <h1> through <h6>; the higher the heading level number, the greater its importance — therefore <h1> tag defines the most important heading, whereas the <h6>tag defines the least important heading in the document.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

HTML Headings

İn HTML there are 6 headings. From h1 to h6 like this:

<h1> Heading 1 </h1>
<h2> Heading 2 </h2>
<h3> Heading 3 </h3>
<h4> Heading 4 </h4>
<h5> Heading 5 </h5>
<h6> Heading 6 </h6>

Notice: Browsers automatically add some white space (a margin) before and after a heading. You will learn about it in upcoming tutorial.


Just like other HTML elements they come in pairs with a start tag (or opening tag ) and end tag (or closing tag).
To create a website you must know its structure. İt’ very important.
HTML headings exist just for that. They help you organize your contents for:

  • Search Engines like (Google Chrome, Firefox, Safari etc..)
  • Humans like ( us people )

That’s because when you Google something. Search engines find those
How to do something ” search for Humans. And that’s what HTML headings do. They structure documents and contents properly so search engines can find them easily and deliver them to people who are searching for them.


The order of Headings in HTML

İn mathematics when we think of values. The greater number has greater value.
For example the number 6 is greater than 1 ( 6 > 1 ).
But in HTML headings, h1 has more importance than h6.
Like this:

 <h1> most important   ( highest value ) </h1>  
 <h2> </h2>  
 <h3> </h3>   
 <h4> </h4>  
 <h5> </h5>  
 <h6> least important ( lowest value ) </h6>  
 
   

<h1> defines the most important heading. <h6> defines the least important heading.
<h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on.


Bigger Headings

Each HTML heading has a default size. Browsers display headings in larger and bolder font than normal text. Also, <h1> headings are displayed in largest font, whereas <h6> headings are displayed in smallest font.

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

Note: You can easily customize the appearance of HTML heading tags such as their font size, boldness, typeface, etc. using the CSS font properties.
You will learn it in upcoming tutorials.

Comments are closed.