Emacs and HTML Tips

On the website xahlee.org, over 3000 HTML pages are manually created with emacs over a decade since 1998. This page provides some tips about using Emacs to create and edit HTML documents.

Which Mode To Use?

HTML

When you open a file ending in “html”, it'll automatically open in html-mode. This is a basic HTML mode. It is writen by SGML/XML expert James Clark.

XHTML

If your code is valid XML, you should use nxml-mode. “nxml-mode” is a mode for editing XML documents, also written by SGML/XML expert James Clark, and has the feature of real-time XML validation. You should use nxml mode for all your XML needs.

nxml-mode comes with emacs 23.1.1, but is not the default mode loaded when you open a file ending in “.xml”. (This is fixed in 23.2.x) To load “nxml-mode”, just type 【Alt+x nxml-mode】. To set emacs to always use nxml when files ending in “.xml” is opened, see: Emacs: How to Associate a File with a Major Mode?, or simply set a alias like this: (defalias 'xml-mode 'nxml-mode). (➲ Emacs: Defining Alias to Increase Productivity)

If your XHTML code has lots of CSS, JavaScript, PHP, ASP, JSP codes mixed, and is not likely valid XML, you should try “html-helper-mode” or nXhtml mode. (html-helper-mode tries to be practical for all HTML/XHTML files. nXhtml mode is based on nxml mode, but as of mid 2009, i did not find this package very robust.)

About This Tutorial

The following tips is about using html-mode. However, this page also gives you several custom commands written in elisp. These elisp commands can be useful regardless which HTML/XML mode you use.

Inserting HTML Tags with Emacs

Deleting Tags and Move By Tags

Type 【Ctrl+c Ctrl+f】 (sgml-skip-tag-forward) and【Ctrl+c Ctrl+b】 (sgml-skip-tag-backward).

You can assign a easier shortcut of 【Alt+→】 and 【Alt+←】. Use the following code:

(add-hook 'html-mode-hook
 (lambda ()
 (define-key html-mode-map (kbd "<M-left>") 'sgml-skip-tag-backward)
 (define-key html-mode-map (kbd "<M-right>") 'sgml-skip-tag-forward)
 )
)

It's very convenient to be able to move to the boundary of < and >. Here's the code: Emacs: Commands and Keys to Navigate Brackets.

Others

Place the following in your emacs init file:

(defun replace-html-chars-region (start end)
  "Replace “<” to “&lt;” and other chars in HTML.
This works on the current region."
  (interactive "r")
  (save-restriction 
    (narrow-to-region start end)
    (goto-char (point-min))
    (while (search-forward "&" nil t) (replace-match "&amp;" nil t))
    (goto-char (point-min))
    (while (search-forward "<" nil t) (replace-match "&lt;" nil t))
    (goto-char (point-min))
    (while (search-forward ">" nil t) (replace-match "&gt;" nil t))
    )
  )

With the above code, you can select a region, then call “replace-html-chars-region”, and have all & < > replaced by their encoded entity. You can define a keyboard shortcut for easy operation.

You can also use the code to replace some HTML entities by their actual Unicode characters. For example:

text to replace	result
“	“
”	”
é	é
©	©
->	→
=>	⇒
Pi	π
Infinity	∞

This makes the HTML source code more elegant and readable. You need to declare your charset as one of Unicode encodings. See Character Sets and Encoding in HTML.

For more detail about the extremely useful find ＆ replace in emacs, see: Emacs Lisp Multi-Pair Find ＆ Replace Applications.

Working with Color Values

More Esoteric Tips

Suppose this is your text:

<img src="img/emacs_logo.png">

Move your curser on the file path, then call ffap. (ffap is a alias to the command find-file-at-point) You can also create a shortcut such as F8 key for this.