Autor publikacji
Virtual Patriot - Administrator

img

Data publikacji
Ostatnio edytowano

Przeznaczenie elementu img

Element img reprezentuje zasób internetowy w postaci pliku graficznego typu .png, .jpg, .jpeg, .bmp, .gif, .svg, .apng, .ico, .cur lub .webp.

Dodatkowe artykuły związane z elementem img

Informacje techniczne o elemencie img

kategoria ogólna
kontekst zewnętrzny

element HTML, który tworzy wewnętrzny kontekst wbudowany

Przykładowy Kod HTML

<figure>
  <figcaption>Mój ulubiony owoc</figcaption>
  <img src="owoc-01.png" alt="zdjęcie czereśni">
</figure>

Kontekstem zewnętrznym przykładowego elementu "img" jest element "figure". Wspomniany element "figure" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst wbudowany, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "figure", jest prawidłowym kontekstem zewnętrznym dla elementu "img".

kontekst wewnętrzny

brak

wymagane elementy dzieci

brak

wymagane atrybuty
zdolność fallback

nie dotyczy

składnia HTML

<img>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

zawsze

CSS display

  • inline-block (jeżeli zasób internetowy reprezentowany przez element img został poprawnie dołączony do dokumentu HTML)

  • inline (jeżeli zasób internetowy reprezentowany przez element img nie został poprawnie dołączony do dokumentu HTML)

Przypuszczalnie domyślne reguły CSS elementu img

/* pierwsza reguła CSS, jeżeli zasób internetowy reprezentowany przez element "img" został poprawnie dołączony do dokumentu HTML */

img {
  display:inline-block;
}

img[usemap] {
  color:#00F;
}

Interpretacja elementu img

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Interpretuje atrybut crossorigin, lecz od wersji "11".

Nie interpretuje atrybutu referrerpolicy, sizes oraz srcset.

Edge

tak

Opis atrybutów elementu img

Atrybut Lokalny

alt

Przeznaczenie atrybutu alt

Atrybut alt wykorzystany wraz z elementem img pozwala nam określić treść alternatywną (zamienną) w postaci tekstu, który powinien pojawić się w miejsce obrazka reprezentowanego przez dany element img, w sytuacji gdy z jakiegoś powodu docelowy obrazek nie będzie mógł zostać obsłużony przez przeglądarkę internetową.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu alt

tekst

Należy podać ciąg znaków, który chcemy, aby został wykorzystany przez przeglądarkę internetową do określenia interesującej nas treści alternatywnej w postaci tekstu.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <img src="https://webkod.pl/files/html/zwierze-1.png" alt="zdjęcie lwa">

  </body>
</html>

Rezultat

zdjęcie lwa

Treścią alternatywną nieistniejącego obrazka "zwierze-1.png" reprezentowanego przez przykładowy element "img" jest treść alternatywna w postaci tekstu "zdjęcie lwa", ponieważ do wspomnianego elementu "img" został dodany atrybut "alt" wraz z wartością "zdjęcie lwa".

Atrybut Lokalny

crossorigin

Przeznaczenie atrybutu crossorigin

Atrybut crossorigin wykorzystany wraz z elementem img pozwala nam określić, w jaki sposób dany element img reprezentujący zasób internetowy ma reagować na mechanizm umożliwiający wymienianie się zasobami internetowymi pomiędzy serwerami znajdującymi się w różnych domenach (tzw. CORS, czyli Cross-Origin Resource Sharing).

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

anonymous (gdy nie podaliśmy wartości)

anonymous (gdy podaliśmy wartość nieprawidłową)

Wartości atrybutu crossorigin

anonymous

Wartość anonymous oznacza, że nie jest wymagane potwierdzenie tożsamości użytkownika.

use-credentials

Wartość use-credentials oznacza, że jest wymagane potwierdzenie tożsamości użytkownika, np. za pomocą COOKIES (tzw. ciasteczka), za pomocą certyfikatu SSL po stronie klienta lub za pomocą uwierzytelnienia HTTP.

Atrybut Lokalny

height

Przeznaczenie atrybutu height

Atrybut height wykorzystany wraz z elementem img pozwala nam określić wartość wysokości, jaką powinien posiadać dany element img.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu height

liczba

Należy podać nieujemną liczbę całkowitą.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <img src="https://webkod.pl/files/html/zwierze-01.png" height="150" alt="zdjęcie lwa">

  </body>
</html>

Rezultat

zdjęcie lwa

Wartość wysokości przykładowego elementu "img" wynosi "150" pikseli, ponieważ do wspomnianego elementu "img" został dodany atrybut "height" wraz z wartością "150".

Atrybut Lokalny

ismap

Przeznaczenie atrybutu ismap

Atrybut ismap wykorzystany wraz z elementem img pozwala nam określić czy informacja o współrzędnych kliknięcia na obrazek reprezentowany przez dany element img powinna zostać dołączona do adresu URL.

Atrybut "ismap" ma sens tylko wtedy gdy dany element "img" jest elementem potomkiem elementu a, który posiada atrybut href.

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

wartość pusta (gdy nie podaliśmy wartości)

Wartości atrybutu ismap

ismap

Atrybut ismap jest atrybutem logicznym elementu img.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <p>
      <a href="#wspolrzedne">
        <img src="https://webkod.pl/files/html/zwierze-01.png" alt="obrazek reprezentujący mapę współrzędnych" ismap>
      </a>
    </p>

  </body>
</html>

Rezultat

W sytuacji gdy użytkownik zdecyduje się na kliknięcie na obrazek "zwierze-01.png" reprezentowany przez przykładowy element "img", informacja o współrzędnych kliknięcia na obrazek "zwierze-01.png" zostanie dołączona do adresu URL posiadanego przez element "a", który jest elementem przodkiem przykładowego elementu "img", ponieważ do wspomnianego elementu "img" został dodany atrybut "ismap".

Atrybut Lokalny

longdesc

Przeznaczenie atrybutu longdesc

