leafleafleafDocy banner shape 01Docy banner shape 02Man illustrationFlower illustration

HTML paragraph

Estimated reading: 4 minutes 37 views

HTML paragraph

Paragraphs are defined by <p> tags.

example

<p>This is a paragraph</p>
<p>This is another paragraph</p>

Note: Browsers automatically add blank lines before and after paragraphs. (</p> is a block-level element)

Don’t forget the closing tag

Even if you forget to use the closing tag, most browsers will display the HTML correctly:

example

<p>This is a paragraph
<p>This is another paragraph

The above example will work fine in most browsers, but don’t rely on this practice. Forgetting to use closing tags can produce unexpected results and errors.

Note: In future versions of HTML, omitting the closing tag is not allowed.

HTML wrapping

If you want a line break (new line) without generating a new paragraph, use the <br> tag:

example

<p> This <br> paragraph <br> demonstrates the effect of line breaks </p>

The <br /> element is an empty HTML element. Since a closing tag doesn’t make any sense, it doesn’t have an closing tag.

HTML output – usage reminder

We cannot be sure of the exact effect of the HTML being displayed. The size of the screen, and the resizing of the window can all lead to different results.

For HTML, you cannot alter the output by adding extra spaces or line breaks to the HTML code.

When the page is displayed, the browser removes extra spaces and blank lines from the source code. All consecutive spaces or blank lines are counted as one space. Note that all consecutive blank lines (newlines) in the HTML code are also displayed as a single space.

(This example demonstrates some HTML formatting issues)

Examples of this site

HTML paragraphs
How to display HTML paragraphs in a browser.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Beginners Tutorial (coding180.com)</title>
</head>
<body>
<p>This is a paragraph. </p>
<p>This is a paragraph. </p>
<p>This is a paragraph. </p>
</body>
</html>
this is a paragraph

Typesetting a Tang poem in HTML code
When browsers display HTML, they will omit redundant whitespace characters (spaces or carriage returns, etc.) in the source code.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Beginners Tutorial (coding180.com)</title>
</head>

<body>

    <h1>Spring Dawn</h1>

    <p>
        Chunmian doesn't realize it,
        Heard birds chirping everywhere.
        The sound of wind and rain at night,
        How many flowers fall.
    </p>

    <p>Note that browsers ignore typography in source code (extra whitespace and line breaks are omitted). </p>

</body>

</html>
typesetting

Line breaks Use line breaks
in HTML documents.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Beginners Tutorial (coding180.com)</title>
</head>

<body>
    <p>This <br>paragraph<br>demonstrates the effect of line breaks</p>
</body>

</html>
line break

more examples

More paragraphs
Default behavior for paragraphs.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Beginners Tutorial (coding180.com)</title>
</head>
<body>

<p>
This paragraph
in the source code
contains many lines
but the browser
ignore them.
</p>

<p>
This paragraph
in the source code
contains many lines
But the browser
ignore them.
</p>

<p>
The number of lines in a paragraph depends on the size of the browser window. If you resize the browser window, the number of lines in the paragraph will change.
</p>

</body>
</html>
more paragraph

HTML Tag Reference Manual

The Beginner Tutorial’s Tag Reference Manual provides more information on HTML elements and their attributes.

LabelDescription
<p>define a paragraph
<br>Insert a single line break (line break)

Leave a Comment

CONTENTS