Some kind of reference between a keyword/tag and an entire line of code throughout an HTML file

Question

I want to attach some kind of a keyword/tag to a line of code and reference that keyword throughout my HTML file instead of having to re-write the entire line of code each time.

For example, attach the tag TestPic1234 to the code of <img src="img_chania.jpg" alt="Flowers in Chania"> so that throughout my HTML file, TestPic1234 automatically means <img src="img_chania.jpg" alt="Flowers in Chania">.

This is all mostly so I can avoid unnecessary clutter and to reduce total filesize (especially when working with Base64 images).

I've looked online and the only thing that came close to what I'm looking for was the id / class tags but that still wasn't what I'm looking for (or maybe I misused them but I doubt it)

Answer 1

Move your base64 image to CSS:

<style>
.image-a { 
  width: 130px;
  height: 130px;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url('data:image/gif;base64...[your data-url image here]');
}
</style>

Then your HTML would be:

<div class="image-a" > </div>
<div class="image-a" > </div>
<div class="image-a" > </div>

Codepen to play: https://codepen.io/vovchisko/pen/dyXEZdv