In this article, we will know HTML Headings, & their implementation through examples. An HTML heading tag is used to define the headings of a page. There are six levels of headings defined by HTML. These 6 heading elements are h1, h2, h3, h4, h5, and h6; with h1 being the highest level and h6 being the least.
- <h1> is used for the main heading. (Biggest in size)
- <h2> is used for subheadings, if there are further sections under the subheadings then the <h3> elements are used.
- <h6> for the small heading (smallest one).
Browsers display the contents of headings in different sizes. The exact size at which each browser shows the heading can vary slightly. Users can also adjust the size of the text in their browser.
// the 'h' inside the tag should be in small case only. <h1>Heading1</h1> <h2>Heading2</h2> . . . <h6>Heading6</h6>
Importance of Heading:
- Search Engines use headings for indexing the structure and organizing the content of the webpage.
- Headings are used for highlighting important topics.
- They provide valuable information and tell us about the structure of the document.
Example 1: This example illustrates the HTML heading tags.
Changing the size of HTML Headings: The default size of HTML headings can be changed, using the style attribute.
Example: This example explains the HTML heading tags by specifying the size of the font.
Horizontal rule: The <hr> tag which stands for the horizontal rule is used to define a thematic break in an HTML page. The <hr> tag is an empty tag, and it does not require any end tag. It is basically used to separate content. Please refer to the HTML <hr> Tag article for more detailed information.
Example: This example explains the HTML Headings with horizontal rules.
- Google Chrome 93.0
- Microsoft Edge 93.0
- Internet Explorer 11.0
- Firefox 92.0
- Opera 78.0
- Safari 14.1