Вставить картинку

Вставить картинку

Картинка вставляется через тег <img>.

<img src="/path/to/image.jpg" alt="Описание картинки">

Атрибут alt является обязательным атрибутом для тега <img>. Об этом упоминается в официальной документации HTML: w3.org/TR/html5/embedded-content-0.html#alt (на англ).

Атрибут alt нужен для того, чтобы в случае отсутствия картинки, вместо самой картинки выводить указанный текст.

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

Значение атрибута alt может быть пустым.

Картинка с описанием

Картинку с описанием можно вставить через тег <figcaption>, который появился в HTML 5.

<figure>
    <img src="image.jpg" alt="">
    <figcaption>Описание картинки</figcaption>
</figure>

Пример кода:

Пример оформления CSS:

figure {
    text-align: center;
    border: solid 1px #ccc;
    border-radius: 2px;
    background: rgba(0,0,0,0.05);
    padding: 10px;
    margin: 10px 20px;
    display: inline-block;
}

figure > figcaption {
    text-align: center;
    display: block;
}

Несколько картинок

В теге <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 <a href="http://www.flickr.com/photos/rclark/">Richard Clark</a></figcaption>
</figure>

Пример кода: