X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

HTML Headings

The heading definition is a title at the head of a page or section of a book. It is very important to have different types of headings to structure the content of the web page. Headings help search engines to understand and index the structure of the web page.

Heading Tags

There are 6 levels of headings in HTML: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.

The <h1> - <h6> tags are used to mark headings according to their importance. The <h1> tag stands for the most important heading of the web page and the <h6> stands for the least important and smallest one.

Example of <h1> - <h6> html heading tags:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <h3>This is heading 3</h3>
    <h4>This is heading 4</h4>
    <h5>This is heading 5</h5>
    <h6>This is heading 6</h6>
  </body>
</html>

Importance of Heading

  • HTML headings emphasize important topics and the document structure thus improving user engagement.
  • Use only one <h1> tag on any web page. The tag should describe what your page is about and contain a keyword, as it helps to improve rankings in Google.
  • Search Engines use headings for indexing the structure and content of the webpage.

Heading Size

You can change the default size of the headings. Set a size for any heading with the style attribute, using the CSS font-size property:

Example of changing the size of the heading with the font-size property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1{
      font-size: 50px;
      }
    </style>
  </head>
  <body>
    <h1>This is heading 1</h1>
  </body>
</html>

Important Notes

  • Do not use heading tags for making the text bold or for increasing the text size. Instead, you should use CSS properties like font-weight and font-size. Remember, search engines use headings to structure the content.
  • Do not skip heading levels. Use the <h1> as the main headings of the webpage, followed by the <h2> headings, then the less important <h3> headings, etc.
  • Avoid using <h1> more than once on a page.

HTML Horizontal Rules

The <hr> tag defines a thematic change between paragraph-level elements in an HTML page. The <hr> element is used to separate content in an HTML page:

Example of headings separated with the <hr> element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is heading 1</h1>
    <p>Lorem ipsum is simply dummy text...</p>
    <hr>
    <h2>This is heading 2</h2>
    <p>Lorem ipsum is simply dummy text...</p>
    <hr>
    <h3>This is heading 2</h3>
    <p>Lorem ipsum is simply dummy text...</p>
  </body>
</html>

HTML Head Element

The HTML <head> element contains metadata (document title, character set, styles, links, scripts), specific information about the web page that is not displayed to the user.

Metadata provides browsers and search engines with technical information about the web page.

Example of the usage of <head> element:

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
  </head>
  <body>
    <p>HTML head element contains meta data.</p>
    <p>Meta data is data about the HTML document.</p>
  </body>
</html>

What is a Header?

Do not confuse the HTML header tag with an HTML heading tag because headers are a piece of text repeating at the top of the page. The Heading is a title or a subtitle displaying on the webpage.




Do you find this helpful?

Related articles