Question

如果我正在寻找良好的HTML5语义实践，以及针对CEO的优化代码。把帆布放在标题中，会给出不好的结果吗？

我的意思是，这个：

 <h1>
        <span> Main Title </span>
        <canvas></canvas>
    </h1>

    ... some content... 

    <h2>
        <span> A article </span>
        <canvas></canvas>
    </h2>

    ...

取而代之的是：

<h1>
    <span> Main Title </span>
</h1>
<canvas></canvas>

... some content... 

<h2>
    <span> A article </span>
</h2>
<canvas></canvas>

...

Answer 1

画布应该在标题之外。

Answer 2

这个问题与“应该img被置于h1？”，甚至是否应该将“foobar”这个词“推入h1”没有什么不同？ →这取决于你的内容。

canvas代表内容，通常是图片。如果此图像标题的的一部分，请将canvas放在标题中。如果此图像由标题描述，请不要将其放在标题中。

不要忘记包含后备内容，例如<canvas></canvas>。这个后备内容将成为标题的一部分（对于较旧的用户代理，屏幕阅读器，搜索引擎......）。如果在标题中没有意义，canvas不应该在那里。

请注意，canvas HTML5 spec似乎是一个相关段落：

当更合适的元素可用时，作者不应在文档中使用canvas元素。例如，使用canvas元素呈现页面标题是不合适的：如果标题的所需表示图形强烈，则应使用适当的元素（通常为h1）对其进行标记，然后使用CSS和XBL等支持技术进行设计。

但是这个例子假设人们会使用canvas 代替相应的元素。

Answer 3

我认为2010年的StackOverflow问题与此相关： Replacing H1 text with a logo image: best method for SEO and accessibility?

我还认为如果你想在＆lt; h1＆gt;里面使用一个canvas元素标签等，你真的需要在canvas标签中包含一个alt属性来解释画布显示的内容，并在canvas标签中的span（？）标签中包含alt属性文本，对于那些不支持的浏览器画布。

一个好的做法是将画布放入H1，H2（..etc）标题中以获取HTML5语义吗？

3 个答案: