HTML Heading
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.
Syntax:
// 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.
HTML
<!DOCTYPE html> <html> <body> <h1>H1 Heading</h1> <!-- With the help of Style attribute you can customize the size of the heading, As done below--> <h1 style="font-size: 50px">H1 with new size.</h1> <!-- Here font-size is the property by which we can modify the heading. Here we kept it 50px i.e. 50 pixels --> </body> </html> |
HTML
<!DOCTYPE html> <html> <body> <h1>Welcome to GeeksforGeeks</h1> <h2>A computer science portal for geeks</h2> <h5>Tutorial</h5> <h6>Geeks</h6> </body> </html> |
Output:
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.
HTML
<!DOCTYPE html> <html> <body> <h1>H1 Heading</h1> <!-- With the help of Style attribute you can customize the size of the heading, As done below--> <h1 style="font-size: 50px">H1 with new size.</h1> <!-- Here font-size is the property by which we can modify the heading. Here we kept it 50px i.e. 50 pixels --> </body> </html> |
Output:
Styling the <h1> tag with different font-size
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.
HTML
<!DOCTYPE html> <html> <body> <h1>Heading 1</h1> <p>I like HTML.</p> <!-- hr Tag is used here--> <hr /> <h2>Heading 2</h2> <p>I like CSS.</p> <!-- hr Tag is used here--> <hr /> <h2>Heading 3</h2> <p>I like Javascript.</p> </body> </html> |
Output:
HTML Heading with the horizontal line
Supported Browsers:
- Google Chrome 93.0
- Microsoft Edge 93.0
- Internet Explorer 11.0
- Firefox 92.0
- Opera 78.0
- Safari 14.1
Please Login to comment...