Lekcja 3.3: Podkreślenie (<u>, <ins>)
Podkreślanie tekstu w HTML
W HTML istnieją dwa główne znaczniki służące do podkreślania tekstu: <u> i <ins>. Podobnie jak w przypadku pogrubiania i pochylania, te dwa znaczniki dają podobny efekt wizualny (tekst podkreślony), ale mają różne znaczenie semantyczne i zastosowanie.
Znacznik <u>
Znacznik <u> (od angielskiego "underline") służył pierwotnie do prostego podkreślania tekstu. W HTML5 jego znaczenie zostało zredefiniowane. Obecnie służy do oznaczania tekstu, który powinien być renderowany w sposób wskazujący na jego nieartykułowaną, ale wyraźnie zaznaczoną adnotację, np. oznaczenie błędu ortograficznego lub nazwy własnej w języku chińskim.
<p>Ten tekst zawiera <u>błont</u> ortograficzny.</p>
<p>W języku chińskim, nazwy własne są często podkreślane: <u>北京</u> (Pekin).</p>Ten tekst zawiera błont ortograficzny.
W języku chińskim, nazwy własne są często podkreślane: 北京 (Pekin).
Uwaga: Należy unikać używania znacznika <u> do podkreślania tekstu w celach stylistycznych, ponieważ podkreślenie jest powszechnie kojarzone z hiperłączami (linkami). Może to wprowadzać użytkowników w błąd. Do podkreślania tekstu w celach stylistycznych należy używać CSS.
Znacznik <ins>
Znacznik <ins> (od angielskiego "inserted") służy do oznaczania tekstu, który został dodany (wstawiony) do dokumentu. Jest często używany w połączeniu ze znacznikiem <del> (oznaczającym tekst usunięty) do śledzenia zmian w dokumencie.
Przeglądarki domyślnie renderują zawartość <ins> jako podkreśloną.
<p>Cena produktu: <del>100 zł</del> <ins>80 zł</ins></p>
<p>Spotkanie odbędzie się <del>we wtorek</del> <ins>w środę</ins>.</p>Cena produktu: 100 zł 80 zł
Spotkanie odbędzie się we wtorek w środę.
Znacznik <ins> może posiadać atrybuty:
cite: URL do dokumentu wyjaśniającego powód zmiany.datetime: Data i czas dokonania zmiany.
<p>Zmieniono status na <ins cite="log.html#zmiana123" datetime="2025-04-28T21:00:00Z">Zakończony</ins>.</p>Różnice między <u> a <ins>
Główna różnica między tymi znacznikami leży w ich znaczeniu semantycznym:
| Znacznik <u> | Znacznik <ins> |
|---|---|
| Oznacza nieartykułowaną adnotację (np. błąd, nazwa własna) | Oznacza tekst dodany do dokumentu |
| Używany rzadko, głównie w specyficznych kontekstach | Używany do oznaczania zmian w dokumencie |
| Należy unikać do zwykłego podkreślania | Wizualnie renderowany jako podkreślony |
Kiedy używać <u>, a kiedy <ins>?
- Użyj
<ins>, gdy chcesz semantycznie oznaczyć tekst jako dodany lub wstawiony. - Użyj
<u>tylko w specyficznych przypadkach, takich jak oznaczanie błędów ortograficznych lub nazw własnych w niektórych językach. - Do zwykłego podkreślania tekstu w celach stylistycznych używaj CSS.
Podkreślanie tekstu za pomocą CSS
Najlepszym sposobem na podkreślenie tekstu w celach stylistycznych jest użycie CSS z właściwością text-decoration.
<p style="text-decoration: underline;">Ten tekst jest podkreślony za pomocą CSS.</p>
<span style="text-decoration: underline wavy red;">Ten tekst ma faliste, czerwone podkreślenie.</span>Ten tekst jest podkreślony za pomocą CSS.
Ten tekst ma faliste, czerwone podkreślenie.CSS oferuje znacznie większą kontrolę nad wyglądem podkreślenia (kolor, styl linii, grubość) niż znaczniki HTML.
Zadanie praktyczne (z rozwiązaniem)
Zadanie: Stwórz fragment tekstu pokazujący zmiany w cenniku, używając znaczników <ins> i <del>. Dodatkowo, użyj CSS do podkreślenia ważnego komunikatu.
Rozwiązanie:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Zmiany w cenniku</title>
<style>
.important-message {
text-decoration: underline solid blue 2px;
}
</style>
</head>
<body>
<h1>Aktualizacja Cennika</h1>
<p>Informujemy o zmianach w cenniku naszych usług obowiązujących od 1 maja 2025:</p>
<ul>
<li>Usługa A: <del>50 zł</del> <ins>55 zł</ins></li>
<li>Usługa B: Cena bez zmian - 120 zł</li>
<li>Usługa C: <del>200 zł</del> <ins>190 zł</ins> (Promocja!)</li>
</ul>
<p><span class="important-message">Prosimy o zapoznanie się z nowym cennikiem.</span></p>
</body>
</html>Dodatkowe zadania do samodzielnego wykonania:
- Stwórz przykład użycia znacznika
<u>do oznaczenia błędu ortograficznego w zdaniu. - Użyj atrybutów
citeidatetimew znaczniku<ins>, aby dodać więcej informacji o zmianie. - Eksperymentuj z różnymi wartościami właściwości
text-decorationw CSS (np.overline,line-through, różne style i kolory linii). - Znajdź stronę internetową, która używa podkreśleń i zastanów się, czy są one użyte poprawnie (czy nie mylą się z linkami, czy mają uzasadnienie semantyczne).
Najczęściej zadawane pytania
Jaka jest różnica między <u> a <ins>?
Znacznik <u> oznacza nieartykułowaną adnotację (np. błąd), podczas gdy <ins> semantycznie oznacza tekst dodany do dokumentu. Oba domyślnie renderują się jako podkreślone, ale mają różne znaczenie.
Czy <u> jest przestarzały w HTML5?
Nie, znacznik <u> nie jest przestarzały w HTML5, ale jego znaczenie zostało zmienione. Należy go używać tylko w specyficznych przypadkach, unikając go do zwykłego podkreślania ze względu na podobieństwo do linków.
Jak podkreślić tekst bez używania <u> lub <ins>?
Najlepszym sposobem na podkreślenie tekstu w celach stylistycznych jest użycie CSS z właściwością text-decoration: underline;. Daje to większą kontrolę nad wyglądem podkreślenia i unika problemów semantycznych.
Do czego służą atrybuty cite i datetime w <ins>?
Atrybut cite może zawierać URL do dokumentu wyjaśniającego powód wstawienia tekstu, a datetime określa datę i czas dokonania zmiany. Pomagają one dostarczyć dodatkowych metadanych o zmianach w dokumencie.
Dlaczego należy unikać podkreślania tekstu, który nie jest linkiem?
Podkreślenie jest silnie utrwaloną konwencją wizualną oznaczającą hiperłącza. Podkreślanie tekstu, który nie jest linkiem, może wprowadzać użytkowników w błąd, sugerując, że mogą go kliknąć.