MINOS Web Guide - XHTML syntax details

Differences between XHTML and HTML-4 syntax

XHTML is very very similar to HTML, and all the standard header, paragraph, list, pre, img tags are still present. But there are some differences which are very important to know about - and fortunately easy to get used to. If you need to see EXAMPLES of various tags and XHTML syntax, look at the source for the Template pages - they hold all the tags - lists, tables, etc - used by our web pages.

All tag names and attributes in lower case

Yes, that's right. You just keep your fingers off that shift key for ALL tags. <H2> is wrong, <h2> is correct. <TITLE> or <Title> are wrong, <title> is correct. And likewise attributes: <img SRC="MyPhoto.jpg" - - > is wrong, <img src="MyPhoto.jpg" - - > is correct. Notice that the case does not matter for the value of the attribute - the part between the quotes - only for the attribute name.

Case sensitivity extends to any in-page JavaScript - for example, when making an image rollover, one might have onMouseOver="changeImages", and now this must be changed to onmouseover="changeImages".

All Tags get a Closing Tag

You know, or should know, that when you type a block of text

<p>blah blah blah, yadda yadda yadda</p>

that you end that text block with the closing </p> tag. Forgetting the closing tag is the most common error I see MINOS web editors make. So pay attention!

Why bother checking for errors, you ask? The page displays - it can be viewed in a browser, so why worry? Well, it displays now, in this batch of browsers; the next batch of browsers might not display a page which contains errors - they'll display an error message instead. As part of Standards, coding errors are less tolerated. If you claim to be writing HTML-4 or XHTML-1 or something else, then it had better be correct. It is better to start getting used to this now, when errors are partially forgiven, and develop the habit of error checking and validation.

More Details on Closing Tags

ALL tags get a closing tag, even the ones which didn't used to get them in HTML-4. The most common example of this is the code for lists. When you made a list element in HTML-4, you typed

<li> My list item

and there was no closing tag, even though the </li> syntax existed within HTML-4 - you just were not required to use it. Now you MUST use it:

<li> My list item </li>

The tag for inserting images gets handled a bit differently. In HTML-4, you typed

<img src="photo.jpg" alt="my picture" width="xx" height="xx">

There was no </img> closing tag defined in HTML-4, to bracket text between <img> and </img>. That's because all the information required to display the image was contained within the <img - - - > statement. And in XHTML that is still true - the syntax for img is basically the same. For tags like this, the XHTML "closing tag" is the same old > but now it gets gets a SPACE and a / in front of it -

<img src="photo.jpg" alt="my picture" width="xx" height="xx" />

The horizontal rule (line) tag is similar: was <hr> but is now <hr />

Yes, this particular point with closing tags will take a bit of getting used to, but the approach is far more consistent than the "sometimes you need'em, sometimes you don't" method in HTML-4.

All attribute values get Quoted

In the same example of the image tag above, note that the values for width, height, etc are all contained within quotes - -

<img src="photo.jpg" alt="my picture" width="xx" height="xx" />

And since the parser needs to figure out where one set of quotes ends and another begins, attribute="value" strings must be separated from each other by a space.

And That's All

Well, most of it that the average MINOS web editor will encounter. What I have left out are details that just don't exist in most of your pages that I have examined. We'll handle those situations if and when they arise.

There are software tools available which will convert an existing HTML-4 page to an XHTML-1.0 page. See Editing Tools for details.

For the correct way to insert special characters into your text, see Greek and Math Characters.

What NOT to do

There are some old HTML coding habits that you should STOP USING. The functions you once used them for are now performed by style sheets. Moreover, some of these tags are depricated, meaning they are being retired and are no longer part of the W3C standards. Among them :

  • <font> and <center> tags
  • <br> tags, expect maybe to create open space around an image
  • empty <p></p> tags, inserted solely to create white space or a carriage return
  • &nbsp; - non-breaking spaces
  • certain attributes: bgcolor, background, align, and valign

Fermi National Accelerator Laboratory Magnet Logo