Atrybut longdesc wykorzystany wraz z elementem img pozwala nam określić adres zasobu internetowego, z którego można dowiedzieć się w szczegółach o tym, co przedstawia obrazek reprezentowany przez dany element img.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu longdesc

URL

Należy podać niepusty ciąg znaków w formie adresu URL.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <img src="https://webkod.pl/files/html/rotate-45deg.png" longdesc="https://webkod.pl/files/html/przeksztalcenia-2d.html#rotate-45deg" alt="rotate(45deg)">

  </body>
</html>

Rezultat

rotate(45deg)

Sugerowanym dla przeglądarki internetowej adresem zasobu internetowego, z którego można dowiedzieć się w szczegółach o tym, co przedstawia obrazek "rotate-45deg.png" reprezentowany przez przykładowy element "img", jest adres "https://webkod.pl/files/html/przeksztalcenia-2d.html#rotate-45deg", ponieważ do wspomnianego elementu "img" został dodany atrybut "longdesc" wraz z wartością "https://webkod.pl/files/html/przeksztalcenia-2d.html#rotate-45deg".

Atrybut Lokalny

referrerpolicy

Przeznaczenie atrybutu referrerpolicy

Atrybut referrerpolicy wykorzystany wraz z elementem img pozwala nam określić, jakie składniki adresu danego dokumentu HTML może posiadać informacja, która zostanie przekazana przez przeglądarkę internetową do serwera, na którym znajduje się obrazek reprezentowany przez dany element img.

Mowa tu o takich składnikach adresu danego dokumentu HTML jak:

  • typ protokołu (np. https)
  • nazwa serwera (np. www.webkod.pl)
  • numer portu (np. 8080)
  • ścieżka do pliku (np. pliki/obrazki/lew.png)
  • zapytanie (np. ?imie=jan&nazwisko=kowalski)

Docelowe przekazanie informacji o adresie danego dokumentu HTML odbywa się za pomocą nagłówka referer w momencie próby rozpoczęcia pobierania przez przeglądarkę internetową obrazka reprezentowanego przez dany element img.

Wartość domyślna

no-referrer-when-downgrade (w każdej sytuacji) lub wartość atrybutu content elementu meta posiadającego atrybut name o wartości referrer, jeżeli taki element meta znajduje się w zawartości danego dokumentu HTML

Wartości atrybutu referrerpolicy

no-referrer

Wartość no-referrer oznacza, że informacja o adresie danego dokumentu HTML nie będzie przekazywana do docelowego serwera.

Adres Bieżący (Dokument HTML) Adres Docelowy (Serwer) Rezultat (Referrer)
http http http ⟶ http
http://abc.pl/plik-strony http://xyz.pl/obazek -
http://abc.pl/plik-strony http://abc.pl/inny-obrazek -
http://abc.pl/plik-strony?x=8 http://xyz.pl/obazek -
http://abc.pl/plik-strony?x=8 http://abc.pl/inny-obrazek -
https https https ⟶ https
https://abc.pl/plik-strony https://xyz.pl/obazek -
https://abc.pl/plik-strony https://abc.pl/inny-obrazek -
https://abc.pl/plik-strony?x=8 https://xyz.pl/obazek -
https://abc.pl/plik-strony?x=8 https://abc.pl/inny-obrazek -
http https http ⟶ https
http://abc.pl/plik-strony https://xyz.pl/obazek -
http://abc.pl/plik-strony https://abc.pl/inny-obrazek -
http://abc.pl/plik-strony?x=8 https://xyz.pl/obazek -
http://abc.pl/plik-strony?x=8 https://abc.pl/inny-obrazek -
https http https ⟶ http
https://abc.pl/plik-strony http://xyz.pl/obazek -
https://abc.pl/plik-strony http://abc.pl/inny-obrazek -
https://abc.pl/plik-strony?x=8 http://xyz.pl/obazek -
https://abc.pl/plik-strony?x=8 http://abc.pl/inny-obrazek -

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <img src="http://inna-strona.pl/inny-obrazek" referrerpolicy="no-referrer" alt="obrazek">

  </body>
</html>

W momencie próby rozpoczęcia pobierania przez przeglądarkę internetową obrazka "inny-obrazek" reprezentowanego przez przykładowy element "img", który znajduje się w zawartości dokumentu HTML, którego adresem jest adres "http://moja-strona.pl/plik-strony", do serwera o nazwie "http://inna-strona.pl", na którym znajduje się obrazek "inny-obrazek", nie zostanie przekazana żadna informacja o adresie "http://moja-strona.pl/plik-strony" dokumentu HTML, ponieważ do wspomnianego elementu "img" został dodany atrybut "referrerpolicy" wraz z wartością "no-referrer".

no-referrer-when-downgrade

Wartość no-referrer-when-downgrade oznacza, że informacja o adresie danego dokumentu HTML, jaka zostanie przekazana do docelowego serwera, będzie mogła posiadać: typ protokołu, nazwę serwera, numer portu, ścieżkę do pliku oraz zapytanie.

W sytuacji gdy adres danego dokumentu HTML posiada bardziej bezpieczny typ protokołu (np. https), a adres obrazka reprezentowanego przez dany element img posiada mniej bezpieczny typ protokołu (np. http), wtedy informacja o adresie danego dokumentu HTML nie będzie przekazywana do docelowego serwera.

