Zagnieżdżanie wykazów

1. Wypunktowanie (podstawowy)

   <ul>
   <li>Punkt pierwszy
   	<ul>
   	<li>Punkt 1.1
   		<ul>
   		<li>Punkt 1.1.1</li>
   		<li>Punkt 1.1.2</li>
   		</ul>
   	</li>
   	<li>Punkt 1.2</li>
   	</ul>
   </li>
   <li>Punkt drugi</li>
   </ul>

2. Numerowanie

   <ol>
   <li>Punkt pierwszy
   	<ol>
   	<li>Punkt 1.1
   		<ol>
   		<li>Punkt 1.1.1</li>
   		<li>Punkt 1.1.2</li>
   		</ol>
   	</li>
   	<li>Punkt 1.2</li>
   	</ol>
   </li>
   <li>Punkt drugi</li>
   </ol>

3. Wykaz mieszany - połączenie obu powyższych

Dzięki możliwości zagnieżdżania wykazów, można stworzyć listę punktów wraz z podpunktami. Podpunkty będą przesunięte bardziej w prawo w stosunku do punktów nadrzędnych, dzięki czemu wykaz będzie wyglądał bardziej czytelnie i estetycznie.

Zauważ, że w składni powyższych poleceń, wykazy bardziej zagnieżdżone są przesunięte w prawo - im bardziej podrzędny wykaz, tym większe jest wcięcie. Nie jest to konieczne, ale bardzo ułatwia zorientowanie się, na którym stopniu zagnieżdżenia aktualnie jesteśmy. Dlatego polecam używanie takiego sposobu wpisywania. Dobrze jest również na samym początku zamykać wszystkie znaczniki <ul>, <ol> oraz <li> (większość edytorów HTML i tak robi to automatycznie), a dopiero potem wpisywać do nich wykazy podrzędne. Dzięki temu unikniemy błędnego wyświetlania, spowodowanego zapomnieniem zamknięcia znacznika.

Kod wykazów podrzędnych wpisuje się wewnątrz znacznika <li>...</li> wybranego punku wykazu nadrzędnego. Pomiędzy dwoma punktami wykazu, tzn. między znacznikami </li> a <li> nie można się znaleźć żaden kod ani tekst, ponieważ jest to błędem!

Przykład <ul, ol, li>

Wypunktowanie:

• Punkt pierwszy
  • Punkt 1.1
    • Punkt 1.1.1
    • Punkt 1.1.2
  • Punkt 1.2
• Punkt drugi

Numerowanie:

1. Punkt pierwszy
   1. Punkt 1.1
      1. Punkt 1.1.1
      2. Punkt 1.1.2
   2. Punkt 1.2
2. Punkt drugi

Wykaz mieszany:

1. Punkt pierwszy
   1. Punkt I.1
      1. Punkt I.1.a
         • Punkt I.1.a.(1)
         • Punkt I.1.a.(2)
      2. Punkt I.1.b
   2. Punkt I.2
2. Punkt drugi

A oto co należy wpisać, aby otrzymać ostatni wykaz:

<ol type="I">
<li>Punkt pierwszy
	<ol type="1">
	<li>Punkt I.1
		<ol type="a">
		<li>Punkt I.1.a
			<ul>
			<li>Punkt I.1.a.(1)</li>
			<li>Punkt I.1.a.(2)</li>
			</ul>
		</li>
		<li>Punkt I.1.b</li>
		</ol>
	</li>
	<li>Punkt I.2</li>
	</ol>
</li>
<li>Punkt drugi</li>
</ol>