Indenting html + javascript/css
I've written web-mode.el (available on http://web-mode.org) because I had the same problems as you. This Emacs Major Mode for editing HTML templates (HTML with CSS/JS/PHP/JSP) is autonomous (no other major required) and syntax-highlights and indents according to the block's type.

OP Raving

With nothing more than

(require 'web-mode)


in your .emacs and storing web-mode.el in an accessible location (your home directory will do for a start), the code sample in the question will look like this out-of-the-box.



To get the right indentation



you'll need to use

;; First the (general) requisite initialization.
(package-initialize)

(require 'web-mode)

(eval-after-load "web-mode"
  '(progn 
     (add-to-list 'auto-mode-alist '("\\.css\\'" . web-mode))
     (add-to-list 'auto-mode-alist '("\\.html\\'" . web-mode))
     (add-to-list 'auto-mode-alist '("\\.js\\'" . web-mode))

     (setq web-mode-script-padding 2)
     (setq web-mode-style-padding 2)
     (setq web-mode-block-padding 2)
     ))