Using HTML

Break & Paragraph Tags

You might have noticed in the previous exercise that all the text was written on one line, even though in the editor you placed the text on different lines. This is because you need paragraph or break tags to format the text correctly.

Break Tag

The break tag looks like <BR> in HTML and <br /> in XHTML. The break tag, just breaks up the text onto different lines.

But why are the tags different?

HTML is not as strict as XHTML, and so it's ok not to close the break tag with a </BR>. XHTML though is very strict. All XHTML tags MUST close. So some tags, which don't really need a closing tag because they don't surround anything, have a closing stroke inside the opening tag, which closes it automatically. Confused?? Try the exercise and maybe that will help.

Exercise

To display the two sentences on different lines, put in the <BR> tag as shown in the highlight. Save and refresh the page to view it. The <BR> tag has no closing tag.

HTML

<HTML>
<HEAD>
<TITLE>My first Web page</TITLE>
</HEAD>
<BODY>
Welcome to the world of HTML. <BR>
This is ordinary type but <STRONG> this is bold stuff</STRONG> and this is plain type again. <BR> <EM>Italics look like this </EM>
</BODY>
</HTML>

XHTML

<html>
<head>
<title>My first Web page</title>
</head>
<body>
Welcome to the world of HTML. <br />
This is ordinary type but <strong> this is bold stuff</strong> and this is plain type again. <br /> <em>Italics look like this </em>
</body>
</html>

Paragraph Tag

The paragraph tag looks like <P> or <p> in XHTML.

In HTML the closing paragraph tag </P> is optional as the beginning of one paragraph is automatically the end of another.

BUT, in XHTML you must use the closing paragraph tag </p> to signal the end of a paragraph.

Exercise

To display the sentences on different lines with a blank line in between, put in the <P> tags as shown in the highlight. Save and refresh the page to view it.

HTML

<HTML>
<HEAD>
<TITLE>My first Web page</TITLE>
</HEAD>
<BODY>
<P> Welcome to the world of HTML.
<P> This is ordinary type but <STRONG> this is bold stuff</STRONG> and this is plain type again.
<P> <EM>Italics look like this </EM>
</BODY>
</HTML>

XHTML

<html>
<head>
<title>My first Web page</title>
</head>
<body>
<p> Welcome to the world of HTML.</p>
<p> This is ordinary type but <strong> this is bold stuff</strong> and this is plain type again. </p>
<p> <em>Italics look like this </em></p>
</body>
</html>

The next thing to learn is how to structure your HTML pages with headers.