Pochylenie tekstu (kursywa/italic) w HTML

Nie wiesz, jak pochylić tekst w HTML? Ten artykuł jest dla Ciebie. 

HTML ma dwa natywne znaczniki (tagi HTML), które pozwalają pochylić tekst i wyświetlić zawartość w przeglądarce kursywą. Jest to znacznik <i> oraz <em>.

Znacznik <i>

Znacznik <i> jest niesemantycznym znacznikiem, tzn. takim, który niesie informacje wizualne w przeglądarce, ale roboty internetowe nie zwracają (nie powinni zwracać) szczególnej uwagi na niego. Użycie tagi <i> ma charakter wyłącznie prezentacyjny.

Przykładowy kod użycia <i> znajdziesz poniżej.

<p>Lorem ipsum dolor sit <i>pochylony tekst</i> amet, consectetur adipiscing elit. Nunc a ex lacus.</p>

Lorem ipsum dolor sit pochylony tekst amet, consectetur adipiscing elit. Nunc a ex lacus.

Ma charakter wyłącznie prezentacyjny. Już teraz w miejsce pochylenia zaleca się stosowanie polecenia em, które ma charakter semantyczny.

Znacznik <em>

Znacznik <em>, czyli tak zwana emfaza, jest semantycznym znacznikiem umożliwiającym wyróżnienie treści za pomocą pochylenia (kursywa/italic). Emfaza ma mniejszą wartość semantyczną niż znacznik <strong>. Znacznik <em> służy do akcentowania treści, natomiast <strong> do podkreślania jej istotności. W HTML5 oba znaczniki są semantyczne, ale niosą różny „ciężar znaczeniowy”.

Przykładowy kod użycia <em> znajdziesz poniżej.

<p>Lorem ipsum dolor sit <em>pochylony tekst</em> amet, consectetur adipiscing elit. Nunc a ex lacus.</p>

Lorem ipsum dolor sit pochylony tekst amet, consectetur adipiscing elit. Nunc a ex lacus.

Czym różni się znacznik <i> od znacznika <em>?

Powtarzając i podsumowując, znacznik <i> ma wyłącznie charakter prezentacyjny, pokazując pochylony tekst. Znacznik <em> powinien być używany, gdy chcemy dodatkowo zwrócić uwagę botów wyszukiwarek, mówić im, że tekst ma faktycznie wyróżnione znaczenie wśród otaczającej go innej treści. 

Trzeba pamiętać, że możemy wykonać również pochylenie teksty w CSS, umożliwia nam to własność font-style: italic. Tak pochylony tekst nie otrzymuje znaczenia semantycznegodla przeglądarki ani wyszukiwarek, a prezentacyjne. 

Jeśli zależy Ci na SEO, to pamiętaj:

• <i> – styl, brak semantyki
• <em> – semantyka, emfaza, dostępność
• CSS – wygląd bez znaczenia logicznego

Warto zaznaczyć, że sam znacznik <em> nie jest jakimś ogromnym "boostem SEO", ale pomaga wyszukiwarkom lepiej zrozumieć strukturę i sens treści, co pośrednio wpływa na jej jakość.

---

---