Preamble:
This tutorial expects that you’ve the basics of HTML 4.01, and supposes that you are familiar with its syntax and purpose.
In this tutorial I’ll try to introduce XHTML concept and why we should use XHTML instead of HTML, we’ll talk about differences between HTML and XHTML. We’ll talk about some of web standards that we have to follow when developing a web-based applications.
What is XHTML?
XHTML stands for EXtensible Hypertext Markup Language, it is almost identical to HTML 4.01, but it is a cleaner version of HTML. We might look to XHTML from a point of view that it is an HTML defined as an XML application. Above all XHTML is recommended by W3C, and though it’s compatible and supported with all web-browsers. XHTML consists of all HTML 4.01 elements combined together with the structure of XML.
Why XHTML?
The problem of HTML where on no standardization for web browsers, many web browsers around the world, each browser implemented in a way differs from other browsers, in addition, you might find the same web browser but with different versions, each version renders the HTML tags in a way that differs from others. for example you might make your website look amazing in IE6 for example, but when you display it on IE7 and later, it might look horrible since it does not appear like what it was on IE6, again if you view it on Google Chrome, FireFox, Safari, Opera… and more there is no guarantee that your site will appear the same on all these browsers, and the reason as I said before, different implementations for web-browsers, leaded to different rendering for HTML tags, in addition, the designer of the page maybe did not structure the page correctly, which will lead to errors, some browsers ignore it and some do not.
Another important point, HTML syntax does not force that each tag has a closing one, again this problem will raise a different rendering for the page, since some browsers will permit that you omit the closing tags, and some do not.
Example:
<html>
<head>
<title>No standards in HTML</title>
<body>
<h1>No standards in HTML
<p>Do you agree?
</body>
As you see, this HTML page structure is not correct, since the <head> tag is not closed, same as <h1> same as <p> same as <html>. Even though, the above code will work fine on some browsers without any problems!! put in mind that mobiles now have the ability to view web-pages, but of course it cannot render pages that are not formed correctly like previous example.
These problems and more, where the causes for introducing the XHTML, that as I said shortly combines HTML 4.01 with XML. XML is a markup language, well-formed structure, in which each open tag must has a close tag.
But if you structure your web page in a well formed and proper structure, at least your page will look similar and identical in well known and modern browsers, In my opinion it is a good achievement that your page look identical on main browsers with HTML 4.01 as a start, but it is recommended later to move to XHTML in order to make it standard with all browsers.
It is important to know that the main difference between XML, and HTML is, XML designed to describe data, where HTML designed to display data. Therefore, by combining the features of HTML to features of XML, we got a W3C recommendation for a useful markup language which is XHTML.
XHTML vs. HTML
Getting started with XHTML:
As I said before at beginning of this lesson, XHTML is not very different from HTML 4.01 standards, in addition its syntax almost identical. This make it easy to you to learn XHTML.
Now am going to differ XHTML from HTML 4.01 on some points:
Firstly, XHTML elements must be in lowercase.
Secondly, XHTML elements must be properly nested and always closed correctly.
Thirdly, XHTML documents must have only one root element.
Here an example about each point:
- HTML tags are not case sensitive, so you might write something like this:
<HTML>
<HEAD>
<title>Hi</TITLE>
</HEAD>
<body>
</body>
</html>
This is invalid in XHTML, to make it valid, all elements must be in lowercase.
- In HTML, You might write something like that, and work correctly on some browsers:
<b><i>improper nesting </b></i>
But In XHTML to work correctly it must look like this:
<b><i>proper nesting</i></b>
Another example on the same point:
each <li> element must has a closing tag though it has another list inside it.
<ul>
<li>University</li>
<li>Information Technology
<ul>
<li>CS</li>
<li>CIS</li>
<li>MIS</li>
</ul>
<li>Engineering</li>
</ul>
In the above example we missed the closing tag </li> for Information Technology, again some browser will permit it, and others do not.
In XHTML to make it work correctly for all browsers it had to be well formed like this:
<ul>
<li>University</li>
<li>Information Technology
<ul>
<li>CS</li>
<li>CIS</li>
<li>MIS</li>
</ul>
</li>
<li>Engineering</li>
</ul>
Another Example:
In HTML you might write:
<p> first paragraph,
<p> second paragraph
The above example might work correct on some browsers, and some do not.
But in XHTML it must be written like this:
<p>First paragraph</p>
<p>Second paragraph</p>
- In HTML, Empty elements like <br> and <hr> and <img> does not have a closing tag, but this is wrong in XHTML, empty tags must also be closed like this:
<br />
<hr />
<img />
Example:
In XHTML:
Hi <br />
Horizontal rule <hr />
image <img src=”path” alt=”hi” />
- XHTML documents must have one root element, all XHTML elements must be nested within the <html> root element.
To be continued…
To download this lesson as PDF file click here: XHTML Tutorial–Lesson 1 Part I
Best Wishes,
Anas Jaghoub
Great....
ReplyDeleteThanx alot Hamzeh :)
ReplyDelete