HTML Paragraph

Bookmark
Learn about HTML paragraph tag and difference between Div and P tags.

We should use the <p> paragraph tag element to define text content in a paragraph format in a HTML web page. It should be defined as <p>content</p>. We can safely say that paragraph is the most used HTML tag element in a normal web page. Content enclosed within a HTML paragraph stands out from the content flow as a certain margin space is added before and after the occurrence of the paragraph element by the web browser.

HTML Paragraph Tag Example

Following are two paragraphs with some lorem ipsum test content.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis tortor massa. Proin nec ultricies mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras pharetra mi risus, vel semper mauris posuere et.</p>

<p>Ut non est sit amet ipsum vestibulum porta. Proin vestibulum lacus rutrum, feugiat leo id, condimentum neque. Praesent vel massa ac diam sollicitudin efficitur sit amet ut nisi. Mauris malesuada luctus diam quis pellentesque. pharetra ornare ligula etm.</p>

Paragraph Example Output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis tortor massa. Proin nec ultricies mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras pharetra mi risus, vel semper mauris posuere et.

Ut non est sit amet ipsum vestibulum porta. Proin vestibulum lacus rutrum, feugiat leo id, condimentum neque. Praesent vel massa ac diam sollicitudin efficitur sit amet ut nisi. Mauris malesuada luctus diam quis pellentesque. pharetra ornare ligula etm.

HTML Paragraph General Guidelines

  • In a HTML document formation, to define a paragraph we should not add new line by typing "Enter" or new line character. If added, those new lines will be trimmed out by the browser. 
  • Remember to close the paragraph always by adding </p> closing paragraph tag. If the closing tag is not added, some browsers will add them by itself and it may work. But sometimes it can lead to unexpected results. It is a best practice to always close the tag element.

Difference Between <p> and <div>

  • <div> tag is a generic data container.
  • <p> is to be used to define a paragraph content in a document.
  • Do not think about the technical difference, here the semantic difference is the key.
  • Use these tags according to the context of the document flow and the containing element.