เครื่องมือสร้างรายการ HTML

จากชุดบรรทัดข้อความสู่มาร์กอัปที่แท้จริง

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

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

เรียงลำดับหรือไม่เรียงลำดับ: การเลือก element ที่ถูกต้อง

การเลือกระหว่าง ul กับ ol ไม่ใช่เรื่องของรูปลักษณ์ แต่เป็นเรื่องเชิงความหมาย รายการที่ไม่เรียงลำดับ (ul) จะแสดงผลด้วยจุด bullet และสื่อว่าลำดับของรายการไม่สำคัญ เช่น ชุดคุณสมบัติของผลิตภัณฑ์ ส่วนรายการที่เรียงลำดับ (ol) จะแสดงผลด้วยหมายเลขและสื่อว่าลำดับมีความหมาย เช่น ขั้นตอนในสูตรอาหารหรือรายการที่จัดอันดับ โปรแกรมอ่านหน้าจอจะประกาศสิ่งเหล่านี้แตกต่างกัน ดังนั้นการเลือกแบบที่ถูกต้องจึงเป็นการตัดสินใจด้านการช่วยการเข้าถึง ไม่ใช่แค่เรื่องของภาพ

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

ตัวอย่างประกอบ

พิมพ์สามบรรทัด ได้แก่ Apple, Banana และ Cherry เลือก Unordered List แล้วเครื่องมือจะสร้าง element ul ที่บรรจุ element li สามตัว หนึ่งตัวต่อหนึ่งผลไม้ จัดเยื้องและปิดอย่างถูกต้อง สลับไปที่ Ordered List แล้วสามบรรทัดเดิมจะกลายเป็น ol ซึ่งเบราว์เซอร์จะแสดงผลเป็น 1. Apple, 2. Banana, 3. Cherry ไม่มีแท็กใดถูกทิ้งให้เปิดค้างไว้ และการเยื้องทำให้โครงสร้างอ่านและบำรุงรักษาได้ง่าย

รายการแบบหมายเลขที่เริ่มต้นตรงจุดที่คุณต้องการ

รายการที่เรียงลำดับไม่จำเป็นต้องเริ่มต้นที่ 1 การใช้ฟิลด์ Start Number ใน Advanced Options จะเขียนแอตทริบิวต์ start ลงบน ol ดังนั้นคุณจึงสามารถทำหมายเลขที่ถูกขัดจังหวะด้วยเนื้อหาอื่นให้ต่อเนื่องได้ หรือเริ่มต่อจากจุดที่รายการก่อนหน้าค้างไว้ ตัวอย่างเช่น การตั้ง start เป็น 5 จะทำให้รายการแรกแสดงผลเป็น 5 รายการถัดไปเป็น 6 และต่อไปเรื่อย ๆ นี่คือวิธีควบคุมการนับเลขที่สะอาดและเป็นไปตามมาตรฐาน แทนที่จะปลอมขึ้นมาด้วยการพิมพ์ตัวเลขลงในข้อความของรายการ ซึ่งจะพังหากรายการจำเป็นต้องถูกจัดเรียงใหม่ในภายหลัง

การเพิ่ม ID และ class สำหรับการจัดสไตล์

Advanced Options มอบจุดเชื่อมต่อสามจุดสำหรับ CSS และ JavaScript ให้คุณ List ID จะใส่ id ที่ไม่ซ้ำกันลงบน ul หรือ ol ซึ่งเหมาะอย่างยิ่งสำหรับ element เฉพาะตัวที่คุณต้องการเจาะจงเป้าหมายอย่างแม่นยำ หรือเชื่อมโยงด้วย anchor ส่วน List Class จะใส่ class ให้กับตัวห่อ เพื่อให้มันสืบทอดสไตล์ที่ใช้ร่วมกัน เช่น เลย์เอาต์การนำทางแนวนอนหรือการออกแบบจุด bullet แบบกำหนดเอง ส่วน Item Class จะใส่ class ให้กับทุก li ซึ่งเหมาะอย่างยิ่งเมื่อแต่ละรายการต้องการการจัดการแบบเดียวกัน เช่น ระยะห่างที่สม่ำเสมอหรือไอคอน

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

ทำไมบรรทัดว่างจึงถูกข้าม

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

ทำไมรายการเชิงความหมายจึงสำคัญต่อ SEO และการช่วยการเข้าถึง

การใช้มาร์กอัปรายการที่แท้จริงแทนย่อหน้าที่คั่นด้วยขีดกลางหรือการขึ้นบรรทัดใหม่นั้นให้ผลตอบแทนที่มากกว่าแค่รูปลักษณ์ เครื่องมือค้นหาจะแยกวิเคราะห์โครงสร้าง ul และ ol เพื่อทำความเข้าใจเนื้อหาที่จัดกลุ่มกัน และรายการที่ถูกต้องมีสิทธิ์ปรากฏในฟีเจอร์ต่าง ๆ เช่น ผลการค้นหาแบบ rich result สำหรับขั้นตอนและเนื้อหาแบบ how-to เทคโนโลยีสิ่งอำนวยความสะดวกก็ได้ประโยชน์เช่นกัน โปรแกรมอ่านหน้าจอจะประกาศว่ารายการมีกี่รายการและให้ผู้ใช้นำทางทีละรายการได้ ซึ่งเป็นไปไม่ได้เลยเมื่อจุด bullet ถูกปลอมขึ้นมาด้วยอักขระข้อความ

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