Listy HTML · Technik informatyk egzamin zawodowy

Programowanie / HTML

Listy HTML

Listy to jeden z najczęściej wykorzystywanych elementów na stronach internetowych, pozwalający na przejrzyste uporządkowanie informacji. Dzięki HTML5 mamy dostępne różne rodzaje list, które ułatwiają zarówno czytelnikom, jak i wyszukiwarkom rozpoznawanie treści.

Rodzaje list w HTML5

HTML5 pozwala na używanie trzech podstawowych typów list:

Lista nienumerowana (<ul>)

Używana do prezentacji elementów bez określonej kolejności. Standardowo elementy wypunktowane są za pomocą kropek, które można zmieniać za pomocą CSS.

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

 

Przykład zmiany stylu punktora:

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

 

Lista numerowana (<ol>)

Stosowana, gdy kolejność elementów jest istotna. Domyślnie elementy są numerowane cyframi.

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

 

Dostępne opcje numerowania:

  • type="1" – cyfry arabskie (domyślne)

  • type="A" – wielkie litery alfabetu

  • type="a" – małe litery alfabetu

  • type="I" – wielkie cyfry rzymskie

  • type="i" – małe cyfry rzymskie

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

 

Lista definicyjna (<dl>)

Idealna do prezentowania terminów wraz z ich definicjami lub opisami.

<dl>
  <dt>Matematyka</dt>
  <dd>- Nauka zajmująca się liczbami, figurami geometrycznymi i logiką.</dd>
  <dt>Programowanie</dt>
  <dd>- Proces tworzenia oprogramowania, aplikacji czy stron internetowych.</dd>
</dl>

 

Zagnieżdżanie list

Listy można dowolnie zagnieżdżać, tworząc bardziej skomplikowane i precyzyjne struktury:

<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>Grafika komputerowa</li>
    </ul>
  </li>
</ul>

 

Możliwe jest również wielokrotne zagnieżdżanie list, które pozwala szczegółowo uporządkować informacje.

<ul>
  <li>Poziom 1
    <ul>
      <li>Poziom 2
        <ul>
          <li>Poziom 3</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

 

Kiedy używać poszczególnych list?

  • Lista nienumerowana – gdy kolejność elementów nie ma znaczenia (np. lista zakupów).

  • Lista numerowana – gdy kolejność elementów jest istotna (np. kroki instrukcji).

  • Lista definicyjna – do par „termin – definicja”, np. w słowniku lub FAQ.

Podobne wpisy