Вставить картинку
Вставить картинку
Картинка вставляется через тег <img>
.
<img src="/path/to/image.jpg" alt="Описание картинки">
Атрибут alt
является обязательным атрибутом для тега <img>
. Об этом упоминается в официальной документации HTML: html.spec.whatwg.org/multipage/images.html#alt (на англ).
Атрибут alt
нужен для того, чтобы в случае отсутствия картинки, вместо самой картинки выводить указанный текст.
Также данный атрибут играет важную роль в SEO, т.к. многие пользователи ищут товары через поиск по картинкам. От значения атрибутов alt
будет зависеть, по каким словам данная картинка будет выводится в поисковых системах.
Значение атрибута alt
может быть пустым.
Картинка с описанием
Картинку с описанием можно вставить через тег <figcaption>
.
<figure>
<img src="image.jpg" alt="">
<figcaption>Описание картинки</figcaption>
</figure>
Пример кода:

Несколько картинок
В теге <figure>
можно вставлять несколько картинок:
<figure>
<img src="/kookaburra.jpg" alt="Kooaburra">
<img src="/pelican.jpg" alt="Pelican stood on the beach">
<img src="/lorikeet.jpg" alt="Cheeky looking Rainbow Lorikeet">
<figcaption>Australian Birds. From left to right, Kookburra, Pelican and Rainbow Lorikeet. Originals by Richard Clark</figcaption>
</figure>
Пример кода:



Доступность
Если картинка используется как элемент дизайна, то рекомендуется указывать пустой атрибут alt
или использовать атрибут role="presentation"
, чтобы скринридеры игнорировали данную картинку (иначе они будут озвучивать, что в данном месте находится картинка).
<!-- 1-ый способ: просто указать пустой alt -->
<img src="/path/to/image.jpg" alt="">
<!-- 2-ой способ: если alt заполнен, то указывается role="presentation" -->
<img src="/path/to/image.jpg" alt="Рамка" role="presentation">
При этом не рекомендуется использоваться пустой alt
и role="presentation"
одновременно.
<!-- не рекомендуется использовать role="presentation", т.к. уже указан пустой alt -->
<img src="/path/to/image.jpg" alt="" role="presentation">
Поддержать автора
Все статьи создаются и поддерживаются одним человеком,
если вам нравится контент, вы можете поддержать автора сайта