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.
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ć.
