CSS Tutorial - From HTML to XHTML

What is new in XHTML compared to HTML

The following rules have to be considered when switching to XHTML.

well formed code
All tags used in XHTML have to have closing tags, like: text - the tough one is this:
<img src="pic.jpg">
img doesn't have a trailing end tag, and it doesn't need one. It's not enclosing anything. But since we have to abide to the new rule, it would have to look like that: <img src="pic.jpg"></img>.
To make things easier, it is allowed for those tags that do not really need an end tag, to merge the two into one, looking like this: <img src="pic.jpg" />, the end has to have a space ' ' and a slash '/' and then the closing bracket '>'.
Considering that, how do you force a line break in your text? Right, with that br tag. How does it have to look? Like this: ' '? Or like that: ' '? Right.
Another example (this often causes trouble, it's easily overseen): The Meta tags in the head of the page! Dont forget the space-slash at the end. Like about the author of the page:
<meta name="author" content="Jürgen E Haug" />
Tags must not overlap:
this is a no-no:
<a href="new.html">link text</a>
correct would be:
<a href="new.html">link text</a>
All tags must be in lowercase
- We used to have HTML looking like this:
 <A HREF="new.html">link text</A>
 now it has to like like this:
 <a href="new.html">link text</a>
All values of attributes must be in quotes.
- One can find a lot of examples like this here:
 <IMG SRC="sample.jpg" height=200 width=200>
 now it has to like like this:
 <img src="sample.jpg" height="200px" width="200px">

The other important rule is a corollary of our new found philosophy of keeping Content and Design strictly separated: All those good old HTML tags that have to do with the looks are history. Don't use tags like  or <center> or parameters like VALIGN or ALIGN. For all those oft-used and quite handy commands exist new CSS pendants.

Another old HTML tag that is now deprecated, is name="this" like when you wanted an anchor to make the visitor jump to a certain part of the HTML page. You used <a href="page.html#this" and then the paragraph you would want the visitor to jump to you would use . No more name, please! One has to use id="this" now.

Considering those important facts, XHTML code in itself is hardly any different to HTML, it will take you not very long to get into it. The harder part is the CSS, not hard as in hard-to-grasp, but hard as in a whole bunch of new commands to learn. We will get at them in due course. The last step to a real XHTML page is how the page gets served from the web server to the browser, but more about that in the Interludium.