The HTML paragraph tag is used to display a block of text on a webpage. It helps divide written content into separate, readable sections.
In HTML, paragraphs are created using the <p> element. It is one of the most commonly used elements for displaying textual information such as descriptions, articles, tutorials, and documentation.
The <p> tag defines a paragraph in HTML. Text written between the opening and closing paragraph tags is treated as a separate block of content.
<p> Paragraph Content </p>
<p> HTML is used to create webpages. </p>
HTML is used to create webpages.
The <p> element is a paired element because it normally contains both an opening tag and a closing tag.
A webpage can contain any number of paragraphs. Each logical paragraph should normally be placed inside its own <p> element.
<p> HTML is a markup language. </p> <p> HTML defines the structure of webpages. </p> <p> CSS is used to style webpages. </p>
HTML is a markup language.
HTML defines the structure of webpages.
CSS is used to style webpages.
A browser treats the <p> element as a block-level element. By default, browsers provide space around paragraphs using their built-in stylesheet.
<p> First paragraph </p> <p> Second paragraph </p>
First paragraph
Second paragraph
The exact spacing and appearance of paragraphs can be changed using CSS.
The <p> element and <br> element both affect the presentation of text, but they serve different purposes.
| <p> Tag | <br> Tag |
|---|---|
| Defines a paragraph. | Creates a line break. |
| Represents a separate block of text. | Moves following content to the next line. |
| Has opening and closing tags. | Is a void element and has no closing tag. |
| Suitable for paragraphs and textual sections. | Useful when a line break is part of the content. |
HTML<br> CSS<br> JavaScript
HTML
CSS
JavaScript
HTML normally collapses consecutive spaces and line breaks in source code into a single space when displaying normal text.
<p>
HTML
is
easy
to learn.
</p>
The browser does not preserve the extra spaces and line breaks in the source code. For controlled spacing or layout, CSS should be used.
An empty paragraph does not contain meaningful text.
<p></p>
Empty paragraphs should not be used to create spacing between elements. CSS margin and padding are better choices for controlling layout spacing.
A paragraph can contain inline elements to emphasize or highlight particular parts of the text.
| Element | Purpose |
|---|---|
| <strong> | Represents important text. |
| <em> | Represents emphasized text. |
| <mark> | Highlights relevant text. |
| <b> | Draws attention to text without adding importance. |
| <i> | Represents text in an alternate voice or style. |
<p> Learn <strong>HTML</strong> with <em>practical examples</em> and <mark>simple explanations</mark>. </p>
Learn HTML with practical examples and simple explanations.
CSS should be used when you need to control the appearance of paragraphs. Common properties include color, font-size, line-height, text-align, and margin.
<p style="color:blue; font-size:20px;"> This paragraph is styled using CSS. </p>
This paragraph is styled using CSS.
Paragraph text can be aligned using the CSS text-align property.
<p style="text-align:center;"> This paragraph is centered. </p>
This paragraph is centered.
| Value | Description |
|---|---|
| left | Aligns text to the left. |
| center | Centers the text. |
| right | Aligns text to the right. |
| justify | Adjusts spacing so text is aligned along both sides. |
The paragraph element supports global HTML attributes. These attributes can be used to identify elements, apply CSS classes, provide additional information, or attach custom data.
| Attribute | Purpose |
|---|---|
| id | Provides a unique identifier for an element. |
| class | Assigns one or more CSS classes. |
| style | Applies inline CSS. |
| title | Provides additional advisory information. |
| data-* | Stores custom data associated with an element. |
<p id="intro" class="description"> Welcome to HTML learning. </p>
<!DOCTYPE html> <html lang="en"> <head> <title>HTML Paragraph Example</title> </head> <body> <h1> Introduction to HTML </h1> <p> HTML is a markup language used to create the structure of webpages. </p> <p> Paragraph elements are used to organize textual information into readable sections. </p> <h2> Benefits of HTML </h2> <p> HTML provides the basic structure required for creating webpages. </p> </body> </html>
HTML is a markup language used to create the structure of webpages.
Paragraph elements are used to organize textual information into readable sections.
HTML provides the basic structure required for creating webpages.
A paragraph should not be used as a replacement for a heading. Use <h1> to <h6> according to the document structure.
<p> Introduction to HTML </p>
<h1> Introduction to HTML </h1>
Do not use empty paragraphs to create visual gaps between elements. Use CSS margin or padding instead.
The <br> element should be used when a line break is meaningful to the content. It should not be used repeatedly to create page spacing or layout.
Large blocks of text can be difficult to read. Divide lengthy explanations into logical paragraphs and use headings where appropriate.
| <p> Element | <div> Element |
|---|---|
| Represents a paragraph of text. | Generic container for grouping content. |
| Has semantic meaning for paragraph content. | Has no specific content meaning by itself. |
| Normally contains phrasing content. | Can group different types of content. |
| Browsers provide default paragraph margins. | Does not normally have paragraph margins by default. |
<p> This is a paragraph. </p> <div> This is a general content container. </div>
<h1> Computer Science Engineering </h1> <p> Computer Science Engineering covers programming, algorithms, databases, operating systems, and computer networks. </p> <h2> Programming Languages </h2> <p> Students can learn languages such as C, C++, Java, and Python. </p> <p> HTML is also an important technology for learning web development. </p>
Computer Science Engineering covers programming, algorithms, databases, operating systems, and computer networks.
Students can learn languages such as C, C++, Java, and Python.
HTML is also an important technology for learning web development.
The HTML <p> element is used to define paragraphs of text. It helps organize written content into readable and meaningful sections.
The <br> element creates a line break, while CSS should be used to control paragraph appearance, spacing, alignment, and typography.
Using paragraphs together with appropriate headings and semantic HTML elements helps create clear, accessible, and maintainable webpages.
The HTML paragraph tag is a fundamental element for displaying textual content on webpages. By placing related sentences inside <p> elements, developers can create a clear and organized document structure.
Understanding paragraphs, line breaks, text formatting, CSS styling, and common HTML practices provides a strong foundation for learning more advanced web development concepts.