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>
<h1 style="font-size: 50px">H1 with new size.</h1>
</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>
<h1 style="font-size: 50px">H1 with new size.</h1>
</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 />
<h2>Heading 2</h2>
<p>I like CSS.</p>
<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
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!