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.
Emacs: Xah HTML Mode
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 Default 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
Emacs: 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
Elisp: Command to Replace HTML Entities with Unicode Characters
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
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 Alt+x
find-file-at-point. You should give it a key such as F8. [see Emacs: How to Define Keys]
How to view image thumbnails in a directory?
See: Emacs: View Image Thumbnails
How to open the current directory in OS's desktop?
See: Emacs: Open File in External App.
- Emacs HTML Tips
- Insert HTML Tag
- Add Paragraph Tags
- Color CSS Color Values
- Convert Image Files in Dired
- URL to Link, Simple
- URL to Link, with Date
- Link to Dead Link
- Citation to Link
- Word to Wikipedia Link
- Wikipedia URL to Link
- Amazon URL to Link
- Google Map URL to Link 🌐
- Chinese Char to Ref Link
- Image Path to Link
- Extract URL
- URL Percent Decode/Encode
- Replace HTML Entities
- Lines to List
- Lines to Table
- Color Source Code
- CSS Compressor
- Markup Function Names
- Make Ruby Annotation
- Move Image File
- Xah HTML Mode