Editing HTML Files

Vim is excellent for creating and editing HTML documents — its many varied powerful editing features are handy for copying formatting between pages and keeping a consistent look. The irritating part is having to type all that mark-up, but the following settings help to automate this process. (All of this site’s HTML was created just using Vim.)

All the settings below are included in the sample .vimrc configuration file.

Whenever you’ve used the opening HTML tag of a pair, you’re going to want to close it at some point. Vim can do the typing for you: the function below will insert the tag needed to close the most-recently-opened tag pair that hasn’t already been closed. (Because of the nested nature of HTML, closing tags are inserted in the reverse order of opening tags, so you don’t need to tell it which tag to close; it can work out which one you want.)

nnoremap \hc :call InsertCloseTag()<CR>
imap <F8> <Space><BS><Esc>\hca

With the above mapping and the following function, while typing in insert mode, you can simply press <F8> to have any close tag typed tag for you. (If function keys don’t work in your terminal, then use \hc in normal mode instead.)

function! InsertCloseTag()
" inserts the appropriate closing HTML tag; used for the \hc operation defined
" above;
" requires ignorecase to be set, or to type HTML tags in exactly the same case
" that I do;
" doesn't treat <P> as something that needs closing;
" clobbers register z and mark z
" 
" by Smylers  http://www.stripey.com/vim/
" 2000 May 3

  if &filetype == 'html'
  
    " list of tags which shouldn't be closed:
    let UnaryTags = ' Area Base Br DD DT HR Img Input LI Link Meta P Param '

    " remember current position:
    normal mz

    " loop backwards looking for tags:
    let Found = 0
    while Found == 0
      " find the previous <, then go forwards one character and grab the first
      " character plus the entire word:
      execute "normal ?\<LT>\<CR>l"
      normal "zyl
      let Tag = expand('<cword>')

      " if this is a closing tag, skip back to its matching opening tag:
      if @z == '/'
        execute "normal ?\<LT>" . Tag . "\<CR>"

      " if this is a unary tag, then position the cursor for the next
      " iteration:
      elseif match(UnaryTags, ' ' . Tag . ' ') > 0
        normal h

      " otherwise this is the tag that needs closing:
      else
        let Found = 1

      endif
    endwhile " not yet found match

    " create the closing tag and insert it:
    let @z = '</' . Tag . '>'
    normal `z"zp

  else " filetype is not HTML
    echohl ErrorMsg
    echo 'The InsertCloseTag() function is only intended to be used in HTML ' .
      \ 'files.'
    sleep
    echohl None
  
  endif " check on filetype

endfunction " InsertCloseTag()

Many HTML tags are used repetitively throughout a file. For example, in this one, each section starts with <Div Class=light>. Vim can be made to repeat tags from elsewhere with these mappings and the function below:

nnoremap \hp :call RepeatTag(0)<CR>
imap <F9> <Space><BS><Esc>\hpa
nnoremap \hn :call RepeatTag(1)<CR>
imap <F10> <Space><BS><Esc>\hna

While typing, simply pressing <F9> will insert at the cursor position a copy of the previously-used HTML tag. Pressing <F9> again will delete the tag just inserted and replace it with the one previous to it. Repeated pressings of <F9> will continue to cycle backwards through all previous HTML tags in the file, and <F9> will cycle forwards (like <Ctrl>+P/<Ctrl>+N do with insert mode completion). (Closing tags will never be copied, since they can be inserted with the function above.) Where function keys don’t work, \hp and \hn can be used in normal mode instead.) In practice I’ve found this to be much more useful than having various key mappings ‘hard-coded’ to produce different HTML tags.

function! RepeatTag(Forward)
" repeats a (non-closing) HTML tag from elsewhere in the document; call
" repeatedly until the correct tag is inserted (like with insert mode <Ctrl>+P
" and <Ctrl>+N completion), with Forward determining whether to copy forwards
" or backwards through the file; used for the \hp and \hn operations defined
" above;
" requires preservation of marks i and j;
" clobbers register z
" 
" by Smylers  http://www.stripey.com/vim/
" 2000 Apr 30

  if &filetype == 'html'

    " if the cursor is where this function left it, then continue from there:
    if line('.') == line("'i") && col('.') == col("'i")
      " delete the tag inserted last time:
      if col('.') == strlen(getline('.'))
        normal dF<x
      else
        normal dF<x
        if col('.') != 1
          normal h
        endif
      endif
      " note the cursor position, then jump to where the deleted tag was found:
      normal mi`j

    " otherwise, just store the cursor position (in mark i):
    else
      normal mi
    endif

    if a:Forward
      let SearchCmd = '/'
    else
      let SearchCmd = '?'
    endif
      
    " find the next non-closing tag (in the appropriate direction), note where
    " it is (in mark j) in case this function gets called again, then yank it
    " and paste a copy at the original cursor position, and store the final
    " cursor position (in mark i) for use next time round:
    execute "normal " . SearchCmd . "<[^/>].\\{-}>\<CR>mj\"zyf>`i\"zpmi"

  else " filetype is not HTML
    echohl ErrorMsg
    echo 'The RepeatTag() function is only intended to be used in HTML files.'
    sleep
    echohl None
  
  endif

