Popis obrázku

Při vložení obrázku na stránku bývá často potřebné k němu uvést nějaký popis.

Atribut alt

Jedno z míst, kam je možné umístit popis obrázku, je HTML atribut alt. Zásadní jeho nevýhoda ale je, že jeho obsah není standardně viditelný.

<img src="obrazek.jpg" alt="popisek obrázku">

Smysl má tak hlavně pro roboty vyhledávačů.

Nevidomí návštěvníci

Atribut alt může zlepšit zážitek ze stránky nevidomým návštěvníkům, kteří používají hlasové čtečky.

Pro takové návštěvníky by obrázek:

  1. měl mít alt vyplněný, jinak na obrázek čtečka neupozorní,
  2. neobsahovat totéž, co viditelný popisek – jedná se o duplicitní informaci
  • Pes Ben – co slyší nevidomý u různých způsobů popisu obrázků

Z praktického hlediska je ale tvorba správných popisků často nemožná/nerentabilní – například popisovat stovky obrázků v galerii.

HTML kód pro popisek

Aby si běžný návštěvník mohl popis obrázku přečíst, je ho nutné vložit přímo do HTML.

Značka <figure>

HTML 5 přišlo se značkami <figure> a <figcaption>, které se mimo jiné hodí k obalení obrázku a jeho popisu. Obě značky jsou blokové a <figure> má výchozí margin.

<figure>
    <img src='obrazek.jpg' alt='obrázek'>
    <figcaption>Popis obrázku</figcaption>
</figure>

Ukázka

Jediná nevýhoda je absence podpory v IE8 a starších, kterou je kvůli stylování nutné doplnit skriptem.

Odstavec

Asi nejjednodušší možná varianta je prosté použití odstavce.

<p>
    <img src='obrazek.jpg' alt='obrázek'>
    <br>
    Popis obrázku
</p>

Tento HTML kód ale nedává moc prostoru k pohodlnému stylování, takže v případě, že je obtížné formát výsledného kódu obrázku s popiskem hromadně měnit, bude lepší navrhnout HTML ve stylu <figure> a <figcaption>.

Odkaz

Pro zobrazení miniatury obrázku s popisem, která bude odkazovat na velký obrázek, by mohl HTML kód vypadat následovně:

<a href="velky-obrazek.jpg">
  <img src="maly-obrazek.jpg" alt="obrazek">
  <div class="popisek">Popis obrázku</div>
</a>

Odkazy jinam

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Doctype

HTML značka <!doctype>

Jaký (a jestli vůbec) psát <!doctype> do stránky?

HTML atribut scoped

HTML atribut scoped

HTML 5.1 přichází s možností validně používat element <style> i mimo část <head>.

Rozbalovací nabídka <select>

HTML značka <select>

Popis, možnosti a vylepšení rozbalovacího výběru, HTML značky <select>.

HTML Imports

HTML Imports

HTML importy umožňují připojit/vložit do stránky jiný HTML dokument.

Převod inline CSS na externí

Převod CSS v HTML na externí styly

Jak z HTML vybrat id, třídy a inline styly a vytvořit z nich CSS předpis do externího souboru.

Komentáře