HTML Line Break Basics
By Stephen Bucaro
In Web page design it's important to understand how the browser parses the page's
html code and lay's out the page. Basically it parses the code from top-to-bottom
left-to-right, laying out the elements from left-to-right until it determines that
the next element will not fit horizontally, then it performs a carriage-return
line-feed, and continues on the next line.
A line break <br /> is a single tag that allows you to explicitly cause a
carriage-return line-feed. The code shown below uses a line break to cause the sentence
to be displayed on two lines.
Toronto-based social media analytics company Sysomos<br />determined that 71 percent of tweets are ignored.
Toronto-based social media analytics company Sysomos
determined that 71 percent of tweets are ignored.
Some html coders, and some html design applications, erroneously use the line
break tag to define paragraphs. However the proper tag for defining paragraphs is
the <p> tag. The paragraph tag requires a closing tag </p> at the end of
the paragraph. The code for a proper paragraph is shown below.
<p>Toronto-based social media analytics company Sysomos determined that 71 percent of tweets are ignored.</p>
The paragraph tag automatically causes a blank line between paragraphs. The same
effect can be achieved by using two line break tags at the end of each paragraph,
however this is not good coding. One good use for the line break tag is to code
a simple list. Shown below is the standard code for a list.
<ol>
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
</ol>
- First list item
- Second list item
- Third list item
Shown below is a list coded by using line break tags.
1. First list item<br />
2. Second list item<br />
3. Third list item
1. First list item
2. Second list item
3. Third list item
As you can see a list coded by using line break tags uses far fewer tags.
More HTML Code:
• The HTML Head Tag
• HTML Text Tags Basics
• Webpage DOCTYPE Declarations Explained
• HTML Textarea Basics
• HTML Linking Basics
• HTML5 Spinbox Control
• Image Map Basics
• Using col and colgroup to Apply Attributes to a Table Column
• HTML Bulleted or Unordered List
• Make an HTML Element Editable
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
Follow @Stephen Bucaro
General Web Design
