Introduction
Today, we will learn about the <p>
tag in HTML. The <p>
tag stands for “paragraph.” It is used to define a block of text as a paragraph.
Structure of <p>
Tag
- The
<p>
tag is a container for text. - It starts with an opening tag
<p>
. - It ends with a closing tag
</p>
. - Example:
<p>This is a paragraph.</p>
Usage of <p>
Tag
- The
<p>
tag creates a paragraph. - It automatically adds space before and after the paragraph.
- You can use multiple
<p>
tags to create multiple paragraphs. - Example:
<p>First paragraph.</p>
<p>Second paragraph.</p>
Attributes of <p>
Tag
- The
<p>
tag can have attributes to style the paragraph. - Common attributes include
align
,class
, andid
.
Align Attribute
- The
align
attribute sets the text alignment. - Values can be
left
,right
,center
, orjustify
. - Example:
<p align="center">Centered paragraph.</p>
Centered paragraph.
Class and ID Attributes
class
andid
are used to apply CSS styles.class
can be used multiple times.id
is unique to a single element.- Example:
<p class="myClass">Styled with class.</p>
<p id="myId">Styled with ID.</p>
Nesting and Combining Tags
- You can nest other tags inside a
<p>
tag. - Common nested tags include
<strong>
,<em>
, and<a>
. - Example:
<p>This is a <strong>bold</strong> paragraph with an <a href="#">anchor link</a>.</p>
By understanding and using the <p>
tag correctly, you can create well-structured and readable HTML documents.
Summary of <p>
Tag in HTML
Aspect | Description | Example |
---|---|---|
Purpose | Defines a paragraph | <p>This is a paragraph.</p> |
Basic Structure | Opening tag <p> and closing tag </p> | <p>Text here</p> |
Automatic Spacing | Adds space before and after the paragraph | <p>First paragraph.</p> <br><p>Second paragraph.</p> |
Align Attribute | Sets text alignment: left , right , center , justify | <p align="center">Centered text.</p> |
Class Attribute | Used to apply CSS styles, can be used multiple times | <p class="myClass">Styled with class.</p> |
ID Attribute | Used to apply unique CSS styles, only used once | <p id="myId">Styled with ID.</p> |
Nesting Tags | Can nest other tags like <strong> , <em> , <a> | <p>This is a <strong>bold</strong> paragraph.</p> |
Good Practices | Always close the tag, use for readability, enhance appearance with attributes | <p>Good practice example.</p> |
This table summarizes the key points about the <p>
tag in HTML, including its purpose, structure, and attributes for styling.