Computers & ProgrammingHTML/XHTMLWeb Development

HTML Paragraphs and Line Breaks

Paragraphs are a common element used in HTML documents. When writing, authors traditionally divide their thoughts into sequences of paragraphs. The HTML markup for defining a paragraph is straightforward. You use the <p> tags defines a paragraph.

To define a paragraph, you need to use an opening <p> and closing tag </p>. How paragraphs are rendered visually depends on the browser. Paragraphs are usually rendered with left justification. Browers will also typically render paragraphs with white space before and after the element.

Rather than using line breaks and other methods to manipulate the rendering of paragraphs, it is recommended that you use Style sheets to have control over the size and style of fonts, margins, space before and after a paragraph, the first line indent, justification, and other details.

Paragraph elements are placed between the body section of your HTML document. Here is an example of how to use the paragraph element.

<body>
    <p>This is some text within a paragraph<p>
    <p>This is some text within  a paragraph<p>
</body>

Both of the examples shown above will be rendered in the same manner. The browser will not render a line break within the paragraph because of the way the code is written. A carriage return in your code creates a single space.

To apply a break within the paragraph, use the line break self-closing tag, <br />. Using a line break within a paragraph to style your document is not recommended, since your visitors will be using different browsers on computers with different resolutions.

Inserting a line break within a paragraph will most likely have unexpected results since you cannot account for the user’s settings. In any case, for illustration purposes, here is an example.

<body>
    <p>
        This is some text within a paragraph.<br />   
        Since you used a line break, a new line was started.
    <p>
</body>

To be compliant with XHTML, you must add the space and forward slash to the end of any empty tag to make it self-closing.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top