HTML Dog
Skip to navigation

Paragraphs

Now that you have the basic structure of an HTML document, you can mess around with the content a bit.

Go back to your text editor and add another line to your page:


<!DOCTYPE html>
<html>
<head>
    <title>My first web page</title>
</head>
<body>
    This is my first web page
    How exciting
</body>
</html>

Look at the document in your browser.

You might have expected your document to appear as you typed it, on two lines, but instead you should see something like this:

This is my first web page How exciting.

This is because web browsers don’t usually take any notice of what line your code is on. It also doesn’t take any notice of spaces (you would get the same result if you typed “This is my first web page       How exciting”).

If you want text to appear on different lines or, rather, if you intend there to be two distinct blocks of text (because, remember, HTML is about meaning, not presentation), you need to explicitly state that.

Change your two lines of content so that they look like this:


<p>This is my first web page</p>
<p>How exciting</p>

The p tag is used for paragraphs.

Look at the results of this. The two lines will now appear on two lines because the browser recognizes them as separate paragraphs.

Think of the HTML content as if it were a book - with paragraphs where appropriate.

Emphasis

You can emphasize text in a paragraph using em (emphasis) and strong (strong importance).


<p>Yes, that really <em>is</em> exciting. <strong>Warning:</strong> level of excitement may cause head to explode.</p>

Line breaks

The line-break tag can also be used to separate lines like this:


This is my first web page<br>
How exciting

There’s no content involved in breaking lines so there is no closing tag.