Thanks to Anne Van Kesteren for inspiring the HTML House of Horror. I’m not sure if he really meant to inspire it, but life is funny like that. So read on… if you dare!
Introduction
Several years ago, my roommate Sam was playing around with a language he called “HTML”. The great thing about HTML, I thought, was the power it gave you over the screen. Just reload the page and presto! Words, colors, images, fonts — you name it. It was sooo much cooler than the “real” languages I had struggled with in college. I didn’t know how to turn the screen red in C++, but darned if it weren’t easy in HTML.
I still remember downloading and embedding my first image in a page, a tacky little dancing Santa animated GIF. “Check this out!” I said. Sam seemed kind of impressed, but not sufficiently so. Hmmm, I thought. Okay then, let’s try this BACKGROUND
attribute…
Suddenly, the screen flooded with dancing Santas. That was the day I learned: with great power comes great responsibility.
The <blink> tag
Once upon a time, Netscape and Internet Explorer fought for the hearts and minds of HTML coders in what became known as the browser wars. Although the conflict ended long ago, the battlefield is still strewn with landmines, otherwise known as proprietary tags. The theory was that by adding whizzy new features available only in the Netscape (or IE) browser, developers would flock to that “platform”. Sadly, judging by the number of “best viewed in IE 4” messages that still litter the web today, the theory was pretty sound.
The Netscape-proprietary <blink>
tag… well, makes text blink. Microsoft never implemented this tag in Internet Explorer. One might attribute this decision to Microsoft’s sensibility and good taste, but given their response to the <blink>
tag, this explanation seems unlikely. Of the billions of pages on the public web today, there are only two sites in existence that make effective use of the <blink>
tag:
- The Problem With Music by Steve Albini
- The UNIX-Haters Handbook login screen
Other than that, it’s all crap.
Although the <blink>
never made it into the HTML standard, it still lives on to this day in Gecko-based browsers such as Netscape 7 and Mozilla. And although the tag itself is forbidden, have no fear! The CSS standard continues to provide the World Wide Web with critical blinking functionality, in the form of the CSS declaration text-decoration: blink
. Inquiring minds might wonder — what happens if you declare the following CSS rule?
blink {
text-decoration: none;
}
On Mozilla/Mac, the result is as you would expect. I haven’t tested this markup on other platforms, but my theoretical model predicts that your system will just, like, explode. Don’t say I didn’t warn you.
The <marquee> tag
The Microsoft-specific <marquee>
tag scrolls a selection of markup across the screen. Essentially, the <marquee>
tag creates a 100% wide div with text creeping across the screen from right to left, or left to right. There are a large number of attributes for the <marquee>
tag: you can change the width, the alignment, the scrolling speed, the scrolling delay, and even the scrolling direction (right to left or left to right).
And if that’s not enough shiny animated goodness for you, you can of course style the <marquee>
tag with CSS. For some reason IE5/Mac ignores the width
property, but you can still muck with the padding, font, and color to your heart’s content. Furthermore, IE4+ allows you to marquee-up arbitrary chunks of markup, not just text. If we need to have a table or bulleted list sliding across the screen, we can build it. We Have The Technology.
Note bene: nesting <marquee>
tags is not recommended.
A Most Horrifying Discovery
And now we come to the most horrifying discovery of all. Mozilla supports the <marquee>
tag. Let me repeat that — Mozilla supports the <marquee>
tag. In other words, the following markup is now possible:
<marquee>
<blink>Night Of The Living Dead</blink>
</marquee>
Back in 1997, the line of demarcation was clear: Netscape supported <blink>
, Internet Explorer supported <marquee>
, and that was the end of the story. But today in 2003, we have a browser that supports blinking marquee text. Yes, only in the fiendish laboratory that is the Gecko Rendering Engine is such a crime against humanity even possible.
There are those who believe that there are lines that should never be crossed. There are those who believe that there are Secrets Man Was Not Meant To Know.
And then there are those who forge boldly onward on paths where more timid souls dare not tread. In the interest of Science,[1] I have have painstakingly constructed the most horrifying web page ever written. Behold! The Page of the Damned![2] (view source) Those of you with a Gecko-based browser will see the Page of the Damned in all its glory; anyone using a lesser browser will be shielded from the horror. So if you do doubt your courage, or your resistance to video-induced epileptic seizures, come no further. Either way, may you forgive me for my crimes, and may the W3C have mercy on my soul.
Happy Halloween!
2. The Page of the Damned uses no JavaScript. It does use a smidge of CSS, but only because the <basefont>
tag doesn’t seem to work in Mozilla. Also, to my great disappointment, Mozilla doesn’t support the direction
attribute of the <marquee>
tag. So in theory the page could have been even more horrifying, but we make do with the tools we have.
Under the heading “A Most Horrifying Discovery”, you probably mean “Netscape supported , Internet Explorer supported “.
There is actually a reason that Mozilla supports marquee, but I’m not quite sure what that reason is. My recollection is that there were ‘some Chinese websites’ that didn’t work without marquee, hence support was added. Later David Baron backed out support, under considerable pressure from marquee haters, before declaring that the way that the support had been removed was basically a hack and he was restoring support (Thanks to google, I can provide you with original source material: http://groups.google.com/groups?selm=slrnarvtvi.k63.dbaron%40is02.fas.harvard.edu&oe=UTF-8&output=gplain ).
I know so many useless things…
Those spaces would be <blink> <marquee>. That’ll teach me not to preview…
If Evan is so nice, let him buy each person who comments a G5.
Soon both will be valid! And we can create the same ugliness, but still validate: http://www.w3.org/TR/css3-box/#marquee
(tip: use href=”view-source:filename”, works like a charm, instead of making a text file)
Jemal — No, no no! Darn, I hate it when my subliminal messages backfire.
James — Thanks for the history, very interesting! (And I’ve fixed the typo where I said <marquee> instead of <blink> Thanks.)
Anne — It’s encouraging to hear that we are continuing the fine tradition of “text-decoration: blink” in CSS3. As for href=”view-source: filename”, that’s a neat trick! But I still think the .txt file is needed, for those of us who lack Mozilla. The page looks pretty horrific in Internet Explorer too.
Argh! They are ELEMENTS. Tags are merely what you wrap the element contents in. Please see part five of:
http://www.flightlab.com/~joe/sgml/faq-not.txt
Jim, you are technically correct. The best kind of correct!
But seriously, I see your point, and I’ll try to be more consistent with my terminology in the future. Thanks for the reminder.
You are a bad man. I now have to uninstall Mozilla while chanting Tibetan excorsism rituals… *shudder*
You are a bad man. I now have to uninstall my Mozilla, while chanting Tibetan excorsism prayers… *shudder*
As I recall, the blink tag was originally an easter-egg in Netscape 1.0. I expect its developers were as horrified as anyone else to find that people actually wanted to _use_ it.
“Yes, only in the fiendish laboratory that is the Gecko Rendering Engine is such a crime against humanity [BLINK and MARQUEE support] even possible.”
Nope. Opera now supports both BLINK and MARQUEE too.
MikeyC – Oh, dear. Does Opera support the DIRECTION attribute of the MARQUEE tag? ‘Cause if so, we have a winner.
Charles – Even *more* interesting history! Very cool. This actually fits in quite well with our Halloween theme, since a standard convention in this genre is the well-meaning scientist who unwittingly unleashes a horror upon the world. (Also note that failure to anticipate consequences is no excuse; the scientist *always* gets killed or eaten before the end of the story.)
“Does Opera support the DIRECTION attribute of the MARQUEE tag?”
It does indeed. It handled all the tests presented here: http://www.scit.wlv.ac.uk/encyc/marquee.html
….this is EXTRA.
Trick or treat, you have NO choice.
AKAIK the view-source: trick works in Mozilla AND Internet Explorer. Unfortunately, it doesn’t work in Opera.
MikeyC: Apparently Mozilla 1.4 supports the DIRECTION attribute of MARQUEE as well, judging from that web site…
So currently, there is not code to make text blink in IE…is that correct??
Thanks an answer ASAP…I am trying to build something kinda quick here.
sd
That’s correct, as far as I know.
I just want to let you know that I am fully capable of viewing the page with my Mozilla Firefox 2.0.0.3 including direction, blinking, and everything.
Now, is there any way to make it STOP? I mean, I need to sleep one day.
Wow, nice! We must remember to congratulate the Mozilla team on their efforts.
As for making it stop, I regret to inform you that this is impossible. The HTML House of Horror will haunt you in your dreams. Forever. Sorry about that.
I’ve seen worse…
Well, with the rise of MySpace, the HTML House of Horror has a lot more competition these days.
There???s a bug filed regarding the ability to stop blinking text.
Bug 399622 ??? Stop blinking text by pressing escape: https://bugzilla.mozilla.org/show_bug.cgi?id=399622
Thanks, Wulf. Good to see the Mozilla Project is making every effort to stay on the cutting edge of BLINK technology…
That is the most horrific thing I’ve ever seen. I’d only ever heard of blink before, now I’ve been introduced to the dark side of html. Scary.
It is indeed a most disturbing site, but I just fear if MySpace ever discover the technology…
Don’t worry Paul, I believe there’s a provision in the [The Nunn-Lugar Cooperative Threat Reduction Program](http://lugar.senate.gov/nunnlugar/) to protect the world from such an occurrence.
Why is everyone so neg about the marquee tag?
I read it all the time but glad I found this page.
Good stuff.
Thanks Evan
http://www.flopsites.net
Why is everyone so neg about the marquee tag?
I read it all the time but glad I found this site.
Good stuff.
Thanks Evan
http://www.flopsites.net
hello
MY EYES MY EYES—
I know I’m late to the table, but this was the funniest thing I’ve read in a while, lol. well done. And that is still the ugliest web page ever written– I’m still waiting for the retina burn to wear off.
MY EYES MY EYES—
I know I’m late to the table, but this was the funniest thing I’ve read in a while, lol. well done. And that is still the ugliest web page ever written– I’m still waiting for the retina burn to wear off
Thanks! Every once in a blue moon, I check my referer logs for new references to this page, and see what people are saying about it. It always makes me smile. 🙂
This was an easter egg right?
If by “easter egg” you mean “cosmic horror unleashed on an unsuspecting humanity” then sure!
It looks like the Page of the Damned has been banished from the interwebs! 🙁
Oh noes! I accidentally nuked the Page of the Damned when I switched the HTML Tutorial over to WordPress.
Thank you for the alert, Blinking. The page has been restored.
Yesterday, I would have been impressed by your page of the damned.
Today, I saw http://belladesoto.us
Technology marches ever onward.
Warning !!! : do not click on the above link (http://belladesoto.us) . I bet you’ll give up Webcoding totally after seeing this :D…
I agree, do NOT go to (http://belladesoto.us)! It just crashed my browser!
Holy Shit! Not only did i foolishly visit this belladesoto.us site, but i dared look at its source code. I love the massive use of div font and bolded spaces!
This is the most hilarious example of bad HTML I’ve ever seen …
Thanks for the laugh
🙂
pi
Oww… I’ve only seen one worse page, because it also had frames and huge blinking marquees.
Thanks to everyone using canned templates, it’s getting harder to find worse pages these days. Props to whoever did worse! 😉
I was laughing reading your article, and I about busted a gut when I opened your page.. LOL! So funny – thank you!
Thanks, Jeff. I like the comment thread too. 🙂
Found this on WOT (of belladesoto.us):
(was ranked browser exploit)Not an exploit per se, but rather a 500 MB large, horrendously designed site which will bring many browsers to their knees.
#46 – i second that.
thanks 🙂
#undocumented feature?
…now i’m going all ‘ah pointy ponty’ till i go to sleep 😀