HTMLHowTo_Group1

The Guide! On the changes between basic HTML and XHTML

__The Differences between HTML and XHTML__

HTML, HyperText Markup Language, is a way of describing how a set of text and images should be displayed to a viewer via a web browser. There are many different versions of HTML. The first widely accepted version was HTML 2.0. 2.0 had all of the elements people still design with today, however, it was missing some key Netscape/ Microsoft extensions and it did not support tables or align attributes. With the birth of HTML 3.2, tables, images, and other align attributes were integrated. However, things like frames and applets were not supported. Thus, HTML 4.0 was born and it could support frames, applets, and other features. HTML 4.01 was created to integrate features like JavaScript, CSS, and table formatting. HTML is swiftly being replaced by XHTML. XHTML 1.0 is the same as HTML 4.01 strict but it is designed to work with XML (extensible markup language). XML is becoming one of the main languages used that is portable between devices such as cell phones, palm devices, and other personal electronics. XHTML, having the capability to work with XML, is becoming the markup language of choice!

HTML and XHTML are very similar but they do have there differences. For example, HTML can be in any case, upper or lower, where XHTML must be all lowercase. XHTML requires a valid XHTML DOCTYPE defining the document as XHTML 1.0 strict. Another main difference is that XHTML requires the closing of certain tags where HTML des not. An example of this would be the  tag. In HTML it is perfectly fine to use the tag as such, , however, in XHTML this is what is required  (notice the closing tag inside the image tag). This would now be valid XHTML. Also, in HTML you are not required to use the alt attribute inside of the image tag. In XHTML, you are required to use the alt attribute. The alt attribute will display text in the place of pictures or links if the users browser does not support it or if you have broken links to pictures. Another difference is something called Nested Tags. When you are using more than one tag you must close the tags in the order in which you opened them. An easy way to remember this is, First in Last out. The first tag you open should always be the last tag you close.

__Examples of common tags that change__

Below is a list of ten common tags that have changed from HTML to XHTML. 1) Text can be any case, upper or lower.  All text must be lowercase.  2) Tags do not have to be closed.  Tags must be closed.  3) The main html tag. The main html tag for XHTML.  4) There is no DOCTYPE required. A DOCTYPE is required at the top of the page. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd"> 5) Formatting is allowed inside the document. Certain formatting must come out and be placed in a CSS file and referenced via a class or id. 
 * HTML:**
 * XHTML:**
 * HTML:**
 * XHTML:**
 * HTML:**
 * XHTML:**
 * HTML:**
 * XHTML:**
 * HTML:**
 * XHTML:**

6) The line break tag. The line break tag in XHTML.
 * HTML:**
 * XHTML:**

7) Nested tags can be closed in any order.  Example Nested tags must be closed in the order in which they are opened.  Example  8) Alignment attributes do not have to be quoted. code
 * HTML:**
 * XHTML:**
 * HTML:**

code code
 * A basic table in XHTML**

code code

code code code 3) code code code
 * A typical body format in HTML**

code  code

code code

code code
 * The formatting would be pulled out and put in a CSS file in XHTML as such**

code Body {background-color:red} code

code A:link {color:blue} code

code A:visited {color:blue} code

code A:active {color:green} code

__Web Resources__

http://www.evotech.net/blog/2007/06/xhtml-html-strict-transitional-deprecated/

- This site provides a great basic understanding of the difference between HTML and XHTML.

http://www.topxml.com/xhtml/articles/html_to_xhtml/

- This site goes into detail about converting HTML to XHTML.

http://www.jetbrains.com/idea/features/html_css_editor.html

- This site provides graphical representations of the conversion instructions. This is a great tool for visual learners.