XHTML and HTML: Quick Tutorial on Code Differences
- 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.
- 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...
- 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...)
- 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 > !!!
- 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.
- 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>
- 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.
- This should be enough to get you started. This is by no means fully inclusive, this is a quick
and dirty "What's the big differences?" mini-page. You can read the techno-lingo official
"What's the exact technical differences?" Here at W3C.
- Am I required to know XHTML? No. It's a recommendation ;) But surely be familiar HTML code and CSS code
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!