What are various heading elements used to add heading in HTML ?
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 the least.
In this article, we will discuss various heading elements used to add heading in HTML.
Syntax:
<h1> Contents... </h1>
Importance of Heading:
- Search Engines use headings for indexing the structure and 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:
HTML
<!DOCTYPE html> <html> <head> <title>Heading Tags</title> </head> <body> <h1>GeeksforGeeks</h1> <h2>GeeksforGeeks</h2> <h3>GeeksforGeeks</h3> <h4>GeeksforGeeks</h4> <h5>GeeksforGeeks</h5> <h6>GeeksforGeeks</h6> </body> </html> |
Output:
Example 2: This example explains the different HTML heading tags.
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> <!-- Style attribute is used here--> <h1 style="font-size: 50px">H1 with new size.</h1> </body> </html> |
Output:
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 an end tag. It is basically used to separate content. Please refer to the HTML <hr> Tag article for further details.
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:
Please Login to comment...