การทำความเข้าใจส่วนองค์ประกอบ HTML5
เมื่อ HTML5 เกิดขึ้นเมื่อหลายปีก่อนหน้านี้ได้เพิ่มองค์ประกอบชิ้นส่วนใหม่เข้ากับหน้าเว็บรวมทั้งองค์ประกอบ SECTION องค์ประกอบใหม่ ๆ ที่ HTML5 แนะนำมีการใช้งานที่ชัดเจน ตัวอย่างเช่นองค์ประกอบถูกใช้เพื่อกำหนดบทความและส่วนหลักของหน้าเว็บองค์ประกอบจะใช้เพื่อกำหนดเนื้อหาที่เกี่ยวข้องซึ่งไม่สำคัญต่อส่วนที่เหลือของหน้าเว็บส่วนหัวส่วนหัวและส่วนท้ายจะมีคำอธิบายได้ดี องค์ประกอบของ SECTION ที่เพิ่มใหม่จะไม่ชัดเจนนัก
หลายคนเชื่อว่าส่วนขององค์ประกอบ HTML และเป็นองค์ประกอบคอนเทนเนอร์ที่เหมือนกันทั่วไปที่ใช้เพื่อบรรจุเนื้อหาในหน้าเว็บ ความจริงก็คือทั้งสององค์ประกอบในขณะที่ทั้งสองเป็นองค์ประกอบคอนเทนเนอร์เป็นอะไร แต่ทั่วไป มีเหตุผลเฉพาะที่จะใช้ทั้งองค์ประกอบส่วนและองค์ประกอบ DIV - และบทความนี้จะอธิบายถึงความแตกต่างเหล่านี้
หมวดและหมวด
องค์ประกอบส่วนหมายถึงส่วนความหมายของหน้าเว็บหรือไซต์ที่ไม่ใช่ประเภทเฉพาะเจาะจงมากขึ้น (เช่นบทความหรืออื่น ๆ ) ฉันมักจะใช้องค์ประกอบนี้เมื่อทำเครื่องหมายส่วนที่แตกต่างของหน้าเว็บซึ่งเป็นส่วนที่สามารถขายส่งและใช้ในหน้าอื่น ๆ หรือบางส่วนของไซต์ได้ เป็นเนื้อหาที่แตกต่างกันหรือเป็น "ส่วน" ของเนื้อหาถ้าคุณต้องการ
ในทางตรงกันข้ามคุณใช้องค์ประกอบ DIV สำหรับส่วนต่างๆของหน้าเว็บที่คุณต้องการแบ่ง แต่เพื่อวัตถุประสงค์อื่นที่ไม่ใช่ ความหมาย ฉันจะห่อหุ้มเนื้อหาในส่วนหนึ่งหากฉันทำอย่างหมดจดเพื่อให้ตัวเอง "เบ็ด" เพื่อใช้กับ CSS อาจไม่ใช่ส่วนที่แตกต่างของเนื้อหาตามความหมาย แต่เป็นสิ่งที่ฉันเขียนเพื่อให้บรรลุรูปแบบที่ฉันต้องการสำหรับหน้าของฉัน
เป็นเรื่องเกี่ยวกับความหมาย
นี่เป็นแนวคิดที่เข้าใจยาก แต่ข้อแตกต่างระหว่างองค์ประกอบ DIV และองค์ประกอบ SECTION คือความหมาย กล่าวคือ ความหมาย ของส่วนของรหัสที่คุณแบ่งขึ้น
เนื้อหาใด ๆ ที่มีอยู่ภายในองค์ประกอบ DIV ไม่มีความหมายโดยนัยใด ๆ ใช้ดีที่สุดสำหรับสิ่งต่างๆเช่น:
- สไตล์ CSS และ hooks สำหรับสไตล์ CSS
- คอนเทนเนอร์โครงร่าง
- ตะขอ JavaScript
- ส่วนต่างๆของ HTML ช่วยให้อ่านได้ง่ายขึ้น
องค์ประกอบ DIV ใช้เป็นองค์ประกอบเดียวที่เรามีไว้สำหรับการเพิ่มตะขอเพื่อจัดรูปแบบเอกสารของเราและสร้างคอลัมน์และรูปแบบแฟนซี ด้วยเหตุนี้เราจึงจบลงด้วย HTML ที่เต็มไปด้วยองค์ประกอบ DIV ซึ่งนักออกแบบเว็บอาจเรียกได้ว่า "divitis" มีแม้แต่บรรณาธิการ WYSIWYG ที่ใช้องค์ประกอบ DIV เท่านั้น ฉันใช้งาน HTML ที่ใช้องค์ประกอบ DIV แทนการย่อหน้า!
ด้วย HTML5 เราสามารถเริ่มต้นใช้องค์ประกอบแบบแบ่งส่วนเพื่อสร้างเอกสารที่มีความหมายเชิงความหมายมากขึ้น (ใช้เพื่อนำทางและตัวเลขที่สื่อความหมายเป็นต้น) และกำหนดลักษณะในองค์ประกอบเหล่านั้นด้วย
สิ่งที่เกี่ยวกับองค์ประกอบ SPAN?
องค์ประกอบอื่น ๆ ที่คนส่วนใหญ่คิดว่าเมื่อคิดองค์ประกอบ DIV เป็นองค์ประกอบ องค์ประกอบนี้เช่น DIV ไม่ใช่องค์ประกอบความหมาย เป็นองค์ประกอบแบบอินไลน์ที่คุณสามารถใช้เพื่อเพิ่มเบ็ดสำหรับรูปแบบและสคริปต์รอบ ๆ เนื้อหา แบบอินไลน์ (โดยปกติจะเป็นข้อความ) ในแง่นี้มันเหมือนกับองค์ประกอบ DIV เพียงบรรทัดเดียวมากกว่า องค์ประกอบของบล็อก ในบางวิธีอาจคิดได้ว่า DIV เป็นองค์ประกอบ SPAN ระดับบล็อกและใช้ในลักษณะเดียวกับที่คุณต้องการ SPAN สำหรับบล็อก HTML ทั้งหมดเท่านั้น
ไม่มีส่วนในการแบ่งส่วนไลน์อินไลน์ใน HTML5
สำหรับรุ่นที่เก่ากว่าของ Internet Explorer
แม้ว่าคุณจะสนับสนุนเวอร์ชันเก่าของ IE อย่างมาก (เช่น IE 8 และรุ่นล่าง) ที่ไม่รู้จัก HTML5 อย่างถูกต้องคุณก็ไม่ควรกลัวที่จะใช้แท็ก HTML ที่ถูกต้อง ความหมายจะช่วยให้คุณและทีมของคุณสามารถจัดการเพจได้ในอนาคต (เนื่องจากคุณจะทราบว่าส่วนนั้นเป็นบทความที่ล้อมรอบไปด้วยองค์ประกอบ ARTICLE) นอกจากนี้เบราว์เซอร์ที่จดจำแท็กเหล่านั้นจะสนับสนุนพวกเขาได้ดียิ่งขึ้น
คุณยังคงสามารถใช้องค์ประกอบการแบ่งส่วนความหมาย HTML5 กับ Internet Explorer ได้คุณเพียงแค่ต้องเพิ่มสคริปต์และอาจเป็นองค์ประกอบ DIV โดยรอบเพื่อช่วยให้พวกเขารู้จักแท็กเป็น HTML
ใช้ DIV และ SECTION Elements
หากคุณใช้อย่างถูกต้องคุณสามารถใช้องค์ประกอบ DIV และ SECTION ร่วมกันในเอกสาร HTML5 ที่ถูกต้อง ตามที่คุณได้เห็นในบทความนี้คุณใช้องค์ประกอบ SECTION เพื่อกำหนดส่วนเนื้อหาที่ไม่ต่อเนื่องในเชิงเนื้อหาและคุณใช้องค์ประกอบ DIV เป็นเบ็ดสำหรับ CSS และ JavaScript ตลอดจนการกำหนดเค้าโครงที่ไม่มีความหมายทางความหมาย
บทความต้นฉบับโดย Jennifer Krynin แก้ไขโดย Jeremy Girard ในวันที่ 3/15/17