Spacing


Collapse Content

As mentioned, the p tag is used for paragraphs of text. A paragraph is a block-level element, which means a newline appears before and after it, so it fills the width of whatever it is in.

Mark quotations with the blockquote tag. By default, this will offset the text from the main content.

break
To add a single new-line, use a single <br> tag. It should be used when a newline is needed, not to just increase the spacing between elements.

No newline
without br tag. <br> br creates newline. 

No newline without br tag.
br creates newline.

horizontal rule

To add a horizontal line on the page use a single <hr> tag. This should be used for a thematic break between different elements.

<hr>


pre
Newlines and extra spaces in HTML are ignored when rendering the page. To include them, use the <pre> tag. This will usually show everything in a monospaced font, which is useful for displaying things like HTML.

newlines 
and     spaces
with pre tag.

The HTML Prince

See different HTML spacing elements in the story below, first in HTML and then how it appears.

<p>Once upon a time, in a faraway land, there was a Prince. One day he was walking along a path, when he saw a sign:</p>
<blockquote>Halt ye wandering<br>Great dangers surround this path<br>Few who enter leave</blockquote>
<p>"Interesting sign", said the prince, "I wonder if there's a dangerous Dragon further along". So he continued along the path.</p>
<hr>
<p>After a while, the Prince came near a bridge, and noticed a typewritten sign:</p>
<pre>halt
the meandering 
lesson</pre>

Once upon a time, in a faraway land, there was a Prince. One day he was walking along a path, when he saw a sign:

Halt ye wandering
Great dangers surround this path
Few who enter leave

"Interesting sign", said the prince, "I wonder if there's a dangerous Dragon further along". So he continued along the path.


After a while, the Prince came near a bridge, and noticed a typewritten sign:

halt
the meandering 
lesson

"Weird," said the Prince, as he walked across the Bridge. Suddenly, a wizard popped out. "Halt!" he shouted. "Answer this riddle to cross the bridge!"

Challenge

"Can you help me write my sign with HTML?" asked the wizard. "I don't need monospacing".

Rewrite the Bridge's sign to use <blockquote> instead of <pre>. But make sure to keep the same newlines.

Please sign in or sign up to submit answers.

Alternatively, you can try out Learneroo before signing up.

Contact Us
Sign in or email us at [email protected]