Function: html-mode

html-mode is an autoloaded, interactive and byte-compiled function defined in sgml-mode.el.gz.

Signature

(html-mode)

Documentation

Major mode based on SGML mode for editing HTML documents.

This allows inserting skeleton constructs used in hypertext documents with completion. See below for an introduction to HTML. Use M-x browse-url-of-buffer (browse-url-of-buffer) to see how this comes out. See also sgml-mode on which this is based.

Do C-h v (describe-variable) html- SPC and C-h v (describe-variable) sgml- SPC to see available variables.

To write fairly well formatted pages you only need to know few things. Most browsers have a function to read the source code of the page being seen, so you can imitate various tricks. Here's a very short HTML primer which you can also view with a browser to see what happens:

<title>A Title Describing Contents</title> should be on every page. Pages can
have <h1>Very Major Headlines</h1> through <h6>Very Minor Headlines</h6>
<hr> Parts can be separated with horizontal rules.

<p>Paragraphs only need an opening tag. Line breaks and multiple
spaces are ignored unless the text is <pre>preformatted.</pre> Text can be marked as <strong>bold</strong>, <em>italic</em> or
<u>underlined</u> using the facemenu M-o or Edit/Text
Properties/Face commands.

Pages can have <a name="SOMENAME">named points</a> and can link other points to them with <a href="#SOMENAME">see also somename</a>. In the same way <a href="URL">see also URL</a> where URL is a filename relative to current directory, or absolute as in https://www.cs.indiana.edu/elisp/w3/docs.html.

Images in many formats can be inlined with <img src="URL">.

If you mainly create your own documents, sgml-specials might be interesting. But note that some HTML 2 browsers can't handle &apos;. To work around that, do:
   (eval-after-load "sgml-mode" '(aset sgml-char-names ?' nil))

/ sgml-slash
C-c / sgml-close-tag
C-c 1 html-headline-1
C-c 2 html-headline-2
C-c 3 html-headline-3
C-c 4 html-headline-4
C-c 5 html-headline-5
C-c 6 html-headline-6
C-c 8 sgml-name-8bit-mode(var)/sgml-name-8bit-mode(fun)
C-c <left> sgml-skip-tag-backward
C-c <right> sgml-skip-tag-forward
C-c ? sgml-tag-help(var)/sgml-tag-help(fun)
C-c C-a sgml-attributes
C-c C-b sgml-skip-tag-backward
C-c C-c # html-id-anchor
C-c C-c - html-horizontal-rule
C-c C-c c html-checkboxes
C-c C-c f html-href-anchor-file
C-c C-c h html-href-anchor
C-c C-c i html-image
C-c C-c l html-list-item
C-c C-c n html-name-anchor
C-c C-c o html-ordered-list
C-c C-c r html-radio-buttons
C-c C-c u html-unordered-list
C-c C-d sgml-delete-tag
C-c C-e sgml-close-tag
C-c C-f sgml-skip-tag-forward
C-c C-j html-line
C-c C-n sgml-name-char
C-c C-o sgml-tag
C-c C-s html-autoview-mode(var)/html-autoview-mode(fun)
C-c C-t sgml-tag
C-c C-v browse-url-of-buffer
C-c C-v sgml-validate
C-c DEL sgml-delete-tag
C-c RET html-paragraph
C-c TAB sgml-tags-invisible(var)/sgml-tags-invisible(fun)
C-c ] sgml-close-tag
M-o M-o font-lock-fontify-block
M-o b facemenu-set-bold
M-o d facemenu-set-default
M-o i facemenu-set-italic
M-o l facemenu-set-bold-italic
M-o m enriched-toggle-markup
M-o o facemenu-set-face
M-o u facemenu-set-underline
Ā..\x3FFFFF sgml-maybe-name-self

In addition to any hooks its parent mode might have run, this mode runs the hook html-mode-hook, as the final or penultimate step during initialization.

View in manual

Probably introduced at or before Emacs version 19.31.

Key Bindings

Source Code

