Page 1 of 2 12 LastLast
Results 1 to 25 of 45
  1. #1
    Join Date
    Jan 2003
    Location
    Houston, TX - Originally from UK
    Posts
    707

    How to create a valid XHTML webpage

    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!

  2. #2
    Join Date
    Feb 2003
    Location
    Connecticut
    Posts
    5,460
    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.

  3. #3

    Re: How to create a valid XHTML webpage

    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.

  4. #4
    Join Date
    May 2002
    Location
    UK
    Posts
    2,997
    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" />

  5. #5
    Join Date
    Feb 2003
    Location
    Connecticut
    Posts
    5,460
    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.

  6. #6
    Join Date
    Jan 2003
    Location
    Houston, TX - Originally from UK
    Posts
    707
    Thanks for the additions guys! Amazing what you forget to put in when you do a how-to!
    Kinkamono Internet Services - The Internet. Done Right.
    Dive In...

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

  8. #8
    Join Date
    Sep 2000
    Location
    Alberta, Canada
    Posts
    3,146
    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.
    Last edited by Website Rob; 02-10-2004 at 02:38 AM.
    PotentProducts.com - for all your Hosting needs
    Helping people Host, Create and Maintain their Web Site
    ServerAdmin Services also available

  9. #9
    Join Date
    Aug 2002
    Location
    California
    Posts
    110
    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?

  10. #10
    Join Date
    Jan 2003
    Location
    Houston, TX - Originally from UK
    Posts
    707
    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.
    Kinkamono Internet Services - The Internet. Done Right.
    Dive In...

  11. #11
    Join Date
    Feb 2004
    Location
    India
    Posts
    48
    Hi,

    Useful thread.

    Thanks.

    -Devil

  12. #12
    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.

  13. #13
    Join Date
    May 2004
    Location
    New Zealand
    Posts
    357
    Nice work Zopester.

  14. #14
    Join Date
    May 2002
    Location
    UK
    Posts
    2,997
    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!

  15. #15
    Nice work Zopester.

  16. Good work Zopester. Very useful information.

  17. #17
    Join Date
    Oct 2002
    Location
    Central America
    Posts
    163
    Originally posted by DWS
    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?
    I´m with DWS on this one .. it´s nice to know about xhtml, but this css tip would make a wonderfull bonus
    Design. Programming. Hosting. Did I mentioned Design?
    www.webbasica.com

  18. #18
    It took me one entire day to validate my first page ever but once you get it it i worth is and you save time and space and the speed is increased for your future designs! I recommend to eveyone to learn who to code XHTML /CSS, learn DIV layout being even better
    *¨) ¤ BHS-D¤
    .·´ .·*¨) .·*·. *
    (¸.·´¸.·*¸ ¤ www.bhsdesign.com¤

  19. #19
    Reading the title of this topic I was about to post the validator.w3.org website but it seems you were one step ahead. Great advice on validating XHTML webpages

  20. #20
    I'm trying to make my forums valid. If I get this

    ... <body> <script language="JavaScript"> <!--

    how do I find out where it is at and what is wrong with it?

  21. #21
    Join Date
    Jul 2005
    Posts
    60
    language="JavaScript" has been depreciated. Use this instead:

    <script type="text/javascript">

  22. #22
    thanks!!! for the input it's very helpful

  23. #23
    Good place to start learning xhtml. Thanks.

  24. Nice, but what's the difference between the doctypes?

  25. #25
    Join Date
    Feb 2008
    Posts
    39
    nice work. interesting.

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •