Is there a vr (vertical rule) in html?

Question

No, there is no vertical rule.

EDIT: It's 2021 (twelve years after I answered this question), and I no longer think my original explanation is true:

(original explanation)

It does not make logical sense to have one. HTML is parsed sequentially, meaning you lay out your HTML code from top to bottom, left to right how you want it to appear from top to bottom, left to right (generally) A vr tag does not follow that paradigm.

I'm not sure why a VR tag was never introduced, but it's likely not because of the way HTML is parsed - there are many different layout modes in HTML/CSS now that do not follow this "paradigm".

If I were to now speculate as to why there is no VR tag, I might look at MDN's definition of the HR tag as a clue:

The HTML <hr> element represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section.

In practice, however, the <hr> tag often ends up used for things other than it's semantic meaning. Although it may seem based on it's real world use that there should be a <vr> tag, it probably would not resemble anything related to the semantic definition of the <hr> tag. It was probably never thought to be introduced.

My hunch is that the creators would suggest that the domain of the solution for this problem lies in CSS, not HTML (and most of the answers to this SO question reflect that).

Nixinova's solution looks like the most elegant and modern solution to this problem.

(The rest of my old answer follows below):

This is easy to do using CSS, however. Ex:

<div style="border-left:1px solid #000;height:500px"></div>

Note that you need to specify a height or fill the container with content.

You can make a vertical rule like this: <hr style="width: 1px; height: 20px; display: inline-block;">

An <hr> inside a display:flex will make it display vertically.

JSFiddle: https://jsfiddle.net/w6y5t1kL/

Example:

<div style="display:flex;">
  <div>
    Content
    <ul>
      <li>Continued content...</li>
    </ul>
  </div>
  <hr>
  <div>
    Content
    <ul>
      <li>Continued content...</li>
    </ul>
  </div>
</div>

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!)

<style type="text/css">
.vr
{
  display:inline;
  height:100%;
  width:1px;
  border:1px inset;
  margin:5px
}
</style>

<div style="font-size:50px">Vertical Rule: &rarr;<div class="vr"></div>&larr;</div>

Try it out.