# Semantyka tekstu - element "span"

Gdy musimy (z jakiegoś powodu) umieścić interesującą nas zawartość frazowaną  w zawartości dodatkowego elementu HTML, a jednocześnie nie chcemy, aby wybrany przez nas element HTML narzucał z góry ustalone dodatkowe znaczenie dla wspomnianej zawartości frazowanej , wtedy do wspomnianego celu możemy wykorzystać element span.

Przykład:

```html
<p>
  Moim ulubionym kwiatem jest róża.
</p>
```

Rezultat:

<figure><img src="https://3945955358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR42GcKXoxIh1R4ROdsLU%2Fuploads%2FEH4aUnaej5Izln1gT7lU%2FZrzut%20ekranu%202025-09-24%20o%2015.46.11.png?alt=media&#x26;token=7362d381-9820-4d07-83ee-2f8c737e321a" alt=""><figcaption></figcaption></figure>

Załóżmy, że znamy język CSS. Załóżmy, że chcemy zmienić kolor każdego znaku budującego wyraz `róża`. Chcemy, aby znaki znajdujące się na pozycjach parzystych posiadały kolor czerwony, a znaki znajdujące się na pozycjach nieparzystych posiadały kolor niebieski. Do osiągnięcia wspomnianego celu możemy wykorzystać elementy `span` oraz reguły języka CSS.

Przykład:

```html
<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Moje ulubione rzeczy</title>

    <style>
      .koloruj > :nth-child(even) { color:red; }
      .koloruj > :nth-child(odd) { color:blue; }
    </style>
  </head>
  <body>

    <p>
      Moim ulubionym kwiatem jest <span class="koloruj"><span>r</span><span>ó</span><span>ż</span><span>a</span></span>.
    </p>

  </body>
</html>
```

Rezultat:

<figure><img src="https://3945955358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR42GcKXoxIh1R4ROdsLU%2Fuploads%2F9fJlP5CZoncV9Uh5qLYx%2FZrzut%20ekranu%202025-09-24%20o%2015.46.34.png?alt=media&#x26;token=64f70ce9-94aa-4973-a5c6-bdb351ae1ad4" alt=""><figcaption></figcaption></figure>

Mimo że domyślnie element `span` nie narzuca żadnego dodatkowego znaczenia dla treści, która zostanie umieszczona w zawartości wspomnianego elementu `span`, w naszym przykładzie sensem wykorzystania elementów `span` jest wyszczególnienie treści, której wygląd ma zostać zmieniony za pomocą reguł języka CSS.
