Listy w HTML

1.1 Rodzaje list

Listy w HTML są ważnym narzędziem do organizowania i strukturyzowania informacji. Pozwalają na wyświetlanie elementów z numerami lub z punktami (znacznikami). Przyjrzyjmy się szczegółowo każdemu z elementów list w HTML: <ul>, <ol>, i <li>.

Nienumerowane listy (<ul>)

Znacznik <ul> jest używany do tworzenia nienumerowanych (znakowanych) list. Elementy listy wyświetlane są z znacznikami (kropkami, kółkami, kwadratami).

Przykład:

    
      <ul>
        <li>Pierwszy element listy</li>
        <li>Drugi element listy</li>
        <li>Trzeci element listy</li>
      </ul>
    
  

Numerowane listy (<ol>)

Znacznik <ol> jest używany do tworzenia numerowanych list. Elementy listy wyświetlane są z numerami lub literami.

Przykład:

    
      <ol>
        <li>Pierwszy element listy</li>
        <li>Drugi element listy</li>
        <li>Trzeci element listy</li>
      </ol>
    
  

1.2 Elementy listy <li>

Znacznik <li> jest używany do oznaczania każdego elementu na liście, czy to nienumerowanej czy numerowanej. Musi być zawsze zagnieżdżony w <ul> lub <ol>.

Jak łatwo zapamiętać te znaczniki:

• Ordered List – uporządkowana (numerowana) lista
• Unordered List – nieuporządkowana (nienumerowana) lista
• List Item – element listy

Atrybut type

Ten atrybut można używać w <ul> i <ol> do zmiany typu znaczników lub numeracji. Na przykład, dla <ol> można używać wartości "1", "A", "a", "I", "i", a dla <ul> - "disc", "circle", "square".

Przykład zmiany typu znacznika dla <ul>:

    
      <ul type="square">
        <li>Pierwszy element listy</li>
        <li>Drugi element listy</li>
      </ul>
    
  

Przykład zmiany typu numeracji dla <ol>:

    
      <ol type="A">
        <li>Pierwszy element listy</li>
        <li>Drugi element listy</li>
      </ol>
    
  

Atrybut start:

Ten atrybut jest używany tylko z <ol> do określenia początkowej liczby numeracji.

Na przykład:

    
      <ol start="5">
        <li>Piąty element listy</li>
        <li>Szósty element listy</li>
      </ol>
    
  

Zagnieżdżone listy

Listy mogą być zagnieżdżone, co pozwala tworzyć bardziej złożone struktury.

Przykład zagnieżdżonej listy:

    
      <ul>
        <li>Pierwszy element listy</li>
          <ul type="circle">
            <li>Zagnieżdżony pierwszy element</li>
            <li>Zagnieżdżony drugi element</li>
          </ul>
        <li>Drugi element listy</li>
        <li>Trzeci element listy</li>
      </ul>
    
  

1.3 Stylizacja list

Listy można stylizować przy pomocy CSS, zmieniając kolor znaczników, typy znaczników i odstępy.

Przykład stylizacji:

    
      ul.custom-list {
        list-style-type: katakana; /* Japońska sylabariusz */
        color: blue; /* Kolor tekstu */
      }

      ol.custom-list {
        list-style-type: hiragana-iroha; /* Japoński system porządkowania */
        color: green; /* Kolor tekstu */
      }
    
  

    
      <ul class="custom-list">
        <li>Pierwszy element listy</li>
        <li>Drugi element listy</li>
      </ul>

      <ol class="custom-list">
        <li>Pierwszy element listy</li>
        <li>Drugi element listy</li>
      </ol>
    
  

W ten sposób użycie <ul>, <ol>, i <li> pomaga strukturyzować treść i poprawia jej czytelność na stronach internetowych.