Emacs HTML Tips

By Xah Lee. Date: . Last updated: .

This page is a tutorial on working with HTML.

Which HTML Mode To Use?

Pure HTML4 Source File

Alt+x 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. (no embedded JavaScript or CSS etc.) It supports only HTML4 tags or before. (that's HTML in the 2000s and before) Its parent mode is sgml-mode.

html-mode and sgml-mode both are writen by SGML/XML expert James Clark, in 1990s.

Pure HTML5

If you work with pure HTML5 code (no embedded JavaScript, CSS), try

Emacs: Xah HTML Mode

This is what i use to write blogs and my websites.

XML and XHTML

Alt+x 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 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.

Mixed XHTML/XML/CSS/JavaScript/PHP

For HTML mixed with {CSS, JavaScript, PHP, ASP, JSP}, you have the following choices:

About This Tutorial

The following tips is about using html-mode. 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?

Alt+x sgml-delete-tagCtrl+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?

Alt+x sgml-skip-tag-forwardCtrl+c Ctrl+f】.

Alt+x sgml-skip-tag-backwardCtrl+c Ctrl+b】.

See also: Emacs: Move Cursor to Bracket/Quote.

Others

How to replace & to &?

Elisp: Command to Replace HTML Entities with Unicode Characters

How to preview in a browser?

Alt+x browse-url-of-bufferCtrl+c Ctrl+v】.

Alt+x sgml-tags-invisibleCtrl+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

emacs hexcode highlight 32718

See: Emacs: Working with CSS Color Values.

More Tips

How to view the image in a image tag?

Suppose this is your text:

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

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?

emacs tumme
emacs image-dired, showing image thumbnails.

See: Emacs: Show Image Thumbnails

How to open the current directory in OS's desktop?

See: Emacs: Open File in External App.

If you have a question, put $5 at patreon and message me.
Or Buy Xah Emacs Tutorial
Or buy JavaScript in Depth

Emacs Tutorial

Emacs Init

Emacs Keys

ELisp

ELisp Examples

ELisp Write Major Mode


Emacs Tutorial

Quick Start

Manage Windows

File

Buffer

Find Replace

Copy/Paste

Unicode

Whitespace

Rectangle Edit

Line Wrap

Shell

View Doc

Working with Brackets

Power Editing

Org Mode

HTML

Emacs Efficiency

Misc