Totally Compliant Markup
Inspired by a friend:
xhtml at its finest
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>unobtrusive css</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type='text/css'>
.table { display:table; }
.tr { display:table-row; }
.td { display:table-cell; }
.blue { color:blue; }
.bold { font-weight:bold; }
.verdana { font-family:verdana; }
.hand { cursor:pointer; }
</style>
</head>
<body>
<div class='table'>
<div class='tr'>
<div class='td'>
<span class='verdana bold'>My First Tableless Website!</span>
</div>
<div class='td'>
<span class='verdana'>To See More Information on how to
make your first website...</span>
</div>
<div class='td'>
<span class='verdana blue hand'
onclick="window.open('http://www.example.com');">
click here
</span>
</div>
</div>
</div>
</body>
</html>Any questions?
January 25th, 2006 at 12:31 am
<div class=’tr> I believe you’re missing an apostrophe. :D
I’m dying to know…. why?
January 25th, 2006 at 12:36 am
Haha, I was going to mention the same thing - just a typo.
Why would you want to do this though?
January 25th, 2006 at 1:02 am
Natalie, I think he’s trying to comment about how perfectly compliant validation means nothing if the tags and structure of the website are being abused, completely unsemantic, and reverting to the sins of our table-layout-loving peers. Or something. :-)
January 25th, 2006 at 1:05 am
Yeah, I think the jist of it is: You gotta walk the walk, not just talk the talk. I actually saw a local company pushing a packaged product called “Web Standards,” which has nothing to do with web standards, and is completely invalid code. It’s more than a buzz-word, and just passing the W3C validator doesn’t mean we’re adhering to best practices.
January 25th, 2006 at 1:42 am
I have only one thing to say:
LOL!!!
Sorry…
Had to do it.
I think the <div class=’tr> is just a typo.
Am I right?
January 25th, 2006 at 1:58 am
yuk!
January 25th, 2006 at 2:21 am
Two questions:
1-) Why use ‘blue’, ‘verdana’, ‘bold’, ‘hand’ for classes names?.
These are presentational names. Use class with semantics in mind.
2-) Why ‘click here’ for the link text?
January 25th, 2006 at 3:13 am
I believe you need a type-attribute on the style-element. Otherwise perfectly compliant xhtml =) And this is actually a pretty good-looking example compared to how nasty “standars-compliant” markup many people actually write. :P
January 25th, 2006 at 3:56 am
Works fine in Firefox - but the values ‘table’, ‘table-row’ and ‘table-cell’ are CSS 2 - so it won’t work in IE. That basically kills the idea.
PS : I think that the missing ‘ was a typo.
January 25th, 2006 at 5:36 am
I think you’re all reading a bit too much into this. It’s just a joke inspired by a hack that his friend was trying out.
As noted, IE didn’t like it /insert shocked smiley here/ so he didn’t use it.
January 25th, 2006 at 6:30 am
* Stylesheets embedded in the page?
* Using css to recreate tables?
* Using css to recreate a link?
* Using css to recreate a <strong> tag?
* Using css to recreate a <font> tag?
* No type or media attributes on the style block?
* Nested divs to recreate the exact structure and bloated code of a table?
* Single quotes instead of double quotes for class attributes?
* Missing closing quote on one of the tags?
* Using js to make a span tag into a link?
Looks good to me. You left out one thing though. Just below the body tag, you need to add the following:
<div class='h1 bold fuscia blink>Welcome to MySpace!</div>Then, in the css, please add the following.
.h1 { font-size:100px; }
.fuschia { color: fuschia; }
.blink { text-decoration: blink; }
Thanks!
January 25th, 2006 at 6:32 am
Not allowed to use lists in the comments, eh?
January 25th, 2006 at 8:03 am
@Lea… thanks- I got that much. I was wondering why someone would do that? It seems like a lot more work to recreate the old wheel with CSS than to just keep things simple without all that mess.
Fun example, Dustin… more people should see how silly it looks.
January 25th, 2006 at 9:14 am
Sadly, I’m pretty sure I’ve seen worse…
January 25th, 2006 at 10:06 am
I’m trying to figure out where this idea came from, but I think I already know…
I like the class=”verdana blue hand” the best, that looks like my first attempts at CSS layouts ;)
January 25th, 2006 at 10:20 am
Oh My! And I tried ever so carefully to get it right the first time. Good catch Natalie. And yes to all, it was a typo. I’ve corrected my mistake on the ‘tr’. Now my code is flawless!
January 25th, 2006 at 10:59 am
Out of order:
@Michael: Thanks for another small catch. You’re right. I added the type=”text/css” attribute on the style element.
@Mauricio: Read the comments. I think you’ll find that there’s several other things “not so great” about this markup.
@Lea: Zactly.
@Natalie: This does look funny doesn’t it. It’s a bit extreme, but I’m sure we’ve all seen close.
@Justin: This idea just came from me and a coworker just sitting around in the hallways. We couldn’t stop laughing. It was a perfect idea. I’m glad you liked the ‘verdana blue hand’ bit. I put a lot of thought into that one.
@Jason: Sorry. No lists. I’m getting frustrated with the way WP munches my comments. I need to do some hacking in the near future. I fixed it up in the meantime to be separate paragraphs.
@All: None of this code was actually tested to see if it actually ‘does something’ - the point of the exercise was just to poke fun on a buzzword “tableless compliant markup”
January 25th, 2006 at 11:08 am
Dude, that ain’t no buzzword in 2006. Even AJAX is sooooo last year.
January 25th, 2006 at 11:35 am
Dustin,
That was hillarious, I too couldn’t help but laugh. Thanks!
January 25th, 2006 at 12:57 pm
nice!
January 26th, 2006 at 7:35 am
ha! Sarcasm can come through on the interweb ;)
March 20th, 2006 at 7:24 am
[...] 456bereastreetì— “Validity does not equal best practices“ë¼ëŠ” 재밌는 ê¸€ì´ ë“±ë¡ë다. Dustin Diazì˜ ê¸€ì— ëŒ€í•œ ìžì‹ ì˜ ì˜ê²¬ì„ ë‹´ì€ ê¸€ì¸ë°, 비슷한 ê³ ë¯¼ì„ í–ˆì—ˆë˜ ë‚˜ì—게 ë§Žì€ ê³µê°ì„ 준다. [...]
March 20th, 2006 at 7:38 am
Now that’s a kick in the crotch! *ouch* :D
March 20th, 2006 at 7:45 am
I think the inline JS is a bit weird… You might as well use inline CSS as well, since that is also XHTML compliant. You should rather have made an unobtrusive approach to the JS as well.
Other than that, good job. Mind if I get inspired to my next project? ;-)
March 20th, 2006 at 9:45 am
[...] WHAT THE HELL!! (via Dustin Diaz) [...]
March 20th, 2006 at 10:46 am
Hahahahahahahaha… must bookmark to use as example of what not to do.
March 20th, 2006 at 11:38 am
Hahahhaa, priceless. I can’t stop laughing.
March 20th, 2006 at 2:56 pm
OH DEAR GOD, THE NAUSTALGIA!!!
March 20th, 2006 at 4:50 pm
[...] Totally Complaint Markup — Best practices, anyone? Any one?! [...]
March 20th, 2006 at 7:59 pm
just a note on this, but can you actually use .tr and .td even though they are html elements names?
It would be bad practice anyway right because it could confused with tr, td.
I’m not having a go at the code cause I can see it was a joke just curious.
Thanks,
March 20th, 2006 at 11:26 pm
Not a big fan of using class attribute myself, prefer to use inheritance in CSS and only use class if absolutely necessary. Also I’m very confused why you’d use class names like “tableâ€, “trâ€, “tdâ€, “verdana†etc? OR is it meant to be a sarcastic joke?
March 20th, 2006 at 11:27 pm
LOL oh ok, I didnt notice the ‘Humor’ tag at the top
:$
March 22nd, 2006 at 5:38 am
I think site would validate much better as XHTML 1.1 ;-)
March 22nd, 2006 at 11:01 am
lol.. This is so funny :)
March 22nd, 2006 at 5:28 pm
[...] Totally Compliant Markup (Funny) (tags: css html funny) [...]
March 23rd, 2006 at 9:49 pm
[...] There have been some nice examples lately about how not to mark up documents. Even though they’re totally valid, it’s against all good semantic design practices to use CSS in such a way. [...]
April 3rd, 2006 at 7:50 am
Too bad the good ‘ol marquee and blink tags would break it;) Some giant animated gifs would help too.
April 5th, 2006 at 9:52 pm
[...] Totally Compliant Markup that isn’t that hot is actually quite common - but are we suggesting non-compliant markup is the highway to best practice? No. Just that validation is only the starting point and not the end. (via Roger) [...]
April 28th, 2006 at 10:29 pm
[...] Totally Compliant Markup [...]
April 29th, 2006 at 3:14 pm
[...] Zum Abschluss noch ein Link zum Schmunzeln (für die, die's verstehen ) Published in: [...]
August 18th, 2006 at 7:42 am
You are totally right!!!
Indeed, a valid code itself does not mean automaticaly a semantic and structural code as well.
Marianito :(
November 3rd, 2006 at 11:59 pm
[...] 456bereastreetì— “Validity does not equal best practices“ë¼ëŠ” 재밌는 ê¸€ì´ ë“±ë¡ë다. Dustin Diazì˜ ê¸€ì— ëŒ€í•œ ìžì‹ ì˜ ì˜ê²¬ì„ ë‹´ì€ ê¸€ì¸ë°, 비슷한 ê³ ë¯¼ì„ í–ˆì—ˆë˜ ë‚˜ì—게 ë§Žì€ ê³µê°ì„ 준다. [...]
February 5th, 2007 at 5:04 pm
The idea was that validated code isn’t how we’d really do it, and most would prefer the easier route of just putting in “clumsy” code like
google rather then inserting spans and all that nonsense.May 19th, 2007 at 5:11 am
heh, lol :D
What I don’t get is why so many people wrote so serious comments :) are they kids? robots?…