3 Rodzaje list HTML i jak z nich korzystać

Kluczowe wnioski

Listy uporządkowane, nieuporządkowane i opisowe.

Listy uporządkowane są powszechnym elementem HTML, który można uporządkować za pomocą wartości liczbowych lub nienumerycznych, znanych jako “typy list uporządkowanych”. Dodatkowo, listy te mogą być dalej dostosowywane za pomocą różnych atrybutów, takich jak atrybut “type”, który umożliwia spersonalizowane opcje formatowania, podczas gdy atrybuty “start” i “reversed” umożliwiają odpowiednio dostosowanie początkowego położenia elementu i kierunku listy.

Listy nieuporządkowane zapewniają środki do organizowania i prezentowania informacji w zwięzły sposób, grupując elementy, które są luźno powiązane lub nie mają określonej kolejności ważności. Wygląd tych list można udoskonalić, wykorzystując kaskadowe arkusze stylów (CSS) do modyfikowania stylu punktorów, co może obejmować zmianę ich rozmiaru, kształtu, koloru i położenia w elemencie listy. Ta funkcja pozwala projektantom i programistom dostosować listy nieuporządkowane do różnych projektów wizualnych, zachowując jednocześnie łatwy do odczytania format dla użytkowników.

Lista HTML służy jako podstawowy element strukturalny dla dowolnego asortymentu skorelowanych informacji na stronie internetowej. Niezależnie od tego, czy budujemy menu nawigacyjne, układamy produkty w specjalnej ofercie, czy też staramy się przedstawić skomplikowane dane w bardziej przystępnym formacie, listy te okazują się niezbędnymi narzędziami do wykonania zadania.

Istnieją trzy podstawowe odmiany list HTML, które spełniają różne role architektoniczne w projektowaniu i tworzeniu stron internetowych.

Lista uporządkowana

Lista uporządkowana HTML jest skutecznym środkiem do organizowania serii powiązanych ze sobą elementów w określonej kolejności. Aby skonstruować taką listę, należy wykorzystać

 <!-- Ordered list -->
<ol>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ol>

Ten kod renderuje następujący widok:

Ważne jest, aby mieć świadomość, że domyślnie uporządkowana lista ma sekwencję numeryczną. Istnieje jednak możliwość zmiany tego układu poprzez wykorzystanie atrybutu “type”. Atrybut ten zapewnia użytkownikowi kontrolę nad tym, który czynnik określa organizację listy. Dostępne są różne opcje wyboru metody porządkowania, w tym znaki alfabetyczne (zarówno duże, jak i małe litery), wartości liczbowe, a nawet cyfry rzymskie w postaci wielkich lub małych liter.

 <!-- Ordered list -->
<ol type="a">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ol> 

