เหตุใดฉันจึงควรใช้ 'li' แทน 'div'

ฉันไม่แน่ใจว่าทำไมฉันต้องใช้ ul-li กับเพียงแค่ใช้ div เมื่อแสดงรายการ ฉันสามารถทำให้ทั้งสองมีลักษณะเหมือนกันได้ดังนั้นประโยชน์ในการใช้งานในการสร้างรายการที่ไม่เรียงลำดับเทียบกับการจัดเรียง divs อยู่ที่ไหน

เพื่อความถูกต้องทางความหมาย HTML มีความสามารถในการแสดงรายการสิ่งต่างๆและช่วยให้หุ่นยนต์ของ Google โปรแกรมอ่านหน้าจอและผู้ใช้ทุกประเภทที่ไม่สนใจเพียงอย่างเดียวเกี่ยวกับการนำเสนอของไซต์เข้าใจเนื้อหาของคุณได้ดีขึ้น

ฉันไม่แน่ใจว่าทำไมฉันต้องใช้ ul-li vs เพียงแค่ใช้ div เมื่อแสดงรายการ ฉันสามารถทำให้ทั้งสองดูเหมือนกันได้ทุกประการ

มีคำสำคัญในคำถามของคุณคือ "ดู" คุณยังสามารถทำให้พวกเขาพิมพ์เดียวกันสำหรับคนตาบอดใช้อ่านอักษรเบรลล์? คุณสามารถทำให้เสียงเหมือนกันสำหรับคนตาบอดโดยใช้ซินธิไซเซอร์แปลงข้อความเป็นคำพูดได้หรือไม่? คุณยังสามารถทำให้มันดูเหมือนเดิมสำหรับผู้ที่มีความบกพร่องทางสายตาโดยใช้สไตล์ชีตผู้ใช้ CSS ฝั่งไคลเอ็นต์ที่กำหนดเองได้หรือไม่

คำนั้น "ดู" เป็นคำที่อันตรายมาก - เมื่อคุณใช้คำนั้นเกี่ยวข้องกับ HTML สัญญาณเตือนทั้งหมดควรดับลงในหัวของคุณ HTML เป็นภาษาสำหรับอธิบายโครงสร้างความหมายของเอกสารไฮเปอร์มีเดีย โครงสร้างความหมายไม่ได้เป็น "รูปลักษณ์" ก็เป็นแนวคิดที่เป็นนามธรรม

แม้ว่าคุณจะไม่สนใจเรื่อง hocuspocus เชิงความหมายทั้งหมดนี้และคุณไม่สนใจคนตาบอดลองพิจารณาสิ่งนี้: Google, Yahoo, MSN และ Co. ไม่มีตาพวกเขาไม่ "มอง" ที่ CSS ที่คุณแสดง .

การใช้มาร์กอัปที่ถูกต้องตามความหมายหมายความว่าคุณกำลังฝังข้อมูลเพิ่มเติมในข้อความของคุณ การใช้ ul / li หมายความว่าคุณกำลังสื่อสารกับแอปพลิเคชันที่ใช้งานอยู่ว่าข้อมูลนั้นเป็นรายการไม่ใช่แค่ "บางสิ่ง" (ใครจะรู้อะไร) ที่เป็นข้อความบางส่วนในองค์ประกอบที่กำหนดเอง

คำตอบโดยตรงสำหรับคำถามของคุณ: ข้อได้เปรียบในการทำงานคือdiv มีความหมายเพียงเล็กน้อยในตัวเองในขณะที่ul lisหมายถึง "นี่คือรายการที่ไม่ได้สั่งซื้อ"

คำว่า "ความหมาย" หมายถึงวิธีที่คุณใช้ความหมายโดยธรรมชาติของโครงสร้างที่มีอยู่เพื่อสร้างความหมายที่ชัดเจน HTML ประกอบด้วยแท็กที่หมายถึงบางสิ่งด้วยตัวมันเอง และมีการกำหนดกฎ / แนวทาง / วิธีใช้เพื่อให้เอกสาร HTML ที่เผยแพร่ของคุณบ่งบอกถึงสิ่งที่คุณต้องการให้หมายถึง

หากคุณแสดงรายการบางอย่างในเอกสารของคุณให้เพิ่มรายการสั่งซื้อ (UL) หรือรายการที่ไม่ได้จัดลำดับ (OL) ในทางกลับกันองค์ประกอบการแบ่งหน้า (DIV) ใช้เพื่อสร้างเนื้อหาเฉพาะและแยกส่วน

divองค์ประกอบ "แบ่ง." เมื่อคุณดูหน้าจะมีบางส่วนเช่นเนื้อหาส่วนท้ายส่วนหัวการนำทางเมนูแบบฟอร์ม ฯลฯ และคุณสามารถใช้แท็กdivเพื่อสร้างส่วนเหล่านี้ได้ บ่อยครั้งส่วนของหน้าจะสอดคล้องกับเค้าโครงที่มองเห็นได้ดังนั้นการใช้การแบ่งหน้าที่ชัดเจน (DIV) เพื่อตัดเลย์เอาต์ของคุณใน CSS จึงเป็นเรื่องที่เหมาะสม วิธีนี้แท็กdivกลายเป็นโครงสร้าง

