พัฒนาเว็บไซต์ด้วย HTML5

HTML5 Block Element และ Inline Element

ใน HTML5, Element จะแบ่งออกเป็นสองประเภทหลัก คือ Block Element และ Inline Element ซึ่งทั้งสองประเภทมีลักษณะการแสดงผลและการจัดการที่แตกต่างกัน โดยเราสามารถประยุกต์ใช้งานได้ในหลายรูปแบบ

Block Element

Block Element เป็นองค์ประกอบที่ถูกแสดงผลเต็มความกว้างของหน้าจอ (เต็มบรรทัด) และเริ่มต้นบรรทัดใหม่โดยอัตโนมัติเมื่อจบการแสดงผลของ element ก่อนหน้า ซึ่งจะครอบคลุมพื้นที่ตามความกว้างของเอลิเมนต์แม่ (parent element) เช่น div, p, h1 ถึง h6, section, article เป็นต้น

คุณสมบัติ

  • ครอบครองทั้งบรรทัด (block-level)
  • สามารถบรรจุทั้ง Block และ Inline Element ได้
  • สามารถตั้งค่า width และ height ได้

ตัวอย่างการใช้งาน Block Element

HTML
<div>
  <h1>นี่คือหัวข้อ</h1>
  <p>นี่คือย่อหน้าแรก</p>
  <p>นี่คือย่อหน้าที่สอง</p>
</div>

ในตัวอย่างนี้ div เป็น Block Element ที่บรรจุ h1 และ p ซึ่งทั้งคู่เป็น Block Element ด้วยเช่นกัน

การประยุกต์ใช้

Block Element ใช้สำหรับโครงสร้างของเอกสาร เช่น ส่วนหัว, ย่อหน้า, บทความ หรือกลุ่มเนื้อหาต่าง ๆ

Inline Element

Inline Element จะแสดงผลภายในบรรทัดเดียวกับ element อื่นๆ โดยไม่ทำให้เกิดการเริ่มต้นบรรทัดใหม่ เช่น span, a, strong, em, img, input เป็นต้น

คุณสมบัติ

  • ไม่เริ่มบรรทัดใหม่ (inline-level)
  • บรรจุเฉพาะ Inline Element หรือข้อความได้
  • ไม่สามารถตั้งค่า width หรือ height ได้ แต่สามารถปรับขนาดภายใน element ได้

ตัวอย่างการใช้งาน Inline Element

HTML
<p>นี่คือข้อความ <a href="#">ลิงก์</a> และ <strong>ข้อความเน้น</strong> ในย่อหน้าเดียวกัน</p>

ในตัวอย่างนี้ a และ strong เป็น Inline Element ที่แสดงผลภายในบรรทัดเดียวกันกับเนื้อหาของย่อหน้า

การประยุกต์ใช้

Inline Element ใช้สำหรับการตกแต่งข้อความหรือเพิ่มความสามารถให้กับข้อความในบรรทัด เช่น การทำให้ข้อความเป็นตัวหนา, ลิงก์ หรือการใส่รูปภาพในบรรทัดเดียวกัน

การใช้งานร่วมกันระหว่าง Block และ Inline Element

แม้ว่า Block Element จะครอบคลุมทั้งบรรทัด แต่สามารถบรรจุ Inline Element ภายในได้ ตัวอย่างเช่น

HTML
<div>
  <h1><span>หัวข้อแบบผสม</span></h1>
  <p>ย่อหน้าที่มี <em>ข้อความเอียง</em> และ <strong>ข้อความเน้น</strong> ร่วมกัน</p>
</div>

ในตัวอย่างนี้ span, em, และ strong เป็น Inline Element ที่อยู่ภายใน Block Element อย่าง h1 และ p

Block Element ภายใน Inline Element (กรณีที่ควรหลีกเลี่ยง)

ปกติไม่ควรบรรจุ Block Element ภายใน Inline Element เนื่องจากจะทำให้โครงสร้าง HTML ผิดหลัก แต่สามารถใช้ CSS เพื่อปรับให้ Inline Element แสดงผลคล้าย Block Element ได้

การใช้ CSS เพื่อประยุกต์ Inline ให้เป็น Block

HTML
<span style="display: block;">เปลี่ยนจาก inline เป็น block</span>

ในกรณีนี้ span ซึ่งเป็น Inline Element จะถูกเปลี่ยนการแสดงผลให้เหมือน Block Element โดยใช้ display: block;

การใช้ Inline-Block

ในบางกรณี เราอาจต้องการให้ element เป็น inline แต่ยังคงสามารถตั้งค่าขนาดได้ เราสามารถใช้ display: inline-block; เพื่อผสมคุณสมบัติทั้งสองรูปแบบ

HTML
<span style="display: inline-block; width: 100px;">ข้อความใน inline-block</span>

inline-block จะทำให้ element แสดงผลในบรรทัดเดียวกันแต่ยังสามารถตั้งค่า width, height ได้

สรุป

  • Block Element: ครอบคลุมทั้งบรรทัด ใช้สำหรับโครงสร้างใหญ่ใน HTML เช่น การจัดกลุ่มเนื้อหา
  • Inline Element: แสดงผลในบรรทัดเดียวกับเนื้อหาอื่น ใช้สำหรับการตกแต่งหรือเนื้อหาเล็กน้อย
  • การประยุกต์ใช้ร่วมกัน: Inline Element มักถูกใช้ภายใน Block Element เพื่อจัดการเนื้อหาภายในบรรทัดเดียว

การเลือกใช้ Block หรือ Inline Element ขึ้นอยู่กับวัตถุประสงค์ของการจัดวางเนื้อหาในเอกสาร HTML เพื่อให้โครงสร้างสอดคล้องและใช้งานได้อย่างมีประสิทธิภาพ

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