ทุก HTML Element มีค่าการแสดงผลเริ่มต้น ขึ้นอยู่กับประเภทของ Element
มีค่าการแสดงผล 2 รูปแบบ คือ แบบบล็อกและแบบอินไลน์
Elements แสดงผลแบบบล็อก
Element ที่แสดงผลแบบบล็อกจะขึ้นบรรทัดใหม่เสมอ และเบราว์เซอร์จะเพิ่มช่องว่าง (ระยะขอบ) ก่อนและหลัง Element โดยอัตโนมัติ
Element แสดงผลแบบบล็อกจะใช้ความกว้างทั้งหมดที่มีอยู่เสมอ (ยืดออกไปทางซ้ายและขวาเท่าที่จะทำได้)
Element แสดงผลแบบบล็อกที่ใช้กันทั่วไป 2 รายการคือ: <p> และ <div>
Element <p> กำหนดย่อหน้าในเอกสาร HTML
Element <div> กำหนดส่วนหรือส่วนในเอกสาร HTML
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<p style="border: 1px solid black">Hello World</p>
<div style="border: 1px solid black">Hello World</div>
<p>Element p และ div เป็นทั้งองค์ประกอบแบบบล็อก และองค์ประกอบเหล่านี้จะเริ่มขึ้นบรรทัดใหม่เสมอและใช้ความกว้างทั้งหมดที่มี (ยืดออกไปทางซ้ายและขวาเท่าที่ทำได้)</p>
</body>
</html>
Element แสดงผลแบบบล็อกใน HTML:
| <address> | <article> | <aside> | <blockquote> | <canvas> |
| <dd> | <div> | <dl> | <dt> | <fieldset> |
| <figcaption> | <figure> | <footer> | <form> | <h1>-<h6> |
| <header> | <hr> | <li> | <main> | <nav> |
| <noscript> | <ol> | <p> | <pre> | <section> |
| <table> | <tfoot> | <ul> | <video> |
Element แสดงผลแบบอินไลน์
Element แสดงผลแบบอินไลน์ไม่เริ่มขึ้นบรรทัดใหม่
Element แสดงผลแบบอินไลน์ใช้ความกว้างเท่าที่จำเป็นเท่านั้น
นี่คือ Element <span> ภายในย่อหน้า
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<p>นี่คืออินไลน์สแปน <span style="border: 1px solid black">Hello World</span>แสดงผลแบบอินไลน์ภายในย่อหน้า</p>
<p>Element span เป็นองค์ประกอบแบบอินไลน์ และจะไม่เริ่มขึ้นบรรทัดใหม่และใช้ความกว้างเท่าที่จำเป็นเท่านั้น</p>
</body>
</html>
Element แบบอินไลน์ใน HTML:
| <a> | <abbr> | <acronym> | <b> | <bdo> |
| <big> | <br> | <button> | <cite> | <code> |
| <dfn> | <em> | <i> | <img> | <input> |
| <kbd> | <label> | <map> | <object> | <output> |
| <q> | <samp> | <script> | <select> | <small> |
| <span> | <strong> | <sub> | <sup> | <textarea> |
| <time> | <tt> | <var> |
หมายเหตุ: Element แบบอินไลน์ไม่สามารถมีองค์ประกอบระดับบล็อกได้!
<div> Element
Element <div> นี้มักใช้เป็นคอนเทนเนอร์สำหรับองค์ประกอบ HTML อื่นๆ
Element <div> ไม่มี Attribute ที่จำเป็น แต่ style, class และ id นั้นเป็น Attribute ทั่วไป
เมื่อใช้ร่วมกับ CSS <div> สามารถใช้ Element เพื่อจัดรูปแบบบล็อกของเนื้อหาได้:
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<div style="background-color:black;color:white;padding:20px;">
<h2>บทความ</h2>
<p>เนื้อหานี้อยู่เป็นตัวอย่างการใช้ div Element</p>
<p>เนื้อหานี้อยู่เป็นตัวอย่างการใช้ div Element</p>
</div>
</body>
</html>
<span> Element
Element <span> คือคอนเทนเนอร์แบบอินไลน์ที่ใช้เพื่อทำเครื่องหมายข้อความหรือส่วนหนึ่งของเอกสาร
Element <span> ไม่มี Attribute ที่จำเป็น แต่ style, class และ id นั้นเป็น Attribute ทั่วไป
เมื่อใช้ร่วมกับ CSS <span> สามารถใช้องค์ประกอบเพื่อจัดรูปแบบส่วนต่างๆ ของข้อความได้:
<!DOCTYPE html>
<html>
<body>
<h1>span Element</h1>
<p>แม่ของฉันมีตา <span style="color:blue;font-weight:bold;">สีฟ้า</span>และพ่อของฉันมีตา <span style="color:darkolivegreen;font-weight:bold;">สีเขียวเข้ม</span> ด้วยแหละ</p>
</body>
</html>
สรุป
- มีค่าการแสดงผลสองค่า: แบบบล็อกและแบบอินไลน์
- Element แสดงผลแบบบล็อกจะเริ่มต้นในบรรทัดใหม่เสมอและใช้ความกว้างทั้งหมดที่มีอยู่
- Element แสดงผลแบบอินไลน์ไม่เริ่มขึ้นบรรทัดใหม่และจะใช้ความกว้างมากเท่าที่จำเป็นเท่านั้น
- Element <div> นี้เป็นการแสดงผลแบบบล็อกและมักใช้เป็นคอนเทนเนอร์สำหรับองค์ประกอบ HTML อื่นๆ
- Element <span> คือคอนเทนเนอร์แบบอินไลน์ที่ใช้เพื่อทำเครื่องหมายข้อความหรือส่วนหนึ่งของเอกสาร
แท็ก HTML
| Tag | คำอธิบาย |
|---|---|
| <div> | กำหนดส่วนในเอกสาร (แสดงผลแบบบล็อก) |
| <span> | กำหนดส่วนในเอกสาร (แสดงผลแบบอินไลน์) |