Можем ли мы разместить «‹img›« внутри «‹h1›« в соответствии с веб-стандартами?

Можем ли мы разместить <img> внутри <h1> в соответствии с веб-стандартами? нравится

<h1> Demo text <img src="anyimage.jpg"/> </h1>

w3c xhtml web-standards xhtml-1.0-strict
person Jitendra Vyas    schedule 22.10.2009    source источник

Ответы (5)


arrow_upward
95
arrow_downward

Да, вы можете - в DTD говорится:

<!ELEMENT h1  %Inline;>
<!ENTITY % Inline "(#PCDATA | %inline; | %misc.inline;)*">
<!ENTITY % inline "a | %special; | %fontstyle; | %phrase; | %inline.forms;">
<!ENTITY % special "%special.pre; | object | img ">

По сути, это означает, что h1 может содержать %Inline, который состоит из различных элементов, включая img

person Greg    schedule 22.10.2009

arrow_upward
46
arrow_downward

Посмотрите, кто его использует: http://www.w3.org/

<h1 class="logo"><a tabindex="2" accesskey="1" href="/"><img src="/2008/site/images/logo-w3c-mobile-lg" width="90" height="53" alt="W3C" /></a> <span class="alt-logo">W3C</span></h1>
person Max    schedule 22.10.2009
comment
Что ж, это может быть неправильное использование. При использовании программы чтения с экрана вслух читается: W3C W3C. Потому что он читает вслух атрибут alt и элемент span. Я не уверен, но если бы диапазон был определен с помощью display: hidden, он бы его не прочитал. Здесь вы найдете полезные сведения о тексте ALT. - person Ciantic; 24.04.2013
comment
Я согласен, отвечая на это поздно. Но если бы это был 2018 год. Я бы установил alt равным пустой строке. И оставьте диапазон с помощью программы чтения с экрана единственным css. - person Gcamara14; 08.03.2018
comment
@ Gcamara14 Вы имеете в виду что-то вроде ‹h1› ‹img src = img.png alt = /› ‹span class = screen-reader-text› Мой заголовок ‹/span› ‹/h1› Прикрепляют ли поисковые системы к ранжированию на основе скрытого текста, например тот? - person Jordan Carter; 18.04.2018

arrow_upward
17
arrow_downward

Да, это разрешено. Но не забудьте установить атрибут alt на img!

person igor    schedule 22.10.2009
comment
+1 за упоминание alt. Обычно, когда изображение не может быть отображено, текст alt действует как содержимое h1. - person Adam Elsodaney; 03.03.2016

arrow_upward
4
arrow_downward

И да и нет.

Вы можете разместить изображение внутри элемента h1, но не совсем так ... alt атрибут является обязательным.

person Quentin    schedule 22.10.2009

arrow_upward
2
arrow_downward

Подводя итог другим ответам, W3C допустимо использовать <img> внутри <h1>.

Хотя, чтобы быть полностью действительным, вы должны добавить к своему изображению атрибут alt, потому что он является обязательным. Этот атрибут не обязательно должен содержать текст. Лучше оставить его пустым, чем повторять то, что уже написано в теге h1.

В вашем случае, если изображение носит чисто декоративный характер, это должно быть:

<h1>Demo text <img src="anyimage.jpg" alt=""/></h1>

Дополнительная информация об альтернативных текстах для декоративных изображений: https://www.w3.org/WAI/tutorials/images/decorative/

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

person neiya    schedule 04.11.2019