3.4: Line Breaks

Last updated
Save as PDF

Page ID: 93893

\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \) \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)\(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\) \(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\)\(\newcommand{\AA}{\unicode[.8,0]{x212B}}\)

The ` ` Tag

Coding paragraphs with  tags is the most common method of structuring text on a Web page. Most Web pages are text pages, and paragraphs are convenient and readable methods of text presentation. Other varieties of text structuring are nonetheless available.

The   (line break) tag causes the browser to end a line of text and to continue display on the next line in the browser window. It does not, as in the case of paragraphs, leave blank lines before or after the ended text line. The general format for the break tag is shown here:

 
General format for   tag. Note that in HTML5 the / is optional.   is fine but note that it does not have a closing .

The   tag is not a container tag. It does not enclose text and it does not have an accompanying closing tag. HTML5 elements that do not enclose text and have no accompanying closing tag are referred to void elements. This empty tag is simply placed within the text wherever a line break should occur. The tag is handy for displaying lists of items, lines of verse, or other groupings of individual, single-spaced text lines. For example,the following code uses line breaks to end individual lines of verse packaged inside a <blockquote> tag.

<p>
  Here is a tale about Mary and a pesky little lamb that followed her
  anywhere and everywhere she went.
</p>

<blockquote>
    Mary had a little lamb,<br />
    Its fleece was white as snow;<br />
    And everywhere that Mary went,<br />
    The lamb was sure to go.
</blockquote>
	
<p>
  Mary had an awkward social life. It's awfully difficult to date with sheep
  trailing around after you all the time.
</p>

The four lines of verse are enclosed inside a blockquoted paragraph to offset and indent them from surrounding paragraphs. Each line of verse appears on a separate text line on a single space below the preceding line.

Multiple Line Breaks

With  and <blockquote> tags, a single blank line appears before and after the enclosed indented text block. When   tags are inserted to end lines of text, no spacing appears between the lines. This is the correct way to use the   tag. Historically, multiple   tags were often used to insert extra blank lines in order to increase vertical spacing between lines of text or between other content appearing on the page. This practice is no longer preferred under HTML 5, and should be replaced with style sheets where necessary.

Below is a recoding of the previous page to leave an additional blank line before and after the blockquoted verse. These blank lines are produced by coding   tags to force additional line breaks. Browser output is shown in Figure \(\PageIndex{2}\).

<p>
    Here is a tale about Mary and a pesky little lamb that followed her
    anywhere and everywhere she went.<br /><br /><br />
</p>

<blockquote>
    Mary had a little lamb,<br />
    Its fleece was white as snow;<br />
    And everywhere that Mary went,<br />
    The lamb was sure to go.
</blockquote>

<p>
  <br />
  Mary had an awkward social life. It's awfully difficult to date with sheep
  trailing around after you all the time.
</p>

Multiple Line Breaks — \(\PageIndex{1}\) Using line break for single-spaced output. ("MGA Web Development Tutorials" by Floyd, Kevin; Kwak, Myungjae; and Stines, Alan, Computer Science and Information Technology Ancillary Materials. 4, GALILEO Open Learning Materials is licensed under CC BY-SA 4.0)

Each   tag inserts an additional line break on the page. Therefore, you can code multiple   tags back-to-back to produce multiple blank lines down the page.

Notice that it requires three   tags at the end of the first paragraph to match the number of blank lines given by the single   tag at the beginning of the last paragraph. This is a peculiarity of the way the browser renders the tag at the beginning and end of paragraphs. You may have to experiment to determine the number of tags to code to produced the desired number of blank lines. Still, it is preferable to control vertical spacing with other block level elements or style sheets.