บล๊อกและอินไลน์ (Block and Inline)

ทุกๆ Element จะมีค่าเริ่มต้นการแสดงผลแตกต่างกันไปตามประเภทของ Element ซึ่งค่าเริ่มต้นส่วนใหญ่จะมี 2 แบบหลักๆ คือ แสดงแบบบล๊อกหรือแสดงแบบอินไลน์

แสดงผลแบบบล๊อก (Block-level-Elements)

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

ยกตัวอย่าง Element ที่มีการแสดงผลแบบล๊อก:

• <div>
• <h1> - <h6>
• <p>
• <form>
• <table>

แสดงผลแบบอินไลน์ (Inline Elements)

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

ตัวอย่าง Element <span> เป็นการแสดงผลแบบอินไลน์ (Inline)

ยกตัวอย่าง Element ที่มีการแสดงผลแบบอินไลน์:

• <span>
• <a>
• <img>
• <strong>

Element <div>

Element <div> ส่วนใหญ่ถูกใช้เพื่อบรรจุ HTML Element อื่นๆ

Element <div> ไม่มี Attibute จำเป็นต้องใช้นอกจาก class และ id

เมื่อใช้ร่วมกับ CSS <div> สามารถทำเป็นกล่องเนื้อหาได้

Element <span>

Element <span> ใช้ในการบรรจุข้อความ

Element <span> ไม่มี Attibute จำเป็นต้องใช้นอกจาก class และ id

เมื่อใช้ร่วมกับ CSS <span> สามารถตกแต่งข้อความบางส่วนได้

Tag