Ostatnia aktualizacja 23 października, 2023
Jednym z najprostszych, a jednocześnie najbardziej użytecznych elementów w HTML-u jest znacznik służący do określania zasięgu działania klasy CSS. W tym tekście omówimy podstawy działania <span> w HTML-u, różne sposoby jego wykorzystania oraz zawrzemy kilka przykładów, które pomogą zrozumieć jego praktyczne zastosowanie.
Czym jest znacznik <span>?
Znacznik <span> w HTML-u jest używany do definiowania “zakresu” w kodzie, który można potem stylizować za pomocą CSS-a albo uzupełniać elementami JavaScriptu. Jest to znacznik blokowy, czyli nie wprowadza on żadnych domyślnych zmian w układzie ani wyglądzie tekstu, na którym jest użyty. Znacznik <span> służy głównie jako kontener, do którego można umieścić różne właściwości stylów lub skrypty.
Zastosowania znacznika <span> w HTML-u
- Stylizacja tekstu: Możesz użyć znacznika
<span>do zmiany koloru, rozmiaru lub czcionki konkretnego fragmentu tekstu.
- Podkreślenie ważnych elementów: Znacznik
<span>pozwala na wyróżnienie pewnych słów lub fraz w tekście. Może to być przydatne w dokumentach naukowych czy artykułach.
- Interakcje z JavaScript: Dzięki znacznikowi
<span>możesz również manipulować konkretnymi fragmentami kodu JavaScript, np. aby dodać efekty animacji.
- Umieszczanie metadanych: W niektórych przypadkach znacznika
<span>używa się do umieszczania dodatkowych metadanych w tekście. Mogą one potem służyć różnym celom, np. pracy nad SEO strony lub zautomatyzowaniu usług online.
Jak zastosować <span> w kodzie?
Poniżej przedstawiamy przykłady kodu, które ilustrują różnorodne zastosowania znacznika <span> w HTML-u.
Zmiana koloru tekstu
Możemy użyć znacznika <span> wraz z atrybutem style w celu zmiany koloru fragmentu tekstu na czerwony.
<!-- Zmiana koloru fragmentu tekstu na czerwony -->
<p>Witaj, to jest <span style="color:red;">czerwony</span> tekst.</p>Wyróżnienie tekstu
Tutaj korzystamy z atrybutu class dla znacznika <span>, aby wyróżnić fragment tekstu. W praktyce ta klasa mogłaby być potem stylizowana za pomocą CSS-a.
<!-- Wyróżnienie fragmentu tekstu za pomocą klasy CSS -->
<p><span class="important-text">Ważny</span> fragment tekstu.</p>Interakcje <span> HTML z JavaScript
W poniższym przykładzie znacznika <span> z identyfikatorem id używa się w połączeniu z kodem JavaScript. Dzięki temu po kliknięciu na tekst wyświetli się komunikat.
<!-- Użycie znacznika <span> do dodania interakcji z użytkownikiem za pomocą JavaScript -->
<p>Przeczytaj ten <span id="clickable-text">klikalny</span> tekst.</p>
<script>
// Wyświetlenie komunikatu po kliknięciu w tekst
document.getElementById('clickable-text').addEventListener('click', function() {
alert('Kliknąłeś w mnie!');
});
</script>Dalsza część tekstu znajduje się pod materiałem wideo:
Span w HTML i JavaScript – przykład z atrybutem data-*
Jeden z najbardziej popularnych sposobów dołączenia metadanych do znacznika <span> w HTML-u to użycie atrybutów data-*. Dzięki tym atrybutom możesz przechowywać dodatkowe informacje bez wpływu na prezentację lub zachowanie elementu. Dodatkowe informacje mogą być potem wykorzystane w skryptach JavaScript.
Kod HTML:
<!-- HTML -->
<p>Mój ulubiony owoc to <span data-fruit="apple">jabłko</span>.</p>Kod JavaScript:
// JavaScript
let spanElement = document.querySelector("[data-fruit='apple']");
let fruit = spanElement.dataset.fruit;
console.log(`Wybrany owoc to: ${fruit}`); // Wyjście: "Wybrany owoc to: apple"W tym przykładzie informacja o owocu (“apple”) jest przechowywana jako metadana w atrybucie data-fruit. Ta informacja jest potem dostępna w JavaScript, co pozwala na różne formy modyfikacji i interakcji z użytkownikiem.
Czytaj także:
