2013/02/11 HTML should be simple even with a javascript infection 
Having been there in the simple days when a web server was a couple of hundred lines of code, and when HTML was a simple markup language pretty much only giving you hyperlinks and a bit of bold, I have always found javascript at best an abomination and certainly to be avoided in any personal project.
My hatred mostly stems from just how unclean the page source became when using lots of fancy javascript and how javascript dependant everything became as a result. Turning javascript off just broke everything, basically meaning you had to have it enabled or not use the sites. This is just wrong.
Recently I have been helping a friend to build their own website, a website which for reasons I find hard to understand could not be simple, with just links and bold, but really had to have popups, fading things, slides which move, all those things you really can only do easily and well in javascript. Fooey.
Reluctantly embracing these goals I spent some time implementing various bits of javascript and ended up as predicted in some kind of maze of twisty passages all the same. I was fulfilling my own nightmare. Then something happened. I accidentally discovered jquery. Now jquery is no panacea at all, yes it does simplify the javascript you need to write so it is clearer and cleaner which is no bad thing. The real jolt was the methodology espoused by the community there. To write pages which work reasonably well with just HTML and CSS, and then during page load if and only if javascript is enabled rewrite the pages to add the necessary magic runes. Now you can have nice maintainable HTML source files and still have fancy effects when available.
I have used this to great effect to do "twistable" sections. When there is no javascript you get a plain document with all of the text displayed at page open. If it is available then little buttons are injected into the sections to allow sections to be opened and closed on demand and the body is hidden by default. All without any significant markup in the main HTML source, what little semantic markup there is has no effect:
<h2 class="twist-title">Section Title</h2>Now that is source you can be proud of. Yes there is some site-wide jquery instantiations required here which I will avoid including in its full glory as it is rather messy. But this example shows the concept:
<div class="twist-body">
Section Text
</div>
$(function() {Ok this is not so easy to understand, but the majority of the code, the HTML pages that the people who write the content have to look at is easy to understand. I think you only agree this is a win all round.
$(".twist-title").prepend("<span class="twist-plus">+</span>
<span class="twist-minus">-</span> ")
$(".twist-body").hide();
$(".twist-title").click(function (event) {
$(this).children('.twist-plus').toggle();
$(this).children('.twist-minus').toggle();
$(this).next().toggle();
})
$(".twist-title").css("cursor", "pointer");
});