องค์ประกอบ HTML ทุกคนมีค่าการแสดงเริ่มต้นขึ้นอยู่กับชนิดขององค์ประกอบมันเป็น ค่าการแสดงผลเริ่มต้นสำหรับองค์ประกอบส่วนใหญ่เป็นบล็อกหรือแบบอินไลน์
องค์ประกอบระดับบล็อก
องค์ประกอบระดับบล็อกจะเริ่มต้นในบรรทัดใหม่และจะขึ้นเต็มความกว้างใช้ได้ (stretches out to the left and right as far as it can)
ตัวอย่างขององค์ประกอบระดับบล็อก:
- <div>
- <h1> - <h6>
- <p>
- <form>
องค์ประกอบแบบอินไลน์
องค์ประกอบแบบอินไลน์ไม่ได้เริ่มต้นในบรรทัดใหม่และใช้เวลาเพียงไม่เกินความกว้างมากที่สุดเท่าที่จำเป็น
นี้เป็นแบบอินไลน์ <span> องค์ประกอบภายในย่อหน้า
ตัวอย่างขององค์ประกอบแบบอินไลน์:
- <span>
- <a>
- <img>
<div> องค์ประกอบ
<div> องค์ประกอบเป็นองค์ประกอบระดับบล็อกที่มักจะถูกนำมาใช้เป็นภาชนะสำหรับองค์ประกอบ HTML อื่น ๆ
<div> องค์ประกอบที่ไม่มีคุณลักษณะที่จำเป็น แต่ style และ class เป็นเรื่องธรรมดา
เมื่อนำมาใช้ร่วมกันกับ CSS ที่ <div> องค์ประกอบที่สามารถใช้ในการบล็อกรูปแบบของเนื้อหา:
ตัวอย่าง
<div style="background-color:black; color:white; padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div> ลองตัวเอง» <span> ธาตุ
<span> องค์ประกอบเป็นองค์ประกอบแบบอินไลน์ที่มักจะถูกนำมาใช้เป็นภาชนะสำหรับข้อความบางส่วน
<span> องค์ประกอบที่ไม่มีคุณลักษณะที่จำเป็น แต่ style และ class เป็นเรื่องธรรมดา
เมื่อนำมาใช้ร่วมกันกับ CSS ที่ <span> องค์ประกอบที่สามารถนำมาใช้กับส่วนรูปแบบของข้อความ:
HTML การจัดกลุ่มแท็ก
| แท็ก | ลักษณะ |
|---|---|
| <div> | กำหนดส่วนในเอกสาร (block-level) |
| <span> | กำหนดส่วนในเอกสาร (inline) |