Jak dodać listę nienumerowaną w HTML?

Listy — numerowane lub nienumerowane — są jednym z podstawowych narzędzi w przyborniku każdego copywritera. Pomagają uporządkować treść i zwrócić uwagę czytelnika na konkretne zagadnienia. Innymi słowy — czynią tekst bardziej czytelnym. W dzisiejszym tekście wyjaśnimy, jak utworzyć prostą listę nienumerowaną w HTML i w jaki sposób można dostosować ją do potrzeb danego tekstu.

Rodzaje list HTML

Pracując z HTML-em mamy do dyspozycji trzy rodzaje list:

• numerowane — w których kolejne elementy są uporządkowane przy pomocy liczb lub liter;

• nienumerowane — gdzie każdy element poprzedzony jest symbolem — domyślnie czarną kropką

• opisowe — nazywane też listami definicji; pozwalające nadać tekstowi strukturę podobną do klasycznego słownika.

Każdy z wymienionych typów list pozwala ustrukturyzować tekst w nieco odmienny sposób. Dla przykładu — wykorzystując listę numerowaną automatycznie sugerujemy czytelnikowi pewną hierarchię treści; zwykłe wypunktowanie pozostaje bardziej „swobodne” w interpretacji, wpływając przede wszystkim na czytelność tekstu. W naszym artykule skupiamy się na tych drugich.

Jak dodać listę nienumerowaną?

Choć dla początkujących HTML może się wydawać dosyć trudnym językiem — w rzeczywistości wcale tak nie jest. Wystarczy, że poznamy jego znaczniki… i składnię.

Listę nienumerowaną umieszczamy w strukturze tekstu przy pomocy znaczników <ul></ul> (wskazówka — to skrót od angielskiej nazwy unordered list). Poszczególne elementy listy wstawiamy pomiędzy nimi — i oznaczamy znacznikami <li></li> (z angielskiego: list item). Prawidłowa struktura wygląda następująco:

<ul>

  <li>języki znaczników</li>

  <li>kaskadowe arkusze stylów (CSS)</li>

  <li>JavaScript (JS)</li>

</ul>

co w rezultacie daje nam taką oto listę:

• języki znaczników

• kaskadowe arkusze stylów (CSS)

• JavaScript (JS)

Jak stworzyć listę wielopoziomową?

Przy pomocy HTML-a bez problemów utworzymy także „listę w liście”. Nie nakłada on żadnych ograniczeń, jeżeli chodzi o ilość poziomów zagnieżdżenia — jedyne, na co trzeba zwrócić uwagę to czytelność samej listy, która w przypadku wielopoziomowych hierarchii może być pewnym problemem. 

Listę wielopoziomową dodajemy, ponownie, przy pomocy znaczników <ul></ul> — zagnieżdżając ją wewnątrz wybranego elementu listy wyższego poziomu. W przypadku listy dwupoziomowej struktura HTML może wyglądać tak:

<ul>

  <li>języki znaczników</li>

    <ul>

       <li>HTML</li>

       <li>XML</li>

       <li>XHTML</li>

    </ul>

  <li>kaskadowe arkusze stylów (CSS)</li>

  <li>JavaScript (JS)</li>

</ul>

Style CSS, obrazy i linki — jak urozmaicić naszą listę?

Oczywiście, lista nienumerowana HTML nie musi składać się wyłącznie z tekstu — w prosty sposób umieścimy w niej także grafiki oraz odnośniki do innych stron.

W przypadku obrazów niezbędny będzie nam znacznik <img>:

<ul>

  <li><img src=”screenUI.jpg” alt=”Interfejs panelu klienta”></li> 

</ul>

Z kolei aby umieścić w ramach listy odnośnik, posłużymy się znacznikiem <a href>:

<ul>

  <li><a href=”https://www.semcore.pl”>agencja seo</a></li>

</ul>

HTML pozwala także stosować do list style CSS — zmieniające wygląd markerów czy właściwości czcionki poszczególnych elementów listy. 

Jeśli chodzi o markery — standardowo do wyboru mamy czarne koło (disc), kwadrat (square) oraz okrąg (circle). Poniżej przykład dla markerów kwadratowych:

ul

{

 list-style-type: square;

}

Możemy posłużyć się także grafiką zewnętrzną — wprowadzimy ją tak:

ul

{ 

 list-style-image: url(„marker.jpg”);

}

Aby z kolei zastosować wybrany styl do elementów listy, musimy w arkuszu wskazać dodatkowo atrybut li:

ul li {

  font-family: Courier New;

  font-size: 22px;

  line-height: 2;

}

Zastosowanie list w tekście — czyli ich znaczenie dla SEO

Na samym początku naszego artykułu wspomnieliśmy, że odpowiednio sformatowane listy dobrze wpływają na odbiór tekstów — poprawiają ich czytelność i ułatwiają dotarcie do kluczowych informacji. 

Zanim jednak dany tekst trafi na ekran czyjegoś komputera lub smartfona, zostanie on przeanalizowany przez roboty wyszukiwarki. A z ich „punktu widzenia” niezwykle istotna jest struktura strony oraz zawartych na niej treści… którą listy HTML również pomagają zoptymalizować. W kontekście działań SEO — z pewnością warto o tym pamiętać.

FAQ – pytania o to, jak dodać listy w HTML?

Jak zrobić listę nieuporządkowaną w języku HTML?

Aby utworzyć listę nieuporządkowaną (unordered list), w kodzie HTML używa się znacznika <ul>, a jej elementy definiuje się poprzez <li>.

Czym różni się lista nieuporządkowana od uporządkowanej?

Lista nieuporządkowana nie ma określonej kolejności, a jej elementy są wyświetlane przez przeglądarki same jako wypunktowania. Z kolei ordered list (<ol>) numeruje elementy, podkreślając porządek.

Czy można dodać jedną listę wewnątrz kolejnej listy?

Tak, w kodzie HTML można zagnieżdżać listy. Przykładowa lista nieuporządkowana może zawierać kolejną listę opisową (<dl>) lub następną listę w formie <ul> albo <ol>.

Jak wykorzystać listy pod kątem SEO i struktury dokumentu?

Listy mają kluczowe znaczenie dla czytelności stron internetowych. Dodając listę nieuporządkowaną w blokach tekstowych, ułatwia to użytkownikom i robotom indeksującym szybkie skanowanie treści.

Czy listy nieuporządkowane można stylizować za pomocą CSS?

Tak, elementy <ul> i <li> można modyfikować za pomocą CSS, np. zmieniając wygląd wypunktowania, kolor tła czy odstępy, co poprawia prezentację stron.

Czy listy wpływają na zgodność z doctype HTML?

Tak, użycie list zgodnie z semantyką języka HTML wspiera poprawną strukturę dokumentu i zapewnia, że inne znaczniki współgrają z listą zgodnie ze standardami.

Jakie są inne typy list w języku HTML?

Oprócz listy nieuporządkowanej, w HTML dostępna jest ordered list (<ol>) z numeracją oraz listy opisowe (<dl>), które prezentują pary pojęć i ich definicji.

Genialne firmy mnożą
swój potencjał z

Sprawdź nasze Case Studies

Ocena Clutch

5.0

Ocena Google

4.8

Sprawdź, czy Twój
marketing działa.

Umów konsultację z Marcinem Stypułą, CEO Semcore i sprawdź swoją strategię digital marketingu.

Umów konsultację 299 zł/h