I have noticed with a lot of new front end designers and developers, that their code is no where near XHTML compliant.
So here is a small article explaining how to better improve your code, and make it compatible for more users.
Lets go down to basics. What is the difference?
XHTML is a more "restricted" and "cleaner" version of HTML. It's restrictive in a good way. The idea of XHTML is to combine XML and HTML, to work on 99% of browsers, old browsers, mobile browsers. All of them.
So, what do I need to do?
Well first, XHTML requires the following tags.
<!DOCTYPE the doctype> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Title here</title> </head> <body> Body stuff </body> </html>
Select what you want to copy and in doing so you will keep the formatting when pasting it. |
XHTML also requires all tags and attributes to be in lowercase.
<A href="somelinkhere">Name</A> <a HREF="somelinkhere">Name</a>
Select what you want to copy and in doing so you will keep the formatting when pasting it. |
Both these examples are wrong. They should be:
<a href="somelinkhere">Name</a>
Select what you want to copy and in doing so you will keep the formatting when pasting it. |
All attributes must be quoted.
<div width=50%>Stuff</div>
Select what you want to copy and in doing so you will keep the formatting when pasting it. |
This is wrong, and should be:
<div width="50%">Stuff</div>
Select what you want to copy and in doing so you will keep the formatting when pasting it. |
ALL elements must be closed.
<div>Stuff <br>Stuff
Select what you want to copy and in doing so you will keep the formatting when pasting it. |
That may work fine in some browsers, but it is both unreadable by XML browsers, and not XHTML compliant.
<div>Stuff <br />Stuff</div>
Select what you want to copy and in doing so you will keep the formatting when pasting it. |
Notice the break has an extra " /" before the closing ">" this is to signify that it is an empty tag.
XHTML elements must be nested correctly.
<strong><em>Hello, this is bold italics</strong></em>
Select what you want to copy and in doing so you will keep the formatting when pasting it. |
This is not right, because the <em> tags should be nested within the <strong> tags. Like this:
<strong><em>Hello, this is bold italics</em></strong>
Select what you want to copy and in doing so you will keep the formatting when pasting it. |
Now all that is probably quite easy to follow, and should hopefully make sense. I agree with every point XHTML implies above. There is one small thing that I don't like about XHTML... Attribute Minimization.
This just means that when you have something like a drop down box, you can't use attributes like this:
<option selected>Option</option>
Select what you want to copy and in doing so you will keep the formatting when pasting it. |
You must have the FULL attribute, like this:
<option selected="selected">Option</option>
Select what you want to copy and in doing so you will keep the formatting when pasting it. |
Which to me makes little sense, but I figure it would be like setting the "selected" attribute to blank for certain browsers.
The last major thing about XHTML is that the "name" attribute is depreciated. You should use id instead, although for the most backward compatibility you should use both name and id with identical values.
That's about it, hope you understand a bit more about what XHTML is and why it is much, much better than HTML 4.01.