Włączenie atrybutu “type” w elemencie listy uporządkowanej (" “) daje zmienioną prezentację wizualną, jak pokazano poniżej:

“start”, który określa liczbę elementów wyświetlanych na początku listy; oraz “reversed”, który odwraca kolejność listy, tak aby była wyświetlana od ostatniego elementu.

Atrybut start umożliwia rozpoczęcie porządkowania elementów od dowolnej pozycji poprzez wykorzystanie wartości całkowitej. Przykładowo, po włączeniu start="3" do elementu , bez określania konkretnego typu , rozpocznie on porządkowanie listy od cyfry trzy. W przypadku określenia type="a" lub type="I" , rozpocznie porządkowanie odpowiednio od “c” lub “I”.

 <!-- Ordered list -->
<ol type="I" start="3">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ol> 

Powyższy kod wyświetla następujący widok:

Atrybut “reversed” umożliwia zmianę kolejności elementów na liście poprzez przełączanie jego wartości logicznej, z domyślnym ustawieniem false.

 <!-- Ordered list -->
<ol reversed="true">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ol> 

Dostarczony kod, po wykonaniu, powoduje wyświetlenie tabeli w przeglądarce internetowej z określonymi funkcjami i zawartością, jak opisano poniżej:html Table Title

Lista nieuporządkowana

Lista nieuporządkowana służy jako skuteczny sposób organizowania i prezentowania kilku elementów, które są koncepcyjnie powiązane, ale nie wymagają określonej kolejności lub rankingu. Zazwyczaj przeglądarki internetowe wykorzystują wypunktowane punkty do oznaczenia każdego elementu w takiej kolekcji.

Wygenerowanie nieuporządkowanej tablicy ogłoszeń składającej się z szeregu elementów wymaga zastosowania odpowiednio elementów HTML (do oznaczenia kontenera) i (dla każdego pojedynczego wpisu).

 <ul>
  <li>Item 1</li>
  <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul> 

Ten kod renderuje następujący widok:

Konwencjonalny wygląd listy nieuporządkowanej jest oznaczony okrągłym kształtem znanym jako “dysk”. W przeszłości można było wykorzystać atrybut “type” do określenia wizualnej reprezentacji listy nieuporządkowanej.Niestety, ten konkretny atrybut został uznany za przestarzały i nie jest już obsługiwany. Zamiast tego zaleca się korzystanie z powszechnie stosowanej właściwości “CSS list-style-type” w celu osiągnięcia pożądanych dostosowań w odniesieniu do list nieuporządkowanych.

 <style>
ul { list-style-type: square; }
 </style> 

Powyższy kod zmienia wizualną reprezentację dostarczonych informacji, generując strukturę HTML zawierającą wiele elementów div, gdzie każdy element ma przypisane różne atrybuty i zawiera określoną zawartość.

Właściwość CSS list-style-type pozwala na wykorzystanie różnych stylów wypunktowania, takich jak okrągłe kształty, niestandardowe obrazy, ikony i symbole. Stosując CSS, który zmienia układ elementów listy, można wykorzystać listy nieuporządkowane do generowania menu nawigacyjnych.

Listy zagnieżdżone

Lista zagnieżdżona składa się zasadniczo z elementu z szerszej listy, który jest w niej zawarty. Utworzenie takiej struktury można osiągnąć poprzez harmonijne połączenie zarówno uporządkowanych, jak i nieuporządkowanych elementów listy. Takie konfiguracje są w stanie przedstawiać skomplikowane systemy hierarchii z większym wyrafinowaniem.

 <H3>Chicken Pasta Insturctions</H3>
<ol>
   <li>Boil pasta.</li>
   <li>
   Season chicken breast.
    <ul>
       <li>salt and pepper</li>
       <li>paprika</li>
       <li>garlic powder</li>
       <li>Italian seasoning</li>
     </ul>
  </li>
  <li>Heat olive oil in pot over medium-high heat.</li>
   <li>Add chicken breast to pan and cook for 5 minutes.</li>
   <li>Add heavy cream and parmesan cheese to empty pot.</li>
   <li>Add pasta and slice chicken to cream sauce.</li>
</ol> 

Ten kod renderuje następujący widok:

Lista opisu

Znacznik HTML jest używany do definiowania listy opisu, składającej się z terminów opisowych ( ) i odpowiadających im szczegółów ( ). Ten ustrukturyzowany format zapewnia przejrzystą organizację prezentacji informacji w sposób hierarchiczny, zwiększając czytelność i zrozumienie.

 <h3>Popular Laptops</h3>
<dl>
  <dt>MacBook Pro</dt>
   <dd>
     Provides up to 22 hours of battery life,
     has an advanced camera, and a magic keyboard with touch ID.
   </dd>

  <dt>MSI GS76 Stealth</dt>
   <dd>
    A powerful gaming laptop with supercharged graphics and customized keys.
   </dd>
</dl> 

Powyższy kod renderuje następujący widok:

Uporządkuj swoją zawartość za pomocą odpowiedniej listy HTML

Wybór listy HTML wykorzystywanej w przedsięwzięciu tworzenia stron internetowych powinien opierać się na informacjach, które mają być przekazywane użytkownikowi. Na przykład, gdy chcemy wygenerować seryjną prezentację, taką jak etapy przygotowania potrawy lub wykonania zadania, najbardziej odpowiednia byłaby uporządkowana lista.

Rozważając organizację treści, która nie wymaga procesu lub sekwencji krok po kroku, takich jak dane faktyczne lub definicje, wykorzystanie nieuporządkowanej listy może okazać się bardziej praktyczną alternatywą. Dodatkowo, w przypadkach, gdy chce się przedstawić kompendium terminów i odpowiadających im wyjaśnień lub kompilację zapytań i odpowiedzi, zastosowanie formatu listy definicji przyniesie optymalne rezultaty.