Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

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

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

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.

RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro


Web Design Sections

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