HTML Headings

Headings are considered very important in HTML documents.

HTML Headings


Defining Headings are done with the <h1> to <h6> tags.

<h1> helps you define the heading that are most important heading. <h6> helps you define the heading that are least important heading.


<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>
Try it Yourself

Note: before and after a heading browsers will automatically add few white space (a margin)

Headings Are Important


Search engines makes use of the headings for indexing the structure and content of your web pages.

Users make use of headings to skim your pages.For showing the document structure, it is important to use headings.

<h1> headings are used to indicate main headings, which is followed by <h2> headings, then the less important headings are given <h3>, and so on.

Note: Make use of HTML headings for headings only. Do not use headings to make text BIG or bold.

HTML Horizontal Rules


The <hr> tag is used to define a thematic break in an HTML page. It is displayed mostly as a horizontal rule.

The <hr> element can be used for separating content (or define a change) in an HTML page:


<h1>This is heading 1</h1>
<p>This is some text.</p>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
Try it Yourself

The HTML <head> Element


The HTML <head> element is not related or nothing to do with HTML headings.

The <head> element will be a container for metadata. HTML metadata refers to data about the HTML document. These Metadata present is not displayed by the browser.

The <head> element is written between the <html> tag and the <body> tag:


<!DOCTYPE html>

  <title>My First HTML</title>
  <meta charset="UTF-8">

Try it Yourself

Note: Metadata is used to define the document title, character set, styles, links, scripts, and other meta information.

HTML Tip - How to View HTML Source


You could have seen a Web page and wondered "Wow! How these things are done?"


For finding it out, right-click on the page and click on "View Page Source" (in Chrome) or "View Source" (in IE), or something similar in another browser. This opens a window containing the HTML code of the page.

Test Yourself with Exercises


HTML Tag Reference


NGO' tag reference consists of additional information regarding these tags and their attributes.

in the next chapters of this tutorial, you can learn more about HTML tags and attributes .

Tag Description
<html> Defines the root of an HTML document
<body> Defines the document's body
<head> A container for all the head elements (title, scripts, styles, meta information, and more)
<h1> to <h6> Defines HTML headings
<hr> Defines a thematic change in the content