Learn How to use HTML h6 tag

HTML: h6 tag

In this series of learning HTML, we will teach you how to use the HTML h6 tag with proper syntax and lots of examples. Let’s start with the HTML h6 tag.

Description of HTML h6 tag

The HTML h6 tag is used to define a sub-sub-sub-sub-subheading on a web page. It stands for “Heading 6” and is typically used to break up the content of a page into very small subsections with headings that are less important than h1, h2, h3, h4, and h5.

Here’s an example of how the h6 tag might be used in HTML code:

<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to my Web Page</h1>
<h2>About Me</h2>
<p>This is a paragraph about me.</p>
<h3>Education</h3>
<p>These are my educational qualifications:</p>
<ul>
<li>Bachelor's degree in Computer Science</li>
<li>Master's degree in Information Technology</li>
</ul>
<h3>Work Experience</h3>
<p>These are my work experience:</p>
<ul>
<li>Software Engineer at XYZ Company</li>
<li>Product Manager at ABC Company</li>
</ul>
<h4>Skills</h4>
<p>These are my skills:</p>
<ul>
<li>Programming languages: Java, Python, JavaScript</li>
<li>Frameworks: React, Angular</li>
</ul>
<h5>Java</h5>
<p>Java is my favorite programming language. Here are some reasons why:</p>
<ul>
<li>It's object-oriented</li>
<li>It's widely used in the industry</li>
<li>It's platform-independent</li>
</ul>
<h6>Object-Oriented Programming</h6>
<p>Object-oriented programming is an important concept in computer science. Here are some key concepts:</p>
<ul>
<li>Encapsulation</li>
<li>Inheritance</li>
<li>Polymorphism</li>
</ul>
</body>
</html>

In this example, the h6 tag is used to define a sub-sub-sub-sub-subheading on the page: “Object-Oriented Programming”. This heading is nested within the “Java” section and is followed by a paragraph of content that provides more information about the subsection it belongs to. When this code is rendered in a web browser, the text “Object-Oriented Programming” will be displayed in a smaller font than h5, but larger than normal body text, and will help break up the page into very small subsections.

Syntax of HTML h6 tag

The proper syntax for the HTML h6 tag is as shown below:

<html>
<head>
<title>
H6 Tag Example
</title>
</head>
<body>
<section>

<p>Paragraph </p>
<h6>H6 TAG Sub-subsection Title</h6>

</section>

</body>
</html>

Sample Output

Attributes

The HTML h6 tag supports a few attributes that can be used to further define and modify the appearance and behavior of the heading. Here are some of the most commonly used attributes:

class: The class attribute is used to specify one or more CSS classes that will be applied to the heading. This allows you to style the heading using CSS.

Example:

<h6 class="subheading">Subheading Text</h6>

id: The id attribute is used to specify a unique identifier for the heading. This can be used to link to the heading from other parts of the same page or from other pages.

Example:

<h6 id="subheading">Subheading Text</h6>

style: The style attribute is used to apply inline CSS styles to the heading.

Example:

<h6 style="color: blue;">Subheading Text</h6>

title: The title attribute is used to provide additional information about the heading when the user hovers over it. This information is displayed in a tooltip.

Example:

<h6 title="This is a subheading">Subheading Text</h6>

These are some of the most commonly used attributes of the HTML h6 tag. However, it’s important to note that the h6 tag has fewer attributes than the higher-level heading tags, as it is intended for less prominent headings.

Attribute	Description	HTML Compatibility
align	Used for the text Alignment.	It is deprecated in HTML 4.01 and Obsolete in HTML5.

Note on HTML h6 tag

Here are some important notes on the HTML h6 tag:

The h6 tag is the smallest heading size in HTML and is typically used for the least important headings on a page.
The h6 tag should be used sparingly, and only when it is necessary to further subdivide content into very small subsections.
Headings should be used to structure content on a page and help make it more accessible to users. It is important to use headings in a hierarchical and logical manner, with h1 being the most important and h6 being the least important.
Headings should not be used solely for styling purposes. The use of larger font sizes and bold or italic text can achieve similar visual effects without affecting the structure and accessibility of the page.
When using headings, it is important to use them in the correct order. For example, an h2 tag should not be used before an h1 tag, as this would break the hierarchical structure of the page.
It is also important to use headings to convey the main topic or theme of a section, rather than just describing its appearance or layout.
Finally, it is important to remember that headings should be meaningful and descriptive, and should accurately reflect the content of the section they are defining.

