Znacznik <img> w HTML

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

Znacznik <img> w HTML

Znacznik <img> służy do wstawiania obrazów na stronę internetową. Można za jego pomocą wyświetlić pliki graficzne, np. JPG/JPEG, PNG, GIF, SVG lub WebP.

Najważniejsze: w HTML obrazek dodaje się znacznikiem <img>, a nie nazwą formatu pliku. Dlatego poprawny zapis dla pliku JPG wykorzystuje <img>, np.:

<img src="zdjecie.jpg" alt="Opis zdjęcia">

Najważniejsze atrybuty

  • src - ścieżka do pliku graficznego, np. obraz.jpg, img/logo.png
  • alt - tekst alternatywny wyświetlany, gdy obraz nie może zostać załadowany; ważny dla dostępności
  • width - szerokość obrazu
  • height - wysokość obrazu

Przykład z rozmiarem:

<img src="baner.jpg" alt="Baner strony" width="600" height="200">

Cechy znacznika <img>

Znacznik <img> jest elementem pustym, czyli nie ma osobnego znacznika zamykającego:

<!-- poprawnie -->
<img src="logo.jpg" alt="Logo firmy">

<!-- błędnie traktowane w HTML jako niepotrzebne -->
<img src="logo.jpg"></img>

Typowy błąd egzaminacyjny

Nie należy używać znacznika <jpg> ani <src>. jpg to format pliku graficznego, a src to tylko atrybut znacznika <img>.

Poprawna konstrukcja to:

<img src="plik.jpg" alt="Opis obrazka">