Adres Bieżący (Dokument HTML) Adres Docelowy (Serwer) Rezultat (Referrer)
http http http ⟶ http
http://abc.pl/plik-strony http://xyz.pl/obazek http://abc.pl/plik-strony
http://abc.pl/plik-strony http://abc.pl/inny-obrazek http://abc.pl/plik-strony
http://abc.pl/plik-strony?x=8 http://xyz.pl/obazek http://abc.pl/plik-strony?x=8
http://abc.pl/plik-strony?x=8 http://abc.pl/inny-obrazek http://abc.pl/plik-strony?x=8
https https https ⟶ https
https://abc.pl/plik-strony https://xyz.pl/obazek https://abc.pl/plik-strony
https://abc.pl/plik-strony https://abc.pl/inny-obrazek https://abc.pl/plik-strony
https://abc.pl/plik-strony?x=8 https://xyz.pl/obazek https://abc.pl/plik-strony?x=8
https://abc.pl/plik-strony?x=8 https://abc.pl/inny-obrazek https://abc.pl/plik-strony?x=8
http https http ⟶ https
http://abc.pl/plik-strony https://xyz.pl/obazek http://abc.pl/plik-strony
http://abc.pl/plik-strony https://abc.pl/inny-obrazek http://abc.pl/plik-strony
http://abc.pl/plik-strony?x=8 https://xyz.pl/obazek http://abc.pl/plik-strony?x=8
http://abc.pl/plik-strony?x=8 https://abc.pl/inny-obrazek http://abc.pl/plik-strony?x=8
https http https ⟶ http
https://abc.pl/plik-strony http://xyz.pl/obazek -
https://abc.pl/plik-strony http://abc.pl/inny-obrazek -
https://abc.pl/plik-strony?x=8 http://xyz.pl/obazek -
https://abc.pl/plik-strony?x=8 http://abc.pl/inny-obrazek -

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <img src="http://inna-strona.pl/inny-obrazek" referrerpolicy="no-referrer-when-downgrade" alt="obrazek">

  </body>
</html>

W momencie próby rozpoczęcia pobierania przez przeglądarkę internetową obrazka "inny-obrazek" reprezentowanego przez przykładowy element "img", który znajduje się w zawartości dokumentu HTML, którego adresem jest adres "https://moja-strona.pl/plik-strony?x=8", do serwera o nazwie "http://inna-strona.pl", na którym znajduje się obrazek "inny-obrazek", nie zostanie przekazana żadna informacja o adresie "https://moja-strona.pl/plik-strony?x=8" dokumentu HTML, ponieważ do wspomnianego elementu "img" został dodany atrybut "referrerpolicy" wraz z wartością "no-referrer-when-downgrade".

origin

Wartość origin oznacza, że informacja o adresie danego dokumentu HTML, jaka zostanie przekazana do docelowego serwera, będzie mogła posiadać jedynie: typ protokołu, nazwę serwera oraz numer portu.

Adres Bieżący (Dokument HTML) Adres Docelowy (Serwer) Rezultat (Referrer)
http http http ⟶ http
http://abc.pl/plik-strony http://xyz.pl/obazek http://abc.pl/
http://abc.pl/plik-strony http://abc.pl/inny-obrazek http://abc.pl/
http://abc.pl/plik-strony?x=8 http://xyz.pl/obazek http://abc.pl/
http://abc.pl/plik-strony?x=8 http://abc.pl/inny-obrazek http://abc.pl/
https https https ⟶ https
https://abc.pl/plik-strony https://xyz.pl/obazek https://abc.pl/
https://abc.pl/plik-strony https://abc.pl/inny-obrazek https://abc.pl/
https://abc.pl/plik-strony?x=8 https://xyz.pl/obazek https://abc.pl/
https://abc.pl/plik-strony?x=8 https://abc.pl/inny-obrazek https://abc.pl/
http https http ⟶ https
http://abc.pl/plik-strony https://xyz.pl/obazek http://abc.pl/
http://abc.pl/plik-strony https://abc.pl/inny-obrazek http://abc.pl/
http://abc.pl/plik-strony?x=8 https://xyz.pl/obazek http://abc.pl/
http://abc.pl/plik-strony?x=8 https://abc.pl/inny-obrazek http://abc.pl/
https http https ⟶ http
https://abc.pl/plik-strony http://xyz.pl/obazek https://abc.pl/
https://abc.pl/plik-strony http://abc.pl/inny-obrazek https://abc.pl/
https://abc.pl/plik-strony?x=8 http://xyz.pl/obazek https://abc.pl/
https://abc.pl/plik-strony?x=8 http://abc.pl/inny-obrazek https://abc.pl/

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <img src="http://inna-strona.pl/inny-obrazek" referrerpolicy="origin" alt="obrazek">

  </body>
</html>

W momencie próby rozpoczęcia pobierania przez przeglądarkę internetową obrazka "inny-obrazek" reprezentowanego przez przykładowy element "img", który znajduje się w zawartości dokumentu HTML, którego adresem jest adres "http://moja-strona.pl/plik-strony?x=8", do serwera o nazwie "http://inna-strona.pl", na którym znajduje się obrazek "inny-obrazek", zostanie przekazana informacja w postaci ciągu znaków "http://moja-strona.pl/", ponieważ do wspomnianego elementu "img" został dodany atrybut "referrerpolicy" wraz z wartością "origin".

origin-when-cross-origin

Wartość origin-when-cross-origin oznacza, że informacja o adresie danego dokumentu HTML, jaka zostanie przekazana do docelowego serwera, będzie mogła posiadać: typ protokołu, nazwę serwera, numer portu, ścieżkę do pliku oraz zapytanie, lecz tylko wtedy gdy adres danego dokumentu HTML oraz adres obrazka reprezentowanego przez dany element img będą posiadały ten sam typ protokołu, nazwę serwera oraz numer portu, w przeciwnym przypadku informacja o adresie danego dokumentu HTML, jaka zostanie przekazana do docelowego serwera, będzie mogła posiadać jedynie: typ protokołu, nazwę serwera oraz numer portu.