;; Defined in /usr/src/emacs/lisp/textmodes/sgml-mode.el.gz
;;;###autoload
(define-derived-mode html-mode sgml-mode '(sgml-xml-mode "XHTML" "HTML")
  "Major mode based on SGML mode for editing HTML documents.
This allows inserting skeleton constructs used in hypertext documents with
completion.  See below for an introduction to HTML.  Use
\\[browse-url-of-buffer] to see how this comes out.  See also `sgml-mode' on
which this is based.

Do \\[describe-variable] html- SPC and \\[describe-variable] sgml- SPC to see available variables.

To write fairly well formatted pages you only need to know few things.  Most
browsers have a function to read the source code of the page being seen, so
you can imitate various tricks.  Here's a very short HTML primer which you
can also view with a browser to see what happens:

<title>A Title Describing Contents</title> should be on every page.  Pages can
have <h1>Very Major Headlines</h1> through <h6>Very Minor Headlines</h6>
<hr> Parts can be separated with horizontal rules.

<p>Paragraphs only need an opening tag.  Line breaks and multiple
spaces are ignored unless the text is <pre>preformatted.</pre>
Text can be marked as <strong>bold</strong>, <em>italic</em> or
<u>underlined</u> using the facemenu M-o or Edit/Text
Properties/Face commands.

Pages can have <a name=\"SOMENAME\">named points</a> and can link other points
to them with <a href=\"#SOMENAME\">see also somename</a>.  In the same way <a
href=\"URL\">see also URL</a> where URL is a filename relative to current
directory, or absolute as in `https://www.cs.indiana.edu/elisp/w3/docs.html'.

Images in many formats can be inlined with <img src=\"URL\">.

If you mainly create your own documents, `sgml-specials' might be
interesting.  But note that some HTML 2 browsers can't handle `&apos;'.
To work around that, do:
   (eval-after-load \"sgml-mode\" \\='(aset sgml-char-names ?\\=' nil))

\\{html-mode-map}"
  (setq-local sgml-display-text html-display-text)
  (setq-local sgml-tag-face-alist html-tag-face-alist)
  (setq-local sgml-tag-alist html-tag-alist)
  (setq-local sgml-face-tag-alist html-face-tag-alist)
  (setq-local sgml-tag-help html-tag-help)
  (setq-local outline-regexp "^.*<[Hh][1-6]\\>")
  (setq-local outline-heading-end-regexp "</[Hh][1-6]>")
  (setq-local outline-level
	      (lambda () (char-before (match-end 0))))
  (setq-local add-log-current-defun-function #'html-current-defun-name)
  (setq-local sentence-end-base "[.?!][]\"'”)}]*\\(<[^>]*>\\)*")
  (add-hook 'completion-at-point-functions #'html-mode--complete-at-point nil t)

  (when (fboundp 'libxml-parse-html-region)
    (defvar css-class-list-function)
    (setq-local css-class-list-function #'html-current-buffer-classes)
    (defvar css-id-list-function)
    (setq-local css-id-list-function #'html-current-buffer-ids))

  (setq imenu-create-index-function #'html-imenu-index)
  (yank-media-handler 'text/html #'html-mode--html-yank-handler)
  (yank-media-handler "image/.*" #'html-mode--image-yank-handler)

  (setq-local sgml-empty-tags
	      ;; From HTML-4.01's loose.dtd, parsed with
              ;; `sgml-parse-dtd', plus manual additions of "source" and "wbr".
	      '("area" "base" "basefont" "br" "col" "frame" "hr" "img" "input"
                "isindex" "link" "meta" "source" "param" "wbr"))
  (setq-local sgml-unclosed-tags
	      ;; From HTML-4.01's loose.dtd, parsed with `sgml-parse-dtd'.
	      '("body" "colgroup" "dd" "dt" "head" "html" "li" "option"
		"p" "tbody" "td" "tfoot" "th" "thead" "tr"))
  ;; It's for the user to decide if it defeats it or not  -stef
  ;; (make-local-variable 'imenu-sort-function)
  ;; (setq imenu-sort-function nil) ; sorting the menu defeats the purpose
  )