1. Technology

Don't Forget the Attributes

More than Just Tags, HTML Attributes Can Improve Your Site

By

HTML code for building a web form

HTML code for building a web form

Image courtesy Gary Conner / Photolibrary / Getty Images

Sometimes when thinking about HTML, all we focus on are the tags. But the attributes of the tags are often just as important as the tags themselves. In fact, there are several tags with attributes that many people don't know anything about. The following are some of the tag attributes that are not as common but can add value to your pages.

Many of These Attributes are Obsolete

Many of these attributes are obsolete or have been deprecated in favor of style sheets. Where appropriate I have included the CSS styles you should use instead of these attributes. This way if you come across old HTML that you need to update you know what these attributes were for and how to update the page.

<a>
The A element is called an “anchor” tag. With the anchor tag, you can create links and bookmarks, as most people already know, but there is an attribute that isn't as well known.

  • title
    the title attribute creates a title for the link. Browsers handle it in different ways, but a popular way is to create a small popup window with the text in it. It allows you to provide more information about the link without cluttering your Web page.
    <a href="http://webdesign.about.com/" title="Click here to go to the Web Design front page">About Web Design</a>

<hr>
When people think of attributes for the HR element, it's often to determine the width and size of the line. But there are a few other attributes that can make your line more unique.

  • noshade
    this is my favorite attribute of the HR tag. It turns off the 3d effect to give you a solid line:
    <hr noshade width="50" align="left">
    This effect should be achieved using the style attribute, by setting the color of the element:
    <hr style="color: #000; width: 50px; float: left;">
  • color
    giving your line a color will make it blend in with your page more effectively.
    <hr color="#ff0000" width="50" align="left">
    This should be done with the style attribute:
    <hr style="color:#f00; width: 50px; float: left;">

<body>
The body tag has many attributes, but there are several deprecated and obsolete attributes that allow you to manipulate how your page displays in the browser.

  • leftmargin
    define where the left margin should be in the browser. It's written in pixels, 0 puts it flush left. This was an Internet Explorer only attribute.
    <body leftmargin="5">
    Using the style attribute, you can set this for all modern browsers:
    <body style="margin-left:5px;">
  • topmargin
    this tag works the same as leftmargin, only it defines where the top of the page should be in the browser. Again, 0 pixels is flush with the top of the window. This was an attribute that only worked in Internet Explorer.
    <body topmargin="5">
    Using the style attribute, you can set this for all modern browsers:
    <body style="margin-top:5px;">
  • marginwidth
    The marginwidth attribute was Netscape's answer to leftmargin. Written in pixels it defines how close to the left margin the page will load.
    <body marginwidth="5">
    Using the style attribute, you can set this for all modern browsers:
    <body style="margin-left:5px;">
  • marginheight
    also a Netscape attribute, the marginheight attribute defines how close to the top of the window the page should load.
    <body marginheight="5">
    Using the style attribute, you can set this for all modern browsers:
    <body style="margin-top:5px;">

Check out the tags you're going to use to see if there are attributes that might give you more power over your page.

©2014 About.com. All rights reserved.