Adres Bieżący (Dokument HTML) Adres Docelowy (Serwer) Rezultat (Referrer)
http http http ⟶ http
http://abc.pl/plik-strony http://xyz.pl/obazek http://abc.pl/
http://abc.pl/plik-strony http://abc.pl/inny-obrazek http://abc.pl/plik-strony
http://abc.pl/plik-strony?x=8 http://xyz.pl/obazek http://abc.pl/
http://abc.pl/plik-strony?x=8 http://abc.pl/inny-obrazek http://abc.pl/plik-strony?x=8
https https https ⟶ https
https://abc.pl/plik-strony https://xyz.pl/obazek https://abc.pl/
https://abc.pl/plik-strony https://abc.pl/inny-obrazek https://abc.pl/plik-strony
https://abc.pl/plik-strony?x=8 https://xyz.pl/obazek https://abc.pl/
https://abc.pl/plik-strony?x=8 https://abc.pl/inny-obrazek https://abc.pl/plik-strony?x=8
http https http ⟶ https
http://abc.pl/plik-strony https://xyz.pl/obazek http://abc.pl/
http://abc.pl/plik-strony https://abc.pl/inny-obrazek http://abc.pl/
http://abc.pl/plik-strony?x=8 https://xyz.pl/obazek http://abc.pl/
http://abc.pl/plik-strony?x=8 https://abc.pl/inny-obrazek http://abc.pl/
https http https ⟶ http
https://abc.pl/plik-strony http://xyz.pl/obazek https://abc.pl/
https://abc.pl/plik-strony http://abc.pl/inny-obrazek https://abc.pl/
https://abc.pl/plik-strony?x=8 http://xyz.pl/obazek https://abc.pl/
https://abc.pl/plik-strony?x=8 http://abc.pl/inny-obrazek https://abc.pl/

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <img src="https://moja-strona.pl/moj-obrazek" referrerpolicy="origin-when-cross-origin" alt="obrazek">

  </body>
</html>

W momencie próby rozpoczęcia pobierania przez przeglądarkę internetową obrazka "moj-obrazek" reprezentowanego przez przykładowy element "img", który znajduje się w zawartości dokumentu HTML, którego adresem jest adres "http://moja-strona.pl/plik-strony?x=8", do serwera o nazwie "https://moja-strona.pl", na którym znajduje się obrazek "moj-obrazek", zostanie przekazana informacja w postaci ciągu znaków "http://moja-strona.pl/", ponieważ do wspomnianego elementu "img" został dodany atrybut "referrerpolicy" wraz z wartością "origin-when-cross-origin".

same-origin

Wartość same-origin oznacza, że informacja o adresie danego dokumentu HTML, jaka zostanie przekazana do docelowego serwera, będzie mogła posiadać: typ protokołu, nazwę serwera, numer portu, ścieżkę do pliku oraz zapytanie.

W sytuacji gdy adres danego dokumentu HTML oraz adres obrazka reprezentowanego przez dany element img nie będą posiadały tego samego typu protokołu, nazwy serwera oraz numeru portu, wtedy informacja o adresie danego dokumentu HTML nie będzie przekazywana do docelowego serwera.

Adres Bieżący (Dokument HTML) Adres Docelowy (Serwer) Rezultat (Referrer)
http http http ⟶ http
http://abc.pl/plik-strony http://xyz.pl/obazek -
http://abc.pl/plik-strony http://abc.pl/inny-obrazek http://abc.pl/plik-strony
http://abc.pl/plik-strony?x=8 http://xyz.pl/obazek -
http://abc.pl/plik-strony?x=8 http://abc.pl/inny-obrazek http://abc.pl/plik-strony?x=8
https https https ⟶ https
https://abc.pl/plik-strony https://xyz.pl/obazek -
https://abc.pl/plik-strony https://abc.pl/inny-obrazek https://abc.pl/plik-strony
https://abc.pl/plik-strony?x=8 https://xyz.pl/obazek -
https://abc.pl/plik-strony?x=8 https://abc.pl/inny-obrazek https://abc.pl/plik-strony?x=8
http https http ⟶ https
http://abc.pl/plik-strony https://xyz.pl/obazek -
http://abc.pl/plik-strony https://abc.pl/inny-obrazek -
http://abc.pl/plik-strony?x=8 https://xyz.pl/obazek -
http://abc.pl/plik-strony?x=8 https://abc.pl/inny-obrazek -
https http https ⟶ http
https://abc.pl/plik-strony http://xyz.pl/obazek -
https://abc.pl/plik-strony http://abc.pl/inny-obrazek -
https://abc.pl/plik-strony?x=8 http://xyz.pl/obazek -
https://abc.pl/plik-strony?x=8 http://abc.pl/inny-obrazek -

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <img src="https://moja-strona.pl/moj-obrazek" referrerpolicy="same-origin" alt="obrazek">

  </body>
</html>

W momencie próby rozpoczęcia pobierania przez przeglądarkę internetową obrazka "moj-obrazek" reprezentowanego przez przykładowy element "img", który znajduje się w zawartości dokumentu HTML, którego adresem jest adres "https://moja-strona.pl/plik-strony?x=8", do serwera o nazwie "https://moja-strona.pl", na którym znajduje się obrazek "moj-obrazek", zostanie przekazana informacja w postaci ciągu znaków "https://moja-strona.pl/plik-strony?x=8", ponieważ do wspomnianego elementu "img" został dodany atrybut "referrerpolicy" wraz z wartością "same-origin".

strict-origin

Wartość strict-origin oznacza, że informacja o adresie danego dokumentu HTML, jaka zostanie przekazana do docelowego serwera, będzie mogła posiadać jedynie: typ protokołu, nazwę serwera oraz numer portu.

W sytuacji gdy adres danego dokumentu HTML posiada bezpieczny typ protokołu (np. https), a adres obrazka reprezentowanego przez dany element img posiada mniej bezpieczny typ protokołu (np. http), wtedy informacja o adresie danego dokumentu HTML nie będzie przekazywana do docelowego serwera.

