HTML vs XHTML
Web Development
|
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.
|
CODE:
|
Copy / Restore :: Remove Scroll Bars
|
<!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.
|
CODE:
|
Copy / Restore :: Remove Scroll Bars
|
<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:
|
CODE:
|
Copy / Restore :: Remove Scroll Bars
|
<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.
|
CODE:
|
Copy / Restore :: Remove Scroll Bars
|
<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:
|
CODE:
|
Copy / Restore :: Remove Scroll Bars
|
<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.
|
CODE:
|
Copy / Restore :: Remove Scroll Bars
|
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.
|
CODE:
|
Copy / Restore :: Remove Scroll Bars
|
<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.
|
CODE:
|
Copy / Restore :: Remove Scroll Bars
|
<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:
|
CODE:
|
Copy / Restore :: Remove Scroll Bars
|
<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:
|
CODE:
|
Copy / Restore :: Remove Scroll Bars
|
<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:
|
CODE:
|
Copy / Restore :: Remove Scroll Bars
|
<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.
Please login to rate coding articles.
Click here to register a free account with us.
|
|
Comments
|
| Please login to post comments. |
|
|
Ummm personally I love HTML 4.01.. It's my specialty.. (x)HTML seems like.. a
whole lot extra with not a whole lot in return.. everyone I know at LEAST has IE 6 or
FF 2
|
|
|
@mikeMarek,
The only difference between HTML and XHTML is it adheres to the XML syntax. In
laymen's terms, XHTML can be parsed by an ordinary XML parser without having to
know specific tags such as BR that are found in HTML. I had to write an HTML parser
for an HTML report document one time because it didn't follow XML syntax. The
most important reason to it's existence (the only argument that I would consider
valid); it's not just to make it look better.
|
|
|
Thanks, that cleared up alot for me.... Little did I know I was already coding to
XHTML standards and all this time I was wondering wha the difference is.
Thanks!
-Mike
|
|
|
Of course it will be the same, you can't change what the XHTML rules are.
I posted this because I wanted to show that XHTML is the way forward, and is most
definitely what you need to be learning.
People may go to W3Schools, but often don't realise what "Learn
XHTML" means. I know that when I first started out, I didn't look at it.
Sorry if you think that I'm rehashing what is already available, but I
don't see enough new people doing the fundamentals of decent front end
development.
|
|
|
would've been better if I wasn't able to read the same exact thing (and in
a more professional presentation) at w3schools.com
|
|
|
 |
Categories |
|
|
|
