Introduction to Web Development #2 - the many flavors of HTML
I know, you thought that there was only plain HTML, like just plain Chinese. But, no, just as Chinese has a number of dialects, so does HTML.
Hold on to your hat and get ready to traverse the maze of HTML dialects, with a stop for fun along the way!
Not that you asked, but HTML is an acronym for HyperText Markup Language. Now, don't you feel informed? :)
In bygone days, when the web was first beginning, there were a number of different versions of its core language approved by the World Wide Web Consortium. Early HTML versions were easy to learn, but they also led to bad coding habits.
Unfortunately, the last real update to HTML 4 occured in 2001 and, because many of us learned to code in those days, we picked up some of those bad habits.
To avoid acquiring bad habits, DO NOT start learning HTML using the W3Schools tutorials, as they start you out with a few less-than-perfect examples.
One of those bad habits is using deprecated elements or HTML tags that are going away and will soon be obsolete. If they aren't going to work next year, then you probably shouldn't waste your time learning them.
Later in this lesson I'll show you where to find the best free tutorials for learning HTML - the correct way - so you won't have any bad habits to break. :)
Before we jump into exploring the maze of additional HTML versions, I want you to stop and do something extra fun.
After all, most of us who do web development for a living get joy out of it and ... sometimes ... even consider it entertainment.
A major reason we stay current and are good at our jobs is because we play. We try things out to see if and how they work. We keep on learning, even when we don't have to!
Your playtime "assignment"
Should you choose to accept it, your assignment is this: create a website of your very own at drupalgardens.com. It's free and, for geeks like me, a heck of a lot of fun!
Spend as much or as little time on this assignment as you'd like.
However, even piano virtuosos have to practice and train their muscles to work in good form. Think of XHTML as exercise for your mental coding muscles.
XHTML's main differences from HTML 4 are essentially just good coding practices:
- use lowercase letters for all elements (i.e. tags)
- every element must be closed, with a concluding slash (/)
- there must be one root element to rule, or rather, to include all the rest
- likewise, all elements have to be properly nested
- Do NOT code like this: <p><li></p></li>
- Good code looks like this: <p><li></li></p>
The most commonly-used version of XHTML (which you should focus on learning now) is XHTML 1.0, and there are two main formats you should be able to recognize:
- XHTML 1.0 Transitional allows the use of deprecated presentational elements from HTML 4.
- XHTML 1.0 Strict does not allow those deprecated elements to be used.
If you want to learn how to code HTML beautifully, follow HTML Dog's tutorials and learn XHTML Strict. For a quick overview of common elements (tags), there's also a great cheat sheet from AddedBytes.
HTML5: back to basics
As I write this, the newest version of HTML (HTML 5) is still not finished. HTML5 is a beautiful attempt to combine what was great about HTML 4 (easy to learn) with new elements that are becoming crucial (such as a video tag).
While it's too early to focus on learning HTML5, you can sneek a peak at some good articles covering it: