HTML Basics: Headings and Paragraphs

Using Headings, Paragraphs, and Line Breaks


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>

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…

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.


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.  How about an example? Well, O.K.:

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

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 require a closing tag,  best to 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>

To give you this:


This paragraph needs a visual ending!

Here is a new paragraph….
and the end.


So, now you can create a web page full of text. Isn’t it great?


>> NEXT HTML Basics: Adding Images to Your Page