Adres Bieżący (Dokument HTML) Adres Docelowy (Serwer) Rezultat (Referrer)
http http http ⟶ http
http://abc.pl/plik-strony http://xyz.pl/obazek http://abc.pl/
http://abc.pl/plik-strony http://abc.pl/inny-obrazek http://abc.pl/
http://abc.pl/plik-strony?x=8 http://xyz.pl/obazek http://abc.pl/
http://abc.pl/plik-strony?x=8 http://abc.pl/inny-obrazek http://abc.pl/
https https https ⟶ https
https://abc.pl/plik-strony https://xyz.pl/obazek https://abc.pl/
https://abc.pl/plik-strony https://abc.pl/inny-obrazek https://abc.pl/
https://abc.pl/plik-strony?x=8 https://xyz.pl/obazek https://abc.pl/
https://abc.pl/plik-strony?x=8 https://abc.pl/inny-obrazek https://abc.pl/
http https http ⟶ https
http://abc.pl/plik-strony https://xyz.pl/obazek http://abc.pl/
http://abc.pl/plik-strony https://abc.pl/inny-obrazek http://abc.pl/
http://abc.pl/plik-strony?x=8 https://xyz.pl/obazek http://abc.pl/
http://abc.pl/plik-strony?x=8 https://abc.pl/inny-obrazek http://abc.pl/
https http https ⟶ http
https://abc.pl/plik-strony http://xyz.pl/obazek -
https://abc.pl/plik-strony http://abc.pl/inny-obrazek -
https://abc.pl/plik-strony?x=8 http://xyz.pl/obazek -
https://abc.pl/plik-strony?x=8 http://abc.pl/inny-obrazek -

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <img src="http://inna-strona.pl/inny-obrazek" referrerpolicy="strict-origin" alt="obrazek">

  </body>
</html>

W momencie próby rozpoczęcia pobierania przez przeglądarkę internetową obrazka "inny-obrazek" reprezentowanego przez przykładowy element "img", który znajduje się w zawartości dokumentu HTML, którego adresem jest adres "http://moja-strona.pl/plik-strony?x=8", do serwera o nazwie "http://inna-strona.pl", na którym znajduje się obrazek "inny-obrazek", zostanie przekazana informacja w postaci ciągu znaków "http://moja-strona.pl/", ponieważ do wspomnianego elementu "img" został dodany atrybut "referrerpolicy" wraz z wartością "strict-origin".

strict-origin-when-cross-origin

Wartość strict-origin-when-cross-origin oznacza, że informacja o adresie danego dokumentu HTML, jaka zostanie przekazana do docelowego serwera, będzie mogła posiadać: typ protokołu, nazwę serwera, numer portu, ścieżkę do pliku oraz zapytanie, lecz tylko wtedy gdy adres danego dokumentu HTML oraz adres obrazka reprezentowanego przez dany element img będą posiadały ten sam typ protokołu, nazwę serwera oraz numer portu, w przeciwnym przypadku informacja o adresie danego dokumentu HTML, jaka zostanie przekazana do docelowego serwera, będzie mogła posiadać jedynie: typ protokołu, nazwę serwera oraz numer portu.

W sytuacji gdy adres danego dokumentu HTML posiada bezpieczny typ protokołu (np. https), a adres obrazka reprezentowanego przez dany element img posiada mniej bezpieczny typ protokołu (np. http), wtedy informacja o adresie danego dokumentu HTML nie będzie przekazywana do docelowego serwera.

Adres Bieżący (Dokument HTML) Adres Docelowy (Serwer) Rezultat (Referrer)
http http http ⟶ http
http://abc.pl/plik-strony http://xyz.pl/obazek http://abc.pl/
http://abc.pl/plik-strony http://abc.pl/inny-obrazek http://abc.pl/plik-strony
http://abc.pl/plik-strony?x=8 http://xyz.pl/obazek http://abc.pl/
http://abc.pl/plik-strony?x=8 http://abc.pl/inny-obrazek http://abc.pl/plik-strony?x=8
https https https ⟶ https
https://abc.pl/plik-strony https://xyz.pl/obazek https://abc.pl/
https://abc.pl/plik-strony https://abc.pl/inny-obrazek https://abc.pl/plik-strony
https://abc.pl/plik-strony?x=8 https://xyz.pl/obazek https://abc.pl/
https://abc.pl/plik-strony?x=8 https://abc.pl/inny-obrazek https://abc.pl/plik-strony?x=8
http https http ⟶ https
http://abc.pl/plik-strony https://xyz.pl/obazek http://abc.pl/
http://abc.pl/plik-strony https://abc.pl/inny-obrazek http://abc.pl/
http://abc.pl/plik-strony?x=8 https://xyz.pl/obazek http://abc.pl/
http://abc.pl/plik-strony?x=8 https://abc.pl/inny-obrazek http://abc.pl/
https http https ⟶ http
https://abc.pl/plik-strony http://xyz.pl/obazek -
https://abc.pl/plik-strony http://abc.pl/inny-obrazek -
https://abc.pl/plik-strony?x=8 http://xyz.pl/obazek -
https://abc.pl/plik-strony?x=8 http://abc.pl/inny-obrazek -

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <img src="http://moja-strona.pl/moj-obrazek" referrerpolicy="strict-origin-when-cross-origin" alt="obrazek">

  </body>
</html>

W momencie próby rozpoczęcia pobierania przez przeglądarkę internetową obrazka "moj-obrazek" reprezentowanego przez przykładowy element "img", który znajduje się w zawartości dokumentu HTML, którego adresem jest adres "http://moja-strona.pl/plik-strony?x=8", do serwera o nazwie "http://moja-strona.pl", na którym znajduje się obrazek "moj-obrazek", zostanie przekazana informacja w postaci ciągu znaków "http://moja-strona.pl/plik-strony?x=8", ponieważ do wspomnianego elementu "img" został dodany atrybut "referrerpolicy" wraz z wartością "strict-origin-when-cross-origin".

unsafe-url

Wartość unsafe-url oznacza, że informacja o adresie danego dokumentu HTML, jaka zostanie przekazana do docelowego serwera, będzie mogła posiadać: typ protokołu, nazwę serwera, numer portu, ścieżkę do pliku oraz zapytanie.

