Dlaczego powinienem używać „li” zamiast „div”?

Nie jestem pewien, dlaczego muszę używać ul-li, a nie po prostu używać div podczas wystawiania przedmiotów. Mogę sprawić, że oba będą wyglądać dokładnie tak samo, więc jaka jest funkcjonalna zaleta tworzenia nieuporządkowanej listy w porównaniu do ustawiania elementów div

Za poprawność semantyczną. HTML ma możliwość wyrażania list rzeczy i pomaga robotowi Google, czytnikom ekranu i wszystkim innym użytkownikom, którzy nie dbają wyłącznie o prezentację witryny, lepiej zrozumieć treść.

Nie jestem pewien, dlaczego muszę używać ul-li, a nie po prostu używać div podczas wystawiania przedmiotów. Mogę sprawić, że oba będą wyglądać dokładnie tak samo

Że jest kluczowe słowo w Twoim pytaniu: „wygląd”. Można również uczynić je wpisać takie same dla osób niewidomych z wykorzystaniem czytnika Braille'a? Czy możesz sprawić, by brzmiały tak samo dla osób niewidomych za pomocą syntezatora zamiany tekstu na mowę? Czy nadal możesz sprawić, by wyglądały tak samo dla osób niedowidzących, używając niestandardowych arkuszy stylów użytkownika CSS po stronie klienta?

To słowo „patrz” to bardzo niebezpieczne słowo - kiedy używasz go w odniesieniu do HTML, wszystkie alarmy powinny wybuchnąć w twojej głowie. HTML to język służący do opisu semantycznej struktury dokumentu hipermedialnego. Struktura semantyczna nie ma „wyglądu”, to abstrakcyjne pojęcie.

Nawet jeśli nie przejmujesz się tym całym semantycznym hokusem i nie obchodzą Cię osoby niewidome, zastanów się nad tym: Google, Yahoo, MSN i spółka nie mają oczu, nie „patrzą” na renderowany CSS .

Używając poprawnych semantycznie znaczników, osadzasz dodatkowe informacje w swoim tekście. Używając ul / li, przekazujesz używanej aplikacji, że informacja jest listą, a nie tylko „czymś” (kto wie co), czyli jakimś tekstem wewnątrz dowolnego elementu.

Bezpośrednia odpowiedź na Twoje pytanie: Zaletą funkcjonalną jest to, że elementy div same w sobie niewiele znaczą, podczas gdy ul lis wyraźnie oznacza „to jest nieuporządkowana lista elementów”.

Termin „semantyka” odnosi się do sposobu, w jaki wykorzystujesz nieodłączne znaczenie istniejących struktur do tworzenia wyraźnego znaczenia. HTML składa się z tagów, które same w sobie oznaczają pewne rzeczy. Istnieją ustalone zasady / wytyczne / sposoby ich używania, aby opublikowany dokument HTML zawierał to, co chcesz, aby oznaczał.

Jeśli podasz coś w swoim dokumencie, dodaj listę uporządkowaną (UL) lub listę nieuporządkowaną (OL). Z drugiej strony element podziału strony (DIV) służy do tworzenia określonej i oddzielnej części treści.

Element div „dzieli”. Kiedy patrzysz na stronę, widzisz określone części, takie jak treść, stopka, nagłówek, nawigacja, menu, formularze itp. Możesz użyć znaczników DIV , aby utworzyć te podziały. Często części strony odpowiadają układowi wizualnemu, więc użycie wyraźnych podziałów strony (DIV) w celu wycięcia układu w CSS jest naturalnym dopasowaniem. W ten sposób znaczniki DIV stają się strukturalne.

Jeśli niewłaściwie użyjesz lub nadużyjesz znacznika DIV , może to spowodować niezamierzone znaczenie i nadmiar kodu.

Dla niejasności: Google używa h3 i div do „podzielenia” ich wyników wyszukiwania. ul> li> h3 + div

Kiedy więc wyłączysz wszystkie style (Shift + Cmd / Crtl + S w Firefoksie z paskiem narzędzi WebDeveloper), elementy div powinny zniknąć i naturalnie się układać. Twój sam HTML powinien nadal renderować ładną stronę z przejrzystą hierarchią: od góry do dołu, najważniejsza treść na początku oraz listy z punktorami i numerami dla wymienionych elementów. I dobrym pomysłem jest dodanie linku u góry (dla użytkowników niewizualnych), który pozwala przeskoczyć w dół do: głównej treści, ważnych formularzy lub głównych nagłówków (jak spis treści).

Na koniec pamiętaj, że tworzysz dokument. Bez wszystkich efektów wizualnych powinien być nadal przekonującym dokumentem.

Wiele się mówi o używaniu <li>lub używaniu, <div>ale żaden komentarz nie podał solidnego przykładu treści, która znajduje się wewnątrz tych tagów. Mam wrażenie, że <ul>i <li>tak naprawdę nie są tak ważne, jak nie można powiedzieć, że po raz ostatni I rzeczywiście przeczytać „listy” rzeczy na stronie internetowej, gazety lub czasopisma - online lub w formie drukowanej.

<div>jest znacznie bardziej wszechstronny. Jeśli wymieniasz składniki na ciasto, tak, to jest lista. Jeśli wymieniasz rzeczy do spakowania na wycieczkę pieszą, tak, to jest lista.

