Browse DevX
Sign up for e-mail newsletters from DevX


HTML Basics: Basic Text Tags : Page 7

Learn the basic HTML tags to put in your pages and see just how easy HTML can be!




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Horizontal Rules

<hr width=XX% size=XX noshade>

The horizontal rule tag lets you insert a horizontal rule into your page.

<h2>Hello World!</h2>
It's a beautiful day.<br>
The birds are singing.<br>
The flowers are blooming.<br>
The sun is shining. <br>
How Are You?

The Horizontal Rule Tag displays ahorizontal rule, or a line, in your Web page. It displays like this in your Web browser:

Hello World!

It's a beautiful day.
The birds are singing.
The flowers are blooming.
The sun is shining.

How Are You?

The default rule is two pixels thick, stretches across the entire page, and is an outlined light grey. You can change this by using the tag's attributes: width, size, and noshade.


You can specify width of the page the line should fill, either in pixels or as a percentage of the page (it is usually best to use a percentage, unless you have a specific reason for measuring pixels).

  • The first example create a 100 pixel wide rule. It won't change size if you resize the browser window.
  • The second example create a 50 percent wide rule that is fluid and responds to changes in the browser window size:

<hr width=100>

<hr width=50%>


You can specify thickness of the rule in pixels with the size= attribute.

  • The first example create a 1 pixel thick rule.
  • The second example create a 15 pixel thick rule:

<hr width=50% size=1>

<hr width=50% size=15>


You can specify that the rule be solid instead of having a grey outline by using the noshade attribute. This attribute doesn't have a value. If it is in, the rule is solid. If you leave it out, the rule is the default grey.

<hr width=50% size=5 noshade>

Remember, when you are using rules, don't go overboard. Use them in logical places to visually separate information. Don't let them overpower your page or use so many of them that your poor readers are left wondering if they're reading a zebra or a Web page.

Thanks for your registration, follow us on our social networks to keep up-to-date