0

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>

...
Yavierre
  • 519
  • 2
  • 6
  • 13

3 Answers3

3

Canvas should be outside of heading.

Xarcell
  • 1,946
  • 6
  • 30
  • 61
  • 1
    Because canvas usually is a bunch of script, not a TITLE, which that's what a heading is for. To Show TITLES... – Xarcell Nov 18 '13 at 17:49
  • 1
    +1 Fair enough :) I guess if the design calls for text over canvas you can always wrap the

    and in a wrapper
    and use CSS positioning...

     – markE Nov 18 '13 at 18:00
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.

unor
  • 82,883
  • 20
  • 183
  • 315
0

I think this StackOverflow question from 2010 is relevant here: Replacing H1 text with a logo image: best method for SEO and accessibility?

I also think that if you want to use a canvas element inside <h1> tags etc, you really need to include an alt attribute in the canvas tag to explain what the canvas is showing, and also include the alt attribute text in a span(?) tag within the canvas tag, for those browsers that don't support canvas.

Community
  • 1
  • 1
KaliedaRik
  • 278
  • 3
  • 6
  • It is better to avoid error, then make it and try to fix it with alt. Also canvas alt looks like text here, visible if canvas is not supported. – ViliusL Nov 19 '13 at 09:13
  • I suggested the alt text for accessibility reasons eg people using text-to-speech facilities. – KaliedaRik Nov 19 '13 at 10:00