What is XHTML

Change is inevitable, Growth is Optional!

Who came up with all of these different ways to put content on the Web? Why does it keep changing? Will it ever stop changing? The answers to these questions are Sir Tim Berners-Lee and the World Wide Web Consortium, to improve the total web experience, and NO!.

Under the leadership of the founder of the World Wide Web, Tim Berners-Lee, the W3C(World Wide Web Consortium) has constantly changed the way web pages are created and viewed. Originally meant to be text only pages, the Web has had to change to accommodate images, video, sound as well as different computer types, cell phones, and who knows what is next!! The World Wide Web is certainly science at its greatest and at its most frustrating. A few things on the web are as they started, but most have had to change to accommodate new technology.

The W3C has and continues to set standards for the medium. The W3C is a consortium involving MIT University in Massachusetts, Keio University in Japan, and the INRIA firm in France. Other organizations including CERN collaborate with the W3C. Headquartered at the Computer Science building at MIT in Cambridge, Mass., W3C is currently working on the newest standards for improving the World Wide Web. In 1999, for example, W3C adopted a new version of HTML, Version 4.01. The W3C has determined that no more efforts will be put into improving the html language but instead has focused its efforts on other areas of the World Wide Web. In the early 21st century, the W3C focused on Cascading Style Sheets and XHTML as they improved the web. And the W3C involves itself in all aspects of the WWW. They set standards for graphics, multimedia, sound, web accessibility, new languages and other guidelines. The World Wide Web Consortium has remained a progressive scientific center, seeking to improve the web experience with no favoritism to a specific browser.

On this page we will learn about the evolution from HTML to XHTML. We will cover Cascading Style Sheets later. Here are the main points about how XHTML is the same and different than old fashioned HTML:

Staying the Same

The code is still written in text, a plain text document that tells the browser(IE, Firefox, etc) how to display the content. We use Notepad or Wordpad to write our plain text. Any formatting that you or Notepad/Wordpad does on your document is ignored by browsers. Browsers formate webpage based on special code you put in the text called tags.
Tags are still the main way that the text tells the browser what to display. Tags are special letters, words that are surrounded by less than symbols, <, and greater than symbols, > . For example the  tag starts a new paragraph in HTML.
Tags still need closing tags to stop the formatting. For example the  makes text bold. To stop the bolded section of text, close it with a  tag.
Tags still have attributes or qualities you can specify for a tag. For example, the  tag can have attributes added to it.  tells the browser to create a new paragraph and align the text within it to the center. You can still have multiple attributes in one tag. Example:  makes the text that follows it green, an HTML size of 4, and of Arial type.

Changing in XHTML

Tags must be properly nested. That means that the closing tags must come in exact reverse order of the opening tags. For example, this code would be incorrect: This text is bold and italic because the closing tags do not come in exact reverse order. This code would be correct: This text is bold and italic.
Tag and attributes must now all be in lower case. HTML didn't care. XHTML does.  is wrong.  is correct. Notice another difference. All attribute values that are words(letters or 'strings') must be surrounded by quotes.
Even "empty elements" must be closed. Empty elements are tags that do not "surround" text. To make an image appear, you use an <img> tag. There is no text after it. It just makes a picture appear. In HTML, you didnt need to close the image tag. In XHTML, you do. However, the way to close empty elements is different. You put a closing mark, / within the image tag itself like this: <img attribute="whatever" />.  , which breaks down to a new line of text and <hr />, which adds a horizontal rule or line across the page, like you see before the links at the bottom of this page, are other common empty elements.
The name attribute has changed to id. When you want to name a tag, you used to write <img name="fred">. XHTML says write <img id="fred">.
The html tag has changed. To write an html document, you used to start with an <html> tag. To write proper XHTML pages, you can't just put an <xhtml> tag. There is no such thing. Since XHTML is a combination of HTML and XML, you must specify the version of XML, the version of HTML and something called a DOCTYPE that decides how the XML will talk to the HTML. If this is real confusing, don't worry about it. You will just copy the code into your Wordpad document anyway. But, here are the changes. You must a)declare a version of XML. We will use this version: <?xml version="1.0" encoding="UTF-8"?>. b)declare a DOCTYPE. We will use a version called transitional that allows some old code, but accepts newer XHTML code also. It looks like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> c) You must declare the version of HTML and language used. Here is that final piece: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">. These 3 lines of code replace the simple <html> tag. Wow!! Here it is for you to copy whenever you need it:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

One helpful tool you can use to make XHTML a little easier is a validator. It will help you clean up your code. The W3C offers one if your page is online. It is at http://validator.w3.org/. Since your pages for this class aren't usually online as you work on them, we have installed CSE Validator Lite that you can use to check your code.

It is best to write your code correctly the first time. The W3C is suggesting that if you follow the rules of XHTML today, your pages will be valid for years to come. If you look at the source code of this classroom website, you will find that these pages are written in mostly HTML 4.01 with some HTML 2.0. That is because they were written in the late 1990's and have been updated in places here and there. They still work for the most part in major browsers. But if you try to view these pages on your cell phone or other personal data device, they may look ugly. XHTML allows the code you write to work well on both personal computers and smaller/less powerful handheld devices.

Lastly, validating your webpages with XHTML is still not an excuse to skip checking your work in different browsers. Even if you write correct code, you will find slight variations from browser to browser. The school district allows us to load Firefox and IE on our computers in the classroom. That will give you the 2 most popular browsers to check your code on.

Index

Frames