Exit tutorial


HTML Tutorial
Web Design Stage 2: Headings and Paragraphs
Using Headings, Paragraphs, and Line Breaks 
Heading Tag

Let's start out with Heading tags.  These tags are good for creating titles or section headings.  Here are some examples:

<H1>Large Heading!</H1>  will give us:

Large Heading!

< H2>Heading 2</H2>

Heading 2

< H3>Heading 3</H3>

Heading 3

< H4>Getting Small</H4>

Getting Small

< H5>Smaller Still...</H5>
Smaller Still...
< H6>You must have good vision...</H6>
You must have good vision...
Line Break

O.K., I think you get the idea here.  Now let's move on to a line break.  The tag for a line break is <BR>.  When you insert this tag in your document, the contents will go to the next line.  The <BR> tag does not need a closing tag afterward.   Here is an example:

End this line now!!<BR>Thanks!

This will generate the following:

End this line now!!
Thanks!

Basically, a line break is like hitting the "enter" key when you are writing text. The browser will not go to the next line until it runs out of space, or sees a tag that will force it to the next line. So typing the following in your text editor will display only one line of text in the browser:

Hello,
I want
a new line.

This gives us: Hello, I want a new line.

To make the text move to the next line, use your <BR> tag from above:

Hello,<BR>
I want<BR>
a new line.

Now this will do what we wanted it to:

Hello,
I want
a new line.

Paragraph Tag

Now, let's move on to the paragraph tag, <P>.  This tag will skip a vertical space after going to the next line, as though you had typed <BR> twice.  This tag is good for skipping a line quickly and for knowing where you wanted a new paragraph to begin.  Here's an example:

This is some cool stuff.
< BR>
This is the next line.
< P>
This is a new paragraph.  Is this cool or what?

This will give us the following:
This is some cool stuff.
This is the next line.

This is a new paragraph.  Is this cool or what?

The paragraph tag does not require a closing tag, but if you'd like to add one for your own reference, you place a </P> where you would like the paragraph to end, like this:

<P>
This paragraph needs a visual ending!
< /P>
< P>

Here is a new paragraph....<BR>
and the end.
< /P>

This will give you the same thing as using just the opening <P> tags, like this:

<P>
This paragraph needs a visual ending!
< P>
Here is a new paragraph....<BR>
and the end.
 
Both of these will give you this:

This paragraph needs a visual ending!

Here is a new paragraph....
and the end.

[Back to the Stage 1 Index]