endfunction " RepeatTag()

On Unix-like systems (those with ISpell and Lynx installed), Vim can be made to highlight spelling errors in HTML files, but only in text that will actually be displayed (title, document text, alt text for images), so it doesn’t consider HTML mark-up to be misspellings. Details are on the Vim spelling page.

HTML character entity references can be made much easier to type with a few mappings. The autocommand and function below set up some suitable mappings and ensure that they are only active while working with HTML files. Since the backslash symbol \ isn’t needed very often, the key to produce it is overloaded. First pressing it twice (\\) is mapped to inserting a single \, so that it is still there if needed. Then backslash followed by other keys can be made to do other things.

So \& can then be used to insert &, the character code for the “&” symbol. Any non-Ascii characters you often type can be mapped. This table shows the ones I have set up:

Note that 2 is on the same key as " on UK keyboards. Since I use apostrophes and single quote marks often, I have these mapped to the ordinary keys and the backslash-preceded versions producing their original functionality.

I also have <Ctrl>+<Space> set up to produce  , though this doesn’t work in most terminals. Underscores are rarely required as words in their own right (rather than as separators in e-mail addresses, etc), whereas em-dashes are nearly always surrounded by spaces. Therefore I have an abbreviation which converts isolated underscores into em-dashes; effectively this makes _ (<Shift>+-) the key for em-dashes. Here’s the commands to set up all of this:

autocmd BufEnter * if &filetype == "html" | call MapHTMLKeys() | endif
function! MapHTMLKeys(...)
" sets up various insert mode key mappings suitable for typing HTML, and
" automatically removes them when switching to a non-HTML buffer

  " if no parameter, or a non-zero parameter, set up the mappings:
  if a:0 == 0 || a:1 != 0

    " require two backslashes to get one:
    inoremap \\ \

    " then use backslash followed by various symbols insert HTML characters:
    inoremap \& &
    inoremap \< &lt;
    inoremap \> &gt;
    inoremap \. ·

    " em dash -- have \- always insert an em dash, and also have _ do it if
    " ever typed as a word on its own, but not in the middle of other words:
    inoremap \- &#8212;
    iabbrev _ &#8212;

    " hard space with <Ctrl>+Space, and \<Space> for when that doesn't work:
    inoremap \<Space> &nbsp;
    imap <C-Space> \<Space>

    " have the normal open and close single quote keys producing the character
    " codes that will produce nice curved quotes (and apostophes) on both Unix
    " and Windows:
    inoremap ` &#8216;
    inoremap ' &#8217;
    " then provide the original functionality with preceding backslashes:
    inoremap \` `
    inoremap \' '

    " curved double open and closed quotes (2 and " are the same key for me):
    inoremap \2 &#8220;
    inoremap \" &#8221;
    
    " when switching to a non-HTML buffer, automatically undo these mappings:
    autocmd! BufLeave * call MapHTMLKeys(0)

  " parameter of zero, so want to unmap everything:
  else
    iunmap \\
    iunmap \&
    iunmap \<
    iunmap \>
    iunmap \-
    iunabbrev _
    iunmap \<Space>
    iunmap <C-Space>
    iunmap `
    iunmap '
    iunmap \`
    iunmap \'
    iunmap \2
    iunmap \"

    " once done, get rid of the autocmd that called this:
    autocmd! BufLeave *

  endif " test for mapping/unmapping

endfunction " MapHTMLKeys()

Paragraphs of text in HTML source are generally easier to read if they contains line breaks as though they were plain text, but for some tags it is useful to have lines longer than 80 characters wide. (View the source of this page for an example). With this setting:

autocmd FileType html set formatoptions+=tl

(and assuming these general paragraph formatting settings) line breaks are normally inserted as text is typed, but if this is ever ‘corrected’ manually to produce a longer line, Vim will leave it alone.

The general indentation settings work quite well with HTML and CSS files. With CSS, Vim can automatically indent definitions between braces (see this page’s style sheet for an example):

autocmd FileType css set smartindent

Also, a few bytes can be saved by indenting with genuine tab characters, rather than spaces:

autocmd FileType html,css set noexpandtab tabstop=2