หากคุณใช้แท็กdivในทางที่ผิดหรือใช้มากเกินไปอาจทำให้เกิดการขยายความหมายและโค้ดโดยไม่ได้ตั้งใจ

เพื่อให้เกิดความสับสน: Google ใช้h3และdivเพื่อ "หาร" ผลการค้นหาที่ปรากฏในรายการ ul> li> h3 + div

ดังนั้นเมื่อคุณปิดสไตล์ทั้งหมด (Shift + Cmd / Crtl + S ในแถบเครื่องมือ Firefox w / WebDeveloper) divsควรหายไปและเรียงซ้อนกันตามธรรมชาติ HTML เปล่าของคุณควรแสดงหน้าที่สวยงามโดยมีลำดับชั้นที่ชัดเจน ได้แก่ จากบนลงล่างเนื้อหาที่สำคัญที่สุดก่อนและแสดงรายการที่มีสัญลักษณ์แสดงหัวข้อย่อยและตัวเลขสำหรับรายการในรายการ และเป็นความคิดที่ดีที่จะเพิ่มลิงก์ที่อยู่ด้านบนสุด (สำหรับผู้ใช้ที่ไม่มีภาพ) เพื่อให้คุณสามารถข้ามไปที่เนื้อหาหลักรูปแบบที่สำคัญหรือส่วนหัวหลัก (เช่นสารบัญ)

สุดท้ายโปรดทราบว่าคุณกำลังสร้างเอกสาร หากไม่มีเอฟเฟ็กต์ภาพทั้งหมดก็ยังควรเป็นเอกสารที่เป็นฟันเฟือง

มีการพูดคุยมากมายเกี่ยวกับการใช้<li>หรือการใช้งาน<div>แต่ไม่มีความคิดเห็นเดียวที่ให้ตัวอย่างที่ชัดเจนของเนื้อหาที่อยู่ภายในแท็กเหล่านี้ ความรู้สึกของฉันเป็นอย่างนั้น<ul>และ<li>ไม่สำคัญเท่าที่ควรเพราะฉันไม่สามารถบอกคุณได้ในครั้งสุดท้ายว่าฉันอ่าน "รายการ" ของสิ่งต่างๆบนเว็บไซต์หนังสือพิมพ์หรือนิตยสารไม่ว่าจะทางออนไลน์หรือทางสิ่งพิมพ์

<div>มีความหลากหลายมากขึ้น หากคุณกำลังแสดงรายการส่วนผสมสำหรับเค้กใช่นั่นคือรายการ หากคุณมีรายการสิ่งที่ต้องแพ็คสำหรับทริปเดินป่าใช่นั่นคือรายการ

แต่สิ่งที่เกี่ยวกับรูปแบบผู้ใช้เช่นที่แสดงรายการสุ่มบางอย่างที่ไม่ใช่รายการหรือชุดย่อหน้าหรือ "ส่วนหัว" ทั้งหมด บางอย่างเป็นวันที่บางรายการเป็นช่องทำเครื่องหมายและบางรายการเป็นข้อความ แบ่งมันขึ้นถ้าคุณถามฉัน คนตาบอดจะผิดพลาดทราบถ้ามันถูกทำเครื่องหมายขึ้นด้วย<ul>และ<li>และพวกเขาได้ยิน "นี่คือรายการ ... เป็น" เมื่อมันเป็นเพียงฮ็อดจ์-อ้วนเตี้ยของสิ่งที่ไม่ได้จริงๆรายการ

คุณควรใช้แท็กที่เหมาะสมสำหรับเนื้อหาที่คุณต้องการใส่เข้าไป นี่ไม่เพียง แต่หมายความว่า ul / li เหมาะสมกว่าสำหรับรายการ นอกจากนี้ยังหมายความว่าคุณต้องพิจารณาเนื้อหาของรายการของคุณและดูว่ารายการนั้นเป็นรายการที่ไม่เรียงลำดับ / เรียงลำดับหรือคำจำกัดความ

อีกข้อหนึ่งคือเมื่อคุณปิดการใช้งาน css เบราว์เซอร์จะแสดงรูปแบบเริ่มต้นซึ่งทำให้ดูดีกว่าว่ามีการใช้อุปกรณ์ท่องเว็บอื่นหรือไม่ นอกจากนี้ยังช่วยเพิ่มการเข้าถึง

หากคุณใช้ div แทน lynx จะไม่สามารถแสดงผลหน้าเว็บในรูปแบบที่อ่านได้

โดยส่วนตัวแล้วฉันชอบ li's สำหรับความหมาย เมื่อดูแหล่งที่มาคุณจะเห็นทันทีว่าคุณมีรายการบางสิ่งบางอย่างหากพวกเขาถูกห่อหุ้มด้วย Li คอลเลกชัน div ไม่ได้ให้ความหมายเชิงความหมายและโดยปกติแล้วความหมายเดียวในรายการจะถูกนำมาใช้โดยคลาส css เช่น "listItem" ซึ่งเห็นได้ชัดว่าควรจะใช้ li ตั้งแต่แรก

