Emacs: Xah HTML Mode Tutorial
This page is a tutorial on using Xah HTML Mode
once you have installed xah-html-mode, then open any file whose name ends in “.html”. In the mode line, you'll see “∑html”, that means you are in xah-html-mode.

View Manual
Alt+x
describe-function
,
then type
xah-html-mode
,
to see the documentation.

The mode is completely self-documented. You can just browse the doc string in emacs.
Find Key of a Command, or Command Name of a Key
we will only mention command name here. To find the key, see: Emacs Principles, Command and Keys.
Insert Tags
To insert a tag, press
Tab twice.
(xah-html-insert-tag
)
You can change the start key.

xah-html-insert-tag
is the general way to insert any html tag.
Here's specialized commands to create some commonly used tags:
xah-html-blocks-to-paragraph
- Turn blocks into paragraphs.
xah-html-insert-br-tag
-
insert a
br
tag.
Create List
xah-html-lines-to-list
- Turn lines to a unordered list. Press Ctrl+u first for ordered list.
xah-html-lines-to-def-list
- Turn lines to a definition list
Create Table
xah-html-lines-to-table
- Turn lines into a table.
Create Link
To create a link,
of url, image, pdf, etc,
first paste the url or file path, then
Alt+x xah-html-any-to-link
The command creates different links for different url/path. For example:
- If the the url is Wikipedia, it'll use just the article title for link text.
- If the path is YouTube url, it'll embed the video.
- If the path ends in jpg/png/svg, it'll become embedded image.
- If the path ends in css, it'll create stylesheet link.
- If the path ends in js, it'll create script link.
- If the path ends in audio/video extension, it'll create audio/video embed.
you can also call a specific command:
xah-html-audio-file-embed
xah-html-css-path-to-link
xah-html-emacs-ref-to-link
xah-html-image-path-to-figure-tag
xah-html-js-path-to-link
xah-html-local-file-to-link
xah-html-pdf-path-to-link
xah-html-url-to-dated-link
xah-html-video-file-embed
xah-html-wikipedia-url-to-link
xah-html-word-to-anchor-tag
xah-html-youtube-url-embed
Embed Image
To turn a image path into a embedded image with figure and caption,
Alt+x xah-html-any-to-link
Here's more specific commands:
xah-html-image-path-to-figure-tag
-
Turn path into
img
tag withfigure
andfigcaption
xah-html-image-to-img-tag
-
Turn path into
img
tag xah-html-image-to-link
-
Turn path into
a
link
Embed Programing Language Source Code
xah-html-insert-pre-tag
- Create a pre code with class name of a programing language.
xah-html-pre-code-to-new-file
- Move the source code to a temp file. So you can run it.
xah-html-toggle-syntax-color-tags
- add or remove span tags that colors the source code.
xah-html-dehtmlize-pre-code-buffer
- remove all span markup in buffer that colors the source code.
xah-html-redo-syntax-coloring-buffer
- Redo all pre source code blocks in buffer.
Tag Navigation
xah-html-goto-matching-tag
- press ↓ to repeat.
xah-html-prev-opening-tag
- press ← to repeat.
xah-html-next-opening-tag
- press → to repeat.
Select Element
xah-html-select-element
- Select the current element. Press - to repeat.
Remove Tags
xah-html-remove-tag-pair
- Delete the open and close tag pair. (before cursor) Press - to repeat. Useful info in tag's attribute, such as link url, image source path, are preserved in a markdown format. Not useful innerText such as JavaScript code in script tag, are removed with the tags.
xah-html-remove-list-tags
- Delete all list tags. (of current block.)
xah-html-remove-paragraph-tags
- Delete all p tags. (of current block.)
xah-html-remove-tags
- Delete all tags. (of current block.)
xah-html-html-to-text
- Delete tags but preserve info. (of current block.) For example, url in link remain, image path remain. This command basically convert html to plain text in best format as much as possible.
xah-html-join-tags
- Join two same elements together. Cursor must be in between the end tag and begin tag. Press - to repeat.
Open in a Browser
xah-html-open-in-browser
- Open buffer in default browser.
xah-html-open-in-chrome
- In Chrome. If cursor is on a url, open the url, else buffer.
xah-html-open-in-safari
- In Safari. If cursor is on a url, open the url, else buffer.
xah-html-open-in-firefox
- In Firefox. If cursor is on a url, open the url, else buffer.
xah-html-open-in-brave
- In Brave. If cursor is on a url, open the url, else buffer.
xah-html-open-in-vivaldi
- In Brave. If cursor is on a url, open the url, else buffer.
Abbreviation
Includes a abbrev system. You can define any tag or template.
Type htmlt
to insert a whole html template.
view the image in a image tag
Just move cursor to the file path, press Enter to open it.
History of Xah Html Mode
xah-html-mode began in 2013. And went thru a complete rewrite in 2021-08.