HTML Block and Inline Elements

ในภาษา HTML ทุก Element จะมีค่าการแสดงผลเริ่มต้น (Default Display Value) ซึ่งแบ่งออกเป็น 2 ประเภทหลัก ได้แก่ Block Elements (แบบบล็อก) และ Inline Elements (แบบอินไลน์)

Elements แสดงผลแบบบล็อก

ลักษณะของ Block Elements :

แสดงผลขึ้นบรรทัดใหม่เสมอ
เบราว์เซอร์จะเพิ่มช่องว่าง (margin) ด้านบนและด้านล่างโดยอัตโนมัติ
ใช้ความกว้างเต็มพื้นที่ที่มีอยู่ (ยืดเต็มแนวนอน)

ตัวอย่างที่ใช้บ่อย:

<p> ใช้กำหนดย่อหน้าใน HTML
<div> ใช้กำหนดส่วนหรือกล่องของเนื้อหาใน HTML

				
					<p>Hello World</p>
<div>Hello World</div>

ตัวอย่าง 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 แบบอินไลน์ (Inline) จะไม่เริ่มบรรทัดใหม่ และใช้เฉพาะความกว้างเท่าที่จำเป็นสำหรับเนื้อหาภายในเท่านั้น

ตัวอย่าง : <span> ภายในย่อหน้า

				
					<p>นี่คืออินไลน์สแปน <span style="border: 1px solid black">Hello World</span> แสดงผลแบบอินไลน์ภายในย่อหน้า</p>

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>

⚠️ หมายเหตุ องค์ประกอบแบบอินไลน์ ไม่สามารถมีองค์ประกอบแบบบล็อกอยู่ภายในได้!

`<div>` Element

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

คุณสมบัติสำคัญ

ไม่มี Attribute ที่จำเป็น
ใช้ Attribute ทั่วไป เช่น style, class, id
เมื่อใช้ร่วมกับ CSS จะช่วยจัดรูปแบบกล่องเนื้อหา (Content Block) ได้ง่าย

				
					<div style="background-color:black;color:white;padding:20px;">
  <h2>บทความ</h2>
  <p>เนื้อหานี้อยู่เป็นตัวอย่างการใช้ div Element</p>
  <p>เนื้อหานี้อยู่เป็นตัวอย่างการใช้ div Element</p>
</div>

`<span>` Element

Element <span> คือคอนเทนเนอร์แบบอินไลน์ (Inline Container) ใช้สำหรับทำเครื่องหมายหรือจัดรูปแบบเฉพาะบางส่วนของข้อความ

คุณสมบัติสำคัญ

ไม่มี Attribute ที่จำเป็น
มักใช้ style, class, id
เหมาะสำหรับเน้นคำหรือข้อความภายในย่อหน้า

				
					<p>แม่ของฉันมีตา <span style="color:blue;font-weight:bold;">สีฟ้า</span>และพ่อของฉันมีตา <span style="color:darkolivegreen;font-weight:bold;">สีเขียวเข้ม</span> ด้วยแหละ</p>

แท็ก HTML

Tag	คำอธิบาย
<div>	กำหนดส่วนในเอกสาร (แสดงผลแบบบล็อก)
<span>	กำหนดส่วนในเอกสาร (แสดงผลแบบอินไลน์)

สรุป

HTML มีค่าการแสดงผลหลัก 2 แบบ Block และ Inline
Block element จะขึ้นบรรทัดใหม่เสมอและใช้ความกว้างเต็มพื้นที่
Inline element ไม่ขึ้นบรรทัดใหม่และใช้ความกว้างเท่าที่จำเป็น
<div> เป็นคอนเทนเนอร์แบบบล็อก ส่วน <span> เป็นคอนเทนเนอร์แบบอินไลน์