Search for Courses, Topics

Heading and Paragraph Tags in HTML

Learn about Heading and Paragraph Tags in HTML.

31 Jan 2022-5 mins read
quiz
Challenge Inside! : Find out where you stand! Try quiz, solve problems & win rewards!

Abstract

A web browser distinguishes between a normal text and a text written in HTML through certain keywords these keywords are called HTML tags. HTML provides us various types of tags with each tag having different properties.Some of the most used tags are heading, paragraph, br, etc.

Scope of article

  1. This article discusses HTML heading tags with examples and the various types of heading tags.
  2. You will learn about HTML paragraph tags and how to use them with examples.
  3. After reading this article you will also understand how to use HTML <br> tag with examples.

Introduction

HTML heading and paragraph tags are used used to tell the browser how the content should be displayed as title, or subheadings, or as paragraphs.

If you write something that's organised, it's always easy to read! For example in this article, headings and paragraphs are not very distinguishable so it is hard to read.

Unorganised Article

The article below is well structured as headings, sub headings, and paragraphs are all distinguishable which makes it easy to read and look more attractive therefore it is very useful to use HTML headings and paragraphs tag.

Structured Article

It is easier to read any information if we can tell the difference between headers, subheadings, and paragraphs, and therefore we should structure our content properly.

HTML Headings

We use HTML heading tags to give headings and subheadings for our material. HTML heading tags are non-void elements. Which means every opening <h> tag must have a closing </h> tag. There are 6 types of heading tags :
<h1>heading</h1>
<h2>sub heading 1</h2>
<h3>sub heading 2</h3>
<h4>sub heading 3</h3>
<h5>sub heading 4</h5>
<h6>sub heading 5</h5>

From <h1> to <h6>, the font size drops, with <h1> being the largest and <h6> being the smallest.

The <h1> tag is similar to the <title> tag and is used to give our content a title. Because search engines utilise the article title to determine what the article is about, it is advised that we use the <h1> element to define the article's topic. Furthermore, we should only use the <h1> tag once because each topic has only one heading.

There are 6 heading tags in HTML h1, h2, h3, h4, h5 and h6. With h1 having the largest text size and h6 having the smallest.

Syntax

<h1> Text <h1>

Example code

<!DOCTYPE html>
<html>
<body>
   <h1> Heading </h1>
   <h2>  Sub Heading 1 </h2>
   <h3>  Sub Heading 2 </h3>
   <h4>  Sub Heading 3 </h4>
   <h5>  Sub Heading 4 </h5>
   <h6>  Sub Heading 5 </h6>
</body>
</html>

Output

HTML Headings

HTML Paragraphs

  • This tag is one of the basic HTML tag. It is used to classify bunch of text as a paragraph.
  • HTML paragraph tag is a non-void element. Therefore while writing paragraphs start with opening <p> tag and end with closing </p> tag.
  • Many new IDEs and editors have auto complete features so that we dont have to close HTML tags manually.
  • <p> tag have same text size as <h4> tag.
  • Paragraph tags can also be used for line breaks.

Paragraph tag is used to write paragraphs on a web page.

Syntax

<p>Text</p>

Example code

<html>
<body>
  <p>This is written using HTML paragraph  tag</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque consequat mattis ultrices. Etiam facilisis at metus nec pretium. Pellentesque luctus eleifend dapibus. Mauris a urna id odio consequat finibus in ut lorem. Nam id mi a leo egestas lobortis. Curabitur sollicitudin mi non metus pellentesque, fringilla fringilla est dapibus. Cras aliquam mauris ante, sit amet  turpis.</p>
</body>
</html> 

Output

HTML Paragraph Tags

HTML <br> tag

  • When writing an article for a website in HTML, you cannot simply press enter to move to the next line; instead, you need to use the HTML <br> tag.
  • HTML <br>tag is a void element.Therefore we do not have to use a closing </br> tag after using an opening <br> tag.
  • We can use multiple <br> tags; each <br> tag creates a new line space.

<br> tag is used to give a line break in a text.

Syntax

 Text <br> Text.

Example code

<!DOCTYPE html>
<html>
<body>
 <h3> The br tag</h3>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque consequat mattis ultrices.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque consequat mattis ultrices..</p>
</body>
</html>

Output

HTML br tag

Here is an example using all three tags together.

Code


<html>
<body>
  
   <h1> Heading </h1>
   <h2>  Sub Heading 1 </h2>
   <h3>  Sub Heading 2 </h3>
   <h4>  Sub Heading 3 </h4>
   <h5>  Sub Heading 4 </h5>
   <h6>  Sub Heading 5 </h6>
  
 
  
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque consequat mattis ultrices. Etiam facilisis at metus nec pretium. Pellentesque luctus eleifend dapibus. Mauris a urna id odio conse.</p>
 
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>

Output

HTML all tags

Summary

  • HTML heading tags are used to give title and sub headings to an article.
  • There are six different types of heading tags, with h1 having the largest font size and h6 having the smallest.
  • HTML paragraph elements are used to create paragraphs on a website and can also function as a line break.
  • We can't merely press enter in HTML to make a line break, therefore the <br> tag is used instead.
  • Each <br> tag represents a single line break.
Challenge Time!
quiz Time to test your skills and win rewards! Note: Rewards will be credited after the next product update.
certificate icon
Certificates
HTML Tutorial
Module Certificate
Criteria
You’ll be able to claim a certificate for any course you have access to only after you’ve spent enough time learning. The time required is determined by the length of the course.
Certificates are a fantastic way to showcase your hard-earned skills to employers, universities, and anyone else that may be interested. They provide tangible proof that you’ve completed a course on Scaler Topics. In many cases they can help you claim a training reimbursement or get university credit for a course.