Jak wstawić obrazek obok tekstu w HTML?

Aby wstawić obrazek obok tekstu w HTML, należy połączyć znacznik <img> z odpowiednim ustawieniem stylów, które określają wzajemne położenie obrazu i tekstu. Można to zrobić na kilka sposobów, które różnią się stopniem zaawansowania, elastycznością oraz zgodnością z nowoczesnymi standardami.

Podstawowa metoda: Atrybut align znacznika <img>

Najprostszą i jednocześnie najstarszą metodą jest skorzystanie z atrybutu align w znaczniku <img>, np. align="left" lub align="right". Dzięki temu tekst będzie owijał obrazek odpowiednio z lewej lub prawej strony.

Przykład:

<img src="obrazek.jpg" alt="Opis obrazka" align="left"> Tu znajduje się tekst, który będzie owijał obrazek z prawej strony. 

• align="left" – obrazek ustawia się po lewej stronie, a tekst płynie obok z prawej,
• align="right" – obrazek po prawej stronie, a tekst pojawia się po lewej.

Uwaga – atrybut align jest przestarzały w nowych wersjach HTML i powinno się unikać jego używania w nowoczesnych projektach. Zamiast tego zalecane są style CSS, które opisano w dalszej części artykułu.

Nowoczesna metoda: CSS – właściwość float

Metoda przy użyciu stylów CSS pozwala na uzyskanie bardziej elastycznych i zgodnych ze standardami efektów. Obraz można „upuścić” na lewo lub prawo, tak aby tekst go opływał.

Przykład:

<img src="obrazek.jpg" alt="Opis obrazka" style="float: left; margin: 10px;"> Tekst opływający obrazek umieszczony po lewej stronie. 

• float: left; – obrazek po lewej, tekst z prawej,
• float: right; – obrazek po prawej, tekst z lewej,
• margin: 10px; – dodaje odstęp między obrazem a tekstem, co poprawia czytelność oraz estetykę,
• zamiast stylu bezpośrednio w znaczniku (style="..."), lepiej użyć klas CSS, co ułatwia zarządzanie kodem.

Definiowanie klasy CSS:

.img-lewo { float: left; margin-right: 15px; margin-bottom: 10px; }

Użycie w HTML:

<img src="obrazek.jpg" alt="Opis obrazka" class="img-lewo"> Tekst opisujący zdjęcie, opływający grafikę z prawej strony. 

Flexbox lub grid do zaawansowanego rozmieszczenia obrazka i tekstu

Dla bardziej zaawansowanych układów (np. gdy tekst ma być ściśle obok obrazka, bez opływania), wykorzystuje się CSS Flexbox lub Grid.

Przykład: Flexbox

<div style="display: flex; align-items: center;"> <img src="obrazek.jpg" alt="Opis obrazka" style="margin-right: 15px;"> <span>Opis obrazka wyświetlany tuż obok grafiki, w jednej linii.</span> </div> 

Taki układ to tzw. linearne sąsiedztwo, gdzie obrazek i tekst nie „opływają się”, lecz ustawiają obok siebie jak w tabeli.

Zastosowania praktyczne

Najczęstsze sytuacje, w których stosuje się obrazek obok tekstu –

• awatar i opis użytkownika na blogu lub forum,
• ilustracja produktu wraz z opisem,
• miniaturka artykułu obok fragmentu wstępu na liście publikacji,
• ikonka obok komunikatu lub przycisku.

Wskazówki i dobre praktyki

• Zawsze używaj atrybutu alt w znaczniku <img> – opis alternatywny jest kluczowy dla dostępności oraz SEO;
• Dodaj marginesy między tekstem a obrazkiem, aby treść nie była zbyt zbita (patrz: margin);
• Responsywność – aby obrazki dobrze wyglądały na różnych urządzeniach, stosuj ustawienia szerokości w procentach lub używaj klas takich jak img-fluid w frameworkach CSS;
• przy bardziej złożonym układzie lub konieczności dokładnej kontroli nad rozmieszczeniem, preferuj CSS Flexbox lub Grid.

Najczęstsze błędy i jak ich unikać

• Literówki w nazwie pliku obrazka – sprawdzaj ścieżki i rozszerzenia plików;
• Nieprzypisanie atrybutu alt – skutkuje brakiem opisu dla czytników ekranu;
• Brak marginesów – tekst przykleja się do obrazka, co utrudnia czytanie;
• Stosowanie przestarzałych atrybutów (jak align) – korzystaj z CSS dla zgodności z nowoczesnymi przeglądarkami.

Podsumowanie –
Najprościej użyć stylów CSS (float lub Flexbox), by obrazek pojawiał się bezpośrednio obok tekstu, zachowując przy tym nowoczesne standardy i wysoką czytelność. Unikaj atrybutu align w nowych projektach – postaw na CSS i kontrolę nad responsywnością.

Przykładowy kod do skopiowania –

<!-- Obrazek po lewej, tekst opływa z prawej -->
<img src="obrazek.jpg" alt="Opis obrazka" style="float: left; margin: 10px;"> Tekst opływający obrazek.
<!-- Obrazek i tekst tuż obok siebie, bez opływania -->
<div style="display: flex; align-items: center;">
  <img src="obrazek.jpg" alt="Opis obrazka" style="margin-right: 15px;">
  <span>Opis obrazka tuż obok grafiki.</span>
</div>