First of all XHTML is a reformulation of HTML. The difference between HTML and XHTML was created using XML and thus is more strict (e.g., document must be well-formed).
Since XHTML documents are actually XML documents we start an XML document with the following code:
<?xml version="1.0" encoding="UTF-8"?>
What this does is tell the browser this is an XML document, that it is XML 1.0, and the encoding for the document is UTF-8, the XML default. Although the encoding isn't required and will default to UTF-8, it is best to put it there anyways—or use another encoding of course, such as iso-8859-1. Remember you can always use different encodings if you need and/or want to.
Next comes the DTD:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
There is also XHTML 1.0 Frameset, Transitional, and Strict. I prefer not to use any of the three however since XHTML 1.1 is the newest of the three and requires a stricter conformance to the W3C standards in order to be valid.
Now we move on to the root element: <html>. However, in XHTML you should not only include the <html> tag, but also some attributes.
<htmlxmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
What this tells this browser is that the XML namescape (we do not discuss XML namespaces in this tutorial) of the document is http://www.w3.org/1999/xhtml and the language of the document is English.
Note: The lang attribute is depreciated and was removed in XHTML 1.1 use xml:lang instead.
Now for the child elements of the <html> tag that are needed to follow the W3C's XHTML standard. The <head> element, and the <body> element are the <html> element's only child elements. the <head> tag needs to have a <title> tag and the <body> element has no required child elements.
This is an example of the most basic XHTML 1.1 document:
For the body tag notice that it has a slash inside of itself. This is called a "self closing element".<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><title>This can't be left blank</title></head><body /></html>
For example:
<p> <imgsrc="http://asolis.net/images/example.gif" alt="Example picture" title="This is an example image"><br>
That was all incorrect syntax for the same reasons:
<p> element was never closed.
<img> element was never closed.
<br> element was never closed.
In XHTML these shortcuts are not allowed for any element because it will overlap other other elements and not display correctly on all browsers. To fix this we do the following:
<p> <imgsrc="http://asolis.net/images/example.gif" alt="Example picture" title="This is an example image"/> </p><br />
We also put a space between the elements name and the / because some browsers will interpret this incorrectly and not display the tag at all. This also increases the readability of the code (the reason I do it) and therefore it is a good practice.
For images remember to put the "alt" attribute all the time and for almost every other attribute (body, div, span, a, etc.). If an XHTML tag is capitalized then it is invalid. All attributes must have quotes around them! If it is a single or double quote does not matter however.
These are just the basics of XHTML for more information on XHTML see the below links for a much more information about XHTML.
, Asolis.