Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

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.

Follow Stephen Bucaro Follow @Stephen Bucaro

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2024 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268