Disabling partial HTML indentation in Vim

Question

Caveat: I'm not a web developer.

That being said, there are rare occasions where I have to edit HTML. When I do, I've noticed a behavior in Vim that I don't like, and hope that I can change via configuration.

When I code, I tend to wrap lines at 80 characters. This often means that I have to split HTML tags across lines. What I'd like is some sensible indentation when this happens. So, for example, I might have the following code and would like it indented similarly:

<a href="http://someverylongurl.com/foo/bar/blaz/SinwzvO.jpg"><img
   src="http://someverylongurl.com/foo/bar/blaz/Sinwzv0.jpg"
   class="ri" alt="This is an image"></a>

But, by default, Vim's autoindentation will indent the split HTML tags to the same level as the HTML tag start on the previous line. In other words, I get something like the following:

<a href="http://someverylongurl.com/foo/bar/blaz/SinwzvO.jpg"><img
                                                              src="http://someverylongurl.com/foo/bar/blaz/Sinwzv0.jpg"
                                                              class="ri" alt="This is an image"></a>

Which is, exactly, what I don't want. As I'm typing, I find I'm constantly having to go back and fix indentations like this.

I like Vim's autoindent generally, and don't want to simply disable it universally. I'd rather just disable or change the split HTML tag indentation, but I can't figure out how.

Is it possible to change this?

(I've tried searching Stackoverflow for this question, but couldn't find it. If it's a duplicate, please point me to the original.)

EDIT: Solution was found here https://www.reddit.com/r/vim/comments/3ogbna/disabling_partial_html_indentation_in_vim/cvy8p3u

EDIT #2: Okay, the above solution didn't solve the problem. It's still there.

Answer 1

I recommend the tidy-html5 plugin.

---

As a web developer myself, I also recommend aligning the HTML tags a little differently,

AirBnb React Styleguide (most legible & recommended for React)

<a href="http://someverylongurl.com/foo/bar/blaz/SinwzvO.jpg">
  <img
    src="http://someverylongurl.com/foo/bar/blaz/Sinwzv0.jpg"
    class="ri"
    alt="This is an image"
  >
</a>

Google HTML Styleguide

<a href="http://someverylongurl.com/foo/bar/blaz/SinwzvO.jpg">
  <img src="http://someverylongurl.com/foo/bar/blaz/Sinwzv0.jpg"
       class="ri" alt="This is an image">
</a>

This will really help formatters avoid crazy indentations.