logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA


dailyclick
All times in EST

Low Carb: 8:00 PM

Full Schedule
g
g HTML Site

BellaOnline's HTML Editor

g

Formatting the Horizontal Rule Tag

Guest Author - Elizabeth Connick

Want to divide up your page or indicate a separate section? The horizontal rule can do it for you. It's also extremely customizable with HTML and CSS attributes.

The horizontal rule is simply a way to draw a horizontal line across the page. A basic, unformatted horizontal rule looks like this:


... and is indicated by <hr> in HTML code. However, you can get quite fancy, changing the width, alignment, color and more with HTML attributes. Here are some of the options.

To alter the width, you use the "width" attribute (pretty logical, right?) like this:

<hr width="50%">

... which gives you a horizontal line across half the available space, like so:


You can also specify width in pixels, using the format <hr width="100px"> or just <hr width="100">.

Next let's change the color. Use the following format:

<hr color="#FF0000">

For the uninitiated, the letters and numbers above are hex code for the color red. The sample code above will give you a line like the one below:


You can set the horizontal rule's alignment to left, center or right. Just use code like the below sample:

<hr width="25%" align="center">

... and you will see a line like the following:


As you can see from that last example, you can combine attributes and they'll all work. As with most HTML attributes, it doesn't matter what order you use.

All of these examples apply to many other HTML elements, but the horizontal rule has a unique attribute as well: noshade. This attribute removes the line's 3-D effect. You can apply the noshade attribute as follows:

<hr noshade>
... and here's how it will look:


Now that you know how to add this nifty formatting tool, don't go crazy with it! A page covered with different-colored horizontal lines just looks cluttered and strange. The horizontal rule can be used very effectively in separating off a portion of your page for example, if you have a footer section at the bottom of each page, you might add a horizontal rule just above it to set it off from the page contents.
This site needs an editor - click to learn more!

Add Formatting+the+Horizontal+Rule+Tag to Twitter Add Formatting+the+Horizontal+Rule+Tag to Facebook Add Formatting+the+Horizontal+Rule+Tag to MySpace Add Formatting+the+Horizontal+Rule+Tag to Del.icio.us Digg Formatting+the+Horizontal+Rule+Tag Add Formatting+the+Horizontal+Rule+Tag to Yahoo My Web Add Formatting+the+Horizontal+Rule+Tag to Google Bookmarks Add Formatting+the+Horizontal+Rule+Tag to Stumbleupon Add Formatting+the+Horizontal+Rule+Tag to Reddit




RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the HTML Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 by Elizabeth Connick. All rights reserved.
This content was written by Elizabeth Connick. If you wish to use this content in any manner, you need written permission. Contact BellaOnline Administration for details.

g


g features
What's Coming in HTML 5

What is FTP?

HTML Fundamentals - Tables

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor