HTML <hr> Tag
Use the <hr> tag to define thematic changes in the content:
<h1>The Main Languages of the Web</h1>
<p>HTML is the standard markup language for creating Web pages. HTML describes the structure of a Web page, and consists of a series of elements. HTML elements tell the browser how to display the content.</p>
<p>CSS is a language that describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work, because it can control the layout of multiple web pages all at once.</p>
<p>JavaScript is the programming language of HTML and the Web. JavaScript can change HTML content and attribute values. JavaScript can change CSS. JavaScript can hide and show HTML elements, and more.</p>
More «Try it Yourself» examples below.
Definition and Usage
The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).
The <hr> element is most often displayed as a horizontal rule that is used to separate content (or define a change) in an HTML page.
HTML <hr> Tag
The HTML <hr> tag is a block-level element transferring all the elements after it to another line. The external look of the horizontal line defined by the tag depends on the type of the browser. More often it is displayed with a border, which creates 3D effect.
In HTML5 the <hr> tag defines a thematic change between paragraph-level elements in an HTML page. In previous versions of HTML, it was used to draw a horizontal line on the page visually separating the content. In HTML5 it has a semantic tag meaning.
Syntax
The <hr> tag is empty, which means that the closing tag isn’t required. But in XHTML, the (<hr>) tag must be closed (<hr/>).
How to make a vertical line in HTML
Put a <div> around the markup where you want the line to appear to next, and use CSS to style it:
You can use the horizontal rule tag to create vertical lines.
By using minimal width and large size, horizontal rule becomes a vertical one.
You can use an empty <div> that is styled exactly like you want the line to appear:
HTML:
With exact height (overriding style in-line):
Style the border if you want 3D look:
You can of course also experiment with advanced combinations:
You can also make a vertical line using HTML horizontal line <hr />
There is no vertical equivalent to the <hr> element. However, one approach you may want to try is to use a simple border to the left or right of whatever you are separating:
HTML5 custom elements (or pure CSS)
1. javascript
Register your element.
*The — is mandatory in all custom elements.
2. css
*You might need to fiddle a bit with display:inline-block|inline because inline won’t expand to containing element’s height. Use the margin to center the line within a container.
3. instantiate
*Unfortunately you can’t create custom self-closing tags.
usage
Don’t want to mess with javascript?
Simply apply this CSS class to your designated element.
One other option is to use a 1-pixel image, and set the height — this option would allow you to float it to where you need to be.
Not the most elegant solution though.
You can draw a vertical line by simply using height / width with any html element.
There is a <hr> tag for horizontal line. It can be used with CSS to make horizontal line also:
The width property determines the thickness of the line. The height property determines the length of the line. The background-color property determines the color of the line.
There isn’t any tag to create a vertical line in HTML.
Method: You load a line image. Then you set its style like «height: 100px ; width: 2px»
Method: You can use <td> tags <td style=»border-left: 1px solid red; padding: 5px;»> X </td>
To create a vertical line centered inside a div I think you can use this code. The ‘container’ may well be 100% width, I guess.
Rotate a <hr> 90 degrees:
You can use hr (horizontal line) tag and than rotate it 90 degree with css below
One more approach is possible : Using SVG.
- You can have line of any length and orientation.
- You can specify the width, color easily
- SVG are now supported on most modern browsers. But some old browsers (like IE 8 and older) don’t support it.
I used a combination of the «hr» code suggested, and here’s what my code looks like:
I simply changed the value of the «left» pixel value to position it. (I used the vertical line to line-up content on my webpage, and then I removed it.)
Vertical line right to the div
Vertical line left to the div
Why not use |, which is the html special character for |
If your goal is to put vertical lines in a container to separate side-by-side child elements (column elements), you could consider styling the container like this:
This adds a left border to all child elements starting from the 2nd child. In other words, you get vertical borders between adjacent children.
- > is a child selector. It matches any child of the element(s) specified on the left.
- * is a universal selector. It matches an element of any type.
- :not(:first-child) means it’s not the first child of its parent.
I think this is better than a simple .child-except-first
Whether this is better than using a makeshift vertical rule element (by styling a horizontal rule, etc.) will depend on your use case, but this is an alternative at least.
How to Create Vertical Line in HTML
You might have a couple of reasons to create a vertical line on your web page but HTML does not have any element for vertical lines. Although HTML only have the element for a horizontal line; but still there are multiple ways to create a vertical line in HTML as mentioned below:
- Using Border CSS Property
- Using width and height CSS Property
- Using hr Transform Property
Here in this article, we have explained all possible ways to create Vertical line in HTML:
1) Using Border-Right, Height and Position CSS Property
OUTPUT
2) Vertical line using Border-Left, Height, and Position CSS Property
3) Vertical line using hr Transform Property
A vertical line can be created in HTML using transform property in <hr> tag. With the help of this property, you can rotate a horizontal line to a vertical line.