HTML Headings
HTML headings are used to define the content hierarchy and structure of a webpage. They range from <h1> to <h6>, with <h1> being the most important heading and <h6> the least important. Proper use of headings helps improve readability, SEO, and accessibility.
Levels of HTML Heading Tags
HTML offers six levels of heading elements, each serving a different purpose in structuring your content:
- <h1>: The main heading or title, representing the primary topic of the page.
- <h2>: Subheadings that divide content into major sections.
- <h3> to <h6>: Smaller headings are used for further subdivisions within sections.
Purpose and Usage of HTML Heading Tags
Headings are essential for organizing content on a webpage. Here’s a detailed guide on how to use each level effectively:
<h1> – Main Heading (Largest)
- Represents the primary focus of the page, usually used for the main title.
- Use only one <h1> tag per page for the best SEO practices.
- Makes it clear to both users and search engines what the main topic is.
<h2> – Subheadings
- Ideal for dividing the content into major sections.
- If the content has further subsections, use <h3> to create a logical flow.
<h3> to <h6> – Smaller Headings
- These heading levels are used for finer subdivisions, gradually decreasing in size and importance.
- <h3> is used for subsections under <h2>, while <h4> to <h6> are used for additional, less important subdivisions.
Syntax for HTML Headings
When using HTML heading tags, ensure that the tag names are in lowercase. Here’s the syntax:
// the 'h' inside the tag should be in small case only. <h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Examples of HTML Headings
Example: In this example, we will see the HTML heading tags.
<!DOCTYPE html>
<html>
<body>
<h1>This is heading h1</h1>
<h2>This is heading h2</h2>
<h3>This is heading h3</h3>
<h4>This is heading h4</h4>
<h5>This is heading h5</h5>
<h6>This is heading h6</h6>
</body>
</html>
Output:
Customization in HTML Heading Tags
The default size of HTML headings can be changed, using the style attribute.
Example: In this example explains the HTML heading tags by specifying the size of the font.
<!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:
HTML Headings Example Output
No comments:
Post a Comment