HTML Basics

Lists & Tables

Links & Media

Forms & Layout

HTML Paragraphs

❮ Previous Next ❯

HTML Paragraphs: Formatting Text on the Web

A paragraph in HTML is simply a block of text enclosed within the <p> tag. The <p> tag helps divide content into manageable, readable sections. It is the go-to element for wrapping text in a web page that is meant to be displayed as a distinct paragraph.

Properties of the Paragraph Tag:

1. Creating Basic Paragraphs

To create a paragraph, simply wrap your text inside an opening <p> tag and a closing </p> tag.

Basic Paragraph Example:

<!DOCTYPE html>
<html lang="en">
<body>
    <p>A Computer Science portal by IntricateDevo.</p>
    <p>It contains well written, well thought articles.</p>
</body>
</html>

2. Browser Formatting (Spaces and Lines)

When writing HTML, you might be tempted to use the Enter key to add new lines or the Spacebar to add extra spaces. However, the browser reduces multiple spaces added by users to a single space. Furthermore, if a user adds various empty lines in the code, the browser compresses them into one continuous line.

Extra Spaces and Lines Example:

<!DOCTYPE html>
<html lang="en">
<body>
    <p>
        This paragraph has multiple lines.
        But HTML reduces them to a single line,
        omitting the carriage return we have used.
    </p>
    <p>
        This paragraph has multiple spaces.
        But HTML reduces them all to a single
        space, omitting the extra spaces and 
          line we have used.
    </p>
</body>
</html>

Pro Tip: To solve this problem and preserve your exact formatting (including spaces and line breaks), use the <pre> (preformatted text) tag as an alternative to the <p> tag!

3. The Line Break (<br>) Tag

The HTML <br> tag element creates a line break, giving you a new line without starting a new paragraph. Use <br> when you want to move to the next line within the same textual block.

Line Break Example:

<!DOCTYPE html>
<html lang="en">
<body>
    <p>
        This paragraph has multiple<br />
        lines. But HTML reduces them<br />
        to a single line, omitting<br />
        the carriage return we have used.
    </p>
</body>
</html>

4. The Horizontal Rule (<hr>) Tag

The HTML <hr> tag is used to create a horizontal rule or line, visually separating content on a webpage. Use <hr> when you want to insert a horizontal line to signify a division between sections or elements, providing a clear visual break in the page.

Horizontal Rule Example:

<!DOCTYPE html>
<html lang="en">
<body>
    <h1>Welcome to My Website</h1>
    <p>IntricateDevo is a leading platform that provides computer science resources.</p>
    <hr>
    <p>More content visually separated by the horizontal rule above.</p>
</body>
</html>

5. Align Attribute (Legacy)

Historically, the <p> tag specifically supported the align attribute, allowing us to align our paragraphs to the left, right, or center.

Syntax:

<p align="value">

⚠️ Important Note: The align attribute is deprecated in HTML5, and styles should be used via CSS for better practices (e.g., <p style="text-align: center;">).

Alignment Example:

<!DOCTYPE html>
<html lang="en">
<body>
    <p style="text-align: center; font-family: 'Segoe UI', Verdana, sans-serif; font-size: 17px; line-height: 1.5;">
        Welcome to IntricateDevo (Centered)
    </p>
    <p style="text-align: left; font-family: 'Segoe UI', Verdana, sans-serif; font-size: 17px; line-height: 1.5;">
        A Computer Science portal by IntricateDevo. (Left aligned)
    </p>
    <p style="text-align: right; font-family: 'Segoe UI', Verdana, sans-serif; font-size: 17px; line-height: 1.5;">
        It contains well written, well thought articles. (Right aligned)
    </p>
</body>
</html>

6. Avoiding Common Mistakes with Paragraphs

To ensure your website structure is correct and SEO friendly, watch out for these common mistakes:

  1. Avoid Nested Paragraphs: You cannot nest paragraphs within one another. Each <p> tag should contain only the text for one block of content.
  2. Avoid Using <p> for Non-Textual Content: The <p> tag is specifically meant for text-based content. If you need to wrap images, tables, or other structural elements, use appropriate tags like <img>, <table>, or <div>.

Exercise

?

How does a web browser handle multiple spaces and line breaks typed inside a <p> tag?

❮ Previous Next ❯