Paragraphs

Almost all non-heading text will be placed within a paragraph element in a web document. Paragraphs are defined with the <p> tags, and the element is written as <p>...</p>.

HTML
<p>This is a paragraph element.</p>

Compare this to Markdown:

Markdown
This is a paragraph.

In markdown, a paragraph requires no extra markup to signify it as such. An empty line between text blocks signifies a new paragraph.

Any text between the paragraph tags <p>...</p> belongs to the same paragraph. This is the most common way of writing paragraphs in HTML pages.

You’ll notice that when using Markdown, empty lines create paragraphs and provide cushion between one paragraph and the next. This is not true of HTML.

With HTML, paragraphs are made with tags, and browsers automatically add cushion above and below paragraph elements.

By default, browsers will remove empty spaces from paragraph element blocks. This is true of spaces and extra empty lines. You need to be aware that you cannot change the output of your rendered HTML code by adding extra spaces or lines unless you code for them; simply pressing space bar or return won’t cut it.

You can see this below, where the first several paragraphs display as single lines. One way we can combat this is to use a line break, or the <br /> tag. This will drop create a new line within a paragraph element.

You can use the preformatted text element (<pre>...</pre>) to tell a browser to render spaces and text exactly as you’ve typed.

This tag usually displays the contents of the element in a fixed-width font, as it is primarily used for preformatted code. However, it can also be used for preformatted text.

See the Pen </p> </div>


html break elements markdown paragraphs preformatted tags