Html 在语义上正确的方式是什么来包含漫画的抄本？

假设您有一个显示漫画图像的页面。你已经有了漫画的全文内容（它的文本）。将其包含在HTML5页面中的语义正确方法是什么，以便：

• 搜索引擎知道图像的文本内容
• 用户可以通过搜索找到图像中的特定文本（例如，令人难忘的笑话）
• 如果用户无法从图像中读取成绩单，可以选择单击以读取成绩单

---

备选方案1（figcaption方法）：

三明治
-给我做个三明治什么？你自己做吧苏多给我做个三明治可以
这是我最好的创作。我希望你喜欢

还有，我的猫今天特别可爱

问题：

• figcaption应该是描述内容，而不是转录
• 文本太接近图像用户体验，理想情况下，这些内容必须可以访问，但不能立即以其他信息的方式访问

选项2（在图中附上所有内容）：

三明治
这是我最好的创作。我希望你喜欢

还有，我的猫今天特别可爱

-给我做个三明治什么？你自己做吧苏多给我做个三明治可以

问题：

• figcaption应该是描述内容，而不是转录
• 与图像无关的内容（“还有，我的猫今天特别可爱。”）在语义上与图像相关

选项3（alt-text方法）：

三明治
这是我最好的创作。我希望你喜欢

还有，我的猫今天特别可爱

问题：

• alt文本应描述内容，而不是转录
• 对于很长的成绩单，alt文本看起来像垃圾邮件
• 成绩单不可供用户按需使用（除非复制为HTML或通过脚本）

备选方案4（详细方法）：

三明治
这是我最好的创作。我希望你喜欢

还有，我的猫今天特别可爱

成绩单
-给我做个三明治什么？你自己做吧苏多给我做个三明治可以

问题：

• 转录本在语义上与图像无关

---

---

鉴于最初的目标，最好的方法是什么？

标题和转录本在语义上是两个不同的东西

应用于标题，这是对数字的简要说明。因此，在抄本中使用它似乎不合适

选项4似乎是最接近的。可以使用该属性将转录本绑定到漫画图像

作者的信息可能是最好的，因为它是与文章间接相关的补充内容

也要考虑它本身，包括字符名称。

比如：

三明治
今天的漫画。
这是我最好的创作。我希望你喜欢

还有，我的猫今天特别可爱

成绩单
名字1：给我做个三明治

名字2：什么？你自己做吧

名字1：苏多给我做个三明治

名字2：好的

<article id="todays-comic">
    <h1>Sandwich</h1>
    <figure>
        <img src="sandwich-comic.jpg" alt="Comic about making a sandwich.">
        <figcaption class="toggleable hidden-by-default">- Make me a sandwich. - What? Make it yourself. - Sudo make me a sandwich. - Okay.</figcaption>
    </figure>
    <section id="message-from-author">
        <p>This is my best creation. I hope you like it.</p>
        <p>Also, my cat was especially cute today.</p>
    </section>
</article>

<article id="todays-comic">
    <h1>Sandwich</h1>
    <figure>
        <img src="sandwich-comic.jpg" alt="Comic about making a sandwich.">
        <p>This is my best creation. I hope you like it.</p>
        <p>Also, my cat was especially cute today.</p>
        <figcaption class="toggleable hidden-by-default">- Make me a sandwich. - What? Make it yourself. - Sudo make me a sandwich. - Okay.</figcaption>
    </figure>
</article>

<article id="todays-comic">
    <h1>Sandwich</h1>
    <figure>
        <img src="sandwich-comic.jpg" alt="- Make me a sandwich. - What? Make it yourself. - Sudo make me a sandwich. - Okay.">
    </figure>
    <section id="message-from-author">
        <p>This is my best creation. I hope you like it.</p>
        <p>Also, my cat was especially cute today.</p>
    </section>
</article>

<article id="todays-comic">
    <h1>Sandwich</h1>
    <figure>
        <img src="sandwich-comic.jpg" alt="Comic about making a sandwich.">
    </figure>
    <section id="message-from-author">
        <p>This is my best creation. I hope you like it.</p>
        <p>Also, my cat was especially cute today.</p>
    </section>
    <details id="transcript" class="toggleable hidden-by-default">
        <summary>Transcript</summary>
        - Make me a sandwich. - What? Make it yourself. - Sudo make me a sandwich. - Okay.
    </details>
</article>