Use these links to jump around or read it all…
[Adding Styles] [Text Tool Tips]
[Affecting Images — New Event Handlers!]
[For Search Engines]
This piece is the first in a series of HTML 4.01 tutorials. If you haven’t already, it would be best if you read over the HTML 4.01 reference tutorial. It offers a general overview of the new tags and attributes involved with the latest version of HTML to hit the Net.
Now it’s time to get a little more specific about what you can and cannot do with this version. We’ll start with a brand new tag, SPAN. If you haven’t seen or heard about it by now, get ready. This pup will be one of the big workhorses in Web pages to come.
SPAN: What Does It Do?
Nothing! Not a darn thing. But that’s the beauty of it. Above all, remember this about HTML 4.01 Cascading Style Sheets(CSS) will be big. The use of one command to denote multiple points on a page is the wave of the HTML future.
If you’ve used CSS, you know that you’ve always had the ability to attach a style to a command. For instance, you could say that every time the BOLD tag is used, also make the text Arial and blue, right? You also probably know that you could stick style commands into other tags. You could put:
…into just about any tag and the text modified by the tag would also carry the CSS effect.
But in all cases, you still had to use a tag that itself would affect the text, the image, or whatever. That’s where the SPAN tag comes in so handy. It doesn’t affect the text at all. It is there only to carry with it other attributes to affect the text, the image, or whatever.
In fact, the text in this paragraph is surrounded by the <SPAN> and </SPAN> commands. Really. Look at the source code if you don’t believe me. See? No effect.
Now, before someone writes to me telling me that you can get the same effect using just the <FONT> and </FONT> commands in place of <SPAN>, yes, that’s true. But what you’re doing is using a tag for something it isn’t meant to do. Plus, the SPAN tag is an HTML 4.01 entity and will thus comprehend HTML 4.01 attributes.
For Search Engines
Again, if you’ve read the HTML 4.01 overview, you’ll already have a head start on what these last two attributes do. DIR and LANG are specifically for search engine use. They won’t affect the look of your page at all.
DIR denotes direction. There are languages that do not move from left to right like English. Some go right to left, and if you live in a country where you read right to left, then the English left-to-right seems strange. Still with me?
By using the DIR command, you can tell the search engine that this blurb of text between the SPAN tags is going a specific way. Right to left is “RTL,” while left to right is “LTR.” It looks like this:
LANG is an attribute that tells the search engine what language is being used inside the SPAN tags. It looks like this:
The 4.01 recognized codes are ar (Arabic), de (German), el (Greek), es (Spanish), fr (French), he (Hebrew), hi (Hindi), ja (Japanese), it (Italian), nl (Dutch), pt (Portuguese), ur (Urdu), ru (Russian), sa (Sanskrit), zh (Chinese).
Yes, there is also a code set aside if you wish to denote a language that doesn’t really exist, like Pig-Latin or Klingon. Follow the same format as above, except add x- before the name. Like so: LANG=”x-ubbee dubbie.” The “x” means it’s an experimental language. If someone else on the Net has registered that same kind of language, maybe you two nutty kids can get together.
That’s That
This SPAN tag is going to be big on the Web. It’s just a great idea that does so much. And now you’ve seen every aspect and attribute it’ll hold.
I’d start using it straightaway with text. Those with the right browser will get the effect, those that don’t, won’t. But they’ll be none the worse for wear by your having it there for others to enjoy.
I don’t know if I’d start using SPAN with images quite yet, especially if the Event Handler is a necessary part of the page. Go with JavaScript until HTML 4.0 is standard across the board.
{The use of SPAN with images is now fully supported in almost all modern browsers, so go ahead and have fun with it today!]
Enjoy!
[Adding Styles] [Text Tool Tips]
[Affecting Images — New Event Handlers!]
[For Search Engines]