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