XHTML and HTML
XHTML and HTML
ghost | 4590 Reads | I decided to write this article just to explain the difference between XHTML and regular HTML, and to encourage the use of XHTML, this is by no means an attempt to teach you XHTML, just to explain why to use it. (To learn it go here.)
1: What is XHTML? 2: Why learn XHTML? 3: What is the difference?
- What is XHTML?
XHTML is a markup language, designed to replace and standardise HTML, and to reduce the use of code that will only work in one browser.
It is intended to remove, among other things, the need for layout to be defined in HTML, replacing it instead with CSS, which is both more likely to work on many browsers (though Internet Explorer is known for it’s lack of support for some features of CSS) and - in my opinion at least - easier to maintain.
- Why learn XHTML?
It will eventually replace HTML and therefore your knowledge will be considered obsolete and it is similar enough to easily move from HTML to XHTML, and it is (or should be) supported by all modern browsers.
And, though the speed increase is usually negligable, it encourages (and pretty much demands) the use of stylesheets for layout. Stylesheets and background-images referenced by stylesheets are usually cached by the browser more often than pages - especially PHP or ASP pages which are too likely to change - and therefore don’t get loaded as often, reducing loading time for visiters and reducing strain on servers.
One fact commonly cited as a reason not to learn XHTML is that most web users still use Internet Explorer and certain aspects of CSS will not work properly in it. This is (no offence) one of the stupidest excuses I have ever heard, and hopefully you will be smart enough to realise that writing standards compliant pages is more important then making pages which work on Internet Explorer. The reason I am saying this is that pages which work fine on Internet Explorer don’t neccesarily work fine on other browsers, however a standards compliant website using XHTML will usually only look a small bit different on IE.
The examples here of faulty code may work properly on the main browsers (IE, FF, Opera). However they most likely would crash or be incredibly buggy on mobile phone browsers or PDA browsers which obviously can’t be as big or error-free as a modern browser should be.
- What is the difference?
Well the first difference is how elements are nested.
For example:
<b><u>This is wrong</b></u>
<b><u>But <i>this</i> is right</u></b>
The reason for this is that the underline() starts within the bold() tag and must end within it, for the reason that if it starts within the bold tag then the parser should assume that the element is a subsection of the bold tags.
Secondly, all tags must be closed (however you may self-close most tags if they don’t need to have content between the start and end tag). Where “” was correct in previous versions of HTML, it must now be “”. The reason for this is that a start tag (<…>) is assumed to be the start of a section of the page, and an end tag is assumed to be the end of that start tag. So for example
<p id="para1">
Paragraph 1
<p id="para2">
Paragraph 2
is wrong because in this example because the first paragraph isn’t closed. This means that paragraph 2 would be considered part of paragraph 1 also, which may not make a difference, but if they are supposed to have seperate styles (font-size, colours etc…) then certain parsers will not be able to work with them, possibly providing faulty output, and possibly just crashing.
Thirdly, and in my opinion the most important change, is the switch from HTML layouts to CSS stylesheets.
For example the code
<html>
<head>
<title>Example</title>
</head>
<body bgcolor="00000" text="#ffffff">
<div align="center">
//Some random text and stuff
</div>
</body>
</html>
Is wrong because the attributes “bgcolor”, “text” and “align” don’t exist in XHTML.
What it should be (will produce same output, but be valid XHTML) is:
<html>
<head>
<title>Example</title>
<link rel='stylesheet' type='text/css' href='style.css' />
</head>
<body>
<div id="main">
//Some random text and stuff
</div>
</body>
</html>
With the file “style.css” in the same directory with the contents:
body
{
background-color: 00000;
color: #ffffff;
}
div#main
{
margin: auto;
}
ghost 17 years ago
Weird… The line "<body bgcolor="00000" text="#ffffff">" should be "<body bgcolor="00000" text="#ffffff">"
and the line "background-color: 00000;" should be "background-color: 00000;"
ghost 17 years ago
Fixed it now… And just ignore the lines I've mentioned above as being wrong… it won't fix them for some reason
ghost 17 years ago
Oh and one more good rating and I can become a god… i've been 5 points away for a while… (I'm hoping it's 3000 points for god… i think it is)
synstealth 17 years ago
dont forget about XML, they use it more nowdays example
<img src="" alt="" /> and <br />
notice the " / " at the end of tags, of course it is required by xml because <img> does not have closing tag such as </img> .
makes the language more cleaner compaired to xhtml
ghost 17 years ago
Yeah, although be careful with self closing tags, for example you can use self closing script tags but IE doesn't like them