In HTML tutorial we will learn about "Heading Tag". Heading tag is an important part of HTML, which provides protection to the webpage content and helps in creating structure. When you view a page, your title or heading is seen, in fact, it is created through the HTML heading tag.
What you will learn in this tutorial:
- What is a heading tag? (e.g. <h1>, <h2>, <h3>, etc.)
- How is it used
- What is its role in SEO, and how can you make your website rank better in search engines.
Heading tags also improve readability of a website, making it easier for visitors understand content. They are a simple and effective way to organize your content.
What is a heading tag? (such as <h1>, <h2>, <h3>, etc.)
Heading tags are tags in HTML that define the title and headings of your webpage. Tags help you organize content on webpages to make it easier for users to read.
There are a total of 6 heading tags in HTML, which range from <h1> to <h6>. Their job is to divide the content into levels.
- <h1> : This is the most important and top-level heading. Usually, the main title or topic of webpages is in the tag. It is also very important for search engines, because it tells what the main topic of the page is.
- <h2> : This is the second level heading. You usually represent the sub-topics that come under <h1>.
- <h3> : This is the third level heading. It is used to divide the sub-topics of <h2>.
- <h4> : It is used to divide the sub-topics of <h3>.
- <h5> : It is used for even lower level headings, which makes your content more specific.
- <h6> : This is the shortest and lowest level heading.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Heading Tags Example</title>
</head>
<body>
<h1>Introduction to Web Development</h1>
<h2>HTML Basics</h2>
<p>HTML is the standard markup language for creating web pages.</p>
<h3>What is HTML?</h3>
<p>HTML stands for HyperText Markup Language. It is used to structure web content.</p>
<h3>HTML Tags</h3>
<p>HTML tags are the building blocks of an HTML document.</p>
<h2>CSS Basics</h2>
<p>CSS is used to style the content created with HTML.</p>
<h3>What is CSS?</h3>
<p>CSS stands for Cascading Style Sheets. It controls the layout of web pages.</p>
<h3>CSS Selectors</h3>
<p>CSS selectors are patterns used to select the HTML elements to style.</p>
</body>
</html>
How they are used
They are used to define headings, titles, and subheadings on a webpage. Using heading tags is quite simple. You simply wrap <h1>, <h2>, <h3>, etc. tags around your content.
Explanation:
- <h1> : This is the main heading of the page. In this, you define the most important heading of your website.
- Example: <h1>Welcome to my website.</h1>
- <h2> : This is a second-level heading that describes specific sub-sections of the main heading.
- Example: <h2>About Us</h2> and <h2>Services</h2>
- <h3> : If you want more specific sub-headings in a section, you use the <h3> tag.
- Example: <h3>Web Development</h3> under the "Services" section.
Heading tags play a very important role in SEO. They help search engines understand the structure of your webpages and the important parts of the content. When you use headings correctly, you can improve your page's visibility and ranking in search engine results.