How to fold/unfold HTML tags with Vim

Is there some plugin to fold HTML tags in Vim?
Or there is another way to setup a shortcut to fold or unfold html tags?
I would like to fold/unfold html tags just like I do with indentation folding.

I have found zfat (or, equally, zfit) works well for folding with HTML documents. za will toggle (open or close) an existing fold. zR opens all the folds in the current document, zM effectively re-enables all existing folds marked in the document.

If you find yourself using folds extensively, you could make some handy keybindings for yourself in your .vimrc.

If you indent your HTML the following should work:

set foldmethod=indent

The problem with this, I find, is there are too many folds. To get around this I use zO and zc to open and close nested folds, respectively.

See help fold-indent for more information:

The folds are automatically defined by the indent of the lines.

The foldlevel is computed from the indent of the line, divided by the
'shiftwidth' (rounded down).  A sequence of lines with the same or higher fold
level form a fold, with the lines with a higher level forming a nested fold.

The nesting of folds is limited with 'foldnestmax'.

Some lines are ignored and get the fold level of the line above or below it,
whichever is lower.  These are empty or white lines and lines starting
with a character in 'foldignore'.  White space is skipped before checking for
characters in 'foldignore'.  For C use "#" to ignore preprocessor lines.

When you want to ignore lines in another way, use the 'expr' method.  The
indent() function can be used in 'foldexpr' to get the indent of a line.

Folding html with foldmethod syntax, which is simpler.

This answer is based on HTML syntax folding in vim. author is @Ingo Karcat.

1. set your fold method to be syntax with the following:

   vim command line :set foldmethod=syntax

   or put the setting in ~/.vim/after/ftplugin/html.vim

   setlocal foldmethod=syntax
   

2. Also note so far, the default syntax script only folds a multi-line tag itself, not the text between the opening and closing tag.

       So, this gets folded:
       
           <div
               class="foo"
               id="bar"
           > 
   
       And this doesn't
       
           <div>
               <b>text between here</b>
           </div>
   

3. To get folded between tags, you need extend the syntax script, via the following, best place into ~/.vim/after/syntax/html.vim

   The syntax folding is performed between all but void html elements (those which don't have a closing sibling, like <br>)

   syntax region htmlFold start="<\z(\<\(area\|base\|br\|col\|command\|embed\|hr\|img\|input\|keygen\|link\|meta\|para\|source\|track\|wbr\>\)\@![a-z-]\+\>\)\%(\_s*\_[^/]\?>\|\_s\_[^>]*\_[^>/]>\)" end="</\z1\_s*>" fold transparent keepend extend containedin=htmlHead,htmlH\d
   

Install js-beautify command(JavaScript version)

npm -g install js-beautify  
wget --no-check-certificate https://www.google.com.hk/ -O google.index.html  
js-beautify -f google.index.html  -o google.index.bt.html  

http://www.google.com.hk orignal html:

js-beautify and vim fold:

Add on to answer by James Lai. Initially my foldmethod=syntax so zfat won't work. Solution is to set the foldemethod to manual

:setlocal foldmethod=manual

to check which foldmethod in use,

:setlocal foldmethod?

Firstly set foldmethod=syntax and try zfit to fold start tag and zo to unfold tags, It works well on my vim.