Inserting HTML Tags with Emacs

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

Tag	hotkey	command name
<h1>	【Ctrl+c 1】	html-headline-1
<h2>	【Ctrl+c 2】	html-headline-2
<p>	【Ctrl+c Enter ↵】	html-paragraph
<hr>	【Ctrl+c Ctrl+c -】	html-horizontal-rule
<ul>	【Ctrl+c Ctrl+c u】	html-unordered-list
<li>	【Ctrl+c Ctrl+c l】	html-list-item

For a complete list of shortcuts, pull the menu 〖HTML〗 or 〖SGML〗, or, type 【Alt+x html-mode】 then 【F1 m】 to see the list.

A much better way to insert tags is using YASnippet. With YASnippet, you can insert some 60 tags, by just typing the tag and press Tab ↹. You can also easily define new tag templates. See: Emacs Templates with YASnippet.

Press 【Ctrl+c /】. (sgml-close-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)
)

(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 is to use YASnippet. See: Emacs Templates with YASnippet ◇ How to Define Templates In YASnippet ◇ Zen-Coding.

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 hotkey for the command. See: Defining Your Own Keyboard Shortcuts.

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 thing 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>" )
    )
  )

(add-hook 'html-mode-hook
 (lambda ()
 (define-key html-mode-map (kbd "M-5") 'wrap-url)
 )
)

With this code, pressing 【Alt+5】 will automatically make the URL your cursor is on into a link. For a detailed explanation of the code and a more robust version, see Elisp Lesson: wrap-url.

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.

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:

a*b*c
1*2*3
this*and*that

with “*” as separator, becomes

<table class=\"nrm\">
<tr><td>a</td><td>b</td><td>c</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>this</td><td>and</td><td>that</td></tr>
</table>"
  (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.