Emacs HTML Tips

On my website, 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-mode for Simple 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, in 1990s.

nxml-mode for Valid XHTML/XML

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, in 2000s. It has the feature of real-time XML validation.

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〕

html-helper-mode or nXhtml-mode for mixed XHTML/XML/CSS/JavaScript/PHP

If you work with mixed HTML, CSS, JavaScript, PHP, ASP, JSP codes, you have 2 options: “html-helper-mode” and “nXhtml mode”.

About This Tutorial

The following tips are 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

Put your cursor on or inside the tag, then press 【Ctrl+c Ctrl+d】 (sgml-delete-tag). This will delete both starting and ending tags. Very convenient. WARNING: if your HTML tags are not always matched, it might delete the wrong starting/ending tag.

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

it's very convenient to be able to move to the characters < and > regardless of tag structure. See: 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 key for it

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

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

See: Emacs Lisp: Command to Replace HTML Entities with Unicode Characters

You should declare your charset as utf-8. See Character Sets and Encoding in HTML.

Press 【Ctrl+c Ctrl+v】 (browse-url-of-buffer). You can also get a textual preview by pressing 【Ctrl+c Tab ↹】 (sgml-tags-invisible), which will hide all the tags. Press 【Ctrl+c Tab ↹】 again to show tags.

Compact CSS Source Code

Working with Color Values

More Tips

Suppose this is your text:

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

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