Listy#

Zagnieżdżanie list#

Wykazy możemy zagnieżdżać, czyli umieszczać jedne wewnątrz drugich. Dotyczy to list wszystkich typów. Możemy je mieszać wzajemnie tworząc rozległe struktury (uzyskamy punkty wraz z podpunktami).

Każdy kolejny, niższy poziom powinien zawierać własną definicję listy i powinien się kończyć jej zamknięciem. W trakcie zagnieżdżania wykazów niższego poziomu zamknięcie punktu wykazu nadrzędnego szczebla następuje za zagnieżdżonym wykazem.

Najlepiej będzie zobaczyć całość na przykładach.

Wykaz nieuporządkowany#

Prosty przykład zagnieżdżenia trzech list tego samego rodzaju:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<ul>	<!-- Wykaz I poziomu -->
	<li>Punkt 1</li>
	<li>Punkt 2	<!-- Bez znacznika zamykającego -->
		<ul>	<!-- Wykaz II poziomu -->
			<li>Podpunkt 2.1</li>
			<li>Podpunkt 2.2	<!-- Bez znacznika zamykającego -->
				<ul>	<!-- Wykaz III poziomu -->
					<li>Podpunkt 2.2.1</li>
					<li>Podpunkt 2.2.2</li>
				</ul>	<!-- Zamknięcie wykazu III poziomu -->
			</li>	<!-- Zamknięcie podpunktu 2.2 -->
			<li>Podpunkt 2.3</li>
			<li>Podpunkt 2.4</li>
		</ul>	<!-- Zamknięcie wykazu II poziomu -->
	</li>	<!-- Zamknięcie Punktu 2 -->
	<li>Punkt 3</li>
	<li>Punkt 4</li>
</ul>	<!-- Zamknięcie wykazu I poziomu -->

Efekt:

Przeglądarki internetowe same dobierają punktory na poszczególnych szczeblach zagnieżdżenia, niekiedy odmiennie. Oczywiście wszystko możemy regulować samodzielnie (najlepiej przy użyciu CSS). Elementy kolejnych list domyślnie przesuwane są w prawo, dzięki czemu całość staje się czytelniejsza.

Wykaz uporządkowany#

Prosty przykład zagnieżdżenia trzech list tego samego rodzaju:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<ol>	<!-- Wykaz I poziomu -->
	<li>Punkt 1</li>
	<li>Punkt 2	<!-- Bez znacznika zamykającego -->
		<ol>	<!-- Wykaz II poziomu -->
			<li>Podpunkt 2.1</li>
			<li>Podpunkt 2.2	<!-- Bez znacznika zamykającego -->
				<ol>	<!-- Wykaz III poziomu -->
					<li>Podpunkt 2.2.1</li>
					<li>Podpunkt 2.2.2</li>
				</ol>	<!-- Zamknięcie wykazu III poziomu -->
			</li>	<!-- Zamknięcie podpunktu 2.2 -->
			<li>Podpunkt 2.3</li>
			<li>Podpunkt 2.4</li>
		</ol>	<!-- Zamknięcie wykazu II poziomu -->
	</li>	<!-- Zamknięcie Punktu 2 -->
	<li>Punkt 3</li>
	<li>Punkt 4</li>
</ol>	<!-- Zamknięcie wykazu I poziomu -->

Efekt:

  1. Punkt 1
  2. Punkt 2
    1. Podpunkt 2.1
    2. Podpunkt 2.2
      1. Podpunkt 2.2.1
      2. Podpunkt 2.2.2
    3. Podpunkt 2.3
    4. Podpunkt 2.4
  3. Punkt 3
  4. Punkt 4

Przeglądarki internetowe wprowadzają zazwyczaj standardową numerację za pomocą liczebników arabskich. Oczywiście wszystko możemy regulować samodzielnie (najlepiej przy użyciu CSS). Elementy kolejnych list domyślnie przesuwane są w prawo, dzięki czemu całość staje się czytelniejsza.

Wykaz definicji#

Prosty przykład zagnieżdżenia dwóch list tego samego rodzaju:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<dl>	<!-- Wykaz I poziomu -->
	<dt>Termin pierwszy</dt>
		<dd>Wyjaśnienie</dd>
	<dt>Termin drugi</dt>
		<dd>	<!-- Bez znacznika zamykającego -->
			<dl>	<!-- Wykaz II poziomu -->
				<dt>Mowa oficjalna</dt>
					<dd>Wyjaśnienie</dd>
				<dt>Mowa potoczna</dt>
					<dd>Wyjaśnienie</dd>
			</dl>	<!-- Zamknięcie wykazu II poziomu -->
		</dd>	<!-- Zamknięcie wyjaśnienia terminu drugiego -->
	<dt>Termin trzeci</dt>
		<dd>Wyjaśnienie</dd>
</dl>	<!-- Zamknięcie wykazu I poziomu -->

Efekt:

Termin pierwszy
Wyjaśnienie
Termin drugi
Mowa oficjalna
Wyjaśnienie
Mowa potoczna
Wyjaśnienie
Termin trzeci
Wyjaśnienie

Przypominam, że element DT wyświetlany jest w linii i nie może zawierać elementów blokowych. Kolejne listy należy umieszczać w znacznikach (<dd></dd>).

Wykaz mieszany#

Prosty przykład zagnieżdżenia list trzech różnych rodzajów:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<ol>	<!-- Wykaz I poziomu -->
	<li>Punkt 1</li>
	<li>Punkt 2	<!-- Bez znacznika zamykającego -->
		<ul>	<!-- Wykaz II poziomu -->
			<li>Część 1</li>
			<li>Część 2
				<dl>	<!-- Wykaz III poziomu -->
					<dt>Termin 1</dt>
						<dd>Wyjaśnienie</dd>
					<dt>Termin 2</dt>
						<dd>Wyjaśnienie</dd>
				</dl>	<!-- Zamknięcie wykazu III poziomu -->
			</li>	<!-- Zamknięcie Części 2 -->
			<li>Część 3</li>
			<li>Część 4</li>
		</ul> <!-- Zamknięcie wykazu II poziomu -->
	</li>	<!-- Zamknięcie Punktu 2 -->
	<li>Punkt 3</li>
	<li>Punkt 4</li>
</ol>	<!-- Zamknięcie wykazu I poziomu -->

Efekt:

  1. Punkt 1
  2. Punkt 2
    • Część 1
    • Część 2
      Termin 1
      Wyjaśnienie
      Termin 2
      Wyjaśnienie
    • Część 3
    • Część 4
  3. Punkt 3
  4. Punkt 4
Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Listy (H1) Zagnieżdżanie list (H2) Wykaz nieuporządkowany (H3) Wykaz uporządkowany (H3) Wykaz definicji (H3) Wykaz mieszany (H3)