Joy Of Code - Web Design Training and Consulting
Joy Gems Newsletter

XHTML Brush Up Tips
(Part 2 of 2)

Share

By Bud Kraus
bud@joyofcode.com
Joy Of Code
Creator And Instructor

v5 i5
Originally Published: March 5, 2009

Before I offer up my final XHTML brush up tips, let's review the four tips I presented two weeks ago:

  1. All web pages are required to have a DOCTYPE Statement followed by the html, head (throw the title and meta tags in here for good measure) and body tags.
  2. Every open tag must have a close tag.
  3. Only use XHTML to provide meaning to your content. XHTML has nothing to do with how your page looks.
  4. XHTML is always written in lowercase.

Let's not forget why writing good XHTML matters - big time!!

  • Your web pages will be Search Engine Optimized almost by default. (Yes, there's more to SEO, but good markup practice is first on the list.)
  • Your web pages will be parsed (understood) by a wider number of display environments and devices.
  • Your designs using Cascading Style Sheets will work the way you expect them to if you use XHTML correctly.

The hallmark of XHTML is that it is predictable. It is a symmetrical, containerized markup system (that means it uses tags). There is no need for guesswork if a few simple rules are respected.

Here now my final tips for remembering what good XHTML is about.

5. Any XHTML Attribute That Has Anything To Do With Size, Color, or Alignment Is Not Allowed.

Attributes such as width, height, bgcolor, align, and valign are not to be used. These all refer to styling properties and are handled by CSS.

So when you see (and do) things like

<img src="bud_kraus.jpg" alt="Illustration of Bud Kraus" width="400" height=
"400" />

or

<p align="center">

the width, height, and alignment attributes shouldn't be in your XHTML at all. Width, height and alignment are things that deal with style.

6. Some XHTML Elements Are Known As "Empty Tags."

Don't be fooled by elements that have no open or close tags to them. Some tags do something just at the spot you put them in your code. Here are a few examples.

  • <br />
  • <hr />
  • <img />
  • <input />

When you see something like:

<element /> or <element/>

you know you're dealing with an empty tag.

7. Use Character Entities for Symbols.

There are lots of things you can't do just with alphanumeric characters. I'm referring to symbols like fractions, the copyright symbol, and the English pound - and also the ampersand. If you want to to things the right way (and you do), use the character entities assigned to the symbols.

For example:

  • for a fraction like one half, use &frac12; to get ½
  • for the English pound, use &pound; to get £
  • for the copyright, use &copy; to get ©
  • for the ampersand, use &amp; to get &
  • or the up arrow, use &uarr; to get ↑

See the pattern? Like anything to do with XHTML, there is always a pattern. In this case the pattern is &entity;. I think there are hundreds - if not thousands - of character entities. Here's the exhaustive list - and I do mean exhaustive!!

Part 1 of 2