Ostatnio edytowany:

Semantyka tekstu - element "span"

Autor: Virtual Patriot

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:

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

Rezultat:

Moim ulubionym kwiatem jest róża.

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:

<!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:

Moim ulubionym kwiatem jest róża.

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.