How to Use the Paragraph Tag in HTML for Webpage Text
Working with Text
This lesson will teach us how to use the HTML paragraph tag to structure content on our webpage. It improves readability, user experience, and engagement. It's a fundamental element for web content development.
What is Paragraph Tag in HTML
The paragraph tag in HTML is used to create a paragraph of text on a webpage. It is one of the most commonly used tags in HTML. It is represented by the <p> tag and is typically used to organize and format text on a webpage.
The paragraph tag is a container tag consisting of opening and closing tags, and the paragraph of text is written between the opening <p> and closing </p> tags.
Here's an example of how to use paragraph tag in HTML:
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Paragraph Tag Example</title>
</head>
<body>
<p>This is a paragraph of text.</p>
<p>This is another paragraph of text.</p>
</body>
</html>A paragraph tag is a block-level element, meaning it takes up the full width of its container and creates a new line after it. We will see a line break between the two paragraphs, as shown in the above output.
Attributes of Paragraph Tag
Here are the attributes we can use with the paragraph tag:
- id
- class
- style
- title
- align
id
The id attribute is used to assign a unique name to an element on a web page. We can assign an id to the paragraph tag and use it to apply a specific style to that particular tag.
Example
<p id="para">This is a paragraph text.</p>In the above example, we assign an id attribute to the p tag with a value para. In CSS and JavaScript, we can use the name para to access the specific p tag whose id value is set to the name para.
Note: The id attribute can be used on any tag to assign a unique tag name. It must be unique for each tag, meaning we can't use the same id name for another tag in an HTML document.
class
The class attribute is used to define a group of elements and to apply a specific style to that group. We can define a class for the paragraph tags and use it to apply a specific style to all the paragraph tags that belong to a particular class.
Example
<p class="info">This is a paragraph text.
<p class="info">This is another paragraph text.</p>In the above example, both p tags have the same class name, info. If any CSS style is applied to the class name info, it will be applied on both p tags.
Note: The class attribute can be used on any tag to assign a group name to the tag.
style
The style attribute can be used to apply inline css styles to the paragraph tag. We will learn how to apply inline css style using the style attribute later in our CSS tutorial.
Example
<p style="color: red">This is a paragraph text.</p>The style="color: red" will change the color of the paragraph tag to red color.
title
The title attribute can be used to add a tooltip or additional information to the paragraph tag, which will only appear when the user places the mouse cursor on the paragraph.
Example
<p title="About HTML">HTML stands for HyperText Markup Language. It is the standard language for creating the content and structure of web pages and web applications.</p>align
The align attribute can be used to align a paragraph horizontally left, right, center, or justify on the webpage.
Example
<p align="left">Paragraph Align to Left.</p>
<p align="right">Paragraph Align to Right.</p>
<p align="center">Paragraph Align to Center.</p>
<p align="justify">This is a long paragraph which is align to justify. It will look vertically equal to both left and right side when you resize the window.</p>