HTML Block and Inline Elements

< บทเรียนก่อนหน้า
บทเรียนถัดไป >

ทุก HTML element มีค่าการแสดงผลเริ่มต้นขึ้นอยู่กับประเภทของ element นั้น

มีค่าการแสดงผล 2 รูปแบบคือแบบบล็อกและแบบอินไลน์

Block-level Elements (องค์ประกอบแสดงผลแบบบล็อก)

block-level elements จะขึ้นบรรทัดใหม่เสมอและเบราว์เซอร์จะเพิ่มช่องว่าง (ระยะขอบ) ก่อนและหลังองค์ประกอบโดยอัตโนมัติโดยจะใช้ความกว้างทั้งหมดที่มีอยู่เสมอ (ยืดออกไปทางซ้ายและขวาเท่าที่จะทำได้)

block-level elementsที่ใช้กันทั่วไป 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>องค์ประกอบ P และ DIV เป็นทั้งองค์ประกอบแบบบล็อก และองค์ประกอบเหล่านี้จะเริ่มขึ้นบรรทัดใหม่เสมอและใช้ความกว้างทั้งหมดที่มี (ยืดออกไปทางซ้ายและขวาเท่าที่ทำได้)</p>

</body>
</html>

block-level elements ใน 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>

Inline Elements (องค์ประกอบแสดงผลแบบอินไลน์)

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

ตัวอย่าง

<!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>

หมายเหตุ:ภายใน inline element ไม่สามารถมี block-level element ได้!

<div> Element

องค์ประกอบ<div>นี้มักใช้เป็นคอนเทนเนอร์สำหรับ HTML elements อื่นๆ

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

เมื่อใช้ร่วมกับ 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

<span> element คือคอนเทนเนอร์แบบอินไลน์ที่ใช้เพื่อทำเครื่องหมายข้อความหรือส่วนหนึ่งของเอกสาร

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

เมื่อใช้ร่วมกับ 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>

span element


แม่ของฉันมีตา สีฟ้าและพ่อของฉันมีตา สีเขียวเข้ม ด้วยแหละ

สรุปบท

  • มีค่าการแสดงผลสองค่า: แบบบล็อกและแบบอินไลน์
  • block-level element จะเริ่มต้นในบรรทัดใหม่เสมอและใช้ความกว้างทั้งหมดที่มีอยู่
  • inline element ไม่เริ่มขึ้นบรรทัดใหม่และจะใช้ความกว้างมากเท่าที่จำเป็นเท่านั้น
  • <div> element นี้เป็นการแสดงผลแบบบล็อกและมักใช้เป็นคอนเทนเนอร์สำหรับ element อื่นๆ
  • <span> element คือคอนเทนเนอร์แบบอินไลน์ที่ใช้เพื่อทำเครื่องหมายข้อความหรือส่วนหนึ่งของเอกสาร

< บทเรียนก่อนหน้า
บทเรียนถัดไป >