Emacs: Insert HTML Tag

By Xah Lee. Date: . Last updated: .

This page show you how to insert HTML tags.

Insert Html Tag

Alt+x html-mode, then:

Tagkeycommand name
<h1>Ctrl+c 1html-headline-1
<h2>Ctrl+c 2html-headline-2
<p>Ctrl+c Enterhtml-paragraph
<hr>Ctrl+c Ctrl+c -html-horizontal-rule
<ul>Ctrl+c Ctrl+c uhtml-unordered-list
<li>Ctrl+c Ctrl+c lhtml-list-item

For a complete list, Alt+x describe-modeCtrl+h m】.

Insert Closing Tag

Alt+x sgml-close-tagCtrl+c /

Insert Custom Tag

Put this in your emacs init file:

(defun insert-p-tag ()
  "Insert HTML markup <p></p>."
  (interactive)
  (insert "<p>\n</p>")
  (backward-char 5))

Select the above code, then Alt+x eval-region. Then, Alt+x insert-p-tag will insert your custom tag, and your cursor point will be placed in between the beginning and ending tags.

You should give it a key. [see Emacs: How to Define Keys]

You can edit above code so that it will insert any tag that you like.

If you have more than a few custom tags or templates, a better way to insert templates is abbrev mode.

[see Emacs: Abbrev Mode]

Wrap Tag Around the Word or Selection

Emacs: Wrap HTML Tags

Insert a Link

Alt+x html-href-anchorCtrl+c Ctrl+c h】 → Emacs will then ask you to type a URL, then insert it with the closing </a>, with your cursor placed before the ending tag so that you can type the link text.

Alternatively, see:

Emacs: URL to Link Command

Insert Img Tag

Alt+x html-imageCtrl+c Ctrl+c i】 then type the URL for the image.

Alternatively, see:

Emacs: HTML Image Path to Img Tag

Insert HTML Table

See Emacs: Lines to HTML Table

HTML Topic

  1. Emacs HTML Tips
  2. Insert HTML Tag
  3. URL to Link Command
  4. Lines to HTML Table
  5. Replace HTML Entities
  6. CSS Compressor
  7. Color CSS Color Values
  8. View Image Thumbnails
  9. HTML Image Path to Img Tag
  10. Convert Image Files in Dired
  11. Xah HTML Mode

If you have a question, put $5 at patreon and message me.
Or Buy Xah Emacs Tutorial
Or buy a nice keyboard: Best Keyboards for Emacs

Emacs

Emacs Lisp

Misc