Browser Compatibility

The HTML h6 tag has essential support with the following browsers:

Chrome
Internet Explorer (IE)
Opera
Safari (WebKit)
Firefox (Gecko)
Android
Firefox Mobile (Gecko)
Edge Mobile
Opera Mobile
Safari Mobile

Examples of HTML h6 tag

We will discuss the HTML h6 tag below, exploring examples of how to use the HTML h6 tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.

HTML5
HTML4
XHTML

We will discuss the HTML h6 tag below, with some examples of using the h6 tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Transitional, and XHTML 1.1.

HTML5
HTML4
XHTML

HTML5 Document

When you created a new web page in HTML5, your HTML h6 tag might look like this:

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>HTML5 Example by www.home4cloud.com</title>

</head>

<body>

<h1>Heading 1</h1>

<p>This is the content that would appear under Heading 1.</p>

<h6>Heading 6</h6>

<p>This is the content that would appear under Heading 2.</p>

</body>

</html>

In this above HTML5 Document example, we have created the HTML h6 tag with the text “Heading 6” that follows the HTML h1 tag.

HTML 4.01 Transitional Document

If you create a new HTML webpage in HTML 4.01, your HTML h6 tag might look like this, as shown below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<metahttp-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>HTML5 Example by www.home4cloud.com</title>

</head>

<body>

<h1>Heading 1 for home4cloud</h1>

<p>This is the content that would appear under Heading of h1 html tag</p>

<h6>Heading 6 for home4cloud</h6>

<p>This is the content that would appear under Heading of h6 html tag</p>

</body>

</html>

In this above HTML 4.01 Transitional Document example, we have created the HTML h6 tag with the text “Heading 6” that follows the HTML h1 tag.

XHTML 1.0 Transitional Document

If you create a new HTML webpage in XHTML 1.0 Transitional, your HTML h6 tag might look like this, as shown below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>XHMTL 1.0 Transitional Example by www.home4cloud.com</title>

<html>

<head>

<metahttp-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>HTML5 Example by www.home4cloud.com</title>

</head>

<body>

<h1>Heading 1 for home4cloud</h1>

<p>This is the content that would appear under Heading of h1 html tag</p>

<h6>Heading 6 for home4cloud</h6>

<p>This is the content that would appear under Heading of h6 html tag</p>

</body>

</html>

In this above XHTML 1.0 Transitional Document example, we have created the HTML h6 tag with the text “Heading 6” that follows the HTML h1 tag.

XHTML 1.0 Strict Document

If you create a new HTML webpage in XHTML 1.0 Strict, your HTML h6 tag might look like this, as shown below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>XHTML 1.0 Strict Example by www.home4cloud.com</title>

<head>

<metahttp-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>HTML5 Example by www.home4cloud.com</title>

</head>

<body>

<h1>Heading 1 for home4cloud</h1>

<p>This is the content that would appear under Heading of h1 html tag</p>

<h6>Heading 6 for home4cloud</h6>

<p>This is the content that would appear under Heading of h6 html tag</p>

</body>

</html>

In this above XHTML 1.0 Strict Document example, we have created the HTML h6 tag with the text “Heading 6” that follows the HTML h1 tag.

XHTML 1.1 Document

If you create a new HTML webpage in XHTML 1.1, your HTML h6 tag might look like this, as shown below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>XHTML 1.1 Example by www.home4cloud.com</title>

<head>

<metahttp-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>HTML5 Example by www.home4cloud.com</title>

</head>

<body>

<h1>Heading 1 for home4cloud</h1>

<p>This is the content that would appear under Heading of h1 html tag</p>

<h6>Heading 6 for home4cloud</h6>

<p>This is the content that would appear under Heading of h6 html tag</p>

</body>

</html>

In this above XHTML 1.1 Document example, we have created the HTML h6 tag with the text “Heading 6” that follows the HTML h1 tag.