<span>
Uniwersalny kontener liniowy bez znaczenia, do stylowania fragmentu tekstu.
- Wyświetlanie
- inline
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Treść frazowa (phrasing content)
Przykład
#<p>Twój postęp: <span style="color: #34d399; font-weight: 600;">12 z 20</span> lekcji</p>
<p>
Plan:
<span style="padding: 2px 10px; border-radius: 999px; background: #7c3aed; color: white;">Premium</span>
</p>Definicja i zastosowanie
#Element <span> to liniowy odpowiednik <div>. Obejmuje fragment tekstu wewnątrz linii, np. słowo, liczbę albo ikonę, żeby można go było ostylować lub znaleźć w JavaScripcie. Nie przerywa przy tym linii i sam w sobie nic nie znaczy.
Zanim go użyjesz, sprawdź, czy nie ma lepszego elementu. Ważny tekst to <strong>, akcent to <em>, wyróżnienie to <mark>, kod to <code>, a data to <time>. <span> zostaw na sytuacje, w których żaden z nich nie pasuje: kolorową etykietę, licznik aktualizowany przez skrypt czy fragment tekstu w innym kroju pisma.
W środku może się znaleźć tylko treść frazowa, więc nie wkładaj do <span> akapitów ani elementów <div>. Jako element liniowy ignoruje też width i height, a pionowe marginesy nie odsuwają sąsiednich linii. Jeśli tego potrzebujesz, zmień mu display na inline-block.
Składnia
#<span>fragment tekstu</span>Atrybuty
#Ten element nie ma własnych atrybutów. Obsługuje atrybuty globalne, takie jak class, id czy hidden.
Więcej przykładów
#<p>Do końca promocji zostało <span id="seconds">10</span> s.</p>
<script>
let left = 10;
const counter = document.getElementById('seconds');
const timer = setInterval(() => {
left -= 1;
counter.textContent = left;
if (left === 0) clearInterval(timer);
}, 1000);
</script>Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Najpierw poszukaj elementu z konkretnym znaczeniem:
<strong>,<em>,<mark>,<code>albo<time>. - Nie zagnieżdżaj w
<span>elementów blokowych, takich jak<div>czy<p>. - Jeśli
<span>zawiera tylko ikonę dekoracyjną, dodaj muaria-hidden="true", a znaczenie przekaż tekstem obok.
Powiązane hasła
#- <div>Uniwersalny kontener blokowy bez znaczenia, do grupowania elementów i stylowania.
- <strong>Tekst o dużym znaczeniu: ostrzeżenie, kluczowa informacja.
- <em>Akcent w zdaniu: słowo, które przy czytaniu na głos wymawia się z naciskiem.
- <mark>Wyróżnia fragment tekstu jak zakreślacz, bo jest istotny w bieżącym kontekście.
- <code>Fragment kodu komputerowego: nazwa zmiennej, funkcji, znacznika albo pliku, a także krótki listing.
- <p>Akapit tekstu.
Widzisz błąd albo brakuje przykładu? Napisz do nas.