Emacs HTML Tips
This page is a tutorial on working with HTML.
Which HTML Mode To Use?
Pure HTML4 Source File
html-mode is the default html mode for emacs 25 (year ~2017) and before.
html-mode is a basic HTML mode.
It works with pure HTML4 code only.
It supports only HTML4 tags or before. (that's HTML in the 2000s and before)
Its parent mode is
both are writen by SGML/XML expert James Clark, in 1990s.
This is what i use to write blogs and my websites.
XML and XHTML
nxml-mode is a mode for editing valid XML documents, including xhtml.
nxml-mode is bundled with emacs 23.1.1,
[see Emacs 23.1 New Features (released 2009-07)]
nxml-mode is not the default mode loaded when you open a file ending in “.xml”. (This is fixed in 23.2.x)
To set emacs to always use nxml when files ending in “.xml” is opened, see:
Emacs: Set File to Open in a Major Mode
nxml-mode is written by SGML/XML expert James Clark, in 2000s. It has the feature of real-time XML validation.
- web-mode http://web-mode.org/ is new, becoming popular around 2012. You might try it. Install it from MELPA. [see Emacs: How to Install Packages Using ELPA, MELPA]
- html-helper-mode [http://www.emacswiki.org/cgi-bin/wiki/HtmlHelperMode ]
- nXhtml mode [http://www.emacswiki.org/emacs/NxhtmlMode ]. (nXhtml mode is based on nxml mode, but as of mid 2009, i did not find this package robust.)
About This Tutorial
The following tips is about using
because emacs 26's
mhtml-mode's parent is
html-mode, so all tips should still work.
This page also gives you several custom commands written in elisp. These elisp commands can be useful in any mode.
Insert HTML Tag
Delete HTML Tag
How to delete a tag?
sgml-delete-tag 【Ctrl+c Ctrl+d】. This will delete both start/end tags where the cursor is on.
WARNING: if your HTML tags do not always have ending tags, it might delete the wrong tag.
Jump to Tag
How to make the cursor jump to ending tag?
sgml-skip-tag-forward 【Ctrl+c Ctrl+f】.
sgml-skip-tag-backward 【Ctrl+c Ctrl+b】.
See also: Emacs: Move Cursor to Bracket/Quote.
How to replace
How to preview in a browser?
browse-url-of-buffer 【Ctrl+c Ctrl+v】.
sgml-tags-invisible 【Ctrl+c Tab】, which will hide all the tags. Call again to show tags.
Compact CSS Source Code
You can define a command to compact CSS code. See: Emacs: CSS Compressor.
Working with Color Values
How to view the image in a image tag?
Suppose this is your text:
Move your curser on the file path, then Alt+x
find-file-at-point. You should give it a key such as F8. [see Emacs: How to Define Keys]