Kurs XHTML - część piąta

Listy

W XHTML 1.0 Strict można używać trzech rodzajów list: sortowanych, niesortowanych oraz list definicji. Listy właściwie, nie przeszły ogromnych zmian względem HTML 4.01. Zostały tylko wymuszone zasady obowiązujące w XHTML (małe litery, zamykanie znaczników).

Listy sortowane

Listy sortowane zostały stworzone, by umożliwić prosty, ale skuteczny zapis elementów, które są ponumerowane lub wyliczane przy pomocy kolejnych liter alfabetu.

Składnia list sortowanych:

<ol>
<li>Pierwszy element</li>
<li>Drugi element</li>

<li>Trzeci element</li>
</ol>

Efekt powyższego zapisu jest następujący:

  1. Pierwszy element
  2. Drugi element
  3. Trzeci element

Ciało listy sortowanej ogranicza się znacznikami <ol> i </ol> (ol - ordered list). Każdy element listy musi zostać objęty znacznikami <li> i </li> (li - list item). W XHTML 1.0 Strict, zarówno znacznik <ol> jak i znacznik <li> nie posiadają żadnych specyficznych dla siebie atrybutów.

Wspominałem, że listy sortowane mogą służyć do tworzenia spisów z elementami ponumerowanymi lub opisanymi przy pomocy kolejnych liter alfabetu. Jak zapewne zauważyliście, powyższy przykład został wyświetlony z użyciem cyfr. Jest to domyślny sposób wyświetlania. Aby go zmienić należy się posłużyć odpowiednimi stylami w arkuszu stylów CSS.

Listy niesortowane

Listy niesortowane są idealnym sposobem na stworzenie listy na przykład składników ciasta. Dlaczego? Kolejność składników w spisie (nie mam tutaj na myśli kolejności dodawania składników do ciasta ;-)) nie jest ważna.

Składnia list nieposortowanych

<ul>
<li>50 dag masła</li>

<li>3 jajka</li>
<li>zapach</li>
<li>...</li>
</ul>

Efekt:

Podobnie jak w liście posortowanej, każdy element listy musi zostać objęty parą znaczników (otwierającym i zamykającym) <li>. Inny jest znacznik, który obejmuje ciało listy. W tym wypadku jest to <ul> (ul - unordered list) razem z odpowiadającym mu znacznikiem zamykającym.

Podobnie jak znacznik <ol>, znacznik <ul> nie posiada żadnych specyficznych dla siebie parametrów, tak więc, aby zmienić symbol poprzedzający każdy element, należy posłużyć się stylami CSS.

Listy definicyjne

Listy definicyjne, to listy, których można użyć do tworzenia słowników. Określają, który element jest terminem, a co jest jego wyjaśnieniem.

Składnia list definicyjnych różni się nieco od innych rodzajów list.

<dl>
<dt>CSS</dt>

<dd>Język, który w powiązaniu z językami hipertekstowymi, służy do opisu wyglądu, oraz zachowania się poszczególnych elementów języka hipertekstowego.</dd>
<dt>XHTML</dt>
<dd>Język, wywodzący się z XML (oraz SGML), służący do opisu hipertekstu, używanego między innymi na stronach WWW.</dd>
</dl>

Efekt jest następujący:

CSS
Język, który w powiązaniu z językami hipertekstowymi, służy do opisu wyglądu, oraz zachowania się poszczególnych elementów języka hipertekstowego.
XHTML
Język, wywodzący się z XML (oraz SGML), służący do opisu hipertekstu, używanego między innymi na stronach WWW.

Ciało listy definicyjnej ogranicza para znaczników <dl> oraz </dl> (dl - definition list). Terminy należy oznaczać przy pomocy <dt> (dt - definition term), a ich wyjaśnienia przy pomocy <dd> (dd - definition description).

Nic nie stoi na przeszkodzie, aby tworzyć listy definicyjne wielokrotne.

<dl>
<dt>Pierwszy termin</dt>
<dt>Drugi termin</dt>
<dd>Pierwszy opis</dd>
<dd>Drugi opis</dd>

</dl>
Pierwszy termin
Drugi termin
Pierwszy opis
Drugi opis

Zagnieżdżanie list

W XHTML dozwolone jest zagnieżdzanie list.

Przykład zagnieżdzonych list:

<ol>
<li>Poprawność składniowa:
	<ul>
	<li>Poprawna walidacja dokumentu</li>
	<li>Poprawna walidacja arkuszy stylów</li>

	</ul>
</li>
<li>Dostępność i użyteczność:
	<ul>
	<li>Rozdzielenie formy od treści</li>
	<li>WCAG</li>

	</ul>
</li>
<li>Aspekty techniczne:
	<ul>
	<li>Poprawne kodowanie</li>
	<li>Poprawny typ MIME</li>

	</ul>
</li>
</ol>

Przeglądarka powyższy kod wyświetli jako:

  1. Poprawność składniowa:
    • Poprawna walidacja dokumentu
    • Poprawna walidacja arkuszy stylów
  2. Dostępność i użyteczność:
    • Rozdzielenie formy od treści
    • WCAG
  3. Aspekty techniczne:
    • Poprawne kodowanie
    • Poprawny typ MIME

Bardzo ważny w przypadku zagnieżdżania list jest fakt, że pomiędzy dwoma kolejnymi, odpowiednio oznaczonymi elementami list nie mogą wystąpić żadne inne elementy, nie będące elementem tej listy. Dlatego też na przykładzie, listy niesortowane są dzieckiem elementu listy sortowanej.