การใช้งานรายการ HTML ที่ยอดเยี่ยมในการออกแบบเว็บ

คุณสามารถค้นหารายการที่ออกแบบมาอย่างดีทั่วอินเทอร์เน็ต นักออกแบบใช้มันมานานหลายทศวรรษแล้ว ข้อมูลหน้าประสานงานและเค้าโครง, และในเว็บปัจจุบันคุณสามารถเห็นความคิดสร้างสรรค์ที่ยอดเยี่ยมในการออกแบบเว็บที่ใช้รายการ เหล่านี้รวมถึงเมนูการนำทางลิงก์โปรไฟล์คลังงาน / รายการตรวจสอบและการใช้งานอื่น ๆ อีกมากมาย!

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

องค์ประกอบรายชื่อ

นักออกแบบเว็บไซต์กระโดดจาก bandwagon หนึ่งไปยังอีกอย่างต่อเนื่องทำให้รูปแบบของเว็บไซต์เปลี่ยนไปตามกาลเวลา แต่รายการต่าง ๆ ได้รับการทดสอบตามกาลเวลาและอาจเป็นสิ่งที่ดีในอนาคตของ World Wide Web.

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

แท็ก แต่มีรูปแบบที่นิยมน้อยกว่าสองรูปแบบ: รายการสั่งซื้อ และ คำจำกัดความข้อมูล. ฉันได้เข้าไปดูรายละเอียดเพิ่มเติมด้านล่าง.

รายการที่ไม่เรียงลำดับ (

)

อาจเป็นหนึ่งในองค์ประกอบที่ใช้มากที่สุดในมาตรฐาน HTML4 / HTML5 รายการที่ไม่เรียงลำดับจะส่งข้อมูลออกในลักษณะเดียวกับรายการที่สั่งอย่างไรก็ตามคุณ จะไม่เห็นเครื่องหมายตัวเลขที่ด้านข้าง. แต่ละรายการจะได้รับ วงกลมขนาดเล็กหรือแผ่นดิสก์ และแตกออกเป็นบรรทัดใหม่ ไอคอนนี้ ยังสามารถเปลี่ยนแปลงได้ด้วยคุณสมบัติ list-style-type พบใน CSS.

ด้านล่างเป็นตัวอย่างโค้ดของรายการที่ไม่ได้เรียงลำดับ:

 
 
รายการ 1
 
รายการ 2
 
รายการ 3
 
 

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

ส่วนใหญ่แล้วคุณจะพบรายการที่ไม่ได้เรียงลำดับอยู่ตรงกลางบทความบนเว็บหรือคำแนะนำในการติดตั้ง จะสังเกตได้ว่า Google และบอตค้นหาอื่น ๆ จะไม่ประมวลผลเนื้อหาของหน้าเว็บของคุณในลักษณะที่แตกต่างออกไป, ดังนั้นคุณ SEO ไม่ควรได้รับผลกระทบไม่ว่าคุณจะเลือกรายการประเภทใด.

รายการสั่งซื้อ (

)

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

• ) จะกำหนดวิธีการนำเสนอข้อมูล.

  ด้านล่างเป็นตัวอย่างรหัสของรายการที่สั่งซื้อ:

   
   
  รายการ 1
   
  รายการ 2
   
  รายการ 3
   
   

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

  รายการคำจำกัดความของข้อมูล (

  )

  รายการคำนิยามจะไม่เห็นบ่อยนัก (ไม่เหมือนที่เคยเป็นที่นิยม) พวกเขาเคยเห็นกับนักออกแบบเว็บไซต์ที่สร้างรูปแบบที่ซับซ้อนของการเชื่อมโยงหรือเนื้อหากล่อง แท็กรายการข้อมูล (

  ) วันนี้ผู้เขียนโค้ดมักเข้าใจผิด ในรายการข้อมูลจำเพาะ HTML4.01 ถูกนำมาใช้เพื่อ จับคู่รายการกับคำอธิบาย. สิ่งเหล่านี้เรียกว่ารายการคำจำกัดความ.

  ด้านล่างเป็นตัวอย่างรหัสของรายการคำจำกัดความข้อมูล:

   
   
  รายการ 1
   
  ลักษณะ
   
  รายการ 2
   
  ลักษณะ
   
  รายการ 3
   
  ลักษณะ
   
   

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

  ) ตามด้วยคำจำกัดความข้อมูลอย่างน้อยหนึ่งรายการ (

  ).

  ตัวอย่างที่ชัดเจนจากบทความของ HTML5 Doctor คือ รายการที่จัดรูปแบบข้อมูลเมตา. ภายในหนึ่งเดียว ดล รายการองค์ประกอบที่คุณต้องการ กำหนดคำ, เช่นชื่อของคุณแต่ละคนจะตามมาทีหลัง แท็กความหมายสามารถอธิบายข้อมูล เกี่ยวกับคุณอาจเป็นอายุอาชีพเมือง / เมืองปัจจุบัน ฯลฯ ในที่สุด ชุดข้อมูลใด ๆ ที่มีคู่คีย์ / ค่าเหมาะสมอย่างยิ่งในรายการคำอธิบาย. คุณสามารถใช้คำศัพท์มากกว่าหนึ่งคำในรายการ แต่ W3C ระบุว่า แต่ละคำควรไม่ซ้ำกัน ในรายการ.

  ตอนนี้เราได้กำหนดรูปแบบรายการยอดนิยม 3 แบบมาดูตัวอย่างกัน! นักออกแบบเว็บไซต์มีความคิดสร้างสรรค์อย่างมากกับรายชื่อในช่วงไม่กี่ปีที่ผ่านมา ฉันทำรายการเว็บไซต์ที่ชื่นชอบ 7 รายการด้านล่างโดยเน้นเฉพาะการใช้งานรายการอย่างสร้างสรรค์.

  การนำทางรายการที่ไม่เรียงลำดับง่าย ๆ

  เมนูการนำทางนั้นง่ายกว่ามากในการสร้างด้วยเทคนิค CSS ที่ทันสมัย นี่คือเหตุผลว่าทำไมรายการที่ไม่มีการเรียงลำดับและแม้แต่รายการที่เรียงลำดับได้กลายเป็นตัวเลือกยอดนิยม หนึ่งในตัวอย่างที่ชื่นชอบเกี่ยวกับเรื่องนี้ปรากฏบนบล็อกสื่อโซเชียล Mashable.

  

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

  ด้านล่างนี้คุณจะเห็นลิงก์การนำทางย่อย เมนูการนำทางนี้นำไปสู่หมวดหมู่บล็อกเช่น Social Media หรือ Tech รายการที่ไม่เรียงลำดับทั้งสองรายการจะอยู่ภายใน HTML5