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

ฉันอยากรู้ว่าแท็ก span ดูเหมือนจะทำงานเหมือนกับ div

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

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

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

ทั้ง Nick และ Toby ตอบคำถามของคุณได้ดี แต่ให้เพิ่มอีกหนึ่งระดับ

โดยค่าเริ่มต้น<div>s เป็นองค์ประกอบบล็อกและ<span>s เป็นองค์ประกอบแบบอินไลน์ เหล่านี้เป็นแท็กทั่วไปที่ให้บล็อกหรือภาชนะบรรจุแบบอินไลน์ ในทางปฏิบัติสิ่งเหล่านี้สามารถบิดผ่าน CSS เพื่อใช้แทนกันได้บ้างโดยการตั้งค่าจอแสดงผล css-attribute เป็น 'block', 'inline' หรือแม้แต่ 'inline-block' (ท่ามกลางคนอื่น ๆ )

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

พยายามคิดว่ามันเป็นองค์ประกอบความหมาย ใช้<span>เมื่อคุณต้องการติดแท็กเนื้อหาที่ใช้ภายในบล็อคข้อความและใช้<div>เมื่อคุณต้องการเพิ่มโครงสร้างพิเศษให้กับหน้า

เมื่อกล่าวถึงนี้ HTML5 มีองค์ประกอบเชิงความหมายมากมายที่ควรลดความจำเป็นในการใช้แท็กทั่วไปเหล่านี้ ขอแนะนำให้ใช้แท็กความหมายมากกว่าการเพิ่มจำนวน divs และ spans จำนวนมาก

โชคดี!

ความแตกต่างที่สำคัญคือdivsองค์ประกอบของบล็อกและspansเป็นองค์ประกอบแบบอินไลน์

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

บางสิ่งจะมีผลต่อองค์ประกอบแบบอินไลน์และบล็อกต่างกันตัวอย่างเช่นคุณไม่สามารถวางความสูงลงบนspanองค์ประกอบ