Inline Elements และ Block-level Elements

Inline Elements และ Block-level Elements: หัวใจของการจัดวาง Layout ใน HTML

ในบทที่แล้ว เราได้เรียนรู้เกี่ยวกับ HTML Attributes พื้นฐาน ที่เป็นเหมือนเครื่องปรุงรสที่ช่วยเพิ่มคุณสมบัติให้กับ element ต่างๆ ใน HTML วันนี้เราจะมาเรียนรู้เกี่ยวกับสิ่งที่สำคัญไม่แพ้กัน นั่นคือ ประเภทของ element ที่เรียกว่า Inline Elements และ Block-level Elements ซึ่งเป็นพื้นฐานสำคัญในการจัดวาง layout ของเว็บไซต์ของเรา

ลองจินตนาการว่าเว็บไซต์ของเราเป็นเหมือนบ้าน แต่ละ element ก็เหมือนเฟอร์นิเจอร์แต่ละชิ้น การจะจัดวางเฟอร์นิเจอร์ให้สวยงามและใช้งานได้สะดวก เราต้องรู้ว่าเฟอร์นิเจอร์แต่ละชิ้นมีลักษณะอย่างไร กินพื้นที่เท่าไหร่ และวางตรงไหนได้บ้าง Inline และ Block-level elements ก็เหมือนกับคุณสมบัติที่บอกว่าเฟอร์นิเจอร์แต่ละชิ้นมีลักษณะอย่างไรนั่นเอง

Block-level Elements: ผู้ครองพื้นที่เต็มบรรทัด

Block-level elements คือ element ที่จะครอบครองพื้นที่เต็มความกว้างของบรรทัดเสมอ ไม่ว่าเนื้อหาภายในจะมีมากน้อยแค่ไหนก็ตาม และโดยปกติแล้วจะเริ่มต้นในบรรทัดใหม่เสมอ เปรียบเสมือนโต๊ะทำงานขนาดใหญ่ที่กินพื้นที่ทั้งห้อง ทำให้ element อื่นๆ ไม่สามารถวางข้างๆ ได้

ลักษณะสำคัญของ Block-level Elements:

• เริ่มต้นในบรรทัดใหม่เสมอ
• ครอบครองพื้นที่เต็มความกว้างของบรรทัด
• สามารถกำหนดความกว้าง (width) และความสูง (height) ได้
• สามารถมี margin และ padding ได้ (เราจะเรียนรู้เรื่องนี้ในบทต่อๆ ไป)

ตัวอย่าง Block-level Elements ที่พบบ่อย:

• <div>: เป็น container ทั่วไปที่ใช้ในการจัดกลุ่ม element
• <p>: ใช้สำหรับย่อหน้า
• <h1> ถึง <h6>: ใช้สำหรับหัวข้อ (headings)
• <ul> และ <ol>: ใช้สำหรับรายการแบบไม่มีลำดับและมีลำดับ
• <li>: ใช้สำหรับแต่ละรายการใน <ul> หรือ <ol>
• <form>: ใช้สำหรับสร้างฟอร์ม
• <header>, <nav>, <main>, <article>, <aside>, <footer>: เป็น HTML5 semantic elements ที่ใช้แบ่งส่วนต่างๆ ของหน้าเว็บ (เราจะเรียนรู้เรื่องนี้อย่างละเอียดในบทที่ 6)

ตัวอย่างโค้ด:

<div style="background-color: lightblue;">
  <p>This is a paragraph inside a div.</p>
</div>
<p style="background-color: lightcoral;">This is another paragraph.</p>

ในตัวอย่างนี้ <div> และ <p> เป็น block-level elements ดังนั้นแต่ละ element จะแสดงในบรรทัดใหม่ และครอบครองพื้นที่เต็มความกว้างของหน้าเว็บ (เราใช้ `style` attribute เพื่อกำหนดสีพื้นหลังเพื่อให้เห็นความแตกต่างได้ชัดเจนขึ้น)

Inline Elements: ผู้แทรกตัวในบรรทัด

Inline elements คือ element ที่ใช้พื้นที่เท่าที่เนื้อหาของมันต้องการเท่านั้น และสามารถวางเรียงกันในบรรทัดเดียวได้ เปรียบเสมือนของตกแต่งเล็กๆ น้อยๆ ที่เราสามารถวางบนโต๊ะทำงานได้หลายชิ้น

ลักษณะสำคัญของ Inline Elements:

• ไม่เริ่มต้นในบรรทัดใหม่
• ใช้พื้นที่เท่าที่เนื้อหาต้องการ
• ไม่สามารถกำหนดความกว้าง (width) และความสูง (height) ได้โดยตรง (ต้องใช้ CSS property บางอย่างช่วย)
• margin และ padding ในแนวตั้ง (top และ bottom) อาจไม่มีผล

