html - 呈现的标题图像。从语义上讲，我应该使用 img 标签还是背景？

Question

只是关于制作好的 html 的问题。假设我有一个标题。

<h1>Header</h1>
<p>Hello, World!</p>

这是典型的用法，但假设我将标题作为程式化的文本图像。我会使用 <img/> 吗？带有替代文字的标签？除此之外，这在我看来并不正确，因为它不是重要的图像，因为它是它正在呈现的文本。唯一使用 <img/> 的专业人士是alt属性。有没有办法让 <h1>带有背景图片的标记，但使用 CSS 将文本包含在 <h1> 中消失，但在语义上仍然是正确的？即，我希望 HTML 显示以上内容，但是当您添加 css 时 <h1> 的内容消失，background-image接管。

输入、评论、智慧之言？

Answer 1

CSS3 extends the color value to include the ‘transparent’ keyword to allow its use with all properties that accept a value.

您可以使用 color: transparent使用 CSS3 隐藏文本，然后将您的程式化标题图像呈现为 background-image .

但是，要使用 CSS2，最好使用 <img>与 title属性和 alt :

The ALT attribute is designed to be an alternative text description for images. ALT text displays before the image is loaded (if it's loaded at all) in the major browsers and instead of the image in text-based browsers like Lynx.

In contrast, you can use the TITLE attribute for just about any page element, but it isn't required for any page element. Use it to describe links, tables, individual table rows, and other structural HTML elements. They're more versatile than the ALT attribute and many search engine ranking algorithms read the text in TITLE attributes as regular page content.

我想补充一点，目前还没有明确的答案。每个人对这件事都有自己的理解和看法，没有什么“金科 Jade 律”。但是，请尝试查看其他一些网站并从中学习。