Web Design Made Simple Web Design Made Simple

debbie T Designs - Web Design Made Simple

Line Breaks & Horizontal Rules

Introducing the ` ` Tag

You know that the  and <hx> tags will add a line break above and below the enclosed text. But what happens when you want to add only one line break? Ta-Da! The   tag to the rescue!

The   tag adds a line break to your page.

Notice this is an empty tag, and requires no separate closing tag. Just make sure you include the [space] and / before the > bracket.

Depending on window size and browser settings, text on a Web page can look very different to each visitor. Because of this, you will want to let the browser wrap the text freely.

Adding line breaks to control the length of each sentence in a paragraph might display perfectly on your screen. But to a visitor using a different sized window or larger/smaller text settings, the document can look cut up and choppy. The bottom line is use the   tag sparingly and wisely.

Note: If you have prior experience with HTML, you might be accustomed to using several   tags one after another, to add spacing or padding to text. This is not the proper way to use this tag. Margins and padding should be formatted by (CSS) Cascading Style Sheets, not with the   tag. This is covered in a future tutorial.

Important to Remember: The   tag is an inline tag, and should always be enclosed in a block-level tag, like  or <hx>; this is especially important if you are using the Strict XHTML DOCTYPE.

One more tag to learn about in this tutorial.

Introducing the `<hr />` Tag

The <hr /> tag will add a horizontal rule to the content of your Web page. The <hr /> tag does not require a separate closing tag, just be sure to include the [space] and / before the > bracket.

Some facts on the <hr /> tag:

By default, the <hr /> tag will add a rule that stretches the width of your page.
The <hr /> tag stands on its own. It cannot be nested in a , <hx>, or an inline-level tag, like  or .
Adding lines or rules to your design is a good way to separate sections of your page but don’t overuse the <hr /> tag or your design might look cluttered.
The color of the <hr /> tag usually depends on the Windows desktop display colors or theme. Keep in mind, that your visitors might see a different color than you if their system display colors are different.
CSS borders can also be used to display horizontal lines. This is a more advanced topic for a future tutorial.

Experiment with the   and <hr /> tags by adding them to your web file. View your web page with your browser.

View my 2coding.html file for my web page so far.

What do you want to learn next? « Adding Emphasis Comments »

If you would like to make an observation or suggestion, please take the time to write a comment. If you prefer to contact me privately, there is a contact form.