July 24, 2016

P Element, Whitespace, and PRE Element

The P Element (Paragraph Element)

We are going to work with the paragraph element in this lesson. More commonly known as the p element, it defines a paragraph in html. See the images below for the first example.

index.html Example 1: Normal P Element

p element html

Displayed Page Example 1

paragraph element html display

We have a very simple example above with an h1 heading followed by a p element. This is how it will display normally. But what if we added some spacing and line breaks? See the next example below.

index.html Example 2: Paragraph Element With Extra Spacing And Line Breaks

paragraph element html

Displayed Page Example 2

paragraph element displayed

In the example above, we have added extra spacing and line breaks in both our h1 and p elements. Looking at the Displayed Page Example 2, we see that all extra spacing and line breaks were ignored. This is how html treats whitespace by default unless we specifically tell the browser that we want extra spacing or line breaks with html tags. We added a line break <br /> tag at the end of our paragraph. Remember, line breaks are empty elements. That means there is only one tag and no content. We are just defining a line break inside of our paragraph. If you want to add extra spacing, you would have to add a special escape character. We’ll go over special escape characters in another lesson. There is another way of adding spacing and line breaks that is very different from the topics we just discussed, and that is by using the pre element. See the final set of images below, for an example.

index.html Example 3: The pre element

pre element html

Displayed Page Example 3

preformatted text element

Our final example replaces the p element with the pre element. The pre element defines “preformatted text” and will recognize and display line breaks and extra spacing. NOTE: If you copy the source code for the pre element example, you will need to add some extra spacing and line breaks in before you run the code. As you can see, the pre element also displays the text in a fixed width font, which is usually Courier. CSS can be added to define your own styles. The pre element can be very useful for things like poems, or any other type of text where the spacing and line breaks are important. That wraps up this lesson. Thanks for reading, and I’ll see you next time.

index.html Source Code: The P Element


<!doctype html>
<html>
<head>
<title>P Elements</title>
</head>
<body>

<h1>The Paragraph Element</h1>
<p>This p element has
a bunch of extra spaces
and
line breaks. The browser ignores all extra spacing and line
breaks in html unless it is specifically specified with a <br /> line break tag.
</p>

</body>
</html>

index.html Source Code: The Pre Element


<!doctype html>
<html>
<head>
<title>Pre Elements</title>
</head>
<body>

<pre>The pre element defines "preformatted text" and will recognize both spaces
and line breaks. The text inside of a pre element
is displayed in a fixed width font (This is usually Courier).</pre>

</body>
</html>

Please Leave a comment