Является ли хорошей практикой помещать холст в заголовок H1, H2 (..etc) для семантики HTML5?

Если я ищу хорошие семантические практики 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>

...

canvas html semantics html-heading semantic-markup
person Yavierre    schedule 18.11.2013    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Этот вопрос не отличается от «Следует ли img поместить в h1?» Или даже от «Следует ли помещать слово« foobar »в h1?» → Это зависит от вашего содержания.

canvas представляет контент, обычно изображение. Если это изображение является частью заголовка, поместите canvas в заголовок. Если это изображение описывается заголовком, не помещайте его в заголовок.

Не забудьте добавить резервное содержание, например <canvas><!-- fallback content --></canvas>. Этот резервный контент будет частью заголовка (для старых пользовательских агентов, программ чтения с экрана, поисковых систем и т. Д.). Если заголовок не имеет смысла, canvas вообще не должно быть там.

Обратите внимание, что canvas HTML5 spec имеет, как может показаться, соответствующий абзац:

Авторам не следует использовать элемент canvas в документе, если доступен более подходящий элемент. Например, неуместно использовать элемент canvas для визуализации заголовка страницы: если желаемое представление заголовка является графически насыщенным, оно должно быть размечено с использованием соответствующих элементов (обычно h1), а затем стилизовано с использованием CSS и вспомогательных технологий, таких как XBL.

Но в этом примере предполагается, что можно использовать canvas вместо соответствующего элемента.

person unor    schedule 19.11.2013

arrow_upward
3
arrow_downward

Холст должен находиться за пределами заголовка.

person Xarcell    schedule 18.11.2013
comment
Потому что холст обычно представляет собой набор скриптов, а не TITLE, для чего и нужен заголовок. Чтобы показать НАЗВАНИЯ ... - person Xarcell; 18.11.2013
comment
+1 Достаточно честно :) Думаю, если в дизайне требуется текст поверх холста, вы всегда можете обернуть ‹h1› и ‹canvas› в оболочку ‹div› и использовать позиционирование CSS ... - person markE; 18.11.2013

arrow_upward
0
arrow_downward

Я думаю, что этот вопрос StackOverflow от 2010 года актуален здесь: Замена текста H1 изображением логотипа: лучший метод для SEO и доступности?

Я также думаю, что если вы хотите использовать элемент холста внутри тегов ‹h1> и т. Д., Вам действительно нужно включить атрибут alt в тег холста, чтобы объяснить, что показывает холст, а также включить текст атрибута alt в диапазон ( ?) внутри тега холста для тех браузеров, которые не поддерживают холст.

person KaliedaRik    schedule 18.11.2013
comment
Лучше избежать ошибки, потом сделать и попытаться исправить с помощью alt. Также alt здесь выглядит как текст ‹canvas›, видимый, если холст не поддерживается. ‹/Canvas› - person ViliusL; 19.11.2013
comment
Я предложил альтернативный текст из соображений доступности, например, для людей, использующих средства преобразования текста в речь. - person KaliedaRik; 19.11.2013