LESSON 1-03-02: Line Breaks, Paragraphs & Headings

Web Design Lessons > Lesson 1-03-02: Line Breaks, Paragraphs & Headings

Previous Lesson | Lesson Index | Next Lesson

In this section of our free online web design course, we're going to learn how to arrange our text by adding line breaks by using the <br> tag, adding paragraphs with the <p> and </p> tags and adding headings with the <h> and </h> tags.

HTML Line Breaks

A line break is, simply put, going to the next line in your document. It's what happens when you press the "Enter" key on your keyboard when typing text into a text editor (i.e. "Notepad") or a word processor (i.e. "Microsoft Word"). For now, copy & paste the below HTML code into your text editor:

<html>
<head>

</head>
<body>

Hello!

Hi!

Howdy?

</body>
</html>

Now... When you save the above HTML code as an HTML file (with an .htm or .html extension), would you expect the output to be like this:

Hello!

Hi!

Howdy?

Or like this:

Hello! Hi! Howdy?

...?

Believe it or not, the output would be the latter. Line breaks in HTML are achieved by a special tag - the <br> tag. To get the former output, we'll need to put two <br> tags between each of the words, like this:

<html>
<head>

</head>
<body>

Hello!
<br><br>
Hi!
<br><br>
Howdy?

</body>
</html>

Now, we'll get the former output:

Hello!

Hi!

Howdy?

So... "Double spaces", "tabs" or "returns" inside the source HTML code mean nothing to the web browsers. You can leave as much space as you want between the words inside your text, but that'll count as only one character-long space for the browser. You can use "tabs" or "returns" to arrange your source HTML code in a nice and tidy fashion, but that won't show up in the output. Formatting your source HTML code is redundant - you have to format your output, that is, by using HTML tags like the one we just learned. To get the line breaks, we use the <br> tag. Note that down to somewhere :)

HTML Paragraphs

Next in our online web design course, we'll learn how to add paragraphs to our web pages.

In HTML, you can define a paragraph by using the <p> and </p> tags. Everything inbetween these tags will be considered a paragraph and will be two line breaks (two <br> tags) apart from the rest of the document. Let's try it out:

<html>
<head>

</head>
<body>

<p>Hello!</p>
<p>Hi!</p>
<p>Howdy?</p>

</body>
</html>

And the output is:

Hello!

Hi!

Howdy?

The same as using two <br> tags...

There is not much else to the <p> tag, apart from the fact that we can use them along with the "align" and "style" attributes to format a piece of text as we like. We'll learn more about that as we go along in our online web design course.

HTML Headings

You can also add headings to your HTML documents by using the <h> tag. The size of your heading is determined by a number you put next to the "h" inside the tag marks. <h1> is the biggest size and <h6> is the smallest. Also note that you do not need a line break tag after a heading - the heading tag automatically creates a line break after itself. Let's try the different sizes out:

<html>
<head>

</head>
<body>

<h1>Heading Size 1</h1>
<h2>Heading Size 2</h2>
<h3>Heading Size 3</h3>
<h4>Heading Size 4</h4>
<h5>Heading Size 5</h5>
<h6>Heading Size 6</h6>

</body>
</html>

The output should be:

Heading Size 1

Heading Size 2

Heading Size 3

Heading Size 4

Heading Size 5

Heading Size 6

Sidenote #1: Check out my web design resources page to download a superb eBook!

Sidenote #2: If you enjoyed this lesson, please link to it :)

And the bells are ringing! This lesson is over. Next lesson of your free web design course will cover how to make ordered and unordered lists by using HTML. Let's go!

Previous Lesson | Lesson Index | Next Lesson

Nearby Lessons:

• Lesson 1-02 Fundamental HTML Tags
• Lesson 1-03 Basic Text Formatting

• Lesson 1-03-01 Boldening, italicising & underlining text

• Lesson 1-03-02 Adding line breaks, paragraphs & headings

• Lesson 1-03-03 Creating ordered / unordered lists

• Lesson 1-03-04 Changing text size, text color & font face
• Lesson 1-04 Web Colors Unleashed
• Lesson 1-05 HTML Tables

Back To Top

BASIC TEXT FORMATTING!

HTML Line Breaks

HTML Paragraphs

HTML Headings

Heading Size 1

Heading Size 2

Heading Size 3

Heading Size 4

Heading Size 5

Heading Size 6