5 Steps for Moving to Strict HTML 4.01
Recently I’ve been brushing on web standards – those pesky guidelines that the W3C has come up with for clean HTML. Why, would I want to torture myself you ask? Well, I think that web standards, while not required, are a good practice.
In my mind, following web standards are the best way to future proof your web app and to ensure that it renders as correctly as possible across as many browsers as possible.
Also, I agree with Jeff Attwood that while HTML Validation against web standards may not matter that much in the big scheme of things, just knowing the rules makes you a better developer. Lastly, I think he’s correct that striving for Strict HTML 4.01 is the sanest start with (as opposed to Strict XHTML).
So let’s dig into the rules of what it takes to achieve Strict HTML 4.01.
1. Start with a Visit to the DOCTYPE
Every HTML page you write should start with a DOCTYPE. It tells the browser what kind of document to expect and determines which rules it uses to render a document. For HTML strict, you’ll want to put this at the very top of your page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
2. Every Page Needs a Head and Body
Next we get to the basic stuff that I’m sure you’re already doing, but let’s just review them here for completeness.
After the DOCTYPE, you’ll need to include an <html> tag. Inside the <html> tag, you’ll need to have a <head> and <body>. Inside the <head> you’ll need a <title>.
That wasn’t so bad, was it? Now onto the hard stuff…
3. Keep Your Blocks and Inlines Straight
Before we get into this, let’s talk about what a Block element is and what an Inline element is. The short answer is that Block elements will begin a new line whereas inline elements will not.
For example, this paragraph is surrounded a by <p> tag which is a block-level element and therefore your browser rendered it as a separate paragraph. On the other hand, this piece of text is surrounded by a <b> tag which causes it to render inline.
Below are some examples of each.
- Block-level elements: <div>, <h1>…<h6>, <p>, <ul>, <ol>, <li>, <table>, <tr>, <th>, <td>, <blockquote>
- Inline elements: <span>, <a>, <em>, <strong>
Now that you know the difference, let’s talk about the rules: You can only have block elements directly under you <body> tag, and no block elements can be included in inline elements.
Make sense? Good. Because now we’re moving onto the “special” cases.
4. Some Tags are “Special”
Now that you know the rules, let’s talk about the tags that were born to break them!
The <li> tag will let you put whatever you want inside (block, inline or text) and it will still validate while the <blockquote> tag requires another block element before entering any text.
Why is this? I’m not exactly sure, but I trust that the all-wise W3C has their reasons…
5. When in Doubt, Validate!
If you have any question about whether your HTML page is truly fitting the HTML 4.01 Strict standard, you can always validate it with the W3C. Just enter your site’s URL or HTML and the validator will gladly tell you what you did wrong.
Or if you are really lucky, he’ll say that everything is correct and give you this pretty badge to put on your site:
I’m still working on getting one for my sites…
-
http://www.bryanthankins.com/techblog/2010/01/06/10-steps-for-moving-from-html-to-xhtml/ 10 Steps for Moving from HTML to XHTML | Bryant Rethinks Software
