Core HTML

Lesson 2: Paragraphs

Overview

In this HTML lesson, we explain how the paragraph tag functions. First, we give an example HTML document to show how a paragraph element splits text both before it and after it. Then we show how multiple paragraphs can be used sequentially to form a document full of paragraphs. Next, we explain the way block elements, like the paragraph, employ surrounding whitespace. We finish with a more typical example of a document with paragraphs and demonstrate that whitespace characters act the same way inside a paragraph as they do outside a paragraph.

How a Paragraph Splits Text

Our first example shows the how the paragraph element forms a newline within the text of a document. This idea is slightly misleading, however, as the paragraph element actually forms a block within the document. In fact, it is known as a block element. So, if we put text on the other side of the element, it is also on a new line.

Example1.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML Lesson 2</title>
  </head>
  <body>
This is in the body.
This is in the body too.
    <p>This is in a paragraph element</p>
  </body>
</html>
 

Output

 

Example1a.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML Lesson 2</title>
  </head>
  <body>
This is in the body.
    <p>This is in a paragraph element</p>
This is in the body too.
  </body>
</html>
 

Output

 
 

Output with Block

 

Multiple Paragraphs

This HTML example code shows a document with multiple paragraph elements. This document has four paragraph elements. The blocks comprising each paragraph are separated by whitespace that we call the margin of the element. Inside the blocks, the text is separated from the containing box by a smaller whitespace that we call the padding of the element. We will have more to say about the margin and padding in later documents, but these are essential parts of a block element.

Example2.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML Lesson 2</title>
  </head>
  <body>
    <p>This is in paragraph 1</p>
    <p>This is in paragraph 2</p>
    <p>This is in paragraph 3</p>
    <p>This is in paragraph 4</p>
  </body>
</html>
 

Output

 
 

Output with Blocks

 

A Typical Paragraph Example

This HTML example contains actual paragraphs of text that are more typical of a written document. These larger blocks demonstrate how text is restriced within a block and wrapped around to the next line. In these larger blocks the margins and padding are more apparent relative to the text.

Example3.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML Lesson 2</title>
  </head>
  <body>
    <p>For they reasoned unsoundly, saying to themselves, "Short and sorrowful is our life, and
    there is no remedy when a man comes to his end, and no one has been known to return from Hades.
    Because we were born by mere chance, and hereafter we shall be as though we had never been;
    because the breath in our nostrils is smoke, and reason is a spark kindled by the beating of
    our hearts. When it is extinguished, the body will turn to ashes, and the spirit will dissolve
    like empty air. Our name will be forgotten in time, and no one will remember our works; our
    life will pass away like the traces of a cloud, and be scattered like mist that is chased by
    the rays of the sun and overcome by its heat. For our allotted time is the passing of a shadow,
    and there is no return from our death, because it is sealed up and no one turns back."</p>
    <p>"Come, therefore, let us enjoy the good things that exist, and make use of the creation to
    the full as in youth. Let us take our fill of costly wine and perfumes, and let no flower of
    spring pass by us. Let us crown ourselves with rosebuds before they wither. Let none of us fail
    to share in our revelry, everywhere let us leave signs of enjoyment, because this is our portion,
    and this our lot. Let us oppress the righteous poor man; let us not spare the widow nor regard
    the gray hairs of the aged. But let our might be our law of right, for what is weak proves
    itself to be useless."</p>
    <p>"Let us lie in wait for the righteous man, because he is inconvenient to us and opposes our
    actions; he reproaches us for sins against the law, and accuses us of sins against our training.
    He professes to have knowledge of God, and calls himself a child of the Lord. He became to us a
    reproof of our thoughts; the very sight of him is a burden to us, because his manner of life is
    unlike that of others, and his ways are strange. We are considered by him as something base, and
    he avoids our ways as unclean; he calls the last end of the righteous happy, and boasts that God
    is his father. Let us see if his words are true, and let us test what will happen at the end of
    his life; for if the righteous man is God's son, he will help him, and will deliver him from the
    hand of his adversaries. Let us test him with insult and torture, that we may find out how
    gentle he is, and make trial of his forbearance. Let us condemn him to a shameful death, for,
    according to what he says, he will be protected."</p>
  </body>
</html>
 

Output

 
 

Output with Blocks

 

Whitepsace in a Paragraph

Just as all whitespace characters are contracted into a single space character, the same thing happens within a paragraph element. This example demonstrates this behavior.

Example4.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML Lesson 2</title>
  </head>
  <body>
    <p>This      is in a
          paragraph     element</p>
  </body>
</html>
 

Output

 
 

© 2007–2024 XoaX.net LLC. All rights reserved.