HTML and XHTML are both languages that are used to inform web browsers, such as internet explorer, firefox, or safari, how content should be displayed on a web page. Using XHTML, you can control things like color, font, and layout of a page that you put onto a website. This section is intended to teach you how to use XHTML to build a simple website.
While HTML and XHTML seem quite similar, there are a few key differences that distinguish the two markup languages. Essentially, XHTML incorporates XML into standard HTML documents, which makes the exchange of information easier to process and maintain. The primary differences between the two is that XHTML requires well-formed syntax. All tags to be closed and in lowercase, unlike in HTML. In addition, all XHTML elements must be properly nested and well-formed, which means that all elements must be nested within the <html> root element and sub elements must be in pairs.
The increase in the use of portable devices, such as PDA's and internet-capable cellular phones, has made it necessary to reduce the complicated syntax of HTML in able to deliver Web information to them, which have more constraints than PC's. Because it is necessarily well-formed, XHTML does not require a custom parser like HTML does.
An XHTML file is a text file that contains a series of small markup tags. These markup tags are responsible for telling the Web browser how to display the information on the page. XHTML tags are surrounded by the two characters < and >. Typically, XHTML tags are presented in pairs, such as <b> and </b>. The basic XHTML page will consist of a start tag and a closing tag. While it is not necessary to include closing tags in HTML, it is required in XHTML. The text or information that is between the start and closing tags is referred to as the element content.
The following code, then, will display the text 'This text will be bold' as bold:
Here, the XHTML tag begins with the start tag <b>. The content of this XHTML element is This text will be bold. The XHTML element then concludes with the closing tag </b>. The purpose of the <b> tags is to define an XHTML element that should be displayed in the browser as bold. In HTML, tags are not case sensitive and <B> means the same as <b>. However, XHTML requires the use of lowercase tags.
The most important tags in HTML and XHTML are tags that define headings, paragraphs and line breaks. Below is a list of basic XHTML tags:
- <html> ... </html>
These tags define an HTML document. These tags are optional in HTML, but some browsers and other utilities may not be able to recognize the document without them.
- <head> ... </head>
These tags define the head area, where the title is declared, and where stylesheets and templates are called.
- <body> ... </body>
These tags define the body section of the document, which contains the displayed content of the page.
- <title> ... </title>
These tags define the title of the document. These tags are required in every HTML and XHTML document. Typically, the materials defined by these tags are displayed in the title bar.
- <link />
In XHTML, this tag specifies links to other documents.
- <script> ... </script>
- <style> ... </style>
These tags specify a particular style for a document. Here, CSS statements can be typed between the tags.
- <h1> to <h6>
These tags define headers 1 through 6. The tag <h1> defines the largest heading and the tag <h6> defines the smallest header.
- <p> ... </p>
These tags allow for the creation of a paragraph.
- <hr />
This tag allows for the insertion of a horizontal rule in XHTML.
- <img />
This tag allows for an image to be inserted in XHTML.
- <br />
This tag specifies a line break in XHTML.
- <b> ... </b>
These tags format text as boldface.
- <i> ... </i>
These tags format text as italic.
The strict syntax requirements of XHTML result in cleaner documents, but are less forgiving of sloppy commands or "tag soup" that passed with HTML. Both experienced HTML users and those with no prior knowledge to XHTML can run into specific problems while getting acquainted with XHTML. The following information serves as a troubleshooting reference should a document not transfer well online.
- Using caps in commands: although not a problem with HTML, lowercase commands are detrimental to XHTML.
- Incorrect: <B>boldface</B>
- Correct: <b>boldface</b>
- Nesting Elements in Incorrect Order: commands must enclose the immediate text which they are being applied to.
- Incorrect: <h1><b>Title!</h1></b>
- Correct: <h1><b>Title!</b></h1>
- Not closing elements: XHTML requires that closing tags always be used, to insure compatibility with CSS.
- Incorrect: <p>Text<p>More text
- Correct: <p>Text</p><p>More text</p>
Markup Validation is used to check Web documents in formats like HTML and XHTML for conformance to browser compatibility and other standards noted by World Wide Web Consortium (W3C). All webpages that are published should be validated, to ensure that the code is structured properly. Documents which do not follow certain standards may not be rendered correctly depending on the browser receiving and interpreting the information. Therefore, simply testing the page by viewing it on a single browser, or even on a number of browsers using the same operating system, does not mean that the page will display properly on other browsers and other operating systems. Any website published for the purpose of sharing information (rather than for storing information solely for oneself) is optimally operational on a multitude of pages. On sites published to a very large audience, it is even advisable to test the page on multiple browsers using multiple operating systems in addition to validating the pages.
While HTML has accomplished a number of important tasks in the past, it seems as though it has become inadequate for modern Web use. HTML is excellent for formatting the display of a web page, but it is not capable of handling the processing needs of an information application. Most HTML documents are bulky with unnecessary code, which makes it difficult to create pages that are compatible with non-conventional platforms such as handheld devices.
Other HTML limitations include:
- HTML does not have the capability to define relationships between classes.
- It does not recognize spaces, tabs or margins.
- HTML documents do not translate easily from other types of documents.
- HTML pages do not support all font styles.
- It does not have the capability to make definitions (i.e. to name entities for later use).
- It does not have the capability for using parameters (i.e. to allow for named patters to be abstracted from specific details).
- It does not have the capability for modularity (i.e. the ability to collect fragments of code so that different collections can be used to obtain various effects). The propriety and stylistic elements of an HTML document tend to be sloppy and bulky, which is difficult to maintain and slow to download.
- Real-world HTML forms are reliant on script to accomplish many common tasks, such as marking controls as required, performing validations and calculations, displaying error messages, and managing dynamic layouts. This dependency ultimately results in complex and bulky documents that are expensive and time consuming to maintain.
How to Write XHTML