Categories
Learn HTML

HTML: h1 tag

HTML: h1 tag

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

 

 

Description of HTML h1 tag

The HTML h1 tag is used to define the main heading or title of a web page. It stands for “Heading 1” and is the most important heading tag in HTML. The h1 tag is typically used once per page and should contain a concise and descriptive title that accurately reflects the content of the page.

Here’s an example of how the h1 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>
<p>This is the first paragraph of my web page.</p>
<p>This is the second paragraph of my web page.</p>
</body>
</html>

In this example, the h1 tag is used to define the main heading of the page, “Welcome to my Web Page”. It is followed by two paragraphs of content. When this code is rendered in a web browser, the text “Welcome to my Web Page” will be displayed in a large font at the top of the page.

Syntax of HTML h1 tag

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

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

<p>Paragraph </p>
<h1>H1 TAG Sub-subsection Title</h1>

</section>

</body>
</html>

Sample Output

 

Attributes

The HTML h1 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:

  1. 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:

<h1 class="subheading">Subheading Text</h1>
  1. 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:

<h1 id="subheading">Subheading Text </h1>
  1. style: The style attribute is used to apply inline CSS styles to the heading.

Example:

<h1 style="color: pink;">Subheading Text</h1>
  1. 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:

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

These are some of the most commonly used attributes of the HTML h1 tag. However, it’s important to note that the h1 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 h1 tag

Here are some important notes on the HTML h1 tag:

  1. The h1 tag is used to define the main heading on a web page, and it is the largest and most important heading on the page.
  2. The h1 tag should be used to indicate the primary topic or theme of the page, and to provide a clear and concise summary of its content.
  3. Headings should be used to structure content and make it more accessible to users. As such, the h1 tag should only be used once per page.
  4. When using headings, it is important to use them consistently throughout the page, and to avoid skipping levels (e.g. going from h1 to h3 without using h2).
  5. Headings should be descriptive and meaningful, and should accurately reflect the content of the section they are defining. Using vague or misleading headings can confuse users and make the content less accessible.
  6. It is important to use headings for their semantic meaning, rather than just for styling purposes. Using larger font sizes or bold/italic text can achieve similar visual effects without affecting the structure and accessibility of the page.
  7. It is also important to note that headings should not be used solely for decorative or aesthetic purposes, and they should always be relevant to the content that follows.

Browser Compatibility

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

  1. Chrome
  2. Internet Explorer (IE)
  3. Opera
  4. Safari (WebKit)
  5. Firefox (Gecko)
  6. Android
  7. Firefox Mobile (Gecko)
  8. Edge Mobile
  9. Opera Mobile
  10. Safari Mobile

Examples of HTML h1 tag

We will discuss the HTML h1 tag below, exploring examples of how to use the HTML h1 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 h1 tag below, with some examples of using the h1 tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Transitional, and XHTML 1.1.

  1. HTML5
  2. HTML4
  3. XHTML

 

 

HTML5 Document

When you create a new web page in HTML5, your HTML h1 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 h1 tag with the text “Heading 1” that follows the HTML h6 tag.

 

HTML 4.01 Transitional Document

If you create a new HTML webpage in HTML 4.01, your HTML h1 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 h1 tag with the text “Heading 1” that follows the HTML h6 tag.

 

 

XHTML 1.0 Transitional Document

If you create a new HTML webpage in XHTML 1.0 Transitional, your HTML h1 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 h1 tag with the text “Heading 1” that follows the HTML h6 tag.

 

 

XHTML 1.0 Strict Document

If you create a new HTML webpage in XHTML 1.0 Strict, your HTML h1 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 h1 tag with the text “Heading 1” that follows the HTML h6 tag.

 

 

XHTML 1.1 Document

If you create a new HTML webpage in XHTML 1.1, your HTML h1 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 h1 tag with the text “Heading 1” that follows the HTML h6 tag.