Line Breaks in HTML
By Stephen Bucaro
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 (•) to create the list's bullets, as shown below.
• Chevrolet
• Chrysler
• Ford
• Toyota
• Chevrolet<br />
• Chrysler<br />
• Ford<br />
• Toyota
There are also character codes for other bullet types like squares and arrows. Need nested lists?
Use the character code for a space ( ) 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 />
1. Red<br />
2. Yellow<br />
3. Blue<br />
• Secondary Colors<br />
1. Orange<br />
2. Green<br />
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.
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
Follow @Stephen Bucaro
General Web Design
