Is there a vr (vertical rule) in html?

Question

I know there is a hr (horizontal rule) in html, but I don\'t believe there is a vr (vertical rule). Am I wrong and if not, why isn\'t there a vertical rule?

Answer 1

<div style="width:1px;background-color:red;height:30px;float:right;"></div>

Easily can be done using a div like this

Answer 2

Today is possible with CSS3

hr {
  background-color:black;
  color:black;
  -webkit-transform:rotate(90deg);
  position:absolute;
  width:100px;
  height:2px;
  left:100px;
}

Answer 3

As pointed out by others, the concept of a vertical rule does not fit in with the original ideas behind the structure and presentation of HTML documents. However, these days (especially with the proliferation of web-apps) there are is a small number of scenarios where this would indeed be useful.

For example, consider a horizontal navigation menu fixed at the top of the screen, similar to the menu-bar in most windowed GUI applications. You have several top-level menu items arranged from left-to-right which when clicked open up drop-down menus. Years ago, it was common practice to create this with a single-row table, but this is bad HTML and it is widely recognised that the correct way to go would be a list with heavily customised CSS.

Now, say you want to group similar items, but add a vertical separator in between groups, to achieve something like this:

[Item 1a] [Item 1b] | [Item 2a] [Item 2b]

Using <hr style="width: 1px; height: 100%; ..." /> works, but may be considered semantically incorrect as you are changing what that element is actually for. Furthermore, you can't use this within certain elements where the HTML DTD allows only inline-level elements (e.g. within a <span> element).

A better option would be <span style="display: inline-block; width:1px; height:100%; background:#000; margin: 0 2px;"></span>, however not all browsers support the display: inline-block; CSS property, so the only real inline-level option is to use an image like so:

<img src="pixel.gif" alt="|" style="width:1px; height:100%; background:#000; margin: 0 2px;" />

This has the added advantage of being compatible with text-only browsers (like lynx) as the pipe character is displayed instead of the image. (It still annoys me that M$IE incorrectly uses alt text as a tooltip; that's what the title attribute is for!)

Answer 4

There isn't, where would it go?

Use CSS to put a border-right on an element if you want something like that.