ตัวอย่าง Inline Elements ที่พบบ่อย:

• <span>: เป็น container ทั่วไปที่ใช้ในการจัดกลุ่มข้อความ
• <a>: ใช้สำหรับสร้างลิงก์
• <img>: ใช้สำหรับแสดงรูปภาพ
• <strong> และ <b>: ใช้สำหรับเน้นข้อความให้หนา
• <em> และ <i>: ใช้สำหรับเน้นข้อความให้อียง
• <br>: ใช้สำหรับขึ้นบรรทัดใหม่ (มักไม่แนะนำให้ใช้ ควรใช้ CSS แทน)
• <code>: ใช้สำหรับแสดงโค้ด

ตัวอย่างโค้ด:

<p>
  This is <span style="background-color: lightgreen;">some</span> text with <a href="#">a link</a> and <strong>some bold text</strong>.
</p>

ในตัวอย่างนี้ <span>, <a>, และ <strong> เป็น inline elements ดังนั้นทั้งหมดจะแสดงเรียงกันในบรรทัดเดียว

การใช้ `display` Property เพื่อเปลี่ยนแปลงลักษณะของ Element

HTML เองก็มีขีดจำกัดในการปรับแต่งลักษณะของ element แต่เราสามารถใช้ CSS เพื่อเปลี่ยนแปลงลักษณะของ element ได้อย่างยืดหยุ่น หนึ่งใน CSS properties ที่สำคัญคือ `display` ซึ่งใช้กำหนดวิธีการแสดงผลของ element

เราสามารถใช้ `display` property เพื่อเปลี่ยน block-level element ให้เป็น inline element และในทางกลับกันได้

ค่า `display` ที่สำคัญ:

• block: ทำให้ element กลายเป็น block-level element
• inline: ทำให้ element กลายเป็น inline element
• inline-block: ทำให้ element มีลักษณะผสมระหว่าง inline และ block-level element คือ สามารถวางเรียงกันในบรรทัดเดียวได้ แต่ก็สามารถกำหนดความกว้างและความสูงได้
• none: ซ่อน element (จะไม่แสดงผลบนหน้าเว็บ)

ตัวอย่างโค้ด:

<p>
  <span style="display: block; background-color: lightblue;">This span is now a block.</span>
  This text will be on a new line.
</p>

<div style="display: inline; background-color: lightcoral;">This div is now inline.</div>
<div style="display: inline; background-color: lightcoral;">This div is also inline.</div>

ในตัวอย่างนี้ เราเปลี่ยน <span> (ซึ่งเป็น inline element) ให้เป็น block-level element โดยใช้ `display: block;` ทำให้ <span> แสดงในบรรทัดใหม่ และครอบครองพื้นที่เต็มความกว้างของบรรทัด

ในทางกลับกัน เราเปลี่ยน <div> (ซึ่งเป็น block-level element) ให้เป็น inline element โดยใช้ `display: inline;` ทำให้ <div> ทั้งสองแสดงเรียงกันในบรรทัดเดียว

`inline-block`: ทางเลือกที่ยืดหยุ่น

`display: inline-block;` เป็นค่าที่น่าสนใจ เพราะมันผสมผสานข้อดีของทั้ง inline และ block-level elements เราสามารถวาง element ที่มี `display: inline-block;` เรียงกันในบรรทัดเดียวได้ เหมือน inline element แต่เราก็สามารถกำหนดความกว้างและความสูงของมันได้ เหมือน block-level element

ตัวอย่างโค้ด:

<div style="display: inline-block; width: 100px; height: 50px; background-color: lightgreen; margin: 5px;">Box 1</div>
<div style="display: inline-block; width: 100px; height: 50px; background-color: lightcoral; margin: 5px;">Box 2</div>
<div style="display: inline-block; width: 100px; height: 50px; background-color: lightblue; margin: 5px;">Box 3</div>

ในตัวอย่างนี้ เราสร้าง <div> สามอัน และกำหนด `display: inline-block;` ให้กับแต่ละอัน ทำให้ <div> ทั้งสามแสดงเรียงกันในบรรทัดเดียว และเรายังสามารถกำหนดความกว้างและความสูงให้กับแต่ละ <div> ได้อีกด้วย

สรุป

การเข้าใจความแตกต่างระหว่าง inline และ block-level elements เป็นสิ่งสำคัญในการสร้าง layout ของเว็บไซต์ การใช้ `display` property ช่วยให้เราสามารถปรับแต่งลักษณะของ element ได้อย่างยืดหยุ่น และ `inline-block` เป็นทางเลือกที่น่าสนใจสำหรับการสร้าง layout ที่ซับซ้อนมากขึ้น

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