XHTML and HTML: Quick Tutorial on Code Differences



  1. XHTML -always- requires a DOCTYPE. In HTML, it was highly suggested but not fully required. Not a big deal even if you're coding by hand, just bookmark this page and copy and paste from it.

    The Strict Definition requires all styling in CSS. Transitional recommends it. Personally I don't like anything Strict so I stick to transitional, and the rest of this page describes a bit of a mix, but the rule is, if it's Strict it has to be exact, so seriously, I'd suggest transitional.

    Okay, what's a DOCTYPE? A DOCTYPE tells the browser how to interpret code. Just as the English language is different in the United States than English in the United Kingdom, XHTML and the different flavors of HTML are slightly different. DOCTYPE tells the browser that it's going to be XHTML, so it can render it properly to the visitor.
  2. XHTML coding requires use of LOWERCASE (see the joke there...) for all attributes within a tag set. Whereas in older versions of HTML, <IMG SRC="me.jpg"> was acceptable, in XHTML you -must- write it as <img src="me.jpg" /> ... wait, on that note...
  3. What is up with the / in your <img /> ... well, yes, this is something interesting. In XHTML, all solo tags (ya know, the ones without the ending tag) like <img> <br> <link> <br> etc all become <img ... /> <br /> and <link /> <hr /> Examples:

    <img src="me.jpg" alt="Photo of Me" width="100" height="200" />
    <br />
    (That one was simple enough.)
    <link ... /> (used for style sheets, favorite icon, and more...)
  4. Attributes that hold data require quotation marks. In earlier versions of HTML, it was fine to write <img src="me.jpg" width=100 height=200>, not anymore, as explained above, in XHTML you would code that as:

    <img src="me.jpg" alt="Photo of Me" width="100" height="200" />

    Yes, remember the / before the > !!!
  5. Layout and style are HIGHLY SUGGESTED to be moved to CSS in the HEAD or to a separate CSS file. Oh, and remember the / in <link ... /> if you use an external style sheet.

    Hey, I love HTML tables for layout. We didn't have all sorts of cool CSS tricks when I started coding. And doing whatever you want with your own sites is cool with me, but if you're looking for a job in web design or charging a lot of money to someone, remove the layout tables, and use a clean CSS layout styling. This is very helpful if you're charging by the hour, because it takes a little longer to make things perfect (in my humble opinion). That said, with classed styles in CSS using a linked external style sheet, you can move around your entire layout from your main CSS file without even touches the other pages. That's pretty darn cool.
  6. Throw out a lot of older tags. <center> and <font> come to mind. Fonts, as you may have guessed, encourage in-code styling, which should be avoided. Better to stylize with the CSS. Then changing the styles for a page (in the case of an internal style sheet) or the entire site (in the case of an external) only take a few lines of CSS.

    Try to move the bold <b> </b>, italic <i> </i>, and underline <u> </u> styles to CSS.

    Okay, so how do I center stuff without <center> (sadly, some of you weren't born yet when <center> was deprecated, and that makes me feel really old. Thanks.)

    Some options, first, use CSS to align. That's the most brilliant one.

    Lazy and in a hurry? <div align="center"> </div> or <p align="center"> </p>

    And yeah, don't use random <p> for adding space between things, stick to the <br /> or better yet, use full styles of CSS to adjust margins and padding.

    Paragraphs are fine as long as they close: <p> </p>
  7. This is not directly related to XHTML, but feel free to use PNG as an image format, along with JPG for pictures and complex renderings, and GIF for line-art or simple graphics.

    Hosting trusted by over 7 million customers

Valid XHTML 1.0 Transitional Copyright © 2009 Dave Kristula. All rights reserved.

Host unlimited domains + get up to 5 FREE domains with your 1&1 hosting account. Must see monthly hosting specials! 1and1 Hosting