How to create a valid XHTML webpage

Zopester · #1 01-19-2004, 06:26 AM

How to create a valid XHTML webpage

1. (Optional) Use an xml prologue:

Code:

<?xml version="1.0" encoding="iso-8859-1"?>

(be aware that doing so will force Internet Explorer into Quirks Mode. Don't know what that means? Go to Google. There are thousands of articles detailing the whys and wherefores. My advice? Skip it. It's not necessary.)

2. Use a proper, valid DOCTYPE:

XHTML 1.0 Strict, Transitional, Frameset

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1 DTD

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

3. a) (If you use XHTML 1.0) Change your <html> tag to read:

Code:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

3. b) (If you use XHTML 1.1) Change your <html> tag to read:

Code:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

4. Include this in amongst your usual <meta> tags in the <head>:

Code:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

5. Remember to close all your tags!! This means when you open a <p>, close it with </p>.

6. Validate your pages against http://validator.w3.org.

And that's it!

Of course, this is only the beginning. By taking this first step you are opening yourself up to the wonderful world of designing with web standards, and can start to truly appreciate the amazing bandwidth savings you can achieve.

(Having said that it is perfectly possible to have a completely valid XHTML document that uses nested tables, spacer gifs and all the outdated junk markup HTML is littered with. But what would be the point of that, right?)

ps...To any XHTML purists out there, I know that if you use XHTML you should serve your document as application/xhtml+xml, but until there is a reliable way of doing this that doesn't give Internet Explorer the willies, I'll stick to the old-fashioned text/html. I know of one resource that may be of use, but haven't tried it. The url to the article is: http://keystonewebsites.com/articles/mime_type.php. If someone's tried it and fancies sharing their knowledge, please do!

Dan L · #2 01-19-2004, 06:08 PM

I'd like to extend on 5, if I may:

5b: To all tags that don't close, you need to end them with a /, as seen in example 4. A list of common tags which use this are:

Code:

<hr/>
<img/>
<link/>
<meta/>
<br/>

On the rest of the article, nice work.

scjessey · #3 01-19-2004, 10:36 PM

Quote:

Originally posted by Zopester If someone's tried it and fancies sharing their knowledge, please do!

I am the author of the article, and the method is used by many sites (mostly blogs). If anyone has any specific questions about how it works, please use the contact form on the Keystone Websites contact page.

Rich2k · #4 01-22-2004, 06:16 AM

Quote:

Originally posted by DanX
I'd like to extend on 5, if I may:

5b: To all tags that don't close, you need to end them with a /, as seen in example 4. A list of common tags which use this are:

Code:

<hr/> <img/> <link/> <meta/> <br/>

On the rest of the article, nice work.

For backwards compatibility you need to add a space before the / e.g. <br /> not <br/>

Additionally you didn't mention that you need to enclose all attributes in quotes.

e.g. <a href="#" border="0" /> instead of <a href=# border=0 />

For attributes that don't have a value just repeat it e.g.

<input type="checkbox" checked /> becomes <input type="checkbox" checked="checked" />

Dan L · #5 01-22-2004, 02:48 PM

Quote:

Originally posted by Rich2k
For backwards compatibility you need to add a space before the / e.g. <br /> not <br/>

Additionally you didn't mention that you need to enclose all attributes in quotes.

e.g. <a href="#" border="0" /> instead of <a href=# border=0 />

For attributes that don't have a value just repeat it e.g.

<input type="checkbox" checked /> becomes <input type="checkbox" checked="checked" />

Interesting, I was wondering on that.

Zopester · #6 01-22-2004, 03:33 PM

Thanks for the additions guys! Amazing what you forget to put in when you do a how-to!

AshAbed · #7 02-10-2004, 12:38 AM

thanks, other than what you mentioned in this topic, is there much more of a difference between html+xhtml?

Website Rob · #8 02-10-2004, 02:35 AM

XHTML is to get one out of the bad habits we learned with HTML.

Gets us ready to code properly for when we move to XML as well. Which is why I found it strange to use the DTD mentioned in #1 for XHTML -- that DTD is for XML whereas this thread is supposed to be about XHTML.

I been using the 'application/xhtml+xml' directive for awhile now, but only with our index page. This is to prove to our Clients that want to use it, it is available. XHTML was fairly easy to get used to and much easier than learning to code using CSS for positioning, as opposed to Tables. Using Tables to position Content is one of those bad habits I mentioned.

Although I recommend everyone to switch to XHTML, starting with Transitional and staying with it for awhile will make using XML that much easier. IE is slowing up the change to XML though so you'll have lots of time to get good at both, XHTML Transitional & Strict.

DWS · #9 02-13-2004, 12:00 AM

I read somewhere that it is recommended to use <div> tags instead of using nested tables for laying out the webpage. I really find <div>s difficult to understand.

Can someone point me to the tutorial or more information regarding this?

Zopester · #10 02-14-2004, 01:05 PM

Quote:

Originally Posted by Website Rob

I found it strange to use the DTD mentioned in #1 for XHTML -- that DTD is for XML whereas this thread is supposed to be about XHTML

XHTML is XML. Well, more specifically, it's a subset of XML. So using an XML prologue would be ideal. If only that browser supported it properly. Ah well, ho hum.

devilbala · #11 03-06-2004, 03:06 AM

Hi,

Useful thread.

Thanks.

-Devil

webwhiz · #12 05-01-2004, 10:47 AM

Just wondering...can older browser read XML? If you use XML do you have to use XSLT? I suppose XML won't go together with CSS?? I'm not a real pro in XML...just beginning to learn about it.

nzbm · #13 05-06-2004, 02:22 AM

Nice work Zopester.

Rich2k · #14 05-10-2004, 06:22 AM

Quote:

Originally posted by webwhiz
Just wondering...can older browser read XML? If you use XML do you have to use XSLT? I suppose XML won't go together with CSS?? I'm not a real pro in XML...just beginning to learn about it.

XML is a data format.

XSLT is simply another subset of XML.

Usually XSLT is used to take a pure data XML file and take a presentation layer of XSL and produce a final file combining the data and presentation together.

XHTML is a subset of XML for HTML presentation but following XML rules.

In XML all tags must be closed, this is why we have <br /> instead of <br> in XHTML. You can use <br/> without the space before the / and it will work in most browsers. However so that older browser can understand it we put the space in before the / (as web browsers have always been great at ignoring tags and attributes that they don't understand).

XHTML and CSS are designed to work together. CSS in XML doesn't mean anything unless you clarify what subset of XML you mean. The only one it make sense in is XHTML.

Confused yet?

In reality to see one web page there could be as many as 4 XML documents powering a single page

1) An XML file returned from a database
2) XML file gets converted to a website specific XML format
3) XSL file contains the presentation layer to display the XML data file
4) XSL and XML files processed to generate an XHTML file

It can get even more confusing if you start throwing SOAP and Web Services into the equation!

marauderdos · #15 06-30-2004, 10:38 AM

Nice work Zopester.

How to create a valid XHTML webpage

Sponsored Links

Advertise Here

Internet Services

Web Development

Digital Marketing

Consumer Tech