Ale co z formą użytkownika, na przykład, która wymienia pewne przypadkowe rzeczy, które tak naprawdę nie są listą, ani serią akapitów, ani wszystkimi „nagłówkami”. Niektóre rzeczy to daty, inne to pola wyboru, a inne tekst. Podziel się tym, jeśli o mnie chodzi. Osoba ślepy byłoby mis poinformowany jeśli została oznaczona za pomocą <ul>i <li>i usłyszeli „Oto lista ...”, gdy jest to tylko Hodge-podge rzeczy, nie bardzo się lista.

Powinieneś użyć odpowiednich tagów dla treści, które chcesz umieścić w środku. Nie tylko oznacza to, że ul / li jest bardziej odpowiednie dla list. Oznacza to również, że musisz wziąć pod uwagę zawartość swojej listy i sprawdzić, czy jest to lista nieuporządkowana / uporządkowana lub lista definicji.

Innym argumentem jest to, że po wyłączeniu css. Przeglądarka wyrenderuje swój domyślny styl, co sprawia, że ​​przyjemniej jest na nią patrzeć, jeśli używane są alternatywne urządzenia do przeglądania. Zwiększa również dostępność.

Jeśli zamiast tego użyjesz div, lynx nie będzie w stanie wyrenderować strony w czytelny sposób.

Osobiście lubię li za semantykę. Podczas przeglądania źródła od razu widzisz, że masz listę czegoś, jeśli są one otoczone przez li. Kolekcja div nie ma znaczenia semantycznego i zwykle jedyną semantyką listy są wprowadzane przez klasy css, takie jak „listItem”. Co oczywiście wskazuje na fakt, że w pierwszej kolejności należało użyć li.

Jeśli masz pętlę w logice prezentacji, zawsze wolę li zamiast div.

<li> oznacza pozycję na liście, która pozwala analizatorom (przeglądarkom, wyszukiwarkom, pająkom) wiedzieć, że wystawiasz elementy. Możesz użyć DIV zamiast LI, ale te parsery nigdy nie dowiedzą się, że te elementy są wymienione, a DIV tak naprawdę nie opisuje niczego poza tym, że jest blokiem.

To zależy od projektu. Niedawno wykonałem projekt, w którym menu zostało zaprojektowane przy użyciu listy. Chcieli dodać kilka efektów, takich jak przesuwanie / zanikanie, a także chcieli, aby był zwijany na wielu poziomach.

W tym przypadku znacznie bardziej odpowiednie były DIV. Udało mi się stworzyć kontenery dla child div i zastosować jQuery, aby osiągnąć pożądane efekty.

Nawet jeśli Twój projekt nie ma jeszcze tych wymagań, warto pomyśleć o tym, jak możesz to zmienić w przyszłości ...

Użycie <li>(w stosownych przypadkach) zmniejsza <div>zupę tagów, którą często widzisz na stronach internetowych, co bardzo pomaga programistom.

Nie to <div>jest złe, ale ilekroć tag jest nadużywany (jak <div>to często bywa), osłabia znaczenie semantyczne tagu do tego stopnia, że ​​jest całkowicie bezużyteczny. Dowiedziałem się tego niedawno od wykonawcy, którego wynajęliśmy do pomocy przy CSS / UI naszej aplikacji internetowej, a różnica, jaką spowodowało to w czytelności / utrzymaniu kodu HTML, jest dla mnie bardzo zauważalna.

Jeśli zależy Ci tylko na tym, aby listy wyglądały w określony sposób przy minimalnym wysiłku, to już <li>jest oczywiste: wpisywanie jest o jeden znak mniej niż, <div> a tag zamykający jest opcjonalny w HTML.

I to jest dodatek do tego, co wszyscy inni mówili o semantyce.

Do prawidłowego renderowania w prymitywnych przeglądarkach lub urządzeniach mobilnych

Na Twoje pytanie już odpowiedział Chcę dodać tutaj moje dwa centy. Pracowałem nad projektem, w którym wykonywałem logikę zaplecza, a moje dane były agregowane do szablonu strony utworzonego przez mojego projektanta. użył znaczników ul i li do reprezentowania wszelkiego rodzaju list na stronie, z których niektóre były widżetami. Dane pochodziły z cms, w którym użytkownicy mogli wprowadzać tekst sformatowany za pomocą tagów HTML. kiedy użytkownicy zaczęli tworzyć listy w swojej treści, listy nie wyglądały już jak listy punktowane, a raczej zepsuły całą stronę.

lekcja: nie używaj tagów list z ogólnymi selektorami css, jeśli treść może zawierać w sobie kod HTML.

inną rzeczą dotyczącą ul li jest; możesz użyć ul jako kontenera, który pomoże ci ustawić klasę Style

<ul class="myHebe">
  <li><a href="#">.net</a></li>
  <li><a href="#">.net</a></li>
</ul>

Podoba mi się ten wzór, gdy używam ul

.myHebe{} // container
.myHebe li {} // items
.myHebe li a {} // subitems

Oczywiście zależy to od tego, jak chcemy go używać i jak nam się podoba. To jest sposób, w jaki lubię

Nadzieja pomaga. Dzięki