Adres Bieżący (Dokument HTML) Adres Docelowy (Serwer) Rezultat (Referrer)
http http http ⟶ http
http://abc.pl/plik-strony http://xyz.pl/obazek http://abc.pl/plik-strony
http://abc.pl/plik-strony http://abc.pl/inny-obrazek http://abc.pl/plik-strony
http://abc.pl/plik-strony?x=8 http://xyz.pl/obazek http://abc.pl/plik-strony?x=8
http://abc.pl/plik-strony?x=8 http://abc.pl/inny-obrazek http://abc.pl/plik-strony?x=8
https https https ⟶ https
https://abc.pl/plik-strony https://xyz.pl/obazek https://abc.pl/plik-strony
https://abc.pl/plik-strony https://abc.pl/inny-obrazek https://abc.pl/plik-strony
https://abc.pl/plik-strony?x=8 https://xyz.pl/obazek https://abc.pl/plik-strony?x=8
https://abc.pl/plik-strony?x=8 https://abc.pl/inny-obrazek https://abc.pl/plik-strony?x=8
http https http ⟶ https
http://abc.pl/plik-strony https://xyz.pl/obazek http://abc.pl/plik-strony
http://abc.pl/plik-strony https://abc.pl/inny-obrazek http://abc.pl/plik-strony
http://abc.pl/plik-strony?x=8 https://xyz.pl/obazek http://abc.pl/plik-strony?x=8
http://abc.pl/plik-strony?x=8 https://abc.pl/inny-obrazek http://abc.pl/plik-strony?x=8
https http https ⟶ http
https://abc.pl/plik-strony http://xyz.pl/obazek https://abc.pl/plik-strony
https://abc.pl/plik-strony http://abc.pl/inny-obrazek https://abc.pl/plik-strony
https://abc.pl/plik-strony?x=8 http://xyz.pl/obazek https://abc.pl/plik-strony?x=8
https://abc.pl/plik-strony?x=8 http://abc.pl/inny-obrazek https://abc.pl/plik-strony?x=8

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <img src="http://inna-strona.pl/inny-obrazek" referrerpolicy="unsafe-url" alt="obrazek">

  </body>
</html>

W momencie próby rozpoczęcia pobierania przez przeglądarkę internetową obrazka "inny-obrazek" reprezentowanego przez przykładowy element "img", który znajduje się w zawartości dokumentu HTML, którego adresem jest adres "https://moja-strona.pl/plik-strony?x=8", do serwera o nazwie "http://inna-strona.pl", na którym znajduje się obrazek "inny-obrazek", zostanie przekazana informacja w postaci ciągu znaków "https://moja-strona.pl/plik-strony?x=8", ponieważ do wspomnianego elementu "img" został dodany atrybut "referrerpolicy" wraz z wartością "unsafe-url".

Wartość "unsafe-url" obniża bezpieczeństwo naszej strony internetowej w sytuacji gdy nasza strona internetowa korzysta z zabezpieczenia TLS.

Atrybut Lokalny

sizes

Przeznaczenie atrybutu sizes

Atrybut sizes wykorzystany wraz z elementem img pozwala nam określić wartość szerokości obszaru, jaki powinien zajmować obrazek znajdujący się pod adresem, na który wskazuje wartość atrybutu srcset danego elementu img.

Atrybut "sizes" ma sens tylko wtedy gdy dany element "img" posiada atrybut srcset o wartości wzór: image-url image-width.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu sizes

wzór: media-condition area-width, default-area-width

Według zdefiniowanego wzorca wartości między innymi możemy określić wartość szerokości obszaru, jaki powinien zajmować obrazek znajdujący się pod adresem, na który wskazuje wartość atrybutu srcset danego elementu img.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <img srcset="https://webkod.pl/files/html/image-200x150.png 200w,
                 https://webkod.pl/files/html/image-400x300.png 400w,
                 https://webkod.pl/files/html/image-600x450.png 600w"
         sizes="(max-width:800px) 200px,
                (max-width:1280px) 400px,
                600px"
         src="https://webkod.pl/files/html/image-600x450.png"
         alt="jednokolorowy obrazek">

  </body>
</html>

Rezultat

jednokolorowy obrazek

Na podstawie wartości "(max-width:800px) 200px, (max-width:1280px) 400px, 600px" przeglądarka internetowa może zdecydować o wartości szerokości obszaru, jaki powinien zostać zajęty przez obrazek, na który wskazuje wartość atrybutu "srcset" przykładowego elementu "img", ponieważ do wspomnianego elementu "img" został dodany atrybut "sizes" wraz z wartością "(max-width:800px) 200px, (max-width:1280px) 400px, 600px".

Wyjaśnienie wzorca wartości

Informacje dodatkowe

możemy podać kilka par składników media-condition area-width, każdą kolejną parę składników należy oddzielić od poprzedniej pary dokładnie jednym znakiem przecinka

możemy podać samą wartość składnika default-area-width

Sposób działania

przeglądarka internetowa wybiera wartość jednego składnika area-width

mowa tu o tym składniku area-width, którego warunek określony za pomocą składnika media-condition został w pierwszej kolejności spełniony

w sytuacji gdy żaden warunek określony za pomocą składnika media-condition nie został spełniony, wtedy przeglądarka internetowa wybiera wartość składnika default-area-width

w sytuacji gdy wartość składnika default-area-width nie została przez nas określona, wtedy aktualna wartość szerokości okna przeglądarki internetowej staje się docelową wartością

Przykładowe zapisy
  • (max-width:460px) 400px, 800px
  • (max-width:460px) 400px, (max-width:660px) 600px, 800px
  • (max-width:460px) 400px, (max-width:660px) 600px
  • 800px
media-condition

Składnik media-condition danego wzorca wartości określa warunek, na podstawie którego wartość składnika area-width może stać się docelową wartością określającą wartość szerokości obszaru, jaki powinien zajmować obrazek znajdujący się pod adresem, na który wskazuje wartość atrybutu srcset danego elementu img.

Dostępne wartości

ciąg znaków w formie @media queries, lecz bez podawania typu medium

Wartość domyślna

