HTML Paragraphs

The HTML <p> element defines a paragraph:

<p>This is a paragraph </p>

<p>This is another paragraph</p>

The margins of HTML <p> element

The browser can automatically set margins for the <p> element. You can also customize the margins by setting style attribute:

<p style="margin-top:16px;margin-bottom:16px">This is a custom margin paragraph</p>

The output of the HTML <p> elements

You cannot change the effect of the output by adding extra spaces or blank lines in the HTML code.All consecutive spaces or blank lines are counted as one space.

The following two paragraphs show the same effect:


This paragraph

contains a lot of lines

in the source code,

but the browser

ignores it.



This paragraph

contains         a lot of spaces

in the source         code,

but the        browser

ignores it.


Don’t forget to use the end tag

Even if you forget to use the end tag, most browsers will show the contents of the paragraph correctly:

<p>This is a paragraph that forgot to use the end tag.

<p>This is another paragraph that forgot to use the end tag.

However, the W3C does not recommend this because it may cause unexpected errors.

Line breaks in HTML <p> element

Use <br> tag if you want a line break (a new line) without starting a new paragraph:

<p>This <br>paragraph<br>shows the effect of a line break</p>

The HTML <pre> element

If you want to keep spaces and blank lines in the paragraph, you can use the <pre> tag, for example:


  When you are old and grey and full of sleep,

  And nodding by the fire,take down this book,

  And slowly read,and dream of the soft look,

  Your eyes had once,and of their shadows deep.


Leave a Comment

Your email address will not be published.