W HTML tekst można pochylić na kilka sposobów, zarówno za pomocą znaczników HTML, jak i stylów CSS. Poniżej znajdziesz szczegółowe wyjaśnienie technik wraz z praktycznymi przykładami zastosowań, które możesz wykorzystać w swoim serwisie internetowym.
Pochylenie tekstu za pomocą znaczników HTML
W HTML masz do dyspozycji dwa najpopularniejsze znaczniki do pochylania tekstu:
<i> – znacznik niesemantyczny
- Opis – powoduje wyświetlenie treści kursywą (pochyloną), ale nie niesie żadnego dodatkowego znaczenia semantycznego; używany głównie do celów wizualnych, np. przy nazwach książek, obcojęzycznych słowach, ikonach itp.;
- Przykład użycia –
<p>Fragment tekstu z <i>pochylonym słowem</i> pośrodku akapitu.</p>
Efekt: Fragment „pochylonym słowem” zostanie wyświetlony kursywą.
<em> – znacznik semantyczny
- Opis – służy do podkreślania znaczenia fragmentu tekstu (ang. emphasis), co jest ważne zarówno wizualnie, jak i dla robotów wyszukiwarek oraz czytników ekranu; standardowo tekst otoczony
<em>pojawia się jako pochylony; - Przykład użycia –
<p>To jest naprawdę <em>ważna informacja</em> dla użytkownika.</p>
Efekt: Wyrażenie „ważna informacja” będzie wyświetlone kursywą, dodatkowo uzyska wzmocnione znaczenie w strukturze dokumentu.
Kiedy używać którego?
- <i> – gdy potrzebujesz wyłącznie efektu wizualnego, bez specjalnego znaczenia;
- <em> – gdy chcesz zaakcentować znaczenie danego fragmentu tekstu.
Pochylenie tekstu za pomocą CSS
HTML można również rozbudować o stylowanie przez CSS.
font-style: italic;
- Opis – własność CSS, która ustawia tekst na kursywę i daje efekt pochylenia;
- Przykład użycia –
<p class="kursywa">Ten tekst będzie pochyły dzięki CSS.</p>
.kursywa { font-style: italic; }
font-style: oblique;
- Opis – również pochylenie, ale czcionka jest bardziej sztucznie pochylona – efekt subtelnie inny niż italic;
- Przykład –
.pochylony-tekst { font-style: oblique; }
Praktyczne przykłady zastosowań
- Cytaty –
<blockquote> <em>„Per aspera ad astra”</em> – przez trudy do gwiazd. </blockquote>
- Nazwy czasopism i tytuły dzieł –
<span style="font-style: italic;">Pan Tadeusz</span>
- Wyróżnianie obcych słów –
<p>Słowo <i>status quo</i> pochodzi z łaciny.</p>
- Podkreślenie ważnych informacji –
<p>Uwaga! <em>Pamiętaj o terminie!</em></p>
- Stylowanie wybranych fragmentów na stronie –
<span class="kursywa">Ważna informacja w pochylonym stylu.</span>
Zalecenia i dobre praktyki
- Stosuj znaczniki zgodnie z ich przeznaczeniem. Używaj
<em>do akcentowania znaczenia i<i>do efektów czysto wizualnych; - Łącz znaczniki HTML i style CSS, gdy chcesz elastycznie zarządzać wyglądem tekstu. Np. dzięki klasom CSS możesz łatwo zmieniać wygląd wielu fragmentów na stronie;
- Dbaj o semantykę dokumentu. To ważne dla SEO oraz dostępności stron dla osób korzystających z czytników ekranu.
Stosując powyższe metody, z łatwością pochylisz dowolny tekst w HTML, zapewniając mu zarówno odpowiedni wygląd, jak i znaczenie w strukturze strony.
