XHTML - a Combination of HTML and XML
The purpose of this first assignment of the Internet programming 3 - course was to:
- Learn what XHTML is
- Learn how to use the XHTML 1.1 module
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.
XHTML:
- does not differ much from HTML 4.01
- is ment to replace HTML
- is a more strict and clean version of HTML
- is a combination of HTML and XML
- is defined as a XML application
- is recommended by the W3C
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:
- Elements in XHTML must be properly nested.
- All tag names must be in lowercase.
- All XHTML elements must have a closing tag.
- Attribute values must always be quoted
If you follow the rules in this list, documents will be well-formed. Here are some examples:
Must be properly nexted elements
Wrong:
<strong><i>Strong and italic text</strong></i>
Correct:
<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.
Wrong:
<BODY> <P>A paragraph</P> </BODY>
Correct:
<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