ดูความหมาย HTML5 ที่เหมาะสม

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

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

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

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

มีเทคนิคการพัฒนาส่วนหน้าที่แตกต่างกันมากมายที่ช่วยให้นักพัฒนาสามารถบรรลุโครงสร้างหน้าความหมาย โพสต์นี้จะให้คำแนะนำสั้น ๆ แก่คุณเกี่ยวกับแท็ก HTML แบบ semantic และแนวคิดของเค้าร่างเอกสาร.

แท็ก HTML แบบ Semantic และ Non-Semantic

แนวคิดเรื่องความหมายไม่ได้เป็นเรื่องใหม่อย่างที่มันเป็นมาก่อนยุค HTML5 ระยะเวลาของความหมายของเว็บถูกประกาศเกียรติคุณในปี 2001 โดย Sir Tim Berners-Lee ภายใต้ “เว็บความหมาย” เขาหมายถึงเว็บของข้อมูลที่สามารถประมวลผลได้โดยเครื่อง.

หลักนี้หมายความว่า องค์ประกอบ HTML แยกต้องมีบทบาทโครงสร้างที่แตกต่างกัน. ตามคำจำกัดความของ W3C “องค์ประกอบเชิงความหมายอธิบายความหมายของทั้งเบราว์เซอร์และนักพัฒนาอย่างชัดเจน”.

องค์ประกอบความหมายก่อน HTML5

องค์ประกอบความหมายมีอยู่ก่อน HTML5 ด้วยในกรณีส่วนใหญ่นักพัฒนาก็ไม่ทราบเช่นกัน แท็กบางรายการที่ใช้มีความหมายจริง. แค่คิดเกี่ยวกับ

หรือ แท็ก.

บทบาทของพวกเขาชัดเจนสำหรับทั้งเราและตัวแทนผู้ใช้:

เพียงแค่มีแบบฟอร์มเช่น มีภาพ ไม่มีใครเคยวางโต๊ะหรือพาดหัวในและ แท็ก (หรืออย่างน้อยก็หวังไว้).

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

สั่งซื้อ และ รายการที่ไม่ได้เรียงลำดับ, ย่อหน้า, แท็กส่วนหัว h1-h6 เป็นองค์ประกอบความหมายทั้งหมดที่นำหน้า HTML5.

องค์ประกอบที่ไม่ใช่ความหมาย

องค์ประกอบที่ไม่ใช่ความหมายไม่มีความหมายพิเศษใด ๆ ความสัมพันธ์เชิงลำดับชั้นระหว่างพวกเขาเป็นเพียงภาพลวงตา ตัวอย่างที่ใช้กันอย่างแพร่หลายของแท็ก HTML ที่ไม่ใช่ความหมายคือ

และ แท็ก.

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

Smashing Magazine อธิบายสิ่งที่เป็นปัญหาอย่างแท้จริงด้วยการใช้งานที่มากเกินไปและไม่มีเหตุผล

แท็ก ส่วนสำคัญคือถ้าเรา รวม div ใน div, มันดูเหมือนว่า div ด้านนอกจะเป็นองค์ประกอบหลักขององค์ประกอบด้านใน, ในขณะที่ ในความเป็นจริงนี่ไม่ใช่กรณี.

ไม่มีความสัมพันธ์ระหว่างทั้งสองเหมือนในกรณีของ แท็กที่ทำงานในลักษณะเดียวกันกับระดับอินไลน์.

อย่าตกใจถ้าคุณยังรู้สึกผูกพันกับ

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

ความหมายของข้อความใน HTML5

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

อาจเป็นแท็ก semantic ระดับข้อความที่เป็นที่นิยมมากที่สุด และ , แต่มันก็มีอยู่ก่อน HTML5 ในบรรดาองค์ประกอบความหมายแบบอินไลน์ใหม่เราสามารถหาตัวอย่าง , แท็กสำหรับ เวลาที่มนุษย์อ่านได้, และ สำหรับ ข้อความที่เน้น.

ดูรายการนี้สำหรับองค์ประกอบความหมายระดับข้อความทั้งหมดที่ใช้งานอยู่ในปัจจุบัน.

เค้าร่างเอกสารใน HTML5

เค้าร่างเอกสารเป็นโครงสร้างของเอกสาร HTML มันแสดงให้เห็นว่าองค์ประกอบมีความสัมพันธ์ซึ่งกันและกัน เค้าร่างเอกสารถูกสร้างขึ้นโดยองค์ประกอบการแมปเช่นส่วนหัวชื่อตารางชื่อแบบฟอร์มและอื่น ๆ ใน HTML เวอร์ชันก่อนหน้าเช่น HTML4.01 และ XHTML.

ใน HTML5 อัลกอริทึมการสรุปได้รับการปรับปรุงโดยองค์ประกอบการแบ่งส่วนใหม่คือ:

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

มีองค์ประกอบการแบ่งส่วนที่ห้าใน HTML5 แต่ไม่ใช่องค์ประกอบใหม่คือองค์ประกอบ แท็ก

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

เคล็ดลับสำหรับเนื้อหาที่มีโครงสร้างความหมาย

ถ้าเราต้องการสร้างเค้าร่างเอกสารที่มีโครงสร้างที่ดีเราต้องใส่ใจกับกฎต่อไปนี้:

1. องค์ประกอบการแบ่งส่วนนอกสุดอยู่เสมอ แท็ก.

2. ส่วนต่างๆใน HTML5 สามารถซ้อนกันได้.

3. แต่ละส่วนมีลำดับชั้นหัวเรื่องของตนเอง แต่ละคน (แม้แต่ส่วนที่ซ้อนกันด้านในสุด) สามารถมี h1 แท็ก.

4. ในขณะที่เค้าร่างเอกสารถูกกำหนดโดยองค์ประกอบการแบ่งส่วน 5 หลักแล้วยังต้องการส่วนหัวที่เหมาะสมสำหรับแต่ละส่วน.

5. เป็นองค์ประกอบส่วนหัวแรกเสมอ (ปล่อยให้เป็น h1 หรือแท็กส่วนหัวอันดับต่ำกว่า) ที่กำหนดหัวเรื่องของส่วนที่กำหนด แท็กส่วนหัวต่อไปนี้ในส่วนเดียวกันจะต้องสัมพันธ์กับสิ่งนี้ (หากหัวข้อแรกคือ h3 ภายในองค์ประกอบการแบ่งส่วนอย่าใส่ h3 หลังจากนั้น)

6. ส่วนที่กำหนดโดย

, และ แท็กไม่ได้อยู่ในโครงร่างหลักของเอกสาร HTML แต่มักจะไม่แสดงผลโดยเทคโนโลยีการช่วยเหลือ.

7. แต่ละส่วน (เนื้อหาส่วนบทความข้าง ๆ nav) สามารถมีเป็นของตัวเองได้

และ แท็กที่กำหนดส่วนหัว (เช่นโลโก้ชื่อผู้แต่งวันที่ข้อมูลเมตา ฯลฯ ) และส่วนท้าย (ลิขสิทธิ์บันทึกย่อลิงก์ ฯลฯ ) ของส่วนนั้น.

ตัวอย่าง: โครงร่างความหมาย

ลองดูตัวอย่างสำหรับเค้าร่างเอกสารทางความหมายเพื่อดูชัดเจนว่ามันทำงานอย่างไร โค้ดตัวอย่างของเราจะส่งผลให้โครงสร้างเอกสารดังต่อไปนี้:

และนี่คือรหัสที่มีการแบ่งส่วนแบบ semantic ที่เหมาะสม:

   ยินดีต้อนรับบนเว็บไซต์ของเรา!
 นี่คือโลโก้และสโลแกนของเรา.
 
   เลือกความสนใจของคุณ
 
  เมนู 1
 เมนู 2
 เมนู 3
 
 
   ชื่อเรื่องของบทความ
 คำบรรยายของบทความ
 
  ส่วนตรรกะแรก (เช่น "ทฤษฎี")
 ย่อหน้าที่ 1 ในส่วนแรก
 หัวข้อย่อยอื่น ๆ บางส่วนในส่วนแรก
 ย่อหน้าที่ 2 ในส่วนแรก
 
  ส่วนตรรกะที่สอง (เช่น "การปฏิบัติ")
 ย่อหน้าที่ 1 ในส่วนที่สอง
 ย่อหน้าที่ 2 ในส่วนที่สอง
 
  ผู้แต่ง Bio
 ย่อหน้าในส่วนท้ายของบทความ
 
 
  ทำความรู้จักกับเราให้ดีขึ้น
  ข้อความที่นิยม
 ... 
 
  พาร์ทเนอร์
 ... 
 
  ใบรับรอง
 ... 
 
 
   ลิขสิทธิ์
 ลิงค์โซเชียลมีเดีย

หากคุณดูข้อมูลโค้ดข้างต้นคุณจะเห็นว่าส่วนหัวและส่วนท้ายเป็นตัวเลือกเราสามารถเลือกได้อย่างอิสระหากเราต้องการใช้พวกเขาหรือไม่ แต่มันเป็น แนะนำอย่างยิ่งให้ใส่หัวข้อสำหรับแต่ละส่วนเสมอ, มิฉะนั้นส่วนจะเป็น “ไม่ได้ตั้งชื่อ” ในโครงร่างเอกสาร.

โชคดีที่มีเครื่องมือที่ยอดเยี่ยมมากมายทั่วอินเทอร์เน็ตที่ให้เราตรวจสอบร่างเอกสารคราวนี้เราจะใช้เครื่องมือ Outliner ของ html5.org.

หากเราแทรกข้อมูลโค้ดของเราลงในแบบฟอร์มที่จัดทำโดย outliner และคลิกที่ “สรุปสิ่งนี้!” ปุ่มเราจะเห็นผลลัพธ์ต่อไปนี้:

นี้เป็น เค้าร่างเอกสารของรหัสตัวอย่างของเรา, นี่คือวิธีที่เครื่องมือค้นหามองเห็นและผู้อ่านหน้าจออ่านให้ผู้ใช้ที่บกพร่องทางการมองเห็น มันมีความหมายมีโครงสร้างดีและไม่มีอะไรน่ารังเกียจ “ไม่ได้ตั้งชื่อ” ส่วนในนั้น.

หากคุณต้องการดูว่าส่วนไม่มีชื่อมีลักษณะอย่างไรใน Outliner เพียงแค่ลบแท็กส่วนหัวบางส่วนในรหัสตัวอย่าง.

ด้านอื่น ๆ ของความหมายของเว็บ

แท็ก HTML แบบย่อและเค้าร่างเอกสารเป็นเพียงส่วนเล็ก ๆ ของความหมายของเว็บ เนื้อหาของหน้าเว็บสามารถสร้างความหมายได้มากขึ้นด้วยความช่วยเหลือของโปรโตคอลการเข้าถึง WAI-ARIA และข้อมูลโครงสร้างที่สามารถใช้ร่วมกับโปรโตคอล RDFa, microdata หรือมาร์กอัป JSON-LD.

นิเมชั่น A Look Into Scalable Vector Graphics (SVG)

ดูกราฟิกแบบเวกเตอร์ที่ปรับขนาดได้ (SVG)

มองหาปลั๊กอิน WordPress พรีเมี่ยม