XHTML Tutorial #2 - Text Elements, Page 3
Line break element
A line break isn't, strictly speaking, a text element, but it is an important element for the display of text. A line break element is just what it sounds like - a break in the line of text.
Line break in a paragraph
Open your favorite text editor and enter the following code. Save the file as example_2d.htm.
<html>
<head>
<title>Example 2D - Line Break In A Paragraph</title>
</head>
<body>
<p>This paragraph contains a line break right<br />here. As you can see this places a hard break in the paragraph.</p>
<p>This is a following paragraph to show that there may be a difference in the distance between lines at a line break and between lines at a paragraph start.</p>
</body>
</html>
Now open this example in your favorite browser. It should look something like this:
If your browser renders the example like Firefox does above, you will see that the distance between the lines at the line break in the paragraph is the line spacing within a paragraph.
A line break can also be used within other elements that contain text like headers, table cells, and lists.
Line break between elements
Another place that line breaks are used is between elements to create more space. Open your favorite text editor and enter the following code. Save the file as example_2e.htm.
<html>
<head>
<title>Example 2E - Line Break Between Paragraphs</title>
</head>
<body>
<p>This is paragraph 1. </p>
<br />
<p>This is paragraph 2. There is a line break before this paragraph, but not after this paragraph. </p>
<p>This is paragraph 3.
</body>
</html>
Now open this example in your favorite browser. It should look something like this:
Line break element form
Some astute observers may have noted that the line break element seems to violate the rule that all tags must have a matching closing tag. It is possible to just show a line break as "<br>", but this form is not allowed in an XHTML document.
The proper form of the tag includes the slash ("/") used in closing tags as "<br />". There is a space between the "br" and the slash. The space is not necessarily required for the XHTML document to be well formed, but the space will be required if any attributes are added to the <br /> tag.
The line break tag isn't the only tag that is closed in this manner. There will be others we will encounter in later tutorials. It's just a good habit to get into right now to add the space before the final slash.
On the next page of this tutorial, we will look at another element that isn't really a text element, but aids in the display of text on the page.
Additional resources
- <br /> Line break
A Little Deeper
If you use a WYSIWIG editor like Dreamweaver you may notice that your <br /> tags are not properly written in a valid XHTML format. This is one of the little things that some editors don't do well.
If you poke around in your editor's preferences, you may find a way to set the coding to all be XHTML compliant. But even if you set this preference, not all code may actually be XHTML compliant.
To be honest, this probably isn't that big of a deal. But if you want your code to pass a validation test, you may have to go in and clean up some code by hand.
BestWebTutorials.com is a free service of CrystalClearWeb.net. You can help us keep providing free tutorials and information by:
- Link to us
- Tell a friend
- Correct any you might find
- Make for improvement
- Make a donation
BestWebTutorials.com attempts to post accurate information on this site, but we cannot guarantee that errors do not sometimes occur. The use of code examples from this site in any other site is at the user's own risk. We cannot guarantee that our code might not be in conflict with code written by others, or that our code is fit for other uses.
For further information please review our Terms of Use and Privacy Policy.
Copyright 2005-2008 CrystalClearWeb.net. All rights reserved.
