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

    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,441
    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,994
    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,441
    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
    697
    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,109
    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
    109
    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
    697
    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
    45
    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
    346
    Nice work Zopester.

  14. #14
    Join Date
    May 2002
    Location
    UK
    Posts
    2,994
    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
    159
    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?
    Im with DWS on this one .. its 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
    59
    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
    36
    nice work. interesting.

  26. #26
    Keep up the good work!

  27. #27

    operating system

    hi can you help me about operating system......

  28. #28
    Join Date
    Oct 2002
    Location
    Under Your Skin
    Posts
    5,875
    Quote Originally Posted by MALdito View Post
    Im with DWS on this one .. its nice to know about xhtml, but this css tip would make a wonderfull bonus
    One of the ways I learned this was by downloading templates, looking at the code in the site, and looking at the stylesheet. The biggest part was learning the difference of IDs and Classes... how to use what when. Then moving on to positioning.

    I'm not an expert, but you would be surprised at how much you can learn by looking at the pages and stylesheets at places like: http://www.oswd.org/

    Then looking over some videos at http://learnexpression.com/ (even if you don't use the product... a newbie will pick up something).

    One of the best things I learned with valid xhtml is that your site will work well with ie7, ie8, ff2, ff3, opera 8, and 9. At least my sites did...

    The other thing I learned was I no longer work in "design view" only "code view." At the end CSS was not all that fun to learn, but it is better (for me) than using tables.
    Windows 10 to Linux and Mac OSX: I'm PARSECs better than you. Eat my dust!!!

  29. #29
    Join Date
    Aug 2005
    Location
    Barcelona, Spain
    Posts
    3,375
    Quote Originally Posted by Rich2k View Post
    For backwards compatibility you need to add a space before the / e.g. <br /> not <br/>
    If i recall correctly, that was mainly for old Netscape browser compatibility. A browser that is no longer used or supported.
    hi there!

  30. #30
    Join Date
    Oct 2002
    Location
    Under Your Skin
    Posts
    5,875
    I forgot about this site as well... this helped me tremendously.

    http://xhtml.com/en/xhtml/reference/
    Windows 10 to Linux and Mac OSX: I'm PARSECs better than you. Eat my dust!!!

  31. #31
    Thanks really great tutorial helped me to get rid of tables.

  32. #32
    Join Date
    Apr 2008
    Posts
    36
    Thanks really great tutorial helped me to get rid of tables.
    I think now you satisfy by the tutorial.so now what u wnat to do first of all.
    Last edited by websushil; 04-02-2008 at 08:08 AM.

  33. #33
    Thanks for useful information to valid xhtml web page.

  34. #34
    Join Date
    Jun 2008
    Location
    NY
    Posts
    17
    There are some good sources out there, if interested:

    On XHTML - Refactoring HTML by Rusty Harold (recently published)

    for xml and the misunderstood xsl/xslt:

    http://www.cafeconleche.org (also Elliot Rusty Harold)

  35. #35
    Great job. Couldn't figure out why my coding wasn't validating but I forgot to close some of my tags.

    Thanks,

  36. #36
    Join Date
    Dec 2005
    Location
    England
    Posts
    10
    Some very useful information, thanks a lot.

    Death to tables!

  37. #37
    Join Date
    Jan 2007
    Posts
    75
    Hi,

    Yes..Now almost all prefer XHTML coded websites, so seems like the end of designs with tables :-)
    MindBees - We Keep You Smiling Always !!
    Custom Web Designs !! Web Development !! Wordpress/Joomla/Magento Development
    Web Hosting Design Portfolio added !


  38. #38
    Join Date
    Feb 2002
    Location
    New York, NY
    Posts
    4,612
    Quote Originally Posted by amygdela View Post
    If i recall correctly, that was mainly for old Netscape browser compatibility. A browser that is no longer used or supported.
    Maybe not widely used, but there are still some people using it. I used an old computer with Netscape 7.1 today to print something, so it's not dead yet.
    Scott Burns, President
    BQ Internet Corporation
    Remote Rsync and FTP backup solutions
    *** http://www.bqbackup.com/ ***

  39. #39
    Join Date
    May 2004
    Location
    Pflugerville, TX
    Posts
    11,222
    Quote Originally Posted by tuxpack View Post
    Hi,

    Yes..Now almost all prefer XHTML coded websites, so seems like the end of designs with tables :-)
    The two have nothing to do with each other. This is sort of like saying "people prefer pizza over hamburgers, so this is the end of milk."

    First of all, XHTML is actually an inappropriate coding platform for 99.999% of sites on the Web. When you create XHTML markup and serve it as HTML (which is what the vast majority of sites do), you're simply creating tag soup. The only reason you'd need to do this anymore is because Web application developers tend to make the same mistake, and if you want your markup to match theirs, you're forced to use XHTML even though it's not appropriate. You should be using HTML Strict markup. Luckily, browser manufacturers programmed their browsers to make sense out of the tag soup designers create when serving up XHTML as HTML, so there's no harm in your site's presentation.

    With that out of the way, tables are fully supported by HTML and XHTML, Transitional, Strict and (in the case of XHTML) 1.1. Tables serve a good purpose, to allow you to display data that have a tabular relationship with each other. You can misuse tables, and create an entirely "valid" site based on tables for layout. "Valid" does not equal "good," and validity in-and-of itself is a poor measurement of how well a site has been engineered. To put this into perspective, a car must have a bumper/fender at a certain height, able to sustain a certain impact, in order for your car to be street-legal. You can duct-tape a 2x4 board to the grill of your car and your car will be "valid," but it won't be "good."

    I would not praise the differences between HTML and XHTML. You're praising the wrong thing - indeed, it's a foolish distinction for most developers to care about. I would praise the difference between transitional and strict markup. That's where the big differences lie as far as Web developers are concerned.
    Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design

  40. #40
    Join Date
    Sep 2002
    Location
    Top Secret
    Posts
    11,516
    Quote Originally Posted by the_pm View Post
    The two have nothing to do with each other. This is sort of like saying "people prefer pizza over hamburgers, so this is the end of milk."
    Correct, tables are very, very well handled in XHTML. Of course, there are limitations, but that's going to happen anywhere.

    Quote Originally Posted by the_pm View Post
    First of all, XHTML is actually an inappropriate coding platform for 99.999% of sites on the Web.
    Not so. XHTML is merely an extension , or the next generation of HTML. In fact, it's an 'evolution' of html. Now, html isn't going to die (yet), but when it does, if you're XHTML compliant, you're going to actually be a lot better off than if you were just html compliant, which is extremely easy to obtain (even strict).


    Quote Originally Posted by the_pm View Post
    The only reason you'd need to do this anymore is because Web application developers tend to make the same mistake, and if you want your markup to match theirs, you're forced to use XHTML even though it's not appropriate.
    Again, not so. There are many reasons to actually use XHTML, including updated standards, stricter requirements, and a number of other things. XHTML is a much, much more strict standard to comply to than HTML itself.
    WHMCS Guru - WHMCS addons, management, support and more.
    WHMCS Notifications Extended - Add slack, hipchat, SMS, pushover to WHMCS !!
    Linux Problems? WHMCS Issues? +1-866-546-8914 (linux-14) or @whmcsguru on twitter!

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
  •