Thursday, July 5, 2012

CSS and HTML 5: Paragraphs


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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<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 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, 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 for paragraph.
Look at the results of this. The two lines will now appear on two lines.
Think of the HTML content as if it were a book - with paragraphs where appropriate.

Emphasis

You can emphasise text in a paragraph using em (emphasis) and strong (strong emphasis). These are two ways of doing pretty much the same thing, although traditionally, browsers display em in italics and strong in bold.

<p>Yes, that <em>is</em> what I said. How <strong>very</strong> exciting.</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
However, this method is over-used and shouldn't be used if two blocks of text are intended to be separate from one another (because if that's what you want to do you probably want the p tag).
Note that because there's no content involved with the line-break tag, there is no closing tag and it closes itself with a "/" after the "br".

No comments:

Post a Comment