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).
<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.
<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).
<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.
<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.
More HTML Code:
• Nesting HTML Lists
• HTML Definition List
• Line Breaks in HTML
• The HTML Head Tag
• XHTML Basics
• Easy Code to Add Google Site Search to Your Website
• HTML5 Input Type - URL
• HTML Horizontal Rule
• HTML Textarea Basics
• HTML center Tag