Line Breaks - HTML

As mentioned in previous chapters, HTML is very forgiving of white space—perhaps a bit too forgiving. Instead of simply reproducing the white space contained within the code, client browsers follow the rules of HTML, condensing white space and only inserting formatting via tags. For example, consider this code example:

This text, when rendered by a browser, resembles that shown in Figure. Note how the formatting has been completely changed due to the browser condensing all the white space—only rendering one space where line breaks and multiple spaces appear. This has advantages and disadvantages, linked to the following two points:

  • You can format your code almost however you like without worrying about affecting the formatting in the client browser.
  • You cannot rely upon visual formatting—using multiple spaces, tabs, and line breaks—to format your HTML documents.

Instead of using plain text, you must use HTML tags to break your document into discrete paragraphs.

Paragraphs

In HTML, paragraphs are delimited by the paragraph tag, <p>. The paragraph tag controls the line spacing of the lines within the paragraph as well as the line spacing between paragraphs. The default spacing is single space within the paragraph, and double-space between paragraphs.

Each paragraph in your document should start with an opening paragraph tag (<p>) and end with a closing paragraph tag (</p>). This ensures that each paragraph in the document has the same formatting. For an example of using paragraph tags, consider the following code and its output, shown in Figure

HTML browsers condense white space in the code to single spaces

HTML browsers condense white space in the code to single spaces

Paragraph tags control the spacing of lines within and between paragraphs in a document.

Paragraph tags control the spacing of lines within and between paragraphs in a document.

it is a good idea to visually format your text within the HTML code—inserting line and paragraph breaks where you want them to appear. Doing so facilitates formatting the text with tags and identifying where tags are missing. As with most tags, you can use styles to control the spacing used by the paragraph tag. For example, using the following styles will cause the paragraph’s internal line spacing to be double-spaced by increasing the line height to double its normal size:

If this style is applied to the example earlier in this section, it results in the output shown in Figure

You can control the spacing within a paragraph by modifying the lineheight

You can control the spacing within a paragraph by modifying the lineheight

Manual line breaks

Occasionally, you will want to manually break a line without ending the paragraph. For example, consider the example earlier in this chapter from William Shakespeare’s Hamlet:

Since the text is from a play, it follows a particular style:

If you use a paragraph tag to cause each line break, you’ll end up with output similar to the following:

Instead, you should use a line break tag (<br>) where you need a line break in a paragraph. The preceding text would be coded as follows:

Note:

Typically, you would use several different styles of paragraph tags to delimit the different elements. For example, when formatting a script for a play, you would have a class for the actor and another for the dialogue. An example follows:

That way, you could easily control (and change) the format of each element separately.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML Topics