HTML to XHTML – a refresher Nov30 '04
Main topic
I wanted to "re–fresh" all those inspired by web development on the topic of converting HTML to XHTML, and maybe some general background information, as well.
Purpose
There’s nothing wrong with repeating some "well known" information, is there? Sometimes certain things are important enough to repeat frequently, so the crucial information always stays "fresh in the head."
It’s easy to claim that we have a web site that "validates," conforms to XHTML 1.0, and/or is "headed in the right direction."
However, it is much more difficult to keep up on these things. The more changes a web site goes through, the more chance there is for becoming "forgetful" of the very aspects that we claim to support.
The web is always changing, and information (and code) is only "new" the second it goes up. Minutes after, it’s already aging.
However, there are some foundations that remain intact. Sometimes it is easy to forget these aspects, as we continue down the path of "web enlightenment."
General background
Rather than speaking from my own experience, I want to quote some sources that have given me the inspiration to gain that experience.
Converting from traditional HTML to XHTML 1.0 Transitional is quick and painless, as long as you observe a few simple rules and easy guidelines.
If you’ve written HTML, you can write XHTML. If you’ve never written HTML, you can still write XHTML.
XML and Web Services Unleashed
The W3C organization introduced XHTML 1.0 as an official recommendation on January 26, 2000. XHTML is a step toward the goal of standardizing markup for the web. It is also a step toward making the web "XML compatible." XHTML is an XML application. XHTML is a reformulation of HTML into an XML application. Therefore, HTML is made XML compatible and open to interaction with future XML technologies.
Criteria
In order to make your HTML documents XHTML 1.0 compatible, a few things must be done.
Document Type Declaration
The very first thing is the Document Type Declaration. This is always placed at the very top of your XHTML page.
There are three types to choose from: Strict, Transitional, and Frameset.
The difference between these three depends on how much you want to limit yourself (Strict or Transitional), or simply on the layout of your web page (Frameset).
Strict requires you to be more "strict" when marking up your document. Transitional is the most popular, and the easiest to utilize.
An example of a "Transitional Document Type Declaration":
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
This declaration should ALWAYS be present at the top of every page. It goes BEFORE the root element of <html>.
"Well Formed" elements
All elements that have an opening tag must have a corresponding closing tag. For example, <li> and <p> are often left open.
If a certain tag doesn’t have a closing tag, such as <img>, <br>, or <hr>, a slash must be added inside the tag, with a space before it:
<img src="..." />
<br />
<hr />
Proper nesting
This is not acceptable:
<p>These elements are not <b>properly nested!</p></b>
Most HTML developers will not do this, but mistakes happen.
Here is the proper nesting:
<p>These elements are not <b>properly nested!</b></p>
No more caps
get used to writing everthing in lowercase. not only does it make things look consistent – it also helps with programming languages such as php, javascript, etc – where case sensitivity is very important, when referencing variables, etc.
so, no more of this:
<TABLE><TR><TD>...
Please... keep it lower:
<table><tr><td>...
Attribute values in quotes
This has always been considered "optional," but not anymore. XHTML enforces attributes in quotes, as well it should. It’s terrible practice not to quote attributes:
<img src=my_image.jpg width=400 height=250...
Gosh, that’s ugly. Quotes are your friend. Use them.
<img src="my_image.jpg" width="400" height="250"...
Note: Attribute values can appear in single or double quotes.
Name/value pair for all attributes
There are some attibutes that are "minimized," meaning you could have written them in shorthand:
<input type="radio" name="option" checked />
Above, the "minimized" attribute checked can’t be like that. It has to be quoted. You can’t have floating attributes, like that.
Here’s the fix:
<input type="radio" name="option" checked="checked" />
Use CDATA, or external
When a browser renders an XHTML page, which is an XML page, script and style elements can cause a bump. This goes for JavaScript, and CSS. If you embed either of these into your page, they must be enclosed in CDATA sections:
<style type="text/css" media="screen">
<![CDATA[
CSS styles go here
]]>
</style>
or:
<script language="javascript" type="text/javascript">
<![CDATA[
JavaScript code goes here
]]>
</script>
Normally, all script and style elements should be external, and referenced in your page, rather than embedded.
For CSS:
<link rel="stylesheet" type="text/css" href="/css/my_styles.css" />
For JavaScript:
<script language="javascript" type="text/javascript" href="/javascript/my_scripts.js">
</script>
It is better to reference your scripts and styles, so the XHTML file is not cluttered with it, and so it renders properly.
Use id instead of name
In HTML, the name attribute and the id attribute are used to identify specific elements. For example, an anchor link looks like this:
<a name="home"></a>
The id attribute should be used instead:
<a id="home"></a>
Some other elements that need id, instead of name are: form, frame, img, and map.
Open to suggestions
If anyone else has anything to add, please do so. I am sure I missed something, or maybe I didn’t explain everything well enough.
Add Feedback (view all)
Leave feedback
That's fantastic. Good work that's exactly what I needed. ;)I've been learning HTML and looking at PHP now. Thxs for puting that up. I ... Read more.
A good point made by 'HTML dog' today, regarding using Strict over Transitional doctypes. ... Read more.
is published and produced by Matt Thommes - an independent publishing enthusiast, mobile blogger, content creator, informative writer, web developer from Chicago.
Never one to conform, Matt intends to promote the effect the web has on our lives, in an effort to intensify, instruct, and clarify all that is happening around us.
Similar Entries
- Table rendering and table–layout (291 recent visits)
- New RSS feed – Bulls game alerts (1 recent visits)
- Implement "nofollow" for hand–coded sites? (1 recent visits)
- WEGO – The Web Ego project (7 recent visits)
- PHP – passing variables across pages (8550 recent visits)
- Office ergonomics – Standing vs. Sitting (234 recent visits)
Stats
4 unique visits since October 2008
Snazzy summary. You're missing information regarding content encoding and MIME types, though -- the latter of which is a requisite for Strict and ... Read more.