หากคุณมีตรรกะในการนำเสนอแบบวนซ้ำฉันมักจะชอบ li มากกว่า div

<li> หมายถึงรายการในรายการและทำให้ตัวแยกวิเคราะห์ (เบราว์เซอร์เครื่องมือค้นหาสไปเดอร์) รู้ว่าคุณกำลังแสดงรายการ คุณสามารถใช้ DIV แทน LI ได้ แต่ตัวแยกวิเคราะห์เหล่านั้นจะไม่มีทางรู้เลยว่ามีรายการเหล่านั้นอยู่ในรายการและ DIV ไม่ได้อธิบายอะไรเลยนอกจากว่ามันเป็นบล็อก

ขึ้นอยู่กับโครงการ ฉันเพิ่งทำโครงการที่มีเมนูที่ออกแบบโดยใช้รายการ พวกเขาต้องการเพิ่มเอฟเฟกต์มากมายเช่นการเลื่อน / การซีดจางและยังต้องการให้พับได้หลายระดับ

ในกรณีนี้ DIV เหมาะสมกว่ามาก ฉันสามารถสร้างคอนเทนเนอร์สำหรับ div ลูกและใช้ jQuery เพื่อให้ได้เอฟเฟกต์ที่ต้องการ

แม้ว่าโครงการของคุณจะยังไม่มีข้อกำหนดเหล่านี้ แต่ก็ควรพิจารณาอย่างรอบคอบว่าคุณจะเปลี่ยนแปลงได้อย่างไรในอนาคต ...

การใช้<li>(ตามความเหมาะสม) ช่วยลด<div>ซุปแท็กที่คุณมักจะเห็นในหน้าเว็บซึ่งช่วยให้นักพัฒนาซอฟต์แวร์ได้มาก

ไม่ใช่สิ่งที่<div>ไม่ดี แต่เมื่อใดก็ตามที่แท็กถูกใช้มากเกินไป (อย่างที่<div>มักจะเป็น) แท็กนั้นจะเจือจางความหมายเชิงความหมายของแท็กจนถึงจุดที่ไร้ประโยชน์โดยสิ้นเชิง เมื่อเร็ว ๆ นี้ฉันได้เรียนรู้สิ่งนี้จากผู้รับเหมาที่เราจ้างมาเพื่อช่วยในการใช้ CSS / UI ของเว็บแอปของเราและความแตกต่างที่เกิดขึ้นกับความสามารถในการอ่าน / การบำรุงรักษาของโค้ด HTML นั้นเป็นสิ่งที่เห็นได้ชัดเจนสำหรับฉัน

หากสิ่งที่คุณสนใจคือการทำให้รายการมีลักษณะที่แน่นอนโดยใช้ความพยายามขั้นต่ำนี่เป็นเรื่องง่ายอยู่แล้ว: <li>มีอักขระหนึ่งตัวที่จะพิมพ์น้อยกว่า<div> และแท็กปิดเป็นตัวเลือกใน HTML

และนั่นคือนอกเหนือจากสิ่งที่คนอื่นพูดเกี่ยวกับความหมาย

สำหรับการแสดงผลอย่างถูกต้องบนเบราว์เซอร์ดั้งเดิมหรืออุปกรณ์มือถือ

คำถามของคุณได้รับคำตอบแล้วโดยฉันต้องการเพิ่มสองเซ็นต์ที่นี่ ฉันกำลังทำงานในโปรเจ็กต์ที่ฉันกำลังทำตรรกะแบ็กเอนด์และข้อมูลของฉันถูกรวมเข้ากับเทมเพลตเพจที่ออกแบบโดยนักออกแบบของฉัน เขาใช้แท็ก ul และ li เพื่อแสดงรายการทุกประเภทบนหน้าเว็บซึ่งบางส่วนเป็นวิดเจ็ต ข้อมูลมาจาก cms ที่ผู้ใช้สามารถป้อน rich text ผ่านแท็ก html เมื่อผู้ใช้เริ่มสร้างรายการในเนื้อหารายการจะไม่ดูเหมือนรายการสัญลักษณ์แสดงหัวข้อย่อยอีกต่อไปแทนที่จะทำให้ทั้งหน้า

บทเรียนที่เรียนรู้: อย่าใช้แท็กรายการกับตัวเลือก css ทั่วไปหากเนื้อหาของคุณสามารถมี html ในตัวเองได้

อีกอย่างเกี่ยวกับ ul li คือ; คุณสามารถใช้ ul เป็นคอนเทนเนอร์ซึ่งช่วยให้คุณตั้งค่าสไตล์คลาสได้

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

ฉันชอบรูปแบบนี้เมื่อฉันใช้ ul

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

แน่นอนว่ามันขึ้นอยู่กับว่าเราต้องการใช้มันอย่างไรและเราชอบมันอย่างไร นี่คือวิธีที่ฉันชอบ

หวังว่าจะช่วยได้ขอบคุณ