Intro to HTML: Paragraph Element

Quick Copy Boxes

Paragraph Elements (<p></p>) contain text. It is basically a container to hold paragraphs. Paragraphs are block-level elements.

At the bottom of this page there is a code editor pre-loaded with the lesson's code.

Block-Level Element

Like divs, paragraphs are Block-level Elements. This means a few things:
✶ A line break is automatically insertered before and after the element.
✶ The element fills the entire width of the element that contains it.
✶ The element is rectangular shapped.

Paragraph Example

  <!-- Paragraph-->   <p>This is an HTML paragraph. Paragraphs are really rad   because they can contain lots of words. Words commuicate ideas. Yay to   knowledge!!!</p>

<body> - Start Body Element
 <div> - Start Div Container
  <p></p> - Paragraph Element - It will take up the entire length of the div container (where the paragraph is contained).
 </div> - End Div
</body> - End Body

Now let's pretend our CSS code does the following:
✶ BODY backgrounds are BLUE
✶ DIV backgrounds are GREEN
✶ PARAGRAPH backgrounds are YELLOW
This is how the example would display:

Now, play with the code in the code editor box below.