XHTML - a Combination of HTML and XML

The purpose of this first assignment of the Internet programming 3 - course was to:

The description and my solution of the XHTML - a Combination of HTML and XML -assignment can be viewed at the bottom of this page.

What is XHTML - Extensible HyperText Markup Language?

XHTML is simply a set of markup codes that structure text and graphics on a Web page. Learning XHTML is about learning what these markup codes are and how to use them together with CSS to structure and style your Web pages.


Why should I start using XHTML?

Many Web pages are built with very unstructured markup code.

This HTML code will propably work fine if it were viewed with a browser, even though the </head>, </h1> and </html> closing tags are missing.

<html> <head> <title>Very Messy</title> <body> <h1>Not good... </body>

Browsers parsing algorithms have become better and better at displaying unstructured HTML like in the example above. This " improvment " does, however, become a problem on a market that consists of very different browser technologies.

Some browsers read Web pages from computers, some from mobile phones and some from hand held devices;and not all hand held devices and mobile phones has the resources to interpret unstructured markup language.

Because of this, XHTML - a combination of XML and HTML - is used.

XHTML pages can be read by all XML enabled devices, and while waiting for browser to support XML, XHTML gives the opportunity to write so called "well-formed" Web pages that work in all browsers.

Differences between XHTML and HTML 4.01

As already mentioned there are no big differences. Here are the few:

If you follow the rules in this list, documents will be well-formed. Here are some examples:

Must be properly nexted elements


<strong><i>Strong and italic text</strong></i>


<strong><i>Strong and italic text</i></strong>

Must have lowercase tag names

Since XHTML documents are XML applications and XML is a case-sensitive language tags like <p> and <P> are interpreted as different tags.


<BODY> <P>A paragraph</P> </BODY>


<body> <p>A paragraph</p> </body>

Must have a closing tag

This is wrong:

<p>A paragraph

This is correct:

<p>A paragraph</p>

This is wrong:

<img src="webpelican.gif" alt="A pelican">

This is correct:

<img src="webpelican.gif" alt="A pelican" />

What is the Structure of a Document?

The structure of a document is like the the skeleton of a body. Structural elements are the building-blocks used for the construction of this skeleton.

The top-level global structure of a document are constructured with the html, head(with a title element) and body structural elements.

Example of other non-global structural elements at a lower level are headings; h1, h2, h3, h4, h5, h6. They should be used to indentify a new section within a document.

Yet another example is the blockquote element. Although this element in some browsers cause some presentation effect(indention) it is a structural element to be used to mark up block quotations.

Blockquote elements used for indentation confuse unsighted users or users without graphical browsers as well as search robots alike, who expect the element to be used to mark up long quotations.

When designing a document or series of documents, developers should strive first to identify the desired structure for their documents before thinking about how the documents will be presented to the user.

Distinguishing the structure of a document from how the content within the document is presented offers many advantages, such as improved accessibility, manageability, and portability.

Assignment Description

Create a xhtml 1.1 - tutorial.

Well, this document in itself is the first part of my solution for this assignment. It's purpose was to give a general understanding of XHTML and why you should use it.

The second part - a reference for XHTML 1.1 tags and their attributes - can be found here: XHTML 1.1 -Tutorial

«  Previous Next  »