html5 Site Icon CSS3 Site Icon CSS Site Icon

HTML4 Basics

Lesson 4 - Paragraphs and Line Breaks

Ok we have lots of headings but we need some text content to make them meaningful: welcome to the paragraph HTML tag. The practical explains the use of the paragraph tag and we also check out the line break tag to see how these two tags affect our web page.

The Paragraph Tag

The <p> tag and its' closing </p> tag places the enclosed content on a new line and adds a little space above and below it.

The Line Break Tag

The <br /> tag forces a line break after it and is the first tag we have come across that has no content and is self closing.

Open up the file with Notepad we created and tested in Lesson: 3 Headings

You saved the file to your computer in the C:\_HTMLBasics folder as lesson_3_webpage.html

Copy and paste the following code into the reopened file, overwriting the opening <body> and closing </body> tags.


<body>
<h1>Heading 1</h1>
Heading 1 tags have the largest text and should be used sparingly.
<h2>Heading 2</h2>
Heading 2 tags are good to use for section headings.
Heading 2 tags are slightly smaller than heading 1 tags.
<h3>Heading 3</h3>
Heading 3 tags are good to use for sub-section headings.
Heading 3 tags are slightly smaller than heading 2 tags.
Heading 3 tags are a little larger than standard text.
<h4>Heading 4</h4>
Heading 4 tags are generally the same size as standard text.
Heading 4 tags are slightly smaller than heading 3 tags.
Heading 4 tags are slightly larger than heading 5 tags.
<h5>Heading 5</h5>
Heading 5 tags are a little smaller than standard text.
Heading 5 tags are slightly smaller than heading 4 tags.
Heading 5 tags are slightly larger than heading 6 tags.
<h6>Heading 6</h6>
Heading 6 tags are the smallest headings you can use.
Heading 6 tags are slightly smaller than heading 5 tags.
</body>

Reviewing Our Changes

Ok with the changes cut and pasted into the file, your HTML code should now look like the code below.


<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
  HTML Doctor - HTML and CSS Tutorials - Basic HTML Lesson 4 - Paragraphs and Line Breaks
</title>
</head>
<body>
<h1>Heading 1</h1>
Heading 1 tags have the largest text and should be used sparingly.
<h2>Heading 2</h2>
Heading 2 tags are good to use for section headings.
Heading 2 tags are slightly smaller than heading 1 tags.
<h3>Heading 3</h3>
Heading 3 tags are good to use for sub-section headings.
Heading 3 tags are slightly smaller than heading 2 tags.
Heading 3 tags are a little larger than standard text.
<h4>Heading 4</h4>
Heading 4 tags are generally the same size as standard text.
Heading 4 tags are slightly smaller than heading 3 tags.
Heading 4 tags are slightly larger than heading 5 tags.
<h5>Heading 5</h5>
Heading 5 tags are a little smaller than standard text.
Heading 5 tags are slightly smaller than heading 4 tags.
Heading 5 tags are slightly larger than heading 6 tags.
<h6>Heading 6</h6>
Heading 6 tags are the smallest headings you can use.
Heading 6 tags are slightly smaller than heading 5 tags.
</body>
</html>

When your file matches the HTML code above, save in the C:\_HTMLBasics folder as lesson_4_webpage.html and close the Notepad.

save paragraphs

Viewing Our Changed File

From the C:\_HTMLBasics folder, double click on the saved file and it will appear in your default web browser and look something like the following image.

paragraphs

Wait a second! What happened to all those line breaks in between each sentence we typed in? Well the browser just ignores any carriage returns it finds in your text so everything between those headers just all stacks up together.

The Paragraph and Line Break Tags to the Rescue

Lets add some paragraph and page break tags to our HTML code and see what happens.

From the C:\_HTMLBasics folder reopen with Notepad lesson_4_webpage.html, overwriting the opening <body> and closing </body> tags.


<body>
<h1>Heading 1</h1>
Heading 1 tags have the largest text and should be used sparingly.
<h2>Heading 2</h2>
<p>Heading 2 tags are good to use for section headings.</p>
Heading 2 tags are slightly smaller than heading 1 tags.
<h3>Heading 3</h3>
Heading 3 tags are good to use for sub-section headings.
<p>Heading 3 tags are slightly smaller than heading 2 tags.</p>
<h4>Heading 4</h4>
<p>Heading 4 tags are generally the same size as standard text.</p>
<p>Heading 4 tags are slightly larger than heading 5 tags.</p>
<h5>Heading 5</h5>
Heading 5 tags are a little smaller than standard text.<br />
Heading 5 tags are slightly smaller than heading 4 tags.
<h6>Heading 6</h6>
Heading 6 tags are the smallest headings you can use.
Heading 6 tags are slightly smaller than heading 5 tags.<br />
</body>

Reviewing our changes

Ok with the changes copied and pasted into the file, your HTML code should now look like the code below.


<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
  HTML Doctor - HTML and CSS Tutorials - Basic HTML Lesson 4 - Paragraphs and Line Breaks
</title>
</head>
<body>
<h1>Heading 1</h1>
Heading 1 tags have the largest text and should be used sparingly.
<h2>Heading 2</h2>
<p>Heading 2 tags are good to use for section headings.</p>
Heading 2 tags are slightly smaller than heading 1 tags.
<h3>Heading 3</h3>
Heading 3 tags are good to use for sub-section headings.
<p>Heading 3 tags are slightly smaller than heading 2 tags.</p>
<h4>Heading 4</h4>
<p>Heading 4 tags are generally the same size as standard text.</p>
<p>Heading 4 tags are slightly larger than heading 5 tags.</p>
<h5>Heading 5</h5>
Heading 5 tags are a little smaller than standard text.<br />
Heading 5 tags are slightly smaller than heading 4 tags.
<h6>Heading 6</h6>
Heading 6 tags are the smallest headings you can use.
Heading 6 tags are slightly smaller than heading 5 tags.<br />
</body>
</html>

When your file matches the HTML code above, save in the C:\_HTMLBasics folder as lesson_4_webpage.html and close the Notepad.

Viewing Our Changed File

From the C:\_HTMLBasics folder, double click on the saved file and it will appear in your default web browser and look something like the following image.

notepad

As you can see the <p> tag puts the content on a new line with a bit of space around it. The <br /> tag forces a line break so if you look at the heading 6 text it all appears on the same line, as the forced line break is after the second line of text.

It's preferable to use the <p> tag whenever you can but the <br /> tag is useful for forcing line breaks within a paragraph.

Experiment a little with the file by placing the <br /> tag in the middle of a paragraph to space it out and moving the closing </p > tag to the end of rows of text.

Lesson 4 Complete

In this lesson we learned about separating our content using the <p> and <br /> tags.

Related Tutorials

HTML4 Basic Tutorials - Lesson 3 - Headings

What's Next?

In the next lesson we learn how to make certain text stand out from the crowd.



Headings  << Prev           Next >>  Emphasising Text

HTML4 Reference

The <p> paragraph tag

The <br /> forced line break tag

go to home page Homepage go to top of page Top