Emacs: Insert HTML Tag

By Xah Lee. Date: . Last updated: .

This page tells you how to insert HTML tags using the html-mode. For other HTML tips, see: Emacs HTML Tips.

How to insert a tag?

Here's a list of tags you can insert and their keyboard shortcuts and command names.

Tagkeycommand name
<h1>Ctrl+c 1html-headline-1
<h2>Ctrl+c 2html-headline-2
<p>Ctrl+c Enter ↵html-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 of shortcuts, pull the menu 〖HTML〗 or 〖SGML〗, or call describe-modeCtrl+h m】 to see the list.

How to insert a closing tag?

Press 【Ctrl+c /】 (sgml-close-tag)

How to insert my custom tag?

Put the following code in your emacs init file.

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

now, set a key:

(global-set-key (kbd "<f8>") 'insert-p-tag)

Select the above code, then call eval-region. Then, pressing F8 will insert your custom tag, and your cursor point will be placed in between the beginning and ending tags.

You can change the string in the above code so that it will insert another tag that you use frequently, or even a text template, such as headers and footers.

If you have more than a few custom tags or templates, a better way to insert templates are:

How to wrap a tag around the current word or selection?

Put the following in your emacs init file.

(defun wrap-html-tag (tagName)
  "Add a tag to beginning and ending of current word or text selection."
  (interactive "sEnter tag name: ")
  (let (p1 p2 inputText)
    (if (use-region-p)
          (setq p1 (region-beginning) )
          (setq p2 (region-end) )
      (let ((bds (bounds-of-thing-at-point 'symbol)))
        (setq p1 (car bds) )
        (setq p2 (cdr bds) ) ) )

    (goto-char p2)
    (insert "</" tagName ">")
    (goto-char p1)
    (insert "<" tagName ">")

You can set a key for the command. See: Defining Your Own Keyboard Shortcuts.

Inserting Links, Images, HTML Table

How to insert a link?

Press 【Ctrl+c Ctrl+c h】 (html-href-anchor). 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, you can place the following lisp code in your emacs init file:

(defun wrap-url ()
  "Make the URL at cursor point into a HTML link.\n
Example: http://wikipedia.org/
<a href=\"http://en.wikipedia.org/\">http://wikipedia.org/</a>"
  (re-search-backward "[\n\t ()]" nil t)
  (looking-at "[\n\t ()]?\\([^\n\t ()]+\\)")
  (let (
        (p1 (match-beginning 1))
        (p2 (match-end 1))
        (url (match-string 1))
    (delete-region p1 p2)
    (goto-char p1)
    (insert "<a href=\"" url "\">" url "</a>" )

For a detailed explanation of the code and a more robust version, see Emacs Lisp: Writing a Wrap-URL Function.

How to insert a inline img tag?

Press 【Ctrl+c Ctrl+c i】 (html-image), then type the URL for the image. Alternatively, you can place the following code into your emacs init file.

(defun image-linkify ()
  "Replace a path to image file with a HTML img tag.
   Example, if cursor is on the word “emacs_logo.png”, then it will became
   “<img src=\"emacs_logo.png\" alt=\"emacs logo\" width=\"123\" height=\"456\">”."
    (img-file-path bounds img-dim width height altText myResult)
    (setq img-file-path (thing-at-point 'filename))
    (setq bounds (bounds-of-thing-at-point 'filename))
    (setq altText (file-name-nondirectory img-file-path))
    (setq altText (replace-regexp-in-string "\\.[A-Za-z]\\{3,4\\}$" "" altText t t))
    (setq altText (replace-regexp-in-string "_" " " altText t t))
    (setq img-dim (get-image-dimensions img-file-path))
    (setq width (number-to-string (car img-dim)))
    (setq height (number-to-string (car (last img-dim))))
    (setq myResult (concat "<img src=\"" img-file-path "\""
                           " "
                           "alt=\"" altText "\""
                           " "
                           "width=\"" width "\" "
                           "height=\"" height "\">"))
      (delete-region (car bounds) (cdr bounds))
      (insert myResult))

(defun get-image-dimensions (img-file-relative-path)
  "Returns a image file's width and height as a list."
  (let (tmp dimen)
    (setq tmp
          (create-image (concat default-directory img-file-relative-path)))
    (setq dimen (image-size tmp t))
    (list (car dimen) (cdr dimen))

(global-set-key (kbd "<f5>") 'image-linkify)

To insert a local inline image using this code, first type the relative path of the image. Then, pressing F5 will turn it into a inline image, with “alt” and “height” and “width” attributes.

For a detailed explanation of this code, see: Linkify A Image Path.

How to insert a HTML table?

The following code will turn the current text block into HTML table.

(defun make-html-table-string (textblock delim)
    "Transform the string TEXTBLOCK into a HTML marked up table.
    “\n” is used as delimiter of rows.
    The argument DELIM is a char used as the demiliter for columns.

    See the parent function `make-html-table'."
    (setq textblock (replace-regexp-in-string delim "</td><td>" textblock))
    (setq textblock (replace-regexp-in-string "\n" "</td></tr>\n<tr><td>" textblock))
    (setq textblock (substring textblock 0 -8)) ; delete the beginning “<tr><td>” in last line
    (concat "<table class=\"nrm\">\n<tr><td>" textblock "</table>")

(defun make-html-table (sep)
  "Transform the current paragraph into a HTML table.

The “current paragraph” is defined as having empty lines before and
after the block of text the curson is on.
SEP is a string used as a delimitor for columns.

For example:


with “*” as separator, becomes

<table class=\"nrm\">
  (interactive "sEnter string pattern for column separation:")
  (let (bds p1 p2 myStr)
    (setq bds (bounds-of-thing-at-point 'paragraph))
    (setq p1 (+ (car bds) 1))
    (setq p2 (cdr bds))
    (setq myStr (buffer-substring-no-properties p1 p2))
    (delete-region p1 p2)
    (insert (make-html-table-string myStr sep) "\n")

For detail on how this code works, see Emacs Lisp: How to Write a make-html-table Command.

The above is a simple method. Once you have created a HTML table, you can not easily add or delete columns. There is a method, that allows you to create table and edit it like a GUI application, including merging cells vertically or horizontally. It takes about 10 minutes to learn how to use it though. The commands are table-capture and table-generate-source (new in emacs 22). For a detailed tutorial, see: Working with Tables In Emacs.

Back to Emacs HTML Tips.

Like it? Buy Xah Emacs Tutorial. Thanks.

or, buy something from Best Keyboard for Emacs