brak

area-width

Składnik area-width danego wzorca wartości określa wartość szerokości obszaru, jaki powinien zajmować obrazek znajdujący się pod adresem, na który wskazuje wartość atrybutu srcset danego elementu img.

Dostępne wartości

dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną

Wartość domyślna

brak

default-area-width

Składnik default-area-width danego wzorca wartości określa wartość domyślną szerokości obszaru, jaki powinien zajmować obrazek znajdujący się pod adresem, na który wskazuje wartość atrybutu srcset danego elementu img.

Dostępne wartości

dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną

Wartość domyślna

brak

Atrybut Lokalny

src

Przeznaczenie atrybutu src

Atrybut src wykorzystany wraz z elementem img pozwala nam określić adres obrazka, który chcemy, aby był reprezentowany przez dany element img.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu src

URL

Należy podać niepusty ciąg znaków w formie adresu URL.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <img src="https://webkod.pl/files/html/zwierze-01.png" alt="zdjęcie lwa">

  </body>
</html>

Rezultat

zdjęcie lwa

Obrazkiem reprezentowanym przez przykładowy element "img" jest obrazek "zwierze-01.png" znajdujący się pod adresem "https://webkod.pl/files/html/zwierze-01.png", ponieważ do wspomnianego elementu "img" został dodany atrybut "src" wraz z wartością "https://webkod.pl/files/html/zwierze-01.png".

Atrybut Lokalny

srcset

Przeznaczenie atrybutu srcset

Atrybut srcset wykorzystany wraz z elementem img pozwala nam określić adres obrazka, który chcemy, aby był reprezentowany przez dany element img w określonej sytuacji.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu srcset

wzór: image-url image-width

Według zdefiniowanego wzorca wartości między innymi możemy określić adres obrazka, który chcemy, aby był reprezentowany przez dany element img w określonej sytuacji.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <img srcset="https://webkod.pl/files/html/image-200x150.png 200w,
                 https://webkod.pl/files/html/image-400x300.png 400w,
                 https://webkod.pl/files/html/image-600x450.png 600w"
         sizes="(max-width:800px) 200px,
                (max-width:1280px) 400px,
                600px"
         src="https://webkod.pl/files/html/image-600x450.png"
         alt="jednokolorowy obrazek">

  </body>
</html>

Rezultat

jednokolorowy obrazek

Na podstawie wartości "https://webkod.pl/files/html/image-200x150.png 200w, https://webkod.pl/files/html/image-400x300.png 400w, https://webkod.pl/files/html/image-600x450.png 600w" oraz na podstawie wartości "(max-width:800px) 200px, (max-width:1280px) 400px, 600px" przeglądarka internetowa może zdecydować o tym, który obrazek powinien być reprezentowany przez przykładowy element "img", ponieważ do wspomnianego elementu "img" został dodany atrybut "srcset" wraz z wartością "https://webkod.pl/files/html/image-200x150.png 200w, https://webkod.pl/files/html/image-400x300.png 400w, https://webkod.pl/files/html/image-600x450.png 600w" oraz atrybut "sizes" wraz z wartością "(max-width:800px) 200px, (max-width:1280px) 400px, 600px".

Wyjaśnienie wzorca wartości

Informacje dodatkowe

możemy podać kilka par składników image-url image-width, każdą kolejną parę składników należy oddzielić od poprzedniej pary dokładnie jednym znakiem przecinka

wartości składników image-width nie mogą być takie same

Sposób działania

przeglądarka internetowa wybiera wartość jednego składnika image-url

mowa tu o tym składniku image-url, którego wartość składnika image-width jest taka sama, jak docelowa wartość atrybutu sizes wybrana przez przeglądarkę internetową dla danego elementu img

w sytuacji gdy szukana wartość składnika image-width nie istnieje, wtedy brana pod uwagę jest pierwsza w kolejności odszukana wartość składnika image-width, która jest większa od docelowej wartości atrybutu sizes

w sytuacji gdy szukana wartość składnika image-width nadal nie istnieje, wtedy brana pod uwagę jest największa wartość składnika image-width

Przykładowe zapisy
  • image-200x150.png 200w
  • image-200x150.png 200w, image-400x300.png 400w
  • image-200x150.png 200w, image-400x300.png 400w, image-600x450.png 600w
image-url

Składnik image-url danego wzorca wartości określa adres obrazka, który chcemy, aby był reprezentowany przez dany element img w określonej sytuacji.

Dostępne wartości

ciąg znaków w formie adresu URL, który dodatkowo nie może rozpoczynać lub kończyć się znakiem przecinka

Wartość domyślna

brak

image-width

Składnik image-width danego wzorca wartości określa wartość szerokości obrazka znajdującego się pod adresem, na który wskazuje wartość składnika image-url.

Dostępne wartości

dowolna dodatnia liczba całkowita

Sposób podawania

wraz z wybraną wartością należy podać małą literę w

Wartość domyślna

brak

wzór: image-url pixel-density

Według zdefiniowanego wzorca wartości między innymi możemy określić adres obrazka, który chcemy, aby był reprezentowany przez dany element img w określonej sytuacji.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <img srcset="https://webkod.pl/files/html/image-200x150.png 1x,
                 https://webkod.pl/files/html/image-400x300.png 2x,
                 https://webkod.pl/files/html/image-600x450.png 3x"
         src="https://webkod.pl/files/html/image-600x450.png"
         width="200"
         alt="jednokolorowy obrazek">

  </body>
</html>

Rezultat

jednokolorowy obrazek

Na podstawie wartości "https://webkod.pl/files/html/image-200x150.png 1x, https://webkod.pl/files/html/image-400x300.png 2x, https://webkod.pl/files/html/image-600x450.png 3x" przeglądarka internetowa może zdecydować o tym, który obrazek powinien być reprezentowany przez przykładowy element "img", ponieważ do wspomnianego elementu "img" został dodany atrybut "srcset" wraz z wartością "https://webkod.pl/files/html/image-200x150.png 1x, https://webkod.pl/files/html/image-400x300.png 2x, https://webkod.pl/files/html/image-600x450.png 3x".

Wyjaśnienie wzorca wartości

Informacje dodatkowe

możemy podać kilka par składników image-url pixel-density, każdą kolejną parę składników należy oddzielić od poprzedniej pary dokładnie jednym znakiem przecinka

wartości składników pixel-density nie mogą być takie same

wartości dwóch sąsiadujących ze sobą składników image-url muszą być oddzielone od siebie znakiem przecinka oraz przynajmniej jednym białym znakiem (zazwyczaj znakiem spacji) albo przynajmniej jednym białym znakiem (zazwyczaj znakiem spacji) oraz znakiem przecinka

Sposób działania

przeglądarka internetowa wybiera wartość jednego składnika image-url

mowa tu o tym składniku image-url, którego wartość składnika pixel-density jest taka sama, jak wartość zagęszczenia pikseli urządzenia użytkownika

w sytuacji gdy szukana wartość składnika pixel-density nie istnieje, wtedy brana pod uwagę jest pierwsza w kolejności odszukana wartość składnika pixel-density, która jest większa od docelowej wartości zagęszczenia pikseli urządzenia użytkownika

w sytuacji gdy szukana wartość składnika pixel-density nadal nie istnieje, wtedy brana pod uwagę jest największa wartość składnika pixel-density

Przykładowe zapisy
  • image-200x150.png
  • image-200x150.png, image-400x300.png 2x
  • image-200x150.png 1x, image-400x300.png 2x, image-600x450.png 3x
  • image-200x150.png 1x, image-300x225.png 1.5x, image-400x300.png 2x
image-url

Składnik image-url danego wzorca wartości określa adres obrazka, który chcemy, aby był reprezentowany przez dany element img w określonej sytuacji.

Dostępne wartości

ciąg znaków w formie adresu URL, który dodatkowo nie może rozpoczynać lub kończyć się znakiem przecinka

Wartość domyślna

brak

pixel-density

Składnik pixel-density danego wzorca wartości określa wartość zagęszczenia pikseli, na podstawie której przeglądarka internetowa może zdecydować, czy obrazek znajdujący się pod adresem, na który wskazuje wartość składnika image-url, powinien być reprezentowany przez dany element img.

Dostępne wartości

dowolna dodatnia liczba

Sposób podawania

wraz z wybraną wartością należy podać małą literę x

Sens wartości

wartość 1x oznacza zagęszczenie pikseli, w którym na jeden piksel urządzenia użytkownika przypada jeden piksel CSS, dlatego obrazek o rozmiarze 600×300 pikseli CSS po wyświetleniu na ekranie urządzenia użytkownika będzie zajmował obszar o rozmiarze 600×300 pikseli urządzenia użytkownika

wartość 1.5x oznacza zagęszczenie pikseli, w którym na półtora piksele urządzenia użytkownika przypada jeden piksel CSS, dlatego obrazek o rozmiarze 600×300 pikseli CSS po wyświetleniu na ekranie urządzenia użytkownika będzie zajmował obszar o rozmiarze 450×225 pikseli urządzenia użytkownika

wartość 2x oznacza zagęszczenie pikseli, w którym na dwa piksele urządzenia użytkownika przypada jeden piksel CSS, dlatego obrazek o rozmiarze 600×300 pikseli CSS po wyświetleniu na ekranie urządzenia użytkownika będzie zajmował obszar o rozmiarze 300×150 pikseli urządzenia użytkownika

Wartość domyślna

1x

Atrybut Lokalny

usemap

Przeznaczenie atrybutu usemap

Atrybut usemap wykorzystany wraz z elementem img pozwala nam określić informację o tym, która mapa klikalnych obszarów powinna zostać powiązana z danym elementem img.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu usemap

map name

Należy podać wartość atrybutu name interesującego nas elementu map, bezpośrednio po znaku # (HASH).

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <map name="mapa-1">
      <area href="https://webkod.pl/kurs-html/tagi/zawartosc-osadzona/element-audio" shape="poly" coords="19,26,19,130,129,130" alt="opis elementu - audio">
      <area href="https://webkod.pl/kurs-html/tagi/zawartosc-osadzona/element-video" shape="rect" coords="172,23,279,130" alt="opis elementu - video">
      <area href="https://webkod.pl/kurs-html/tagi/zawartosc-osadzona/element-object" shape="circle" coords="74,227,56" alt="opis elementu - object">
      <area href="https://webkod.pl/kurs-html/tagi/zawartosc-osadzona/element-embed" shape="poly" coords="175,171,253,163,209,207,269,188,265,278,231,238,192,278" alt="opis elementu - embed">
    </map>

    <img src="https://webkod.pl/files/html/klikalna-mapa-02.png" usemap="#mapa-1" alt="mapa klikalnych obszarów">

  </body>
</html>

Rezultat

opis elementu - audio opis elementu - video opis elementu - object opis elementu - embed mapa klikalnych obszarów

Mapą klikalnych obszarów, która została powiązana z przykładowym elementem "img", jest mapa klikalnych obszarów reprezentowana przez element "map" posiadający atrybut "name" o wartości "mapa-1", ponieważ do wspomnianego elementu "img" został dodany atrybut "usemap" wraz z wartością "#mapa-1".

Atrybut Lokalny

width

Przeznaczenie atrybutu width

Atrybut width wykorzystany wraz z elementem img pozwala nam określić wartość szerokości, jaką powinien posiadać dany element img.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu width

liczba

Należy podać nieujemną liczbę całkowitą.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <img src="https://webkod.pl/files/html/zwierze-01.png" width="200" alt="zdjęcie lwa">

  </body>
</html>

Rezultat

zdjęcie lwa

Wartość szerokości przykładowego elementu "img" wynosi "200" pikseli, ponieważ do wspomnianego elementu "img" został dodany atrybut "width" wraz z wartością "200".