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
blockquotetag. By default, this will offset the text from the main content.
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.
without br tag.
br creates newline.
To add a horizontal line on the page use a single
<hr> tag. This should be used for a thematic break between different elements.
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!"
"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.
Alternatively, you can try out Learneroo before signing up.