Did you find this useful?
Socialize it today.


HTML Paragraphs and Line Breaks

Saturday, February 11, 2012

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 rendered 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 on 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.

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

Creating Web Pages Simplified HTML CSS: The Complete Reference HTML CSS and JavaScript Editor