Menu
Line Breaks in HTML

Whether you are hand-coding your webpage, or trying to get your WYSIWYG webpage application to do what you want, understanding the html tags that control line breaks is very important. There are html tags to force a line break, tags to prevent a line break, and even tags to suggest a line break.

Use <br /> to Force a Break

The most common line break tag is <br />. This tag forces a carriage-return line-feed. One great use of the <br /> tag is to create a list. You don't need to deal with the complicated <ul> (unordered list) or <ol> (ordered list) tag structures to create a list. Shown below is a simple list created using the <br /> tag:

1. First Line
2. Second Line
3. Third Line

1. First Line<br />
2. Second Line<br />
3. Third Line

The above code would replace the complicated <ol> tag structure. Need an unordered list? Use the character code for a bullet (&bull;) to create the list's bullets, as shown below.

• Chevrolet
• Chrysler
• Ford
• Toyota

&bull; Chevrolet<br />
&bull; Chrysler<br />
&bull; Ford<br />
&bull; Toyota

There are also character codes for other bullet types like squares and arrows. Need nested lists? Use the character code for a space (&nbsp;) to indent the nested lists, as shown below.

• Primary colors
   1. Red
   2. Yellow
   3. Blue
• Secondary Colors
   1. Orange
   2. Green
   3. Violet

• Primary colors<br />
&nbsp;&nbsp;&nbsp;1. Red<br />
&nbsp;&nbsp;&nbsp;2. Yellow<br />
&nbsp;&nbsp;&nbsp;3. Blue<br />
• Secondary Colors<br />
&nbsp;&nbsp;&nbsp;1. Orange<br />
&nbsp;&nbsp;&nbsp;2. Green<br />
&nbsp;&nbsp;&nbsp;3. Violet

Use <nobr></nobr> to Prevent a Break

In the sentence shown below, the browser inserted a line break after the hyphen in cross-purposes (assuming you haven't changed the font or font size in your browser).

Google is an assemblage of parts that sometimes work at cross-purposes and this can be counterproductive.
<div style="width:240px; border-style:solid; border-width:1px; font-family:verdana; font-size:12px;">
Google is an assemblage of parts that sometimes work at cross-purposes and this can be counterproductive.
</div>

By placing cross-purposes within <nobr></nobr> tags, the browser was prevented from placing a line break after the hyphen in cross-purposes, as shown below.

Google is an assemblage of parts that sometimes work at cross-purposes and this can be counterproductive.
<div style="width:240px; border-style:solid; border-width:1px; font-family:verdana; font-size:12px;">
Google is an assemblage of parts that sometimes work at <nobr>cross-purposes</nobr> and this can be counterproductive.
</div>

You can place any amount of text within the <nobr></nobr> tags and the browser will be prevented from placing a line break in that text.

Use <wbr> to Suggest a Break

In the sentence shown below, the browser inserted a line break after the words "and this can be", forcing the word "counterproductive" onto the next line. (again assuming you haven't changed the font or font size in your browser).

Google is an assemblage of parts that sometimes work at cross-purposes and this can be counterproductive.
<div style="width:240px; border-style:solid; border-width:1px; font-family:verdana; font-size:12px;">
Google is an assemblage of parts that sometimes work at cross-purposes and this can be counterproductive.
</div>

By placing word break tag <wbr /> within the word counter<wbr />productive we have suggested to the browser that it can break that word at that point if necessary.

Google is an assemblage of parts that sometimes work at cross-purposes and this can be counterproductive.
<div style="width:240px; border-style:solid; border-width:1px; font-family:verdana; font-size:12px;">
Google is an assemblage of parts that sometimes work at cross-purposes and this can be counter<wbr /">productive.
</div>

This gives the text within the box a much neater appearance.

Understanding the html tags that control line breaks is very important; Use the <br /> tag to force a line break, Use the <nobr /> tag to prevent a line break, Use the <wbr> tag to suggest a line break.


Learn more at amazon.com

More HTML Code:
• HTML dfn Tag
• Use an Image as a Form Submit Button
• HTML center Tag
• HTML Table Basics
• Easy Code to Add Yahoo Site Search to Your Website
• HTML Select List Basics
• How to Write and Run HTML
• Wrapping Text Around Images
• Set Form Controls Tab Order With tabindex Attribute
• Use fieldset to Organize Form Elements