HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials
  • Insights
  • Verify Certificate
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

HTML5andCSS3.org helps developers learn modern frontend skills with practical tutorials, production-ready snippets, and fast web tools built for everyday coding.

Quick Links

  • About Us
  • Contact Us
  • Privacy Policy
  • Copyright
  • Disclaimer

Top Tools

  • Try It Editor
  • JSON Formatter
  • CSS Minifier
  • HTML Minifier
  • Base64 Encoder / Decoder

Contact

  • business@html5andcss3.org
Newsletter

Learn at your own pace, practice with useful tools, and build websites you're proud of.

© 2011-2026 html5andcss3.org. All rights reserved.

How to Use

HTML Tutorial

HTML Basics

Introduction to HTMLHTML EditorsHTML StructureHTML Elements & AttributesHTML HeadingsHTML ParagraphsHTML FormattingHTML CommentsHTML Styles

HTML Text and Links

HTML Text FormattingHTML Quotations & CitationsHTML LinksHTML Email Links

HTML Lists and Tables

HTML ListsHTML TablesTable Styling & Borders

HTML Images and Media

HTML ImagesHTML Picture ElementHTML AudioHTML VideoHTML Embed & Object

HTML Forms

HTML Forms OverviewHTML Form ElementsHTML Input TypesHTML Input AttributesHTML Form AttributesHTML Form Validation

HTML Layout

HTML Block vs Inline ElementsHTML Div & SpanHTML Semantic Layout TagsHTML Iframes

Advanced HTML

HTML Entities & SymbolsHTML EmojisHTML Head Element TagsHTML Meta Tags for SEOHTML Responsive Design

HTML References

HTML5 New TagsDeprecated TagsHTML Global AttributesEvent AttributesComplete HTML Tag ListComplete HTML5 ElementsHTML Tutorial PDF
  1. Home
  2. /
  3. Tutorials
  4. /
  5. HTML Tutorial
  6. /
  7. HTML Paragraphs

HTML Basics

HTML Paragraphs

Paragraphs are the foundation of text content on any webpage.
In HTML, the <p> tag is used to define a paragraph - separating blocks of text and improving readability for both users and browsers.

What Is an HTML Paragraph?

An HTML paragraph is created using the <p> element.
Browsers automatically add space before and after each paragraph to make text easier to read.

Paragraph Example

html

<p>This is my first paragraph.</p>
<p>This is another paragraph with more text.</p>

Each paragraph is treated as a separate block of content.

How Browsers Handle Paragraphs

  • Browsers ignore extra spaces or line breaks inside a paragraph.
  • Even if you press Enter or add multiple spaces, HTML will display them as a single space.

Example

html

<p>This
is     one
paragraph.</p>

Paragraph Styling with CSS

Example

html

<p style="color: #29AB87; font-size: 18px; line-height: 1.6;">
HTML paragraphs make your text organized and easy to read.
</p>

Common properties to style paragraphs:

  • color - text color
  • font-size - size of text
  • line-height - spacing between lines
  • text-align - alignment (left, center, right, justify)

Aligning Text in Paragraphs

Example

html

<p style="text-align:center;">This paragraph is centered.</p>
<p style="text-align:right;">This paragraph is aligned to the right.</p>
<p style="text-align:justify;">This paragraph is justified like in newspapers.</p>

Alignment improves presentation and helps with layout design.

Nested Elements Inside Paragraphs

You can include inline elements (formatting tag) such as , , , , or inside paragraphs.

Example

html

<p>HTML <strong>paragraphs</strong> can include <em>formatted text</em> and <a href="#">links</a>.</p>

Things to Remember

  • Paragraphs cannot contain block-level elements (like <div> or <h1>).
  • Always close the paragraph tag (</p>).
  • Avoid leaving empty <p></p> tags - they create unwanted space.

Browser Support

Chrome
Edge
Firefox
Safari
Opera
IE9+
YesYesYesYesYesYes

Conclusion

HTML paragraphs structure your text and make your web content clean, readable, and accessible.
Use them properly to separate ideas, add spacing, and create a natural reading flow for visitors.

PreviousHTML HeadingsNextHTML Formatting