Emacs: Insert HTML Tag

How to insert a tag?

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

For a complete list of shortcuts, Alt+x describe-mode 【Ctrl+h m】.

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>."
 (interactive)
 (insert "<p>\n</p>")
 (backward-char 5)
)

now, set a key:

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

Select the above code, then Alt+x 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:

• Emacs: Abbrev Mode Tutorial
• Emacs: Using Templates with YASnippet

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)
        (progn
          (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.

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/
becomes
<a href=\"http://en.wikipedia.org/\">http://wikipedia.org/</a>"
  (interactive)
  (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 Elisp: 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\">”."
  (interactive)
  (let
    (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 "\">"))
    (save-excursion
      (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)
    (clear-image-cache)
    (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?

See Emacs: Lines to HTML Table