Poprawnie – znacznik <img> w HTML służy do osadzania obrazu (grafiki) na stronie internetowej. Jest to tzw. element pusty, czyli nie ma znacznika zamykającego, a całe jego działanie opiera się głównie na atrybutach. Kluczowy jest atrybut src, w którym podajemy adres pliku graficznego, np. JPG, PNG, GIF, SVG: <img src="logo.png" alt="Logo firmy">. Równie ważny jest atrybut alt – opis alternatywny. To nie jest ozdoba, tylko dobra praktyka i wymóg dostępności (WCAG). Tekst z alt jest czytany przez czytniki ekranu dla osób niewidomych, wyświetla się też, gdy obraz się nie załaduje. Z mojego doświadczenia w projektach webowych brak sensownych opisów alt jest jednym z częstszych błędów początkujących. W praktyce <img> wykorzystuje się do logotypów, zdjęć produktów w sklepie internetowym, ikon, banerów, miniaturek artykułów czy wykresów zapisanych jako grafika. W nowoczesnych projektach warto stosować też atrybut loading="lazy" do leniwego ładowania obrazów oraz srcset i sizes, żeby serwować różne rozdzielczości grafiki na różne urządzenia (responsywne obrazy zgodne ze standardem HTML Living Standard). Dzięki temu strona działa szybciej i jest lepiej zoptymalizowana pod SEO. Moim zdaniem dobrze opanowany znacznik <img> to absolutna podstawa dla każdego, kto na serio myśli o front-endzie i profesjonalnym tworzeniu stron www.
Znacznik <img> w HTML jest bardzo konkretnym narzędziem: służy wyłącznie do osadzania obrazów rastrowych lub wektorowych zapisanych w plikach graficznych, takich jak JPG, PNG, GIF czy SVG. Częsty błąd polega na wrzucaniu do jednego worka wszystkich multimediów i zakładaniu, że skoro coś jest „wstawiane” na stronę, to pewnie używa się tego samego znacznika. To niestety tak nie działa. Tabele w HTML obsługiwane są przez zestaw znaczników <table>, <tr>, <td>, <th> i kilku innych pomocniczych. Mają swoją własną strukturę i semantykę, zupełnie inną niż element graficzny. Gdyby ktoś próbował użyć <img> do tabeli, skończyłoby się to co najwyżej wstawieniem obrazka z tabelą zapisanej wcześniej jako grafika, co jest bardzo złym pomysłem pod kątem dostępności, wyszukiwarek i późniejszej edycji. Podobnie sprawa wygląda z filmem. Do osadzania wideo służy znacznik <video> z atrybutem src lub zagnieżdżonymi <source>. Daje on kontrolę nad odtwarzaniem, paskiem postępu, głośnością i integruje się z natywnymi odtwarzaczami przeglądarek. Używanie <img> do filmu byłoby po prostu technicznie niemożliwe, bo ten element w ogóle nie obsługuje strumienia wideo ani kodeków. Dźwięk ma jeszcze inny mechanizm – w HTML5 wprowadzono znacznik <audio>, również z <source>, który jest przeznaczony do odtwarzania plików MP3, OGG czy WAV. Tu też nie ma żadnego powiązania z <img>, poza tym że oba są elementami multimedialnymi w szerokim sensie. Typowy błąd myślowy polega na utożsamianiu „multimediów” z jednym uniwersalnym tagiem, zamiast zrozumienia, że HTML jest semantyczny: każdy rodzaj treści ma swój własny, wyspecjalizowany znacznik. <img> to obrazy, <video> to wideo, <audio> to dźwięk, a struktury danych jak tabele mają jeszcze inne, dedykowane elementy. Znajomość tego podziału jest kluczowa, bo wpływa na poprawność kodu, dostępność, SEO oraz zgodność ze standardami W3C i dobrymi praktykami front-endowymi.