How do I rapidly generate HTML boilerplate using abbreviations in Vim?
Answer
<C-y>,
Explanation
The emmet-vim plugin brings the full power of Emmet (formerly Zen Coding) to Vim, letting you type a short CSS-like abbreviation and expand it into a complete HTML structure with a single keystroke. Instead of manually typing opening tags, closing tags, attributes, and nesting, you write a compact expression and press <C-y>, to expand it instantly.
How it works
- Type an Emmet abbreviation in insert mode
- Press
<C-y>,(Ctrl+Y followed by comma) to expand it
The plugin parses the abbreviation and generates the full HTML output, placing your cursor at the first editable point.
Common abbreviations
Abbreviation: div.container>ul>li*3>a[href=#]
Expands to:
<div class="container">
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
Emmet syntax cheat sheet
| Syntax | Meaning | Example |
|---|---|---|
> |
Child element | div>p → <div><p></p></div> |
+ |
Sibling element | h1+p → <h1></h1><p></p> |
*N |
Multiply | li*5 → five <li> elements |
.class |
Add class | div.wrapper → <div class="wrapper"> |
#id |
Add id | div#main → <div id="main"> |
[attr] |
Add attribute | a[href=#] → <a href="#"> |
{} |
Text content | p{Hello} → <p>Hello</p> |
$ |
Numbering | li.item$*3 → item1, item2, item3 |
() |
Grouping | (header>nav)+main+footer |
Real-world examples
HTML5 boilerplate with ! or html:5:
!<C-y>,
Expands to a complete HTML5 document template with DOCTYPE, <html>, <head>, and <body> tags.
A navigation bar:
nav>ul>li*4>a[href=/page$]{Link $}<C-y>,
Wrapping existing text
Select text in visual mode, press <C-y>,, then type a wrap abbreviation. For example, selecting three lines of text and typing ul>li* wraps each line in an <li> inside a <ul>.
CSS abbreviations
Emmet also works in CSS files. Type shorthand property names and expand:
m10 → margin: 10px;
p20-30 → padding: 20px 30px;
bd1s → border: 1px solid;
Tips
- Use
<C-y>nto jump to the next edit point and<C-y>Nfor the previous one after expanding - Press
<C-y>dto select the entire tag (balanced tag selection) - Use
<C-y>/to toggle a comment on the nearest tag - Emmet supports custom snippets — define your own abbreviations in your vimrc with
g:user_emmet_settings - Limit emmet to specific filetypes to avoid conflicts:
let g:user_emmet_install_global = 0thenautocmd FileType html,css EmmetInstall