Javascript 以语义正确的方式注入图像标题信息

我正在开发一个图像库，希望能得到一些帮助，以语义正确的方式（动态地）将每个图像的标题信息插入到DIV中。在当前状态下，我以单击函数的形式使用jQuery从相应的“title”和“rel”锚属性中获取信息，并将它们插入到ID为“caption”的DIV中，如下所示：

$(document).ready(function(){

    $("#image_nav a").click(function(){

        $("#caption").empty();

        $("#caption").append('<em></em><span></span>')

        var capTitle = $(this).attr("title");
        var capInfo = $(this).attr("rel");

        $("#caption em").html(capTitle);

        $("#caption span").html(",&nbsp;" + capInfo); return false;
    });

}); 

$（文档）.ready（函数（）{
$（“图像导航a”）。单击（函数（）{
$（“#标题”）.empty（）；
$（“#标题”）。附加（“”）
var capTitle=$（this.attr（“title”）；
var capInfo=$（this.attr（“rel”）；
$（“#caption em”）.html（字幕）；
$（“#caption span”）.html（“，”+capInfo）；返回false；
});
}); 

我意识到这对于语义来说不是一个好方法，尤其是在标题信息中使用“rel”属性时，我想知道什么可能是最好的方法。我正在考虑为锚点使用自定义数据属性，例如“数据标题”？我已经建立了一个工作原型

---

谢谢你在这里的任何见解

使用标签作为图像标题，而不是div作为物品容器；我想对于每个列表项，我可以包含一个设置为“display:none”的列表项，我可以从中提取数据。通过jQuery以这种方式引用信息的具体方式是什么？作为后续——使用锚定的数据属性（我可以从中提取标题信息）有什么问题吗？实际上，对于动态内容，标记标记是什么可能并不重要。数字用于硬编码图像+描述项，而不是查看器。撇开这一点不谈，使用rel属性比mis更好。对于出色的语义，您可以使用aria attribs descripbedby和labelledbyOk感谢您的反馈。