XHTML Ain’t Brain Surgery
Coding things for the web isn’t really all that difficult. It certainly isn’t brain surgery, and it isn’t even computer programming—sorry if that deflates anybody’s ego. There are really just a few simple rules that you need to follow. While this isn’t going to be an XHTML (eXtensible HyperText Markup Language) tutorial, I’ll give you all a few neat tips that seem to stump newbies the world over.
For starters, make sure you have the appropriate header info at the beginning of your XHTML document. If this seems terribly foreign, point your browser the the W3C (World Wide Web Consortium) for a full primer. The most important part of your header isn’t all of that author garbage or meta-tag nastiness created by overpriced WYSIWYG web design suites. Rather it is the DTD (Document Type Definition). This is critical, because if you’ve dropped tables as a design element (and really you should, but that’s a rant of another color) and embraced CSS (Cascading Style Sheets), the DTD is essential for the web browser displaying your creation to get things right. In XHTML, there are 3 valid DTDs, but unless you’re using frames (and who’s doing that anymore?), you can just concern yourself with the strict and transitional definitions.
A big part of XHTML is the requirement that everything be well formed. What this actually means is that all tags like <something goes here> must be closed. In the previous example, the tag “<something goes here>” isn’t closed. In fact, it’s meaningless jibber-jabber that even Internet Explorer won’t be able to make sense of. A real world example would be something like <p>Here is a paragraph</P>. The <p> tag is the indication of the opening of the paragraph. The 2nd tag, </p>, indicates the end of the paragraph. This is pretty simple stuff, but when paired with cascading style sheets, it’s an extremely powerful and lightweight way to instruct browsers on how to display your content.
Okay, so you don’t want to sit at an empty notepad and write your blog entry with all of these tags, and besides, you’re using some blogging software that does all of this for you, so what’s the point? Well, unless your software is far more sophisticated than mine, there are a number of things it won’t do for you. For starters, there’s no way to use subscripts like H2O or superscripts like 22 = 4. This can be annoying, but with just a little knowledge, and another browser window with Google open, you can get all of these functions and several useful symbols like em dashes and degree symbols.
First, putting expressions into superscript (subscript, italics, bold, etc.) is quite easy. For our example we’ll create a superscript. Let’s say we want to write 5.95 nanometers in scientific notation. The proper notation would be 5.95 x 10-9. But how do we get this exponent to appear as a superscript? The answer is to enclose the exponent within the proper tags for a superscript. In XHTML, the opening tag is <sup>and the closing tag is </sup>. Closing tags are just as important as opening tags, and they can always be recognized by the “/” located just after the “<” symbol.
Now for the next piece of the puzzle. Let’s say you want to write 27 degrees Celsius, but you’d rather see it as 27° C. How do you get that to happen? Here we are going to use an HTML expression for a special character. In this case we want the degree symbol. Go back to your trusty search engine and Google (or Yahoo! if you prefer) something like HTML and degrees symbol. You should be rewarded with a page like this one that lists codes for an assortment of special characters. The code for the degrees symbol is ° and when interpreted by the browser properly displays °. Of course, don’t limit yourself to just temperatures and angles; look up the code for other things like the em dash “—” or if you’re blogging at a sweet cafe, why not write café instead?
Now that you’ve got all the skills necessary to wow your blog devotees, remember this one parting caution. In order to add these tags and special characters, you’ll need to be working with the raw XHTML. Almost all GUI interfaces will convert special characters like {&, <, and >} into the appropriate codes in order to prevent them from being interpreted in bowsers as part of the markup. Therefore, you must be working with the markup directly in order to avoid this happening. All of the programs are a little different, but look for a button labeled “HTML” or something similar.