HTML Heading and Paragraph Tags Explained With Examples
This tutorial explains how to create headings and paragraphs in HTML documents using heading and paragraph tags.
Headings and paragraphs are some common HTML elements that we see on all websites. In HTML, <h1> to <h6> tags represent headings and are used to describe the contents below them. The paragraph or the <p> tag in HTML helps users define a paragraph. This blog explains HTML heading and paragraph tags and their basic implementation through examples.
Must read: What is HTML?
Must Check: How to Create Table in HTML
Table of Contents
- What is an HTML Heading?
- Why are HTML Headings are Important?
- HTML Heading Tags
- What is an HTML Paragraph?
- Why are HTML Paragraph Tags are Important?
- HTML Paragraph Tag Attributes
- HTML Line Break
- Conclusion
- Frequently Asked Questions
Explore- HTML Online Courses & Certifications
Best-suited HTML & CSS courses for you
Learn HTML & CSS with these high-rated online courses
What is an HTML Heading?
An HTML heading is a title or subheading that we want to display on a webpage. In HTML, there are six headings defined using <h1> to <h6> tags. h1 is the highest level or the main heading, while h6 is the least important.
The text inside the heading tags <h1>TEXT</h1> shows on the browser. The size of the text depends on the heading tag.
HTML Headings Syntax:
<h1>TEXT</h1>
Output:
Explanation:
- <h1>: It is the start tag for the H1 heading.
- TEXT: This text will appear as the main heading on a visitor’s screen.
- </h1>: This is the closing tag for the H1 heading.
Why are HTML Headings are Important?
Headings in HTML are helpful for both search engines and site visitors. Here are the benefits:
- Search Engines: HTML headings help search engines understand and index the structure of a web page. The <h1>…</h1> tag is for main headings. It is followed by <h2> through <h6> tags that denote subheadings.
- Site Visitors: They also help site visitors quickly scan and understand a page. Proper headings on a web page help visitors determine if the content is relevant to them.
HTML Heading Tags
The following are the six HTML tags for different heading sizes.
<h1>Heading 1</h1> - (Most Important) <h2>Heading 2</h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading 5</h5><h6>Heading 6</h6> - (Least Important)
Here is a simple example in HTML to display the H1 through H6 headings on a web page:
<!DOCTYPE html> <html> <head> <title>Heading in HTML</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:
What is an HTML Paragraph?
Paragraphs tags or <p> tags in HTML help us create paragraphs on a web page. On web browsers, paragraphs display as blocks of text separated from adjacent blocks by blank lines, white spaces, or first-line indentation.
You can use a <p> tag followed by the content you want to display in your paragraph and a </p>. Whenever the web browser comes across a <p> tag, it starts its contents on a new line.
HTML Paragraph Syntax:
<p>Paragraph Content</p>
Output:
Explanation:
- <p>: Start tag for the paragraph.
- Paragraph Content: The text will appear as a paragraph on a visitor’s screen.
- </h1>: It is the closing tag for the paragraph.
Why are HTML Paragraph Tags Important?
HTML paragraphs help us in multiple ways, such as:
- They make a web page more readable by giving it a structural view.
- Paragraphs can consist of different types of related content, such as text, images, forms, and more.
Here is a simple example in HTML to display different paragraphs on a web page:
<!DOCTYPE html> <html> <head> <title>Paragraph in HTML</title> </head> <body> <p>This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1.</p> <p>This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2.</p> <p>This is paragraph 3. This is paragraph 3. This is paragraph 3. This is paragraph 3. This is paragraph 3. This is paragraph 3. This is paragraph 3. This is paragraph 3. This is paragraph 3. This is paragraph 3. This is paragraph 3.</p> </body> </html>
Output:
Suggested Read:
HTML Paragraph Tag Attributes
The paragraph tag in HTML supports some attributes, which include:
| Attribute | Value | Description |
| align | left right center justify |
Aligns the text within a paragraph |
Example:
<!DOCTYPE html> <html> <head> <title>Paragraph Align Attribute</title> </head> <body> <p style="text-align: left;">This</p><p style="text-align: center;">Is </p><p style="text-align: right;">Paragraph Alignment</p> </body> </html>
Output:
Learn how to use HTML attributes to make HTML elements more meaningful; read our blog – HTML Attributes Explained with Examples.
HTML Line Break
HTML line break tags help when we don’t want to start a new paragraph but want the sentence to start from a new line. Using the <br> tag, we can break the sentence continuation and make it begin on a new line.
Example:
<!DOCTYPE html> <html> <head> <title>HTML Line Break</title> </head> <body> <p>This is an example to show how the line break tag can break the sentence continuation and make it start from a new line. <br>This helps when we want our content to start on a new line but do not want to start a new paragraph. </p></body> </html>
Output:
Conclusion
In this article, we discussed HTML Headings and HTML Paragraphs with examples. Please read our article: Basic Structure of an HTML Document to understand the essential elements required to create an HTML document and learn how an HTML page is structured.
FAQs
How many headings are there in HTML?
There are six heading tags in HTML. The HTML heading tags include h1, h2, h3, h4, h5, and h6. Each heading element has a start tag and a closing tag. The tag represents the main heading in the hierarchy, while represents the least important subheading.
How many H1 headings can I have on a single page?
Ideally, there should be just one h1 tag per page.
How to use H1, H2, and H3 tags on a web page?
H1, H2, and H3 are the commonly used headings on web pages. You can use H1 to provide the main title of a web page or document. It should summarize the contents of that page as the H1 tag tells the search engines what a page is all about. You can use H2 followed by H3 to organize sub-sections. H4, H5, and H6, if you want to add more sub-sections or subcategories to break the content on your web page.
This is a collection of insightful articles from domain experts in the fields of Cloud Computing, DevOps, AWS, Data Science, Machine Learning, AI, and Natural Language Processing. The range of topics caters to upski... Read Full Bio
Top Picks & New Arrivals
