HTML Headings are brief descriptions, generally in very few words, about a page or sub-section of a page. HTML headings are the visible titles on a web page.
HTML has six elements (<h1> to <h6>) to specify headings in a web document.
The element <h1> defines the most important heading of the page. The importance decreases from <h1> to <h6> gradually.
The <h6> defines the least important heading.
Web browsers display each HTML heading differently on the screen. For example, the default font size of the <h1> element is the biggest. The default font size of the <h6> element is the smallest.
Web browsers display each HTML heading differently on the screen. For example, the default font size of the <h1> element is the biggest. The default font size of the <h6> element is the smallest.
Headings | Size | Description |
---|---|---|
<h1> | Biggest | Most important heading |
<h2> | Smaller than <h1> Bigger than <h3>, <h4>, <h5> and <h6> |
Less important than <h1> More important than<h3>, <h4>, <h5> and <h6> |
<h3> | Smaller than <h1> and <h2> Bigger than <h4>, <h5> and <h6> |
Less important than <h1> and <h2> More important than <h4>, <h5> and <h6> |
<h4> | Smaller than <h1>, <h2> and <h3> Bigger than <h5>, and <h6> |
Less important than <h1>, <h2> and <h3> More important than <h5>, and <h6> |
<h5> | Smaller than <h1>, <h2>, <h3> and <h4> Bigger than <h6> |
Less important than <h1>, <h2>, <h3> and <h4> More important than <h6> |
<h6> | Smallest | Least Important Heading |
Browsers have a default font size for headings. For example, the chrome browser has the following default sizes, which may change for future versions.
Heading | Default Size |
---|---|
<h1> | 2em |
<h2> | 1.5em |
<h3> | 1.3em |
<h4> | 1em |
<h5> | 0.8em |
<h6> | 0.7em |
Don't worry if you don't understand 'em'. We will explain them later in the tutorial.
One can modify the default font size of any headings. To change the font size, we can use the HTML
attribute.Here we have used the CSS <h1> element of size 70 pixels.
property to display the content ofThe browser defines a default color for the HTML heading. We can change the color of the content of the heading with the
attribute, using the CSS property:HTML heading can be aligned to the center by using the
attribute. For this CSS property can be used.1. It is important to add headings to the HTML documents. Because users get a brief idea about the kind of content the web page holds. It increases users' engagement with the website.
2. The main heading of the web page should be defined with the <h1> tag.
3. For the sub-heading, you can use <h2> element. If the content is further sub-sectioned, their heading can be <h3> and so on.
4. Headings are an important parameter in search engine indexing. Your heading can help you get a better ranking in search results if they are well defined in HTML documents.
1. HTML Tutorial |
2. Introduction to HTML |
3. Basic HTML Page |
4. HTML Editors |
5. Web Browser |
6. HTML History |
7. Basic HTML Tags |
8. HTML Elements |
9. HTML Attributes |
10. HTML Headings |
11. HTML Paragraphs |
12. HTML Text Formatting |
13. HTML Styles |
14. HTML Comment |
15. HTML Quotation |
16. HTML Colors |
17. HTML RGB Colors |
18. HTML HEX Colors |
19. HTML HSL Color |
20. HTML CSS |
21. HTML Links |
22. HTML Link Colors |
23. Link within Page |
24. HTML Images |
25. HTML Background Image |
26. HTML Image Map |
27. HTML Picture Element |
28. HTML Favicon |
29. HTML Table |
30. HTML Table Border |
31. HTML Table Size |