Listy, wykazy - HTML - lista wypunktowana, numerowana, definicyjna

Na stronach internetowych niejednokrotnie pojawia się konieczność umieszczenia jakiegoś wykazu bądź listy. Można to oczywiście próbować robić całkowicie samodzielnie, kombinować z obrazkami i tabelkami, ale po co - w języku HTML dostępnych jest kilka znaczników pozwalających konstruować tego typu listy.

Lista wypunktowana w HTML/

Pierwszym typem listy jest lista wypunktowana (lista punktów). Tworzy się ją za pomocą znacznika <ul>, wewnątrz którego umieszcza się poszczególne pozycje listy otoczone znacznikami <li> (znacznik zamykający nie jest wymagany, ale polecam go jednak stosować ze względu iż jest wymagany w XHTML). Może to wyglądać na przykład następująco:

<ul>
<li>element 1</li>
<li>element 2</li>

<li>element 3</li>
</ul>

---

• element 1
• element 2
• element 3

Wygląd listy można zmienić za pomocą następujących parametrów znacznika <ul>:

• type - określa jakich znaczników należy używać do oznaczania poszczególnych pozycji. Atrybut ten jest niezalecany - zamiast niego powinno się stosować odpowiednie polecenie kaskadowych arkuszy stylów CSS.
  
  Atrybut ten może mieć następujące wartości:
  
  • disc - wypełnione kółko:
    

    <ul type="disc">
    
    <li>element 1</li>
    <li>element 2</li>
    </ul>

    <ul style="list-style-type: disc">
    
    <li>element 1</li>
    <li>element 2</li>
    </ul>

    ---

    • element 1
    • element 2
  • circle - puste w środku kółko:
    

    <ul type="circle">
    <li>element 1</li>
    
    <li>element 2</li>
    </ul>

    <ul style="list-style-type: circle">
    <li>element 1</li>
    
    <li>element 2</li>
    </ul>

    ---

    • element 1
    • element 2
  • square - wypełniony kwadrat:
    
    

    <ul type="square">
    <li>element 1</li>
    <li>element 2</li>
    
    </ul>

    <ul style="list-style-type: square">
    <li>element 1</li>
    <li>element 2</li>
    
    </ul>

    ---

    • element 1
    • element 2

Lista numerowana w HTML

Drugim typem listy jest lista numerowana. Tworzy się ją podobnie jak listę punktów, z tą różnicą, że zamiast znacznika <ul> używa się <ol>:

<ol>
<li>element 1</li>
<li>element 2</li>
<li>element 3</li>

</ol>

---

1. element 1
2. element 2
3. element 3

Wygląd tej listy można modyfikować za pomocą następujących parametrów znacznika <ol>:

• type - określa sposób numerowania listy. Podobnie jak przy znaczniku <ul>, atrybut ten jest niezalecany i zamiast niego powinno się stosować odpowiednią komendę kaskadowych arkuszy stylów CSS.
  
  Dostępne są następujące wartości dla tego atrybutu:
  
  • 1 - wyliczanie z użyciem liczb arabskich:
    

    <ol type="1">
    
    <li>element 1</li>
    <li>element 2</li>
    </ol>

    <ol style="list-style-type: decimal">
    
    <li>element 1</li>
    <li>element 2</li>
    </ol>

    ---

    1. element 1
    2. element 2
  • A - wyliczanie z użyciem dużych liter alfabetu:
    

    <ol type="A">
    <li>element 1</li>
    
    <li>element 2</li>
    </ol>

    <ol style="list-style-type: upper-alpha">
    <li>element 1</li>
    
    <li>element 2</li>
    </ol>

    ---

    1. element 1
    2. element 2
  • a - wyliczanie z użyciem małych liter alfabetu:
    
    

    <ol type="a">
    <li>element 1</li>
    <li>element 2</li>
    
    </ol>

    <ol style="list-style-type: lower-alpha">
    <li>element 1</li>
    <li>element 2</li>
    
    </ol>

    ---

    1. element 1
    2. element 2
  • I - wyliczanie z użyciem liczb rzymskich pisanych dużymi literami:
    

    <ol type="I">
    
    <li>element 1</li>
    <li>element 2</li>
    </ol>

    <ol style="list-style-type: upper-roman">
    
    <li>element 1</li>
    <li>element 2</li>
    </ol>

    ---

    1. element 1
    2. element 2
  • i - wyliczanie z użyciem liczb rzymskich pisanych małymi literami:
    

    <ol type="i">
    <li>element 1</li>
    
    <li>element 2</li>
    </ol>

    <ol style="list-style-type: lower-roman">
    <li>element 1</li>
    
    <li>element 2</li>
    </ol>

    ---

    1. element 1
    2. element 2
• W HTML 4 Loose dostępny jest także atrybut start pozwalający na określenie od jakiej wartości ma się zacząć numerowanie. Jako wartość podaje się liczbę niezależnie od tego jaki typ wyliczania będzie używany. Nie ma go jednak w HTML 4 Strict (dlatego nie będzie też przykładu użycia). Standard CSS2 wprowadza mechanizm zastępczy zwany licznikami (ang. counter), jednak jak na razie implementują go jedynie Firefox i Opera (spawdzałem na wersjach FF 2 i O 9.2). Nie działa to niestety w Internet Explorerze i Netscape Browserze (wersje odpowiednio IE 7 i NB 8.1).

Lista definicji w HTML

Trzecim typem listy jest lista definicyjna. Składa się ona z par wyrażenie-definicja. Buduje się ją za pomocą znacznika <dl>, wewnątrz którego umieszcza się wyrażenia ograniczone znacznikami <dt> i ich definicje w tagach <dd> (znaczniki zamykające nie są wymagane, ale zalecam ich stosowanie):

<dl>
<dt>wyrażenie 1</dt>

<dd>definicja 1</dd>
<dt>wyrażenie 2</dt>
<dd>definicja 2</dd>
</dl>

---

wyrażenie 1

definicja 1

wyrażenie 2

definicja 2

W HTML 4 Loose (Transitional) dostępne są także dwa dodatkowe znaczniki: <menu> i <dir>, służące odpowiednio do budowania menu oraz list katalogów. Są one jednak niezalecane i nie ma ich też w HTML 4 Strict, dlatego przykładów użycia również nie będę podawał. Napiszę tylko że stosuje się je identycznie jak <ul> - ich wygląd na stronie też jest identyczny.

Zagnieżdżanie list

Listy można oczywiście zagnieżdżać, przy czym można mieszać poszczególne rodzaje list:

<ol>
<li>pozycja 1
<ul>
<li>podpozycja 1.1</li>
<li>podpozycja 1.2</li>

</ul></li>
<li>pozycja 2
<ul>
<li>podpozycja 2.1</li>
<li>podpozycja 2.2</li>

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

---

1. pozycja 1
   
   • podpozycja 1.1
   • podpozycja 1.2
2. pozycja 2
   
   
   • podpozycja 2.1
   • podpozycja 2.2