How to format HTML Headings

HTML headings has six level which are <h1>, <h2>, <h3>, <h4>, <h5> and <h6>. These headings tell how important the content is on the document page.

By default, HTML has each heading in bold and specific font. And the higher the heading tag, the lesser the importance. That is, <h1>, the least number in the six levels, bears the most significant priority.

In creating a document, these headings can appear as titles or subtitles depending on where they are placed in a document.

For important headings or titles, use h1. And for subtitles, use any other heading you desire.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   <title>HTML5 HEADINGS</title>
</head>
<body>
    <h1>Heading 1 </h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
   <h5>Heading 5</h5>
   <h6>Heading 6</h6>
</body>
</html>

In the above example, there is a white space after each level of heading called a margin. The web browser automatically inserts a margin after a heading because it is treated as a title or subtitle.

Nesting In HTML Heading

In HTML headings, tags can be nested to add or improve the document look.

In the example, the <u>, <p>, <mark>, and <hr> will be nested into the web browser to improve the document.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>NESTING IN HTML5 HEADINGS</title>
</head>
<body>
    <h1><u>NESTING <mark>TAGS</mark> IN HTML5</u></h1>
<p>Looking at the h1 heading, you'll see that the underline tag and the mark tag has been nested to underline the title and highlight the word, <b>TAGS</b>, respectively, in the document.</p>
<p>And these subsequent paragraphs as tag p have been used to explain what happened in the h1 heading.</p>
</body>
</html>

Changing Font Sizes of Headings

It is possible to change the font sizes of each heading to make them bigger but not smaller. However, these headings come with their default font sizes, and rather than make <h3> bigger, use <h2> instead.

To change the font size of a heading and its color, use inline CSS.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 HEADINGS</title>
</head>
<body>
    <h1 style="color: #123783; font-size: 40px;">HTML5 HEADING</h1>
<p>An inline CSS has been used to change the color and font size of the h1 heading.</p>
<p>You'll learn more about CSS in the CSS tutorial.</p>
</body>
</html>

Importance Of Headings in HTML

  1. Headings allow search engines to identify a web page's structure and most important contents.
  2. Headings help the internet user quickly skim through a document on a web page and find the necessary content.