ความแตกต่างระหว่าง<section>และ<div>ในHTMLคืออะไร?
เราไม่ได้กำหนดหัวข้อในทั้งสองกรณี?
คำตอบ:
<section> หมายความว่าเนื้อหาภายในมีการจัดกลุ่ม (เช่นเกี่ยวข้องกับธีมเดียว) และควรปรากฏเป็นรายการในโครงร่างของหน้า
<div>ในทางกลับกันไม่ได้สื่อความหมายใด ๆนอกเหนือจากสิ่งที่พบในclassนั้นlangและtitleคุณลักษณะ
ดังนั้นไม่: การใช้ a <div>ไม่ได้กำหนดส่วนใน HTML
จากสเป็ค:
<section>
<section>องค์ประกอบหมายถึงส่วนทั่วไปของเอกสารหรือโปรแกรมประยุกต์ ส่วนในบริบทนี้คือการจัดกลุ่มเนื้อหาที่มีเนื้อหาเฉพาะเรื่อง แต่ละคนsectionควรได้รับการระบุโดยทั่วไปแล้วรวมส่วนหัว (องค์ประกอบ h1-h6) เป็นลูกของ<section>องค์ประกอบตัวอย่างของส่วนต่างๆจะเป็นบทหน้าต่างๆที่มีแท็บในกล่องโต้ตอบแบบแท็บหรือส่วนที่มีหมายเลขของวิทยานิพนธ์ โฮมเพจของเว็บไซต์สามารถแบ่งออกเป็นส่วน ๆ เพื่อแนะนำรายการข่าวและข้อมูลการติดต่อ
...
<section>องค์ประกอบไม่ได้เป็นองค์ประกอบภาชนะทั่วไป เมื่อองค์ประกอบจำเป็นสำหรับการจัดแต่งทรงผมเท่านั้นหรือเพื่อความสะดวกในการเขียนสคริปต์ผู้เขียนควรใช้<div>องค์ประกอบแทน กฎทั่วไปคือ<section>องค์ประกอบมีความเหมาะสมเฉพาะถ้าเนื้อหาขององค์ประกอบจะถูกระบุไว้อย่างชัดเจนในร่างของเอกสาร
( https://www.w3.org/TR/html/sections.html#the-section-element )
<div>
<div>องค์ประกอบไม่มีความหมายพิเศษที่ทุกคน มันแสดงถึงลูก ๆ ของมัน มันสามารถใช้กับclass,langและtitleคุณลักษณะที่จะทำเครื่องหมายขึ้นความหมายร่วมกันกับกลุ่มขององค์ประกอบติดต่อกันหมายเหตุ:ผู้เขียนได้รับการสนับสนุนอย่างยิ่งให้ดู
<div>องค์ประกอบเป็นองค์ประกอบของวิธีสุดท้ายสำหรับเมื่อไม่มีองค์ประกอบอื่นที่เหมาะสม การใช้องค์ประกอบที่เหมาะสมมากขึ้นแทน<div>องค์ประกอบนำไปสู่การเข้าถึงที่ดีขึ้นสำหรับผู้อ่านและการบำรุงรักษาง่ายขึ้นสำหรับผู้เขียน
( https://www.w3.org/TR/html/grouping-content.html#the-div-element )
sectionกับการdivรวมทั้งในแง่ของคำตอบนี้ฉันได้ข้อสรุปว่าพวกเขาเป็นองค์ประกอบเดียวกัน W3C กล่าวว่าdiv"แสดงถึงลูก ๆ ของมัน" นั่นไม่ได้เป็นสิ่งที่sectionองค์ประกอบทำ? ใช่sectionหมายถึงเด็กที่มีการรวมกลุ่มกัน แต่โดยพระราชบัญญัติมากของการวางเด็กภายในdivคุณยังใช่การจัดกลุ่มเข้าด้วยกัน อย่างน้อยที่สุดฉันก็ทำฉันไม่รู้เกี่ยวกับพวกคุณ
sectionกับdiv” - ไม่คิดว่ามากเกินไปเกี่ยวกับเรื่องนี้ HTML ไม่ซับซ้อน “ โดยการวางลูกไว้ข้างในdivคุณก็ใช่แล้วรวมกลุ่มพวกเขาด้วยกัน ” ไม่ตรงตามข้อมูลจำเพาะ HTML ที่คุณไม่ได้ คุณกำลังห่อไว้divเพื่อวัตถุประสงค์ในการจัดแต่งทรงผมหรือความสะดวกสบายของ JavaScript หรืออย่างอื่นที่ W3C ยังไม่ได้คิด แต่ไม่ได้ระบุถึงผู้อ่านว่าองค์ประกอบย่อยเป็นกลุ่ม
<p>This is a paragraph</p> <h2>This is a second-level heading</h2>เนื่องจาก<div>เพิ่มความหมายไม่ได้คุณจะใช้เฉพาะเมื่อไม่มีองค์ประกอบ HTML อื่นที่เพิ่มความหมายที่เหมาะสมกับข้อความที่เป็นปัญหา
<div> Vs <Section><div>:HTML องค์ประกอบ (หรือ HTML เอกสารกองธาตุ) เป็นภาชนะทั่วไปสำหรับเนื้อหาการไหลซึ่งไม่ได้เป็นตัวแทนของสิ่งที่โดยเนื้อแท้ มันสามารถใช้ในการจัดกลุ่มองค์ประกอบเพื่อวัตถุประสงค์ในการจัดแต่งทรงผม (โดยใช้แอตทริบิวต์ class หรือ id) หรือเพราะพวกเขาแบ่งปันค่าคุณลักษณะเช่น lang ควรใช้เฉพาะเมื่อไม่มีองค์ประกอบทางความหมายอื่น ๆ (เช่น<article>หรือ<nav>) มีความเหมาะสม
<section>:HTMLองค์ประกอบมาตรา ( <section>) หมายถึงส่วนทั่วไปของเอกสารเช่นการจัดกลุ่มเฉพาะเรื่องของเนื้อหาโดยปกติจะมีหัวข้อ
<div>: สนับสนุนเบราว์เซอร์
<section>: สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุเวอร์ชันเบราว์เซอร์แรกที่รองรับองค์ประกอบอย่างสมบูรณ์
ในหลอดเลือดดำนั้น div มีความเกี่ยวข้องจาก CSS หรือ DOM ล้วนๆในขณะที่ส่วนนั้นเกี่ยวข้องกับความหมายและในอนาคตอันใกล้นี้สำหรับการจัดทำดัชนีโดยเครื่องมือค้นหา
แค่การสังเกต - ยังไม่พบเอกสารใด ๆ ที่ยืนยันสิ่งนี้
หากส่วนมีส่วนอื่นส่วนหัว h1 ในส่วนด้านในจะแสดงเป็นแบบอักษรขนาดเล็กกว่าส่วนหัว h1- ในส่วนด้านนอก เมื่อใช้ div แทนส่วน div ภายใน h1-header จะถูกแปลงเป็น h1
<section>
<h1>Level1</h1>
some text
<section>
<h1>Level2</h1>
some more text
</section>
</section>- ส่วนหัว Level2 - แสดงเป็นแบบอักษรขนาดเล็กกว่าส่วนหัวระดับ 1 -
เมื่อใช้ส่วนหัว css เพื่อ color h1 ส่วน h1 ด้านในก็เป็นสีด้วย (ทำหน้าที่เหมือน h1 ปกติ) มันเป็นพฤติกรรมเดียวกันใน Firefox 18, IE 10 และ Chrome 28
ในมาตรฐาน HTML5 <section>องค์ประกอบจะถูกกำหนดเป็นบล็อกขององค์ประกอบที่เกี่ยวข้อง
<div>องค์ประกอบถูกกำหนดให้เป็นบล็อกขององค์ประกอบเด็ก
ระวังอย่าใช้แท็กส่วนมากเกินไปเพื่อแทนที่องค์ประกอบdiv ส่วนแท็กควรกำหนดพื้นที่ที่มีนัยสำคัญในบริบทของร่างกาย ความหมาย HTML5 ส่งเสริมให้เรากำหนดเอกสารของเราดังนี้:
<html>
<head></head>
<body>
<header></header>
<section>
<h1></h1>
<div>
<span></span>
</div>
<div></div>
</section>
<footer></footer>
</body>
</html>กลยุทธ์นี้ช่วยให้เว็บโรบอตและโปรแกรมอ่านหน้าจออัตโนมัติเข้าใจการไหลของเนื้อหาของคุณได้ดียิ่งขึ้น มาร์กอัปนี้จะกำหนดว่าเนื้อหาหน้าหลักของคุณอยู่ที่ใด แน่นอนว่าส่วนหัวและท้ายกระดาษมักจะพบได้บ่อยในหลายร้อยหน้าหากไม่นับพันหน้าในเว็บไซต์ ส่วนแท็กควรจะ จำกัด ที่จะอธิบายที่เนื้อหาที่ไม่ซ้ำที่มีอยู่ ภายในแท็กส่วนเราควรมาร์กอัปและควบคุมเนื้อหาด้วยแท็ก HTML ซึ่งต่ำกว่าในลำดับชั้นเช่นh1 , div , span , ฯลฯ
ในหน้าเว็บส่วนใหญ่ควรมีแท็กส่วนเดียวเท่านั้นไม่ควรมีหลายแท็ก โปรดพิจารณาว่ามีแท็ก HTML5 ที่น่าสนใจอื่น ๆ ที่มีความคล้ายคลึงกับส่วน พิจารณาใช้บทความ , สรุป , กันและคนอื่น ๆ ที่อยู่ในการไหลของเอกสารของคุณ ดังที่คุณเห็นแท็กเหล่านี้ช่วยเพิ่มความสามารถของเราในการกำหนดขอบเขตหลักของเอกสาร HTML
mainแท็กในนั้นและภายในsectionแท็กหนึ่งแท็กขึ้นไป
<div>- ภาชนะบรรจุกระแสทั่วไปที่เราทุกคนรู้จักและชื่นชอบ เป็นองค์ประกอบระดับบล็อกโดยไม่มีความหมายเพิ่มเติม (W3C: Markup, WhatWG)
<section>- เป็นเอกสารทั่วไปหรือส่วนของแอปพลิเคชัน โดยปกติจะมีหัวเรื่อง (ชื่อเรื่อง) และอาจเป็นท้ายกระดาษด้วย มันเป็นเนื้อหาที่เกี่ยวข้องเช่นส่วนย่อยของบทความยาวส่วนสำคัญของหน้า (เช่นส่วนข่าวในหน้าแรก) หรือหน้าในอินเทอร์เฟซแบบแท็บของ webapp (W3C: มาร์กอัป WhatWG)
คำแนะนำของฉัน: div: ใช้รุ่นที่ต่ำกว่า (ฉันคิดว่า 4.01 เป็นยัง) องค์ประกอบ HTML (นักออกแบบจำนวนมากจัดการสิ่งนั้น) section: องค์ประกอบ html5 ที่ส่งมาเมื่อเร็ว ๆ นี้
แท็กส่วนมีไวยากรณ์ความหมายเพิ่มเติมสำหรับ html div เป็นแท็กทั่วไปสำหรับส่วน เมื่อคุณใช้แท็กส่วนสำหรับเนื้อหาที่เหมาะสมสามารถใช้สำหรับการเพิ่มประสิทธิภาพกลไกค้นหาได้เช่นกัน แท็กส่วนยังทำให้การแยกวิเคราะห์ HTML ทำได้ง่าย สำหรับข้อมูลเพิ่มเติมอ้างอิง http://blog.whatwg.org/is-not-just-a-semantic
ใช้<section>อาจจะneaterช่วยอ่านหน้าจอและSEOในขณะที่ยัง<div>เป็นขนาดเล็กไบต์และรวดเร็วในการประเภท
โดยรวมแตกต่างกันเล็กน้อยมาก
นอกจากนี้จะไม่แนะนำให้ใส่<section>ใน<section>แทนวาง<div>ภายใน<section>
นี่คือเคล็ดลับเกี่ยวกับวิธีแยกแยะองค์ประกอบ html5 ล่าสุดในกรณีของเว็บแอปพลิเคชัน (ส่วนตัวล้วนๆ)
<section>ทำเครื่องหมายวิดเจ็ตในส่วนติดต่อผู้ใช้แบบกราฟิกในขณะ<div>ที่ภาชนะของส่วนประกอบของเครื่องมือเช่นภาชนะถือปุ่มและฉลาก ฯลฯ
<article> วิดเจ็ตกลุ่มที่มีจุดประสงค์
<header> เป็นชื่อและแถบเมนู
<footer> เป็นแถบสถานะ
<section>แท็กกำหนดส่วนในเอกสารเช่นบทส่วนหัวส่วนท้ายหรือส่วนอื่น ๆ ของเอกสาร
ขณะที่:
<div>แท็กกำหนดส่วนหรือส่วนใดส่วนในเอกสารแบบ HTML
<div>แท็กจะใช้ในกลุ่มบล็อกองค์ประกอบการจัดรูปแบบให้พวกเขาด้วย CSS
<header>, <footer>, <nav>, <article>ฯลฯ )
<section></section>
<section>องค์ประกอบHTML แสดงถึงส่วนทั่วไปของเอกสารเช่นการจัดกลุ่มใจความของเนื้อหาโดยทั่วไปแล้วจะมีหัวเรื่อง แต่ละคน<section>ควรได้รับการระบุโดยทั่วไปแล้วรวมส่วนหัว (<h1>-<h6>องค์ประกอบ) เป็นลูกของ<section>องค์ประกอบ สำหรับรายละเอียดโปรดลิงค์ต่อไปนี้
การอ้างอิง:
<div></div>
<div>องค์ประกอบHTML (หรือองค์ประกอบส่วนเอกสาร HTML) เป็นคอนเทนเนอร์ทั่วไปสำหรับเนื้อหาการไหลซึ่งไม่ได้เป็นตัวแทนของสิ่งใด มันสามารถใช้ในการจัดกลุ่มองค์ประกอบเพื่อวัตถุประสงค์ในการจัดแต่งทรงผม (โดยใช้แอตทริบิวต์ class หรือ id) หรือเพราะพวกเขาแบ่งปันค่าคุณลักษณะเช่น lang ควรใช้เฉพาะเมื่อไม่มีองค์ประกอบทางความหมายอื่น ๆ (เช่น<article>หรือ<nav>) มีความเหมาะสม
ข้อมูลอ้างอิง: - http://www.w3schools.com/tags/tag_div.asp - https://developer.mozilla.org/en/docs/Web/HTML/Element/div
นี่คือลิงค์บางส่วนที่อธิบายเพิ่มเติมเกี่ยวกับความแตกต่างระหว่างพวกเขา: