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.
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.
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〕
web-mode.el is new, becoming popular around 2012. You might try it. Install it from MELPA. 〔☛ A Guide on Emacs 24 Package System〕
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.
See: Inserting HTML Tags with Emacs.
How to delete a tag?
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.
How to make the cursor jump to ending tag?
Type 【Ctrl+c Ctrl+f】 (
sgml-skip-tag-forward) and【Ctrl+c Ctrl+b】 (
it's very convenient to be able to move to the characters
> regardless of tag structure.
See: Emacs: Commands and Keys to Navigate Brackets.
How to replace “&” by “&” in a region?
Place the following in your emacs init file:
(defun replace-html-chars-region (start end) "Replace “<” to “<” 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 "&" nil t)) (goto-char (point-min)) (while (search-forward "<" nil t) (replace-match "<" nil t)) (goto-char (point-min)) (while (search-forward ">" nil t) (replace-match ">" 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|
You should declare your charset as utf-8. See Character Sets and Encoding in HTML.
How to preview in a browser?
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.
You can defined a command to compact CSS code. See: Emacs Lisp Multi-Pair Find/Replace Applications.
See: Emacs: Working with CSS Color Values.
How to view the image in a image tag?
Suppose this is your text:
Move your curser on the file path, then call
find-file-at-point) You can also
create a shortcut
such as F8 key for this.
How to get a overview of a image directory?
tumme. Emacs will create thumbnails on the fly. (You need ImageMagick installed for tumme to work.) Here's a screenshot:
How to open the current directory in operating system's desktop?Disqus