ทุก HTML element มีค่าการแสดงผลเริ่มต้น ขึ้นอยู่กับประเภทของ element
มีค่าการแสดงผล2 รูปแบบคือ แบบบล็อกและแบบอินไลน์
องค์ประกอบแสดงผลแบบบล็อก
องค์ประกอบที่แสดงผลแบบบล็อกจะขึ้นบรรทัดใหม่เสมอ และเบราว์เซอร์จะเพิ่มช่องว่าง (ระยะขอบ) ก่อนและหลังองค์ประกอบโดยอัตโนมัติ
องค์ประกอบแสดงผลแบบบล็อกจะใช้ความกว้างทั้งหมดที่มีอยู่เสมอ (ยืดออกไปทางซ้ายและขวาเท่าที่จะทำได้)
องค์ประกอบแสดงผลแบบบล็อกที่ใช้กันทั่วไป 2 รายการคือ: <p> และ<div>
องค์ประกอบ<p>กำหนดย่อหน้าในเอกสาร HTML
องค์ประกอบ<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>องค์ประกอบ P และ DIV เป็นทั้งองค์ประกอบแบบบล็อก และองค์ประกอบเหล่านี้จะเริ่มขึ้นบรรทัดใหม่เสมอและใช้ความกว้างทั้งหมดที่มี (ยืดออกไปทางซ้ายและขวาเท่าที่ทำได้)</p>
</body>
</html>
องค์ประกอบแสดงผลแบบบล็อกใน 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>องค์ประกอบแสดงผลแบบอินไลน์
องค์ประกอบแสดงผลแบบอินไลน์ไม่เริ่มขึ้นบรรทัดใหม่
องค์ประกอบแสดงผลแบบอินไลน์ใช้ความกว้างเท่าที่จำเป็นเท่านั้น
นี่คือองค์ประกอบ <span> ภายในย่อหน้า
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<p>นี่คืออินไลน์สแปน <span style="border: 1px solid black">Hello World</span>แสดงผลแบบอินไลน์ภายในย่อหน้า</p>
<p>องค์ประกอบ SPAN เป็นองค์ประกอบแบบอินไลน์ และจะไม่เริ่มขึ้นบรรทัดใหม่และใช้ความกว้างเท่าที่จำเป็นเท่านั้น</p>
</body>
</html>
องค์ประกอบแบบอินไลน์ใน 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>หมายเหตุ:องค์ประกอบแบบอินไลน์ไม่สามารถมีองค์ประกอบระดับบล็อกได้!
<div> Element
องค์ประกอบ<div>นี้มักใช้เป็นคอนเทนเนอร์สำหรับองค์ประกอบ HTML อื่นๆ
Element <div> ไม่มี Attibute จำเป็นต้องใช้นอกจาก class และ id
เมื่อใช้ร่วมกับ CSS <div> สามารถใช้อิลิเมนต์เพื่อจัดรูปแบบบล็อกของเนื้อหาได้:
ตัวอย่าง
<!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> คือคอนเทนเนอร์แบบอินไลน์ที่ใช้เพื่อทำเครื่องหมายข้อความหรือส่วนหนึ่งของเอกสาร
องค์ประกอบ <span> ไม่มีแอตทริบิวต์ที่จำเป็น แต่ละ style เป็น องค์ประกอบ ทั่วไปclassid
เมื่อใช้ร่วมกับ 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>
สรุปบท
- มีค่าการแสดงผลสองค่า: แบบบล็อกและแบบอินไลน์
- องค์ประกอบแสดงผลแบบบล็อกจะเริ่มต้นในบรรทัดใหม่เสมอและใช้ความกว้างทั้งหมดที่มีอยู่
- องค์ประกอบแสดงผลแบบอินไลน์ไม่เริ่มขึ้นบรรทัดใหม่และจะใช้ความกว้างมากเท่าที่จำเป็นเท่านั้น
- องค์ประกอบ<div>นี้เป็นการแสดงผลแบบบล็อกและมักใช้เป็นคอนเทนเนอร์สำหรับองค์ประกอบ HTML อื่นๆ
- องค์ประกอบ<span>คือคอนเทนเนอร์แบบอินไลน์ที่ใช้เพื่อทำเครื่องหมายข้อความหรือส่วนหนึ่งของเอกสาร
แท็ก HTML
| Tag | Description |
|---|---|
| <div> | กำหนดส่วนในเอกสาร (แสดงผลแบบบล็อก) |
| <span> | กำหนดส่วนในเอกสาร (แสดงผลแบบอินไลน์) |
