HTML5 képek

Az <img> elem

Egy HTML dokumentumban az <img>  elemmel tudunk képet megjeleníteni. Az <img>  elemnek két kötelező attribútuma van: a src=””  és az alt=”” . Ezen kívül használhatók még a height  és a width  attribútumok, de inkább célszerűbb CSS segítségével megadni a kép méreteit.

A HTML 4.01-es verziójában további attribútumok is szerepeltek (align, border, hspace, vspace), amelyek a HTML5-ben már nem támogatottak.

Pl:

<img src="smiley.gif" alt="Smiley face" height="42" width="42">

Egy dokumentumban a képekhez, ábrákhoz, kódrészletekhez általában egy felirat vagy ábra magyarázat is szokott tartozni.

A HTML előző verzióinak egyik problémája volt, hogy nem tartalmazott olyan szemantikus elemeket, amivel egy képet és a hozzá tartozó feliratot egy logikai egységként lehetett volna jelölni.

Ezen a problémán segít a HTML5-ben bevezetett <figure>  és <figcaption>  szemantikus elemek.

A <figure> és <figcaption> elemek

A <figure> és <figcaption> elemekkel egy logikai egységbe zárhatóak a képek és a hozzájuk tartozó felirat.

Pl:

<figure>
    <img src="http://i.imgur.com/9LjVx7q.jpg" alt="alt text">
    <figcaption>1. ábra: Képfelirat</figcaption>
</figure>

Egy kis CSS segítségével esztétikusabbá tehetjük:

figure {
    background: #eee;
    box-shadow: 2px 2px 10px #999;
    display: table;
    margin: 0 auto;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 5px;
}
figcaption {
    margin-top: 5px;
    font-size: small;
    text-align: center;
}
img {
    max-width: 100%;
    width: 500px;
}

A végeredmény itt látható:

See the Pen yaQywN by zeon (@zeon) on CodePen.