ดูความหมาย HTML5 ที่เหมาะสม
หากคุณวางแผนโครงสร้างเอกสาร HTML อย่างระมัดระวังคุณสามารถ ช่วยให้คอมพิวเตอร์เข้าใจความหมายของเนื้อหาของคุณ. ซินแท็กซ์ที่เหมาะสมนั้นมีความสำคัญอย่างแน่นอน แต่โดยทั่วไปแล้วมันจะมีตัวแยกวิเคราะห์เครื่องมือค้นหาและเทคโนโลยีช่วยอำนวยความสะดวกพร้อมข้อมูลที่ไร้ความหมาย.
หากคุณปรับปรุงขั้นตอนการทำงานส่วนหน้าด้วยการให้ความสำคัญกับความหมายคุณสามารถสร้างเนื้อหาที่มีคุณภาพสูงขึ้นเพื่อดึงดูดผู้เข้าชมได้มากขึ้น ความหมายคือ การศึกษาความหมาย, ในบริบทที่กว้างขึ้นมัน สาขาหนึ่งของตรรกะและภาษาศาสตร์.
ในโลกของการพัฒนาเว็บเราพูดถึงเนื้อหาเชิงความหมายเมื่อคอมพิวเตอร์เข้าใจโครงสร้างของเอกสารและ บทบาทขององค์ประกอบภายใน. หากเราต้องการสร้างความหมายที่ถูกต้องเราต้องลึกซึ้ง เข้าใจโครงสร้าง เนื้อหาของเราและ ความสามารถในการ ของเทคโนโลยีส่วนหน้า.
ดังนั้นประโยชน์ที่จับต้องได้คืออะไร? ความหมายที่เหมาะสมหมายถึง เนื้อหาที่ค้นหาได้มากขึ้น ที่นำไปสู่ การจัดอันดับของเครื่องมือค้นหาที่ดีกว่า. เรายังเพิ่มความสามารถในการเข้าถึงเช่นเทคโนโลยีการช่วยเหลือเช่น โปรแกรมอ่านหน้าจอสามารถตีความความหมายของเนื้อหาของเราได้ดียิ่งขึ้น.
มีเทคนิคการพัฒนาส่วนหน้าที่แตกต่างกันมากมายที่ช่วยให้นักพัฒนาสามารถบรรลุโครงสร้างหน้าความหมาย โพสต์นี้จะให้คำแนะนำสั้น ๆ แก่คุณเกี่ยวกับแท็ก HTML แบบ semantic และแนวคิดของเค้าร่างเอกสาร.
แท็ก HTML แบบ Semantic และ Non-Semantic
แนวคิดเรื่องความหมายไม่ได้เป็นเรื่องใหม่อย่างที่มันเป็นมาก่อนยุค HTML5 ระยะเวลาของความหมายของเว็บถูกประกาศเกียรติคุณในปี 2001 โดย Sir Tim Berners-Lee ภายใต้ “เว็บความหมาย” เขาหมายถึงเว็บของข้อมูลที่สามารถประมวลผลได้โดยเครื่อง.
หลักนี้หมายความว่า องค์ประกอบ HTML แยกต้องมีบทบาทโครงสร้างที่แตกต่างกัน. ตามคำจำกัดความของ W3C “องค์ประกอบเชิงความหมายอธิบายความหมายของทั้งเบราว์เซอร์และนักพัฒนาอย่างชัดเจน”.
องค์ประกอบความหมายก่อน HTML5
องค์ประกอบความหมายมีอยู่ก่อน HTML5 ด้วยในกรณีส่วนใหญ่นักพัฒนาก็ไม่ทราบเช่นกัน แท็กบางรายการที่ใช้มีความหมายจริง. แค่คิดเกี่ยวกับ หรือ
บทบาทของพวกเขาชัดเจนสำหรับทั้งเราและตัวแทนผู้ใช้: เพียงแค่มีแบบฟอร์มเช่น
สั่งซื้อ และ รายการที่ไม่ได้เรียงลำดับ, ย่อหน้า, แท็กส่วนหัว h1-h6 เป็นองค์ประกอบความหมายทั้งหมดที่นำหน้า HTML5.
องค์ประกอบที่ไม่ใช่ความหมาย
องค์ประกอบที่ไม่ใช่ความหมายไม่มีความหมายพิเศษใด ๆ ความสัมพันธ์เชิงลำดับชั้นระหว่างพวกเขาเป็นเพียงภาพลวงตา ตัวอย่างที่ใช้กันอย่างแพร่หลายของแท็ก HTML ที่ไม่ใช่ความหมายคือ และ แท็ก.
หากเว็บไซต์ของคุณเคยติดโรคร้ายที่น่ากลัวของ Divitis, คุณรู้ว่าฉันกำลังพูดถึงอะไร อ๋อ Divs ไม่จำเป็นต้องผิด แต่ Divitis จำเป็นต้องต่อสู้ถ้าเราต้องการเขียนโค้ด HTML ที่สามารถบำรุงรักษาได้แบบแยกส่วนและมีความหมาย.
Smashing Magazine อธิบายสิ่งที่เป็นปัญหาอย่างแท้จริงด้วยการใช้งานที่มากเกินไปและไม่มีเหตุผล ไม่มีความสัมพันธ์ระหว่างทั้งสองเหมือนในกรณีของ อย่าตกใจถ้าคุณยังรู้สึกผูกพันกับ HTML5 แนะนำองค์ประกอบความหมายใหม่ ๆ ที่ทำให้การจัดระเบียบเนื้อหาง่ายขึ้น พวกเขาไม่เพียง แต่ช่วยให้คุณจัดระเบียบเนื้อหาในระดับของเอกสารทั้งหมด (ดูรายละเอียดในส่วนถัดไป) แต่ยังอยู่ในบล็อคข้อความเป็นแท็กแบบอินไลน์. อาจเป็นแท็ก semantic ระดับข้อความที่เป็นที่นิยมมากที่สุด ดูรายการนี้สำหรับองค์ประกอบความหมายระดับข้อความทั้งหมดที่ใช้งานอยู่ในปัจจุบัน. เค้าร่างเอกสารเป็นโครงสร้างของเอกสาร HTML มันแสดงให้เห็นว่าองค์ประกอบมีความสัมพันธ์ซึ่งกันและกัน เค้าร่างเอกสารถูกสร้างขึ้นโดยองค์ประกอบการแมปเช่นส่วนหัวชื่อตารางชื่อแบบฟอร์มและอื่น ๆ ใน HTML เวอร์ชันก่อนหน้าเช่น HTML4.01 และ XHTML. ใน HTML5 อัลกอริทึมการสรุปได้รับการปรับปรุงโดยองค์ประกอบการแบ่งส่วนใหม่คือ: มีองค์ประกอบการแบ่งส่วนที่ห้าใน HTML5 แต่ไม่ใช่องค์ประกอบใหม่คือองค์ประกอบ ถ้าเราต้องการสร้างเค้าร่างเอกสารที่มีโครงสร้างที่ดีเราต้องใส่ใจกับกฎต่อไปนี้: 1. องค์ประกอบการแบ่งส่วนนอกสุดอยู่เสมอ 2. ส่วนต่างๆใน HTML5 สามารถซ้อนกันได้. 3. แต่ละส่วนมีลำดับชั้นหัวเรื่องของตนเอง แต่ละคน (แม้แต่ส่วนที่ซ้อนกันด้านในสุด) สามารถมี 4. ในขณะที่เค้าร่างเอกสารถูกกำหนดโดยองค์ประกอบการแบ่งส่วน 5 หลักแล้วยังต้องการส่วนหัวที่เหมาะสมสำหรับแต่ละส่วน. 5. เป็นองค์ประกอบส่วนหัวแรกเสมอ (ปล่อยให้เป็น h1 หรือแท็กส่วนหัวอันดับต่ำกว่า) ที่กำหนดหัวเรื่องของส่วนที่กำหนด แท็กส่วนหัวต่อไปนี้ในส่วนเดียวกันจะต้องสัมพันธ์กับสิ่งนี้ (หากหัวข้อแรกคือ h3 ภายในองค์ประกอบการแบ่งส่วนอย่าใส่ h3 หลังจากนั้น) 6. ส่วนที่กำหนดโดย 7. แต่ละส่วน (เนื้อหาส่วนบทความข้าง ๆ nav) สามารถมีเป็นของตัวเองได้ ลองดูตัวอย่างสำหรับเค้าร่างเอกสารทางความหมายเพื่อดูชัดเจนว่ามันทำงานอย่างไร โค้ดตัวอย่างของเราจะส่งผลให้โครงสร้างเอกสารดังต่อไปนี้: และนี่คือรหัสที่มีการแบ่งส่วนแบบ semantic ที่เหมาะสม: นี่คือโลโก้และสโลแกนของเรา. ย่อหน้าที่ 1 ในส่วนแรก ย่อหน้าที่ 2 ในส่วนแรก ย่อหน้าที่ 1 ในส่วนที่สอง ย่อหน้าที่ 2 ในส่วนที่สอง หากคุณดูข้อมูลโค้ดข้างต้นคุณจะเห็นว่าส่วนหัวและส่วนท้ายเป็นตัวเลือกเราสามารถเลือกได้อย่างอิสระหากเราต้องการใช้พวกเขาหรือไม่ แต่มันเป็น แนะนำอย่างยิ่งให้ใส่หัวข้อสำหรับแต่ละส่วนเสมอ, มิฉะนั้นส่วนจะเป็น “ไม่ได้ตั้งชื่อ” ในโครงร่างเอกสาร. โชคดีที่มีเครื่องมือที่ยอดเยี่ยมมากมายทั่วอินเทอร์เน็ตที่ให้เราตรวจสอบร่างเอกสารคราวนี้เราจะใช้เครื่องมือ Outliner ของ html5.org. หากเราแทรกข้อมูลโค้ดของเราลงในแบบฟอร์มที่จัดทำโดย outliner และคลิกที่ “สรุปสิ่งนี้!” ปุ่มเราจะเห็นผลลัพธ์ต่อไปนี้: นี้เป็น เค้าร่างเอกสารของรหัสตัวอย่างของเรา, นี่คือวิธีที่เครื่องมือค้นหามองเห็นและผู้อ่านหน้าจออ่านให้ผู้ใช้ที่บกพร่องทางการมองเห็น มันมีความหมายมีโครงสร้างดีและไม่มีอะไรน่ารังเกียจ “ไม่ได้ตั้งชื่อ” ส่วนในนั้น. หากคุณต้องการดูว่าส่วนไม่มีชื่อมีลักษณะอย่างไรใน Outliner เพียงแค่ลบแท็กส่วนหัวบางส่วนในรหัสตัวอย่าง. แท็ก HTML แบบย่อและเค้าร่างเอกสารเป็นเพียงส่วนเล็ก ๆ ของความหมายของเว็บ เนื้อหาของหน้าเว็บสามารถสร้างความหมายได้มากขึ้นด้วยความช่วยเหลือของโปรโตคอลการเข้าถึง WAI-ARIA และข้อมูลโครงสร้างที่สามารถใช้ร่วมกับโปรโตคอล RDFa, microdata หรือมาร์กอัป JSON-LD. แท็กที่ทำงานในลักษณะเดียวกันกับระดับอินไลน์.-แม้ว่า คุณไม่จำเป็นต้องทิ้งให้หมด. พวกเขายังคงเป็นตัวเลือกที่ดีที่สุดสำหรับการจัดกลุ่มเนื้อหาเพื่อวัตถุประสงค์ในการกำหนดสไตล์และในกรณีสุดท้ายอื่น ๆ. ความหมายของข้อความใน HTML5
และ , แต่มันก็มีอยู่ก่อน HTML5 ในบรรดาองค์ประกอบความหมายแบบอินไลน์ใหม่เราสามารถหาตัวอย่าง , แท็กสำหรับ เวลาที่มนุษย์อ่านได้, และ สำหรับ ข้อความที่เน้น.เค้าร่างเอกสารใน HTML5
สำหรับ ส่วนที่จัดกลุ่มไว้รอบ ๆ ธีมที่เฉพาะเจาะจง สำหรับ องค์ประกอบที่สมบูรณ์หรือมีอยู่ในตัวเอง เช่นโพสต์บล็อกหรือวิดเจ็ต สำหรับ บล็อกการนำทาง สำหรับ เนื้อหาประกอบเช่นแถบด้านข้าง. แท็ก แท็กก็เป็นสิ่งใหม่ แต่ก็ไม่ได้สร้างส่วนใหม่ในเอกสารพวกเขาก็แบ่งเนื้อหาภายในส่วน ซึ่งหมายความว่า ทุกองค์ประกอบการแบ่ง (เนื้อหาบทความส่วนการนำทางและด้านข้าง) สามารถมีส่วนหัวและส่วนท้ายของตัวเอง.เคล็ดลับสำหรับเนื้อหาที่มีโครงสร้างความหมาย
แท็ก.h1 แท็ก., และ แท็กไม่ได้อยู่ในโครงร่างหลักของเอกสาร HTML แต่มักจะไม่แสดงผลโดยเทคโนโลยีการช่วยเหลือ. แท็กที่กำหนดส่วนหัว (เช่นโลโก้ชื่อผู้แต่งวันที่ข้อมูลเมตา ฯลฯ ) และส่วนท้าย (ลิขสิทธิ์บันทึกย่อลิงก์ ฯลฯ ) ของส่วนนั้น.ตัวอย่าง: โครงร่างความหมาย
ยินดีต้อนรับบนเว็บไซต์ของเรา!
ชื่อเรื่องของบทความ
คำบรรยายของบทความ
ส่วนตรรกะแรก (เช่น "ทฤษฎี")
หัวข้อย่อยอื่น ๆ บางส่วนในส่วนแรก
ส่วนตรรกะที่สอง (เช่น "การปฏิบัติ")
ด้านอื่น ๆ ของความหมายของเว็บ
