Element <span> w HTML

Element <span> w HTML

<span> to liniowy element HTML używany do oznaczania krótkiego fragmentu tekstu lub innej treści bez nadawania jej dodatkowego znaczenia semantycznego. Sam z siebie nie powoduje przejścia do nowego wiersza.

Najważniejsza cecha

Element <span> domyślnie wyświetla się jako element liniowy, czyli kolejne znaczniki <span> mogą znajdować się w tym samym wierszu:

<span>Dobre strony </span><span>mojej strony</span>

Efekt: tekst zostanie wyświetlony w jednej linii, o ile nie zabraknie miejsca w oknie przeglądarki.

Do czego używa się <span>?

Najczęściej służy do formatowania fragmentu tekstu za pomocą CSS:

<span>Dobre strony </span><span style="letter-spacing: 3px;">mojej strony</span>

W tym przykładzie drugi fragment tekstu ma zwiększone odstępy między literami dzięki właściwości letter-spacing.

Różnica między <span> a <div>

• <span> jest elementem liniowym i nie zaczyna nowego wiersza.
• <div> jest elementem blokowym i domyślnie zaczyna się od nowej linii.

Dlatego w pytaniach egzaminacyjnych, gdy tekst ma pozostać w jednym wierszu bez dodatkowego CSS, poprawnym wyborem zwykle jest <span>, a nie <div>, <p> czy nagłówki typu <h3>.

Ważne

<span> nie powinien być używany do tworzenia struktury całej strony. Do większych sekcji stosuje się elementy blokowe lub semantyczne, np. <div>, <section>, <article>.