Is a good practice put a canvas into a H1, H2 (..etc) heading for HTML5 semantic?

Question

If i am looking for good HTML5 semantic practices, and a optimized code for CEO. Put a canvas in heading, can give poor results?

I mean, this:

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

    ... some content... 

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

    ...

Instead this:

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

... some content... 

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

...

Answer 1

This question is not different to "Should img be putted into h1?", or even to "Should the word "foobar" be putted into h1?" → It depends on your content.

The canvas represents content, typically an image. If this image is part of the heading, put the canvas in the heading. If this image is described by the heading, don’t put it in the heading.

Don’t forget to include fallback content, e.g., <canvas><!-- fallback content --></canvas>. This fallback content would be part of the heading (for older user-agents, screen readers, search engines, …). If it doesn’t make sense in the heading, canvas shouldn’t be there in the first place.

---

Note that the canvas HTML5 spec has, what might seem, a relevant paragraph:

Authors should not use the canvas element in a document when a more suitable element is available. For example, it is inappropriate to use a canvas element to render a page heading: if the desired presentation of the heading is graphically intense, it should be marked up using appropriate elements (typically h1) and then styled using CSS and supporting technologies such as XBL.

But this example assumes that one would use canvas instead of an appropriate element.