Jak dodać listę nienumerowaną w HTML?
2 min
2 min
Na skróty
Listy — numerowane lub nie — 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.
Pracując z HTML-em mamy do dyspozycji trzy rodzaje list:
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.
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ę:
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>
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;
}
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ć.
Zawodowy copywriter oraz student psychologii na Uniwersytecie Warszawskim. W świecie marketingu internetowego równie mocno, co chwytliwe (i wartościowe) treści interesuje go dobry design. Gdy nie zajmuje się tworzeniem contentu, odkrywa perełki kina niezależnego i pracuje nad własnymi opowiadaniami.
