How To: Webpage Creation

HTML Paragraphs

HTML Paragraphs
         

The HTML <p> element defines a paragraph. A paragraph always starts on a new line, is usually a block of text. Browsers automatically add some white space (a margin) before and after a paragraph.

Example:

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML Display
         

You cannot be sure how HTML will be displayed. Large or small screens, and resized windows will create different results. With HTML, you cannot change the display by adding extra spaces or extra lines in your HTML code. The browser will automatically remove any extra spaces and lines when the page is displayed.

Example:

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p>
This paragraph
contains                     a lot of spaces
in the source           code,
but the                 browser
ignores it.
</p>

HTML Horizontal Rules
The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule. The <hr> element is used to separate content (or define a change) in an HTML page:


Example:

<h1>This is heading 1</h1>
<p>This is a paragraph under heading 1.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is a paragraph under heading 2</p>
<hr>
<h3>This is heading 3</h3>
<p>This is a paragraph under heading 3</p>
<hr>

which yields something like:

This is heading 1
This is a paragraph under heading 1.
________________________________

This is heading 2
This is a paragraph under heading 2.
________________________________

This is heading 3
This is a paragraph under heading 3.

HTML Line Breaks
         

The HTML < br > element defines a line break. Use < br > if you want a line break (a new line) without starting a new paragraph.

Example:

<p>This is < br > a paragraph < br > with line breaks.</p>

which yields something like:

This is
a paragraph
with line breaks.

         

< br > tags is very useful in writing poem within a webpage. Notice the difference of a poem without a line break tag and a poem without a line break tag below:

Example without a Line Break tag:

<p>Petals wide, — joyful sight,
Swaying in the sunshine's light.
Buzzing bees and butterflies,
Flutter past with happy cries.
Sweet nectar, — tasty prize,
Fills their wings as daylight dies.
</p>

which will be displayed in a single line:

Petals wide, — joyful sight, Swaying in the sunshine's light. Buzzing bees and butterflies, Flutter past with happy cries. Sweet nectar, — tasty prize, Fills their wings as daylight dies.

Example with a Line Break tag:

<p>Petals wide, — joyful sight,< br >
Swaying in the sunshine's light.< br >
Buzzing bees and butterflies,< br >
Flutter past with happy cries.< br >
Sweet nectar, — tasty prize,< br >
Fills their wings as daylight dies.
</p>

which yields:

Petals wide, — joyful sight,
Swaying in the sunshine's light.
Buzzing bees and butterflies,
Flutter past with happy cries.
Sweet nectar, — tasty prize,
Fills their wings as daylight dies.

An alternative way to fix poem problem is by using the pre tag. The pre tag preserves both spaces and line breaks as shown below:

Example using a pre tag:

<pre>
Petals wide, — joyful sight,
Swaying in the sunshine's light.
Buzzing bees and butterflies,
Flutter past with happy cries.
Sweet nectar, — tasty prize,
Fills their wings as daylight dies.
</pre>

This works similarly with Writing.Com's WritingML {pre} ... {/pre} tag.