Web Design Table of Contents by Arnold Kling
Paragraphs and Line Breaks

An HTML file is a text file. The browser needs to understand when to put text on a new line. Some applications have what are called "carriage return" characters (from the days of typewriters, which had a carriage that needed to be moved down and over to the left to start a new line). If one application does not understand the other application's "carriage return" code, the applications cannot communicate with one another. How does HTML handle this issue? We will find out.

  1. In notepad, create a new page. Enter some content on the page on separate lines. Here is an example.

    <html>
    <head>
    <title>
    Line Breaks
    </title>
    </head>
    <body>
    <p>
    This is the first line.
    This is supposed to be on the second line.

    This is supposed to be on the third line, with an extra space above it.
    This is supposed to have a lot of white space in the middle of the sentence.1
    </p>
    </body>
    </html>

    1The line above might not contain white space if you are using Internet Explorer 5.0 or its equivalent in AOL. 

    This is    white space    for Internet Explorer 5.0

  2. Now, save this file as linebreaks.html What happens when you look at this page in a browser?

The browser reads the text file as one continuous file. It does not know that you have typed text on a new line. It only knows that there are some spaces between words. Furthermore, regardless of how many spaces you put between words, the browser compresses them to a single space.

Breaks between lines, breaks between paragraphs, and white space between words are all examples of formatting. HTML began with only a handful of formatting tags, and then many more were added. Now, however, the trend is to eliminate the multitude of HTML formatting tags and to replace them with Cascading Style Sheet (CSS) formatting. In this course, we will learn only a few of the formatting tags.

To create a new line of text, you insert the tag <br> where you want the break to occur. If you type:

Break the line here.<br>Start the new line.

the browser will display it as:

Break the line here.
Start the new line.

Note that we can type everything on one line. The browser does not care how we type it. If it sees a <br> tag, it puts in a break. If it sees no tag, it just keeps everything on the same line.

Note also that the <br> tag is one of the few HTML tags that does not have a matching / closing tag. It stands by itself.

To create a double space between lines of text, you insert our friend the paragraph tag, <p>. Paragraphs, unlike linebreaks, have an end as well as a beginning. Therefore, you should include a </p> in your code at the end of the text that started with the <p> tag. Although browsers will let you get away without closing the <p> with a </p>, it is a good habit to always put in a matching closing tag.

Now, go back to linebreaks.html and add the new tags to try to get the first three lines to display the way they are supposed to look. Do not worry about the white space. We will cover that when we get to CSS, which will be soon!

Table of Contents | Next Lecture
Page created by Arnold Kling. Last Modified July 18, 2001.