แท็ก HTML <div> และ <span> แตกต่างกันอย่างไร

ผมอยากจะถามสำหรับบางตัวอย่างง่ายๆแสดงการใช้ประโยชน์จากและ<div> <span>ฉันเคยเห็นพวกเขาทั้งสองเคยทำเครื่องหมายส่วนของหน้าเว็บด้วยidหรือclassแต่ฉันสนใจที่จะรู้ว่ามีบางครั้งที่คน ๆ หนึ่งต้องการมากกว่า

• divเป็นองค์ประกอบบล็อก
• spanเป็นองค์ประกอบแบบอินไลน์

ซึ่งหมายความว่าการใช้พวกมันมีความหมายควรใช้ div ในการตัดส่วนของเอกสารในขณะที่ช่วงควรใช้เพื่อตัดส่วนเล็ก ๆ ของข้อความรูปภาพและอื่น ๆ

ตัวอย่างเช่น:

<div>This a large main division, with <span>a small bit</span> of spanned text!</div>

โปรดทราบว่าผิดกฎหมายในการวางองค์ประกอบระดับบล็อกไว้ในองค์ประกอบอินไลน์ดังนั้น:

<div>Some <span>text that <div>I want</div> to mark</span> up</div>

... ผิดกฎหมาย

แก้ไข: ตั้งแต่ HTML5 องค์ประกอบบล็อกบางส่วนสามารถอยู่ในองค์ประกอบอินไลน์บางส่วนได้ ดูการอ้างอิง MDN ที่นี่สำหรับรายการที่ชัดเจน ด้านบนยังคงเป็นสิ่งผิดกฎหมายเนื่องจาก<span>ยอมรับเฉพาะเนื้อหาที่ใช้ถ้อยคำและ<div>เป็นเนื้อหาแบบไหล

คุณขอตัวอย่างที่เป็นรูปธรรมดังนั้นจึงนำมาจากเว็บไซต์โบว์ลิ่งของฉันBowlSK :

<div id="header">
  <div id="userbar">
    Hi there, <span class="username">Chris Marasti-Georg</span> |
    <a href="/edit-profile.html">Profile</a> |
    <a href="https://www.bowlsk.com/_ah/logout?...">Sign out</a>
  </div>
  <h1><a href="/">Bowl<span class="sk">SK</span></a></h1>
</div>

ตกลงเกิดอะไรขึ้น

โปรดทราบว่า HTML5 มีชุดองค์ประกอบใหม่ที่กว้างซึ่งกำหนดโครงสร้างหน้าทั่วไปเช่นบทความส่วนการนำทาง ฯลฯ

ส่วนที่ 4.4 ของร่างการทำงาน HTML 5แสดงรายการและให้คำแนะนำเกี่ยวกับการใช้งาน HTML5 ยังคงเป็นข้อมูลจำเพาะที่ใช้งานได้ดังนั้นจึงไม่มีสิ่งใดเป็น "ขั้นสุดท้าย" แต่เป็นที่น่าสงสัยอย่างมากว่าองค์ประกอบเหล่านี้จะไปได้ทุกที่ มีแฮ็กจาวาสคริปต์ที่คุณจะต้องใช้หากคุณต้องการจัดองค์ประกอบเหล่านี้ใน IE เวอร์ชั่นเก่า - คุณต้องสร้างองค์ประกอบหนึ่งโดยใช้document.createElementก่อนที่องค์ประกอบใด ๆ จะถูกระบุในแหล่งที่มาของคุณ มีพวงของห้องสมุดที่จะดูแลนี้สำหรับคุณคือ - ค้นหา Google อย่างรวดเร็วเปิดขึ้นhtml5shiv

เพื่อความสมบูรณ์ฉันขอเชิญคุณลองคิดแบบนี้:

• มีองค์ประกอบบล็อกจำนวนมาก (การแบ่งบรรทัดก่อนและหลัง) ที่กำหนดใน HTML และแท็กอินไลน์จำนวนมาก (ไม่มีการแบ่งบรรทัด)
• แต่ใน HTML สมัยใหม่องค์ประกอบทั้งหมดควรจะมีความหมาย : a <p>เป็นย่อหน้า, <li>เป็นรายการ, ฯลฯ , และเราควรใช้แท็กที่ถูกต้องเพื่อจุดประสงค์ที่ถูกต้อง - ไม่เหมือนในสมัยก่อนเมื่อเรา เยื้องใช้<blockquote>ไม่ว่าจะเป็นเนื้อหาที่เป็นคำพูดหรือไม่
• ดังนั้นคุณจะทำอย่างไรเมื่อมี คือไม่มีความหมายสิ่งที่คุณกำลังพยายามที่จะทำอย่างไร? ไม่มีความหมายต่อคอลัมน์กว้าง 400px ใช่ไหม คุณเพียงแค่ต้องการให้คอลัมน์ข้อความกว้าง 400px เพราะมันเหมาะกับการออกแบบของคุณ
• ด้วยเหตุผลนี้พวกเขาจึงเพิ่มองค์ประกอบอีกสองรายการลงใน HTML: องค์ประกอบทั่วไปหรือองค์ประกอบที่ไม่มีความหมาย<div>และ<span>เพราะมิฉะนั้นผู้คนจะกลับไปใช้องค์ประกอบที่มีความหมายในทางที่ผิด

มีคำตอบที่ดีและมีรายละเอียดอยู่แล้วที่นี่ แต่ไม่มีตัวอย่างที่เห็นได้ดังนั้นนี่เป็นภาพประกอบด่วน:

<div>This is a div.</div>
<div>This is a div.</div>
<div>This is a div.</div>
<span>This is a span.</span>
<span>This is a span.</span>
<span>This is a span.</span>

<div>เป็นแท็กบล็อกในขณะที่<span>เป็นแท็กแบบอินไลน์

<div>เป็นองค์ประกอบระดับบล็อกและ<span>เป็นองค์ประกอบแบบอินไลน์

หากคุณต้องการทำบางสิ่งบางอย่างด้วยข้อความอินไลน์<span>เป็นวิธีที่จะไปเนื่องจากจะไม่แนะนำการขึ้นบรรทัดใหม่ที่เป็น<div>ไปได้

ตามที่ระบุไว้โดยผู้อื่นมีความหมายบางอย่างโดยนัยกับสิ่งเหล่านี้อย่างมีนัยสำคัญความจริงที่ว่า<div>หมายถึงการแบ่งตรรกะในเอกสารคล้ายกับส่วนของเอกสารหรือบางสิ่งบางอย่าง la:

<div id="Chapter1">
   <p>Lorem ipsum dolor sit amet, <span id="SomeSpecialText1">consectetuer adipiscing</span> elit. Duis congue vehicula purus.</p>
   <p>Nam <span id="SomeSpecialText2">eget magna nec</span> sapien fringilla euismod. Donec hendrerit.</p> 
</div>

ความแตกต่างที่สำคัญที่แท้จริงได้ถูกกล่าวถึงแล้วในคำตอบของคริส อย่างไรก็ตามความหมายจะไม่ชัดเจนสำหรับทุกคน

ในฐานะองค์ประกอบอินไลน์<span>อาจมีองค์ประกอบแบบอินไลน์เท่านั้น รหัสต่อไปนี้จึงผิด

<span><p>This is a paragraph</p></span>

รหัสข้างต้นไม่ถูกต้อง ในการห่อองค์ประกอบระดับบล็อกต้องใช้องค์ประกอบระดับบล็อกอีกรายการ (เช่น<div>) ในทางกลับกัน<div>อาจใช้เฉพาะในสถานที่ที่องค์ประกอบระดับบล็อกถูกกฎหมาย

นอกจากนี้กฎเหล่านี้ได้รับการแก้ไขใน (X) HTML และจะไม่เปลี่ยนแปลงโดยการมีอยู่ของกฎ CSS! ดังนั้นรหัสต่อไปนี้ก็ผิดด้วย!

<span style="display: block"><p>Still wrong</p></span>
<span><p style="display: inline">Just as wrong</p></span>

ความสำคัญของ "องค์ประกอบของบล็อก" นั้นโดยนัย แต่ไม่เคยระบุอย่างชัดเจน หากเราเพิกเฉยต่อทฤษฎีทั้งหมด (ทฤษฎีก็ดี) ดังนั้นสิ่งต่อไปนี้คือการเปรียบเทียบในทางปฏิบัติ ดังต่อไปนี้:

<p>This paragraph <span>has</span> a span.</p>
<p>This paragraph <div>has</div> a div.</p>

ผลิต:

This paragraph has a span.

This paragraph

has
a div.

แสดงให้เห็นว่าที่ไม่เพียง แต่ควร div ที่ไม่ได้นำมาใช้แบบอินไลน์มันก็จะไม่ส่งผลกระทบต่อการผลิตที่ต้องการ

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

หนึ่งในรูปแบบที่มีประโยชน์สำหรับdivคือinline-block

ตัวอย่าง:

1. http://dustwell.com/div-span-inline-block.html

2. CSS display: inline vs inline-block

ฉันเคยinline-blockประสบความสำเร็จอย่างมากในโครงการเว็บเกม

Div เป็นองค์ประกอบบล็อกและขยายเป็นองค์ประกอบแบบอินไลน์และความกว้างของมันขึ้นอยู่กับเนื้อหาของมันเองที่ div ไม่

ฉันจะบอกว่าถ้าคุณรู้ภาษาสเปนนิดหน่อยเพื่อดูหน้านี้ซึ่งมีการอธิบายอย่างเหมาะสม

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

แค่อยากจะเพิ่มบริบททางประวัติศาสตร์บางอย่างกับวิธีการที่จะมาเป็นspanกับdiv

ประวัติความเป็นมาของspan:

ในวันที่ 3 กรกฎาคม 1995 Benjamin CW Sittler เสนอที่เก็บข้อความทั่วไปแท็กสำหรับการใช้สไตล์กับบล็อกข้อความบางอย่าง การเรนเดอร์นั้นเป็นกลางยกเว้นถ้าใช้ร่วมกับสไตล์ชีท มีการถกเถียงกันเกี่ยวกับความสามารถในการอ่านความหมาย เบิร์ตบอสกำลังกล่าวถึงลักษณะที่เพิ่มขึ้นขององค์ประกอบผ่านแอตทริบิวต์ class (ด้วยค่าเช่นเมืองบุคคลวันที่เป็นต้น) Paul Prescod เป็นห่วงว่าองค์ประกอบทั้งสองจะถูกทารุณกรรม เขาตรงข้ามกับข้อความที่กล่าวถึงว่า "องค์ประกอบใหม่ใด ๆ ควรอยู่ในองค์ประกอบเก่า" และการเพิ่ม "ถ้าเราสร้างแท็กที่ไม่มีความหมายมันสามารถใช้งานได้ทุกที่โดยไม่ผิดเราต้องบังคับให้ผู้เขียนติดแท็กซีแมนทิกส์ของเอกสารอย่างถูกต้อง เราต้องบังคับให้ผู้ขายเครื่องมือแก้ไขเลือกอย่างชัดเจนในอินเทอร์เฟซของพวกเขา "

- ที่มา (w3 wiki)

จากแบบร่าง RFC ที่แนะนำspan:

อันดับแรกจำเป็นต้องมีคอนเวอร์เตอร์ทั่วไปเพื่อพกพาคุณสมบัติ LANG และ BIDI ในกรณีที่ไม่มีองค์ประกอบอื่นที่เหมาะสม เครื่องปั่นไฟ SPAN ถูกนำมาใช้เพื่อจุดประสงค์นั้น

- แหล่งที่มา (ร่าง IETF)

ประวัติความเป็นมาของdiv:

องค์ประกอบ DIV สามารถใช้เพื่อจัดโครงสร้างเอกสาร HTML เป็นลำดับชั้นของหน่วยงาน

...

Netscape เปิดตัว CENTER ก่อนที่พวกเขาจะเพิ่มการสนับสนุนสำหรับองค์ประกอบ HTML 3.0 DIV มันยังคงอยู่ใน HTML 3.2 เนื่องจากมีการใช้งานอย่างแพร่หลาย

HTML 3.2 Spec

โดยสรุปองค์ประกอบทั้งสองเกิดขึ้นจากความต้องการคอนเทนเนอร์ที่มีความหมายทั่วไปมากกว่า ช่วงถูกเสนอให้แทนที่แบบทั่วไปสำหรับ<text>องค์ประกอบเพื่อจัดรูปแบบข้อความ Div ถูกเสนอให้เป็นวิธีทั่วไปในการแบ่งหน้าและมีประโยชน์เพิ่มเติมในการแทนที่<center>แท็กสำหรับเนื้อหาที่จัดกึ่งกลาง Div เป็นองค์ประกอบบล็อกเสมอเพราะมีประวัติเป็นตัวแบ่งหน้า Span เป็นองค์ประกอบแบบอินไลน์อยู่เสมอเพราะจุดประสงค์ดั้งเดิมของมันคือการใส่สไตล์ข้อความและ div และ span ในวันนี้ทั้งคู่ต่างก็มาเป็นองค์ประกอบทั่วไปพร้อมคุณสมบัติการบล็อกเริ่มต้นและคุณสมบัติการแสดงผลแบบอินไลน์ตามลำดับ

ใน HTML มีแท็กที่เพิ่มโครงสร้างหรือความหมายลงในเนื้อหา ตัวอย่างเช่น<p>แท็กที่ใช้ในการระบุวรรค อีกตัวอย่างหนึ่งคือ<ol>แท็กสำหรับรายการสั่งซื้อ

เมื่อไม่มีแท็กที่เหมาะสมใน HTML ดังที่แสดงด้านบนแท็ก<div>และ<span>มักจะใช้แทน

<div>แท็กจะใช้เพื่อระบุส่วน blocklevel / ส่วนของเอกสารที่มีการแบ่งบรรทัดทั้งก่อนและหลังมัน

ตัวอย่างที่แท็ก div สามารถใช้เป็นส่วนหัวท้ายกระดาษการนำทาง ฯลฯ อย่างไรก็ตามใน HTML 5 แท็กเหล่านี้มีให้แล้ว

<span>แท็กจะใช้เพื่อระบุอินไลน์ส่วน / ส่วนของเอกสาร

ตัวอย่างเช่นสามารถใช้แท็ก span เพื่อเพิ่มภาพสัญลักษณ์แบบอินไลน์ไปยังองค์ประกอบ

จำไว้ว่าโดยทั่วไปแล้วพวกมันจะไม่ทำหน้าที่ใด ๆ เช่นกัน พวกเขาคือไม่ได้เฉพาะเจาะจงเกี่ยวกับการทำงานเพียงแค่แท็กของพวกเขา

พวกเขาสามารถปรับแต่งได้ด้วยความช่วยเหลือของ CSS

ตอนนี้มาถึงคำถามของคุณ:

แท็ก SPAN พร้อมกับการจัดแต่งทรงผมบางอย่างจะมีประโยชน์ในการยึดไว้ภายในบรรทัดพูดในย่อหน้าใน html นี่คือระดับบรรทัดหรือระดับคำสั่งใน HTML

ตัวอย่าง:

<p>Am writing<span class="time">this answer</span> in my free time of my day.</p>

ฟังก์ชั่นแท็ก DIV ดังกล่าวสามารถมองเห็นได้ด้วยการจัดแต่งทรงผมเท่านั้นที่สามารถถือโค้ด HTML ขนาดใหญ่ได้

DIV เป็นระดับบล็อก

ตัวอย่าง:

    <div class="large-time">
    <p>Am writing <span class="time"> this answer</span> in my free time of my day. 
    </p>
    </div>

ทั้งสองมีเวลาและกรณีที่จะใช้ตามความต้องการของคุณ

หวังว่าชัดเจนด้วยคำตอบ ขอบคุณ.