Automatically add attributes to HTML tag


Is there a way to automatically add certain attributes to certain HTML tags in PHPStorm? For example, I want to all <img> tags to have 

loading="lazy" decoding="async"

by default, but at the moment I need to input them manually. Can I somehow setup PHPStorm, so that those tags are added automatically when the tag is "autocompleted" for example?

Thank you.


I guess in your case Live Templates should do the trick:

Something like:

<img loading="lazy" decoding="async">$SELECTION$</img>

And abbrevation like "im".


Yes, thank you, it does seem to work. Is it possible to edit native autocompletion, though? The one suggested with this:

I am curious about this, since otherwise it kind of means that I have 2 very similar suggestions, which may be confusing, if I forget about the difference for some reason.


@Dmitry Kustov

You cannot redefine the inserted code for HTML tags.

But if you use Emmet, then you can change the code that gets inserted... as all standard Emmet abbreviations in IDEA-based IDEs (PhpStorm/WebStorm/etc) are implemented using the already mentioned Live Templates functionality, which means that you can change that code.

  • Just type img[TAB] (instead of your <img ) to have Emmet doing its magic ([TAB] is the default expand key, could also be [Enter] or some other; check your PhpStorm settings).
  • Live Templates for HTML abbreviations can be found under the Zend HTML group on Live Templates screen; Zend CSS would be for CSS abbreviations.

Please sign in to leave a comment.