HTML Headings

HTML Headings
Nikhil
Published on 2021-07-01 04:25:25

HTML5 Headings Tags Tutorial

HTML provides not only plain paragraph tags, but six separate header tags to indicate headings of various sizes and thicknesses. Enumerated as heading 1 through heading 6, heading 1 has the largest and thickest text while heading 6 is the smallest and thinnest, down to the paragraph level. This topic details the proper usage of these tags.

Any document starts with a heading. Where HTML use different sizes for your headings. HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While displaying any heading, the browser adds one line before and one line after that heading.

How to Using Headings Tags In HTML5


Headings can be used to describe the topic they precede and they are defined with the <h1> to <h6> tags. Headings support all the global attributes.

  • <h1> defines the most important heading.
  • <h6> defines the least important heading.

Defining a heading:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Correct structure matters


Search engines and other user agents usually index page content based on heading elements, for example, to create a table of contents, so using the correct structure for headings is important. In general, an article should have one h1 element for the main title followed by h2 subtitles – going down a layer if necessary. If there are h1 elements on a higher level they shouldn't be used to describe any lower-level content.

An example document (extra indentation to illustrate hierarchy):

<!DOCTYPE html>
<html>

<head>
    <title>Atutorialhub html heading tag example</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>

output:

This is heading 1

This is heading 2

   

This is heading 3

   

This is heading 4

   

This is heading 5

   

This is heading 6

ATutorialHub Related Guide

HTML Tutorials Comments (8)

Leave a Comment

Your email address will not be published. Required fields are marked*

User Comments

html tutorial comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

html tutorial comments

raju

2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

html tutorial comments

Shivani

2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

html tutorial comments

Harshitha

2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

html tutorial comments

Sowmya

2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

html tutorial comments

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

html tutorial comments

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

html tutorial comments

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website