HTML `

` Tag (Paragraph): Structuring and Styling Text Content

Learn how to use the HTML `

` (paragraph) tag to structure and style text content on your web pages. This tutorial explains its basic functionality, demonstrates its use, and shows how to customize paragraph appearance using CSS for improved readability and visual design.

Understanding the HTML <p> Tag (Paragraph)

What is the <p> Element?

The HTML <p> tag (paragraph) defines a paragraph of text. Browsers automatically add some space (margin) above and below each paragraph to improve readability. Multiple lines of text within a <p> tag will be treated as a single paragraph, and the browser handles wrapping the text onto multiple lines as needed.

Example:

<p>This is some text in a paragraph.</p>

Browser Support

The <p> element is supported by all major web browsers.

Styling Paragraphs with CSS

You can use CSS to customize the appearance of paragraphs, controlling things like text alignment, font, color, line spacing, and more. This provides a high degree of control over the visual presentation of your text.

Example:

p {
  text-align: justify; /* Justified text */
  font-size: 1.2em;   /* Larger font size */
  line-height: 1.5;   /* Increased line spacing */
}

Default CSS Styles

Most browsers add default top and bottom margins to paragraphs to separate them visually. These margins can be overridden with custom CSS.

p {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  /* ... other default styles ... */
}