Skillversitas

HTML Paragraphs

HTML paragraphs are used for blocks of text. The <p> tag defines a paragraph with automatic spacing.

Paragraph Tag

<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>

Line Break

<p>First line<br>Second line<br>Third line</p>

Horizontal Rule

<p>Paragraph before the line.</p>
<hr>
<p>Paragraph after the line.</p>

Preserved Text

<pre>
This is preserved text.
    Spaces and line breaks
    stay exactly as they are.
</pre>

Case Study: Campus News Article

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Campus News</title>
</head>
<body>
    <article>
        <h1>2024 New Student Registration</h1>

        <p>Technology University is opening new student registration for the 2024/2025 academic year.</p>

        <p>Registration is open from January 1 to February 28, 2024.</p>

        <h2>Registration Requirements</h2>

        <p>General requirements that must be met:</p>

        <ul>
            <li>High school / vocational school graduate</li>
            <li>Maximum age of 25</li>
            <li>Physically and mentally healthy</li>
        </ul>

        <h2>Study Programs</h2>

        <p>Available study programs:</p>

        <ol>
            <li>Informatics Engineering</li>
            <li>Information Systems</li>
            <li>Computer Engineering</li>
            <li>Information Technology</li>
        </ol>

        <hr>

        <p><strong>Note:</strong> Registration can only be done online through the official university portal.</p>
    </article>
</body>
</html>

Everyday Case Study

Case: A developer needs to create a contact page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Contact Us</title>
</head>
<body>
    <h1>Contact Us</h1>

    <h2>Address</h2>
    <p>Technology University<br>123 Technology Street<br>Chicago, 12345</p>

    <h2>Phone</h2>
    <p>Phone: (021) 12345678<br>Fax: (021) 12345679</p>

    <h2>Email</h2>
    <p>General: [email protected]<br>Academic: [email protected]<br>Finance: [email protected]</p>

    <h2>Working Hours</h2>
    <p>Monday - Friday: 08:00 - 16:00 WIB<br>Saturday: 08:00 - 12:00 WIB<br>Sunday and Holidays: Closed</p>
</body>
</html>

Paragraph Spacing

<!-- Default spacing -->
<p>Paragraph 1</p>
<p>Paragraph 2</p>

<!-- With CSS margin -->
<p style="margin-bottom: 2rem;">Paragraph 1</p>
<p style="margin-top: 2rem;">Paragraph 2</p>

Text Alignment

<p style="text-align: left;">Left aligned (default)</p>
<p style="text-align: center;">Centered</p>
<p style="text-align: right;">Right aligned</p>
<p style="text-align: justify;">Justified</p>

Best Practices

  1. Use paragraphs: For blocks of text
  2. Use br: For line breaks within a paragraph
  3. Use pre: For preserved text
  4. Don't overuse br: Use CSS for spacing
  5. Short paragraphs: For readability

Summary

HTML paragraphs are used for blocks of text. Use <p> for paragraphs and <br> for line breaks.