<br /> and <hr /> tags

I am describing these these two tags on the same page because they are similar in one important way. Neither need a closing tag. This is not just some arbitrary decision. Most of the other tags we've seen so far are formatting passages of text (more accurately, they are formatting "strings" of characters). These two tags, however, place objects on the page. Hopefully the distinction here will be clearer by the end of this page. Do note that it won't break a page if you put a closing tag where none is required, but you might as well save yourself a bit of typing.

If you recall, the <link> tag was another tag which did not need a closing tag. The reasons why are a little different, and let's not split hairs about them. However, what's worth noticing is that the XHTML 1.0 standard obliges designers to place a slash / at the end of single tags (i.e., tags with no closing tag). It's the same with <br /> and <hr /> tags and I'll habitually refer to them with the / in place to remind you.

Saying that the <br /> tag places an "object" on the page might seem a little confusing, but that's what it is. It inserts a line break, like
this one. Or indeed, this
one. In the first instance, there was a <br /> before the word "this", in the second case it came after the "this".

The point is that you don't always want to break passages of text with a fully blank line, as happens with block-level tags like <p>. The <br /> tag is your answer here. However, don't use it indiscriminately: it's lousy design to use it in place of the <p> tag, as some people do. OK, it gives you line breaks, but because it doesn't enclose text, you're still basically defining one big paragraph and this places limitations on the ways browsers can either style or process your page. But <br /> definitely has its uses. It's quite good for applying padding at the top and bottom of pages or table cells, and you'll see a few of them on every page of this site. You can also use them to provide "spoiler space", which means, ensuring that some information which some people might not wish to read is hidden out of sight below the bottom of the visible page when loaded. You know, things like who Keyser Soze is, that sort of thing. The <br /> tag never takes attributes and there would be no reason at all to define any properties for it in a style sheet.

The <hr /> tag places a rather more visible object on the page; a horizontal rule. Here's one:

There is at least one these on each page of this site, at the top (under the "Web Design" heading) and the virtual lectures have two each. Unlike its cousin the <br /> tag, you can define styles for <hr /> tag, and this site's are defined as follows:

hr { width: 50%;
     text-align: left; }

width is a bit confusingly named as it actually specifies the length of the rule. The word is used because it relates to the width of the page. You can give this a value in pixels, or a percentage value, relative to page width. (As I've already said with regard to text, you are recommended to use relative values unless you have a very good reason not to.) To define the thickness of the rule, use height. With height you may as well use absolute units as this is far less of a problem when resizing the browser window. You can also change the colour of rules (use color and an RGB code). All of these can be defined either in the style sheet or as ad hoc styles for individual rules.

You might be thinking it'd be nice to have a vertical rule or <vr /> tag. You're right, it would be - but there isn't one. So you might be wondering how I get the vertical rules which appear, for example, to the left of the text you're reading now. The answer is that I simulate them with tables, but that's for later (lesson 4).

Back to the top

Back to the menu for lesson 2