Nov. 1, 2006 at 9:16am

Bulletproof HTML Critique

I ran across a neat article from Sitepoint via Stylegala that you all should read on how to make your HTML 'perfect'. In the world of design, the concept of perfect is non-existant. There is no solution that will work for solving every problem, and there are exceptions to every rule. This article is no different. Read the full article, and then check out my comments.

FAQ #1-#7

I can't really say anything about these, because they are factual definitions.

#8

Yes, HTML 4.01 Strict is a good choice, but XHTML 1.0 Strict, or even better, XHTML 1.1, is preferable. If you need to use deprecated tags or attributes, you really should use HTML 4.01 Transitional. We use XHTML 1.1, for a number of reasons, but we do use some prohibited attrributes (title on tags other than abbr and acronym, target) and syntax (our rich text editor in the cms mucks up the code). We do this because we know the strengths and weaknesses of each decision we make, and we don't make them lightly.

#9

It's good to make sure your markup validates, but I know that this article won't and I know why. Some errors can be tolerated (like the ending '/' on image tags.), and some can't - a misplaced </table> destroys your layout.

#10

Too many times I've seen sites where the HTML was terrible, but it rendered properly. Most designers want to make their sites look right, but it's the attention to detail that separates the good from the great.

#11-#14

Again with factual definitions. I also got bored halfway through #12 - Charset.

#15

Be careful with using character entities outsite your charset, because The entire range from  through Ÿ are invalid characters. I bet you didn't know that, did you? It's ok, I didn't either until I read this article on A List Apart.

#16-#18

Not a whole lot I can say about these, but there are some details to pay attention to, like using h# tags in sequential order.

#19

You can make block level elements look like inline elements, or inline elements look like they are block

and I am a span displayed block.

The article states this, but I wanted to make a little clearer.

#20 & #21

If you didn't know this already, please make sure to read it again.

#22

This item should have been much earlier in the article, at least #8. They've been using semantic for awhile, but they just get around to defining it  now?

#23

Again, make sure you are using the tags as they were meant to be used. If something needs to be italic, use <i>, if it needs emphasis, use <em>.

#24

This deserves to be said again: table layouts are bad, for all the reasons in the article.

#25

<div> is not the new <table>, and documents should not have <div> soup. The div element is a generic block-level tag. It is best used to store other elements in meaningfully connected ways. For example, <div id="header"> is common here, but having six div's within that for each the page title, navigation, login information, and to separate those items is bad. Be like us, resist the urge to replace <table> with <div>

#26

Just remember to use <table> for the right reason.

#27-#31

This is all very useful information, much of which I didn't know. Make sure you get it all.

#32

I would much rather use target="_blank" than Javascript to open new windows, especially because all browsers support the target attribute, and most don't let javascript open new windows with user intervention anymore. In this case, the ideal solution is broken because of the era of the pop-up.

#33

Actually, the alt attribute should be omitted, but only rarely. At SiteCrafting, we use image icons to add meaning to links, for example, a plus sign on links to add new enteries to a database. If I added an alt attribute to that image, and it didn't display, my link would look like [Add] Add Item rather than Add Item.

#34

You can have many elements of a given class, but only one element (on a page) with a given id. This does make you wonder why getElementsByClassName isn't in the Javascript core.

#35 & #36

Essential, but I can't add anything to these.

#37

This reminds me of the era of frames. Frames were bad, and undead frames like object include and iframes should not be allowed to work. But we had to use iframes a couple of times, because there was no other option to make the system work.

Here's the bottom line: Learn the rules of HTML, and this article is a good place to start. Then when you have learned the rules, you can bend them, or even break them, as long as you know why you are doing it.

Posted in Critiques, CSS, Design, Javascript, XHTML by Dave Poole

Comments (3)

---

---

Remember me

Name: Email: URL: Comment: *   No HTML, http:// will auto-link
* required    Comment Guidelines

SiteCrafting reserves the right to delete any comments that violate the following guidelines...

Comments should:
Stay on topic--or at least close.
Be brief and to the point.
Be cordial and professional. (Flaming will not be tolerated.)

Comments should NOT:
Endorse or promote any person, product, or company.
Disparage or defame any person, product, or company.

Please note:
Dissenting views are encouraged. Insulting language is not.
All comments with embedded URLs will be reviewed before posting.
These guidelines are subject to review and change at any time without notice.