Listy numerowane, nienumerowane, opisowe

Listy są kolejnym niezbędnym elementem w procesie projektowania stron internetowych. Podobnie jak podobnie jak nagłówki, akapity i wyróżnienia służą do prezentowania informacji na stronach internetowych, umożliwiając czytelnikom łatwiejsze przyswojenie treści. HTML oferuje trzy typy list — numerowane, nienumerowane i opisowe.

Numerowane listy

Numerowane listy, zwane są również uporządkowanymi, używają numeracji, aby przedstawić kolejność elementów. Numerowane listy są używane, gdy kolejność elementów na liście ma ważne znaczenie, np. w przypadku instrukcji krok po kroku lub w przepisach kulinarnych. Listy numerowane tworzymy używając znacznika <ol> (ordered list) oraz znaczników <li> (list item) dla każdego elementu listy.

Przykład użycia listy numerowanej:

<ol>
  <li>Zakup składników</li>
  <li>Przygotowanie ciasta</li>
  <li>Wyrośnięcie ciasta</li>
  <li>Pieczenie chleba</li>
</ol>

Nienumerowane listy

Nienumerowane listy, są nazywane również nieuporządkowanymi, przedstawiają elementy bez określonej kolejności lub priorytetu. Nienumerowane listy są najczęściej używane do prezentowania zestawów elementów, które nie muszą być uporządkowane, takich jak lista funkcji czy cech produktu. Listy nienumerowane tworzymy używając znacznika <ul> (unordered list) oraz znaczników <li> (list item) dla każdego elementu listy.

Przykład użycia listy nienumerowanej:

<ul>
  <li>Bluetooth</li>
  <li>GPS</li>
  <li>Kamera 12 MP</li>
  <li>Odtwarzacz MP3</li>
</ul>

Listy opisowe

W HTML są stosowane również listy opisowe, które służą do prezentowania zestawów terminów wraz z ich definicjami, opisami lub innymi informacjami z nimi związanymi. Listy opisowe możemy stosować do przedstawienia słowniczka, FAQ, czy zestawienia parametrów i ich wartości. W celu stworzenia listy opisowej, używamy znacznika <dl> (description list) oraz par znaczników <dt> (description term) i <dd> (description definition) dla każdego elementu listy.

Przykład użycia listy opisowej:

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language – język znaczników służący do tworzenia i formatowania dokumentów hipertekstowych, takich jak strony internetowe.</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets – arkusze stylów służące do opisu wyglądu i formatowania dokumentów HTML.</dd>
  <dt>JavaScript</dt>
  <dd>Skryptowy język programowania, który pozwala na dodawanie interaktywności i dynamicznych elementów do stron internetowych.</dd>
</dl>

Warto zapamiętać

Listy są istotnym elementem formatowania tekstu w HTML, ułatwiają czytelnikom przyswojenie informacji i porządkują stronę w określonym wyglądzie. Stosując różne rodzaje list, takie jak numerowane (uporządkowane), nienumerowane (nieuporządkowane) oraz opisowe, można efektywnie prezentować treści w zorganizowany sposób, zwiększając czytelność i przystępność strony internetowej.

Czy ten poradnik był pomocny?

Swoją przygodę z projektowaniem stron internetowych rozpocząłem z kursem od Komputer Świat wydanym w marcu 2003 roku w formie małej książeczki. Na przestrzeni 20 lat zaprojektowałem niezliczoną ilość witryn i aplikacji internetowych. Projektowałem dla małych i dużych firm takich jak Oriflame, Top Market, Bezpieczna Rodzina czy Helping Hand.



Błąd na stronie? Zgłoś go tutaj:

Używamy plików cookie. Przeczytaj politykę prywatności, jeśli chcesz dowiedzieć się więcej.