search engine optimization articles do it yourself seo hiring search engine experts html and search engine optimization web site analysis and submission service

HTML HR Tutorial

Browser Support

Internet Explorer Firefox Opera Safari Chrome

The hr element places a horizontal rule on a page, which can be "dressed up" using CSS.

In an interesting side note, keyword research reveals most webmasters call it a horizontal line rather than horizontal rule by a margin of about 100 to 1, even though the tag is <hr> and the official name is horizontal rule.

A horizontal rule is simply coded as:

<hr>

There is no closing tag. For XHTML documents the tag must be self-closed to be compliant. A self-closed rule is code: <hr />

The default horizontal rule looks like this:


Below are some examples with different border styles applied. The code for each one is off to the right side under the rule.


<hr style="border: 3px double #487;">

<hr style="border: 3px outset #595955;">

<hr style="border: 2px dotted #2c1294;">

<hr style="border: 2px groove #939;">



<hr style="color: #f00; height: 1px;">
<hr style="color: #000; height: 1px; margin-top: 1px;">
<hr style="color: #f00; height: 1px; margin-top: 1px;">



<hr style="color: #000; height: 1px;">
<hr style="color: #00f; height: 1px; margin-top: 0px;">
<hr style="color: #000; height: 1px; margin-top: 0px;">



<hr style="height: 0px; border-bottom: 2px solid #5c4b3f;">
<hr style="height: 0px; border-bottom: 2px solid #ac9e91; margin-top: 0px;">
<hr style="height: 0px; border-bottom: 2px solid #5c4b3f; margin-top: 0px;">



<div style="border: 1px solid black; border-right: 3px solid black; border-left: 3px solid black;"> <hr style="height: 0px; border-bottom: 2px solid #aad7c6; margin-top: 0px; margin-right: 0px; margin-left: 0px;"> <hr style="height: 0px; border-bottom: 4px solid #36745c; margin-top: 0px; margin-right: 0px; margin-left: 0px;"> <hr style="height: 0px; border-bottom: 2px solid #aad7c6; margin-top: 0px; margin-right: 0px; margin-left: 0px;"> </div>

As you can see there are many different looks if you use your imagination, these examples only touch the surface of the sea of possibilities. However, when you get tricky like this, they will look differently from brand to brand of browser. Of course, you can always use images too.

This concludes the HTML Horizontal Line/Rule Tutorial.
Back | HTML Tag Chart | HTML Index | Web Design Tutorials
search engine optimization course
If you want your web site to rank high in the search engines . . . what are you going to do to get it there? Check out my search engine optmization guide, SEO for YOU: Search Engine Optimization for Ordinary Everyday People!

Check out SEO for YOU now!

Almost a Newsletter

Subscribe today for exclusive website design tutorials and grab some free gifts to boot! Learn more, or subcribe below:
Email:

First Name:

Privacy Policy

Did you know...

The member's site has about 100 standards compliant HTML and CSS tutorials, 31 handy reference charts, reprintable content, web graphics, exclusive fonts, free software, free ebooks and more? All this for less than 9 cents a day! [ Details ]
See my fancy bottom! :)