HTML Layout คือ การจัดวางโครงสร้างหน้าเว็บเพจ (Web Page Structure) โดยสามารถแบ่งหน้าเว็บออกเป็นหลายคอลัมน์ เหมือนนิตยสารหรือหนังสือพิมพ์ เพื่อให้เนื้อหาดูเป็นระเบียบและเข้าใจง่ายขึ้น
HTML Layout Elements
HTML มีแท็กหลายตัวที่ใช้กำหนดส่วนต่าง ๆ ของหน้าเว็บ เช่น
<header>ส่วนหัวของเอกสารหรือของหน้า<nav>ส่วนของลิงก์นำทาง (Navigation Bar)<section>ส่วนของเนื้อหาหลักในเอกสาร<article>เนื้อหาย่อย เช่น ข่าวหรือบทความ<aside>เนื้อหาที่เกี่ยวข้องกับเนื้อหาหลัก เช่น Sidebar<footer>ส่วนท้ายของหน้าเว็บ<details>ใช้แสดงรายละเอียดเพิ่มเติม เปิด/ปิดได้<summary>หัวข้อย่อของ<details>
เทคนิคการใช้ HTML Layout
มีอยู่หลายวิธีในการจัดวางคอลัมน์และองค์ประกอบในหน้าเว็บ โดยหลัก ๆ มี 4 วิธีคือ
- CSS Framework
- CSS Float Property
- CSS Flexbox
- CSS Grid
CSS Framework
หากต้องการสร้าง Layout อย่างรวดเร็ว สามารถใช้ เฟรมเวิร์ก CSS เช่น Bootstrap, Bulma, Tailwind CSS หรือ Semantic UI
CSS Float Layout
การใช้ property float ใน CSS เพื่อจัดเลย์เอาต์ของหน้าเว็บ มักทำงานร่วมกับ clear ซึ่งใช้ในการล้างค่าการลอยขององค์ประกอบ ข้อควรระวัง: องค์ประกอบที่ถูกกำหนดให้ float จะยังคงเชื่อมโยงอยู่กับโครงสร้างหลักของเอกสาร (document flow) ทำให้เลย์เอาต์อาจขาดความยืดหยุ่นในบางกรณี
CSS Flexbox Layout
การใช้ Flexbox ช่วยให้การจัดวางองค์ประกอบบนหน้าเว็บทำงานได้อย่างยืดหยุ่นและเป็นระเบียบ
โดยเฉพาะเมื่อหน้าเว็บต้องปรับให้เหมาะกับขนาดหน้าจอและอุปกรณ์แสดงผลที่แตกต่างกัน Flexbox จะช่วยให้องค์ประกอบจัดเรียงและปรับขนาดได้อย่างถูกต้องตามต้องการ
CSS Grid Layout
CSS Grid Layout เป็นระบบจัดวางเลย์เอาต์แบบตาราง (Grid) ที่แบ่งพื้นที่หน้าเว็บออกเป็นแถว (rows) และคอลัมน์ (columns) ทำให้การออกแบบหน้าเว็บทำได้ง่ายขึ้น โดยไม่ต้องพึ่งการจัดวางแบบ float หรือการกำหนดตำแหน่ง (positioning) แบบเดิมอีกต่อไป