Służą do wypunktowania danych w postaci numerowanej, nienumerowanej bądź listy definicji.

<ul> – znacznik listy nienumerowanej (unordered lists)
<ol> – znacznik listy numerowanej (ordered lists)
<li> – znacznik pozycji listy (list item)

Podstawowa budowa listy nienumerowanej:

<ul>
  <li>Wychowanie fizyczne</li>
  <li>Matematyka</li>
  <li>Witryny i aplikacje internetowe</li>
</ul>

• Wychowanie fizyczne
• Matematyka
• Witryny i aplikacje internetowe

Widoczny powyżej domyślny obrazek koła przy pozycji listy można edytować (CSS: list-style-type).
Dostępne opcje: disc, circle, square, none.

<ul style="list-style-type:square">
  <li>Wychowanie fizyczne</li>
  <li>Matematyka</li>
  <li>Witryny i aplikacje internetowe</li>
</ul>

• Wychowanie fizyczne
• Matematyka
• Witryny i aplikacje internetowe

<ul style="list-style-type:none">
  <li>Wychowanie fizyczne</li>
  <li>Matematyka</li>
  <li>Witryny i aplikacje internetowe</li>
</ul>

• Wychowanie fizyczne
• Matematyka
• Witryny i aplikacje internetowe

Przykład podstawowej budowy listy numerowanej

<ol>
  <li>Wychowanie fizyczne</li>
  <li>Matematyka</li>
  <li>Witryny i aplikacje internetowe</li>
</ol>

1. Wychowanie fizyczne
2. Matematyka
3. Witryny i aplikacje internetowe

Domyślnie występujące kolejne liczby jako punktory kolejnych pozycji listy możemy edytować (type=”opcja”).
Dostępne opcje:

• 1 – liczby
• A – wielkie litery
• a – małe litery
• I – duże liczby rzymskie
• i – małe liczby rzymskie

<ol type="A">
  <li>Wychowanie fizyczne</li>
  <li>Matematyka</li>
  <li>Witryny i aplikacje internetowe</li>
</ol>

1. Wychowanie fizyczne
2. Matematyka
3. Witryny i aplikacje internetowe

Listy możemy dowolnie zagnieżdżać wewnątrz siebie:

<ul>
  <li>Poniedziałek
    <ul>
      <li>Wychowanie fizyczne</li>
      <li>Matematyka</li>
      <li>Witryny i aplikacje internetowe</li>
    </ul>
  </li>
  <li>Wtorek
    <ul>
      <li>Programowanie aplikacji internetowych</li>
      <li>Programowanie aplikacji internetowych</li>
      <li>Programowanie aplikacji internetowych</li>
    </ul>
  </li>
</ul>

• Poniedziałek
  • Wychowanie fizyczne
  • Matematyka
  • Witryny i aplikacje internetowe
• Wtorek
  • Programowanie aplikacji internetowych
  • Programowanie aplikacji internetowych
  • Programowanie aplikacji internetowych

Również różne rodzaje list.

<ol>
  <li>Poniedziałek
    <ul>
      <li>Wychowanie fizyczne</li>
      <li>Matematyka</li>
      <li>Witryny i aplikacje internetowe</li>
    </ul>
  </li>
  <li>Wtorek
    <ul>
      <li>Programowanie aplikacji internetowych</li>
      <li>Programowanie aplikacji internetowych</li>
      <li>Programowanie aplikacji internetowych</li>
    </ul>
  </li>
</ol>

1. Poniedziałek
   • Wychowanie fizyczne
   • Matematyka
   • Witryny i aplikacje internetowe
2. Wtorek
   • Programowanie aplikacji internetowych
   • Programowanie aplikacji internetowych
   • Programowanie aplikacji internetowych

Zagnieżdżenie może być wielokrotne.

<ul>
  <li>Jeden
    <ul>
      <li>Dwa
        <ul>
          <li>Trzy</li>
        </ul>
      </li>
      <li>Cztery</li>
    </ul>
  </li>
  <li>Pięć</li>
</ul>

• Jeden
  • Dwa
    • Trzy
  • Cztery
• Pięć

Możemy również wykorzystać listę definicji.
<dl> – znacznik główny listy definicji (definition list)
<dt> – pojęcie (definition term)
<dd> – opis (definition description)

<dl>
  <dt>Matematyka</dt>
  <dd>- takie tam liczby</dd>
  <dt>Programowanie</dt>
  <dd>- że co proszę?</dd>
</dl>

Matematyka

– takie tam liczby

Programowanie

– że co proszę?