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:

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

Rezultat:

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:

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.

PreviousSemantyka tekstu - element "bdo"NextSemantyka tekstu - element "br"

Last updated 3 months ago