HTML: listy

article-thumbnail

Listy

Listy występują również w języku HTML. Są one wykorzystywane między innymi, poza oczywistym wypisywaniem treści w liście, czy do tworzenia menu nawigacyjnego służącego do poruszania się po stronie. Listy dzielimy na dwa rodzaje: listę posortowaną <ol> oraz listę nieposortowaną <ul>,
a elementy listy definiujemy za pomocą znacznika <li>.

Przykład list ponumerowanych i nienumerowanych
<!DOCTYPE html> 
<html>
  <body> 
    <h1>Listy</h1> 
    <h2>Lista posortowana</h2> 
    <ol> 
      <li>Element listy</li>
      <li>Element listy</li> 
      <li>Element listy</li> 
    </ol> 
    <h2>Lista nieposortowana</h2>
    <ul> 
      <li>Element listy</li>
      <li>Element listy</li> 
      <li>Element listy</li> 
    </ul>
  </body> 
</html>

Sposoby wyświetlania list

W listach <ol>, sposób wyświetlania możemy modyfikować za pomocą atrybutu type. Wartość, od której się zaczynają, definiujemy za pomocą atrybutu value. Listy można zagnieżdżać.

Modyfikacje sposobu wyświetlania list numerowanych
<ol> 
  <li value="5">Element listy</li> 
  <li>Element listy</li> 
  <li>Element listy</li> 
</ol> 
<ol type="A"> 
  <li>Element listy</li> 
  <li>Element listy</li>
  <li>Element listy</li> 
</ol>
<ol type="a">
  <li>Element listy</li>
  <li>Element listy</li> 
  <li>Element listy</li> 
</ol>
<ol type="I">
  <li>Element listy</li>
  <li>Element listy</li>
  <li>Element listy</li> 
</ol> 
<ol type="i"> 
  <li>Element listy</li> 
  <li>Element listy</li> 
  <li>Element listy</li> 
</ol>

Zagnieżdżanie list

przykład listy zagnieżdżonej
<ol type="I"> 
  <li>Element listy: 
    <ol type="i"> 
      <li>Element listy</li> 
      <li>Element listy</li> 
      <li>Element listy</li> 
    </ol>
  </li> 
  <li>Element listy</li> 
  <li>Element listy</li> 
</ol>
Jacek Woźniak

Ostatnio zaktualizowane: 27 maja 2020

Egzamin EE.09, Egzamin INF.03, HTML