Developer

Get these general HTML tips

There are many things you can accomplish with HTML. Here are several HTML tips that you may enjoy.

By Donald St. John

Get noticed

The Web is so big and varied that it's easy for your site to get lost in the clutter. Say you have a great site on the poetry of the 19th-century Russian tsars, but it never seems to show up when you do a Net search. The <META> tag's NAME attribute can give you an edge. If you set "keywords" as the <META> tag's value, you can specify tons of keywords in the CONTENT attribute that robots and spiders (those excellent programs that find Web sites for search engines) will hit.

If you want to grab people who are searching for 19th-century Russian poetry, you might use the <META> tag with the following keywords:

<META NAME="keywords" CONTENT="poetry poem literature russia eastern europe tsar czar 19th century 1800s russian history">

Similarly, if you set "description" as the NAME value, you can include a thoughtful outline of the site rather than a string of keywords. Your description will appear in a search engine's results page instead of the first 200 or so words on the page. The poetry site above might have a description that looks something like this:

<META NAME="description" CONTENT="Well-researched and well-documented site on the poetry of the 19th-century Russian tsars. Includes biographical information and full texts of poems.">

Better yet, include keywords and a description. You can have more than one <META> tag on a page, and they don't need to be closed.

Make a splash screen

Ever go to a site that shows one page and then jumps to another after a few seconds? How do they do that? With the HTTP-EQUIV attribute of the <META> tag, that's how.

HTTP-EQUIV instructs the server to take an action—for example, to insert a date onto a page. You can also use the attribute to make the browser call another Web page. First, add the HTTP-EQUIV attribute to the <META> tag and give it a value of "Refresh" so that the viewer's browser knows the page should be reloaded. Next, add the CONTENT attribute. Giving it a value of "5" tells the browser to reload the page every 5 seconds. If we stopped here, the page would just continually refresh itself every 5 seconds. But adding a semicolon and a "URL=" value to the CONTENT attribute tells the browser to call a different page after 5 seconds, like so:

<META HTTP-EQUIV="Refresh" CONTENT="5;URL=mainpage.html">
<BODY>
<IMG WIDTH="250" HEIGHT="110" ALT="splash screen" SRC="splash.gif">
</BODY>

This creates the splash-screen effect.

Make a slide show

Try the splash-screen trick with frames for an even more interesting effect. You can use the HTTP-EQUIV refresh function of the <META> tag repeatedly to load a succession of pages, creating a slide-show effect in one of the frames.

Let's say you have four documents you'd like to use as slides: slide1.html, slide2.html, slide3.html, and slide4.html. When you set up your frames, have slide1.html be the document that's called by the frame where you want the slide show. Next, open the slide1.html document, and add this tag near the top:

<META HTTP-EQUIV="Refresh" CONTENT="3;URL=slide2.html">

Next, open slide2.html, and add this near the top, and so on:

<META HTTP-EQUIV="Refresh" CONTENT="3;URL=slide3.html">

If you want the slide show to end with slide4.html, don't insert the <META HTTP-EQUIV> tag there. If you want it to loop back to the first slide, add the tag and send it to slide1.html. This sets up a slide show in one frame that switches to the next image every 3 seconds.

Detect the browser (sort of)

The <META> tag's HTTP-EQUIV attribute can perform some rudimentary browser detection. No, it won't return operating system and version information, but it will let you split your viewers into those with modern browsers and those with older versions.

Because HTTP-EQUIV isn't recognized by anything before Navigator 2.0, you can set up things so that if someone hits your site with an older browser, they can manually link to a sparer version of your site.

It's easy: simply create your splash screen, and add a line that says something like this:

If your browser doesn't jump to our site in a few seconds, visit our low-bandwidth site.

Keep it neat

Good housekeeping extends beyond your home. Keep your HTML code clean so that others who want to look at your site's source code won't have any trouble reading and understanding it. (You are scanning other sites' HTML source codes for ideas, aren't you? If you're not, you should be: just select View/Document Source or View/Page Source from your browser's main menu.)

Put extra line space between blocks of code, indent nested tags to show their hierarchy, and use the <!—> comment tag to document what the major sections do. It's time-consuming, but it'll help others—and it'll also help you produce the tightest and most logical HTML for your pages. Check out DOWNLOAD.COM, and view its source code for an example of good use of comments. As you scroll down the page, you'll see such helpful identifiers as these interspersed with the code:

<!— AD BANNER —>
<!—NAVBAR—>
<!— MAIN CONTENT —>
<!— LEFT COLUMN —>
<!— RIGHT COLUMN —>
<!— HOT CORNER —>

They let you know exactly what you're looking at.

Know your audience

One thing to remember is that no amount of funky HTML tricks can compensate for not designing for your audience. Part of that is knowing when—and when not to—use HTML tricks. If you're designing for people who are likely to be using the latest, coolest release of a Netscape or a Microsoft browser, then, by all means, use everything available for those. But if you're addressing a lower-level audience that's still on version 2.0 of either product (or on a text-only browser such as Lynx), resist the urge to go wild—concentrate instead on presenting your material clearly and cleanly. If you don't know which type of browser your audience is likely to have or if you have a mix of users, provide an opening page with high-end and low-end branches, and let people choose what they want to see.

Keep it small

Always keep your pages as small as possible, even if you're sure your audience has plenty of bandwidth. Break up long, scrolling pages into clickable chunks by taking advantage of the Web's hyperlinking ability. Don't use frames unless you have good reason. And keep graphics as small as you can. If you don't need sharp resolution, choose GIFs over JPEGs, as GIFs generally load faster. And resist the temptation to create graphics-intensive pages; every object you put on a page forces your browser to call the server and increases loading time, sometimes drastically. The quicker you can get your whole page loaded, the more chance you have of holding your readers' attention and getting them to click to the next page on your site.

Test for everyone

Just because your graphics and layout look great in your own browser on your own computer doesn't mean your site will look wonderful to other people. If you can, test your pages on different platforms, on different browsers, and at different resolutions. You may find that sacrificing the coolest elements for high-end users can improve the experience immeasurably for low-end users. Depending on your audience, that can be a good trade-off.

By Donald St. John, with additional material and advice from Cormac Foster, Mark Kaufman, Charity Kahn, and Matt Rotter.

Editor's Picks