如何实现无依赖单文件HTML模板批量渲染内容？

我的页面中有一批带链接标题的图片，希望它们都使用完全相同的HTML结构。此前我通常会为每个内容项重复复制粘贴HTML代码，但问题在于，若要调整HTML结构，我必须逐一修改所有代码，不仅耗时，还容易出错。

简易模板需求 #

我希望仅编写一份HTML模板，以纯文本形式列出所有内容项，页面渲染时自动为每个内容项生成对应的HTML结构。

目标HTML模板 #

<p><img src=IMAGE-URL>
<br>
<a target='_blank' href=LINK-URL>CAPTION</a></p>

内容列表 #

IMAGE-URL, LINK-URL, CAPTION
/data/khang.jpg, https://khangssite.com, Khang Le
/data/sam.jpg, https://samssite.com, Sam Smith
/data/joy.jpg, https://joyssite.com, Joy Jones
/data/sue.jpg, https://suessite.com, Sue Sneed
/data/dog.jpg, https://dogssite.com, Brown Dog
/data/cat.jpg, https://catssite.com, Black Cat

理想的单个内容项形式 #

理想情况下，我可以在页面任意位置放置单个内容项的纯文本内容，并通过某种标识指定使用的HTML模板（类似CSS类的用法）。示例如下：

TEMPLATE=MyTemplate1, IMAGE-URL=khang.jpg, LINK-URL=https://khangssite.com, CAPTION=Khang Le

实现要求 #

• 不使用任何框架、库，所有内容（HTML模板+内容列表）放在同一个.html文件中，绝对不使用数据库
• 无需安装或配置额外服务，能快速在页面内搭建
• 优先不使用JavaScript；若必须使用，要求代码简短通用，不依赖固定字段名，禁止使用jQuery
• 拒绝使用Django、Smarty等服务端模板系统，以及Mustache等客户端模板库

内容的提问来源于stack exchange，提问作者johny why