การวาง Layout

Element ระบุส่วนของ Layout

ปกติเว็บไซต์จะแสดงเนื้อหาหลากหลายคอลัมน์ คล้ายๆ กับแมกกาซีนหรือหนังสือพิมพ์

เมื่อก่อนเวลาจะสร้าง layout เราจะใช้ <div> แต่ใน HTML5 มี Element ใหม่เพิ่มเติม

เพื่อใช้ในการระบุส่วนต่างๆ ของเว็บไซต์ได้ดีขึ้น และบอกความหมายแก่ Search Engine ได้ดีขึ้น

• <header>
• <nav>
• <article>
• <section>
• <aside>
• <footer>

Element: <header>

เป็น Element ที่ใช้ครอบเนื้อหาที่เป็นต้นขั้วของเอกสาร

Element: <nav>

คือ การนำทางหรือ ลิ้งค์นำทาง nav ไม่จำเป็นต้อง ใส่อันต่ออัน สามารถใส่ครอบคลุมทีเดียวหลายๆอันได้เลย นิยมใช้กับ Navigation Bar หรือ Menu Bar ของเว็บไซต์

Element: <article>

จะใช้ครอบคลุมสิ่งที่มีความหมายในตัวของมันเองบนเว็บเพจ

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

นอกจากนั้นแล้ว <article> ยังสามารถใช้ซ้อนกันภายใน <article> เองได้อีกด้วย

ซึ่งจะใช้ในกรณีที่เนื้อหาภายใน <article> นั้นๆ มีบางส่วน ที่มีความหมายในตัวของมันเอง แม้ว่าจะตัดเนื้อหารอบๆ ออกก็ยังอ่านเข้าใจ เช่น ความคิดเห็นของบทความ เป็นต้น

Element: <section>

คือ การแบ่งกลุ่มเนื้อหาออกเป็นส่วนๆ เช่น การแบ่งบทความออกเป็น chapter หรือแบ่งเนื้อหาทั้งหมดออกเป็นประเด็นย่อยๆ

อย่างการแบ่งข่าวออกเป็น กลุ่มของข่าวในพระราชสำนัก กลุ่มของข่าวกีฬา กลุ่มของข่าวบันเทิง เป็นต้น

โดยทั่วไปเรามักจะใช้ Section ภายใน Article และเนื้อหาภายใน section จะต้องเกี่ยวข้องกันทั้งหมด

ที่สำคัญคือ section ไม่ได้ใช้สำหรับแบ่งเว็บเพจออกเป็นส่วนๆ ไม่ได้ใช้สำหรับทำ Layout ถ้าอยากทำ Layout ให้ใช้ div แทน

Element: <aside>

ส่วนของเนื้อหาที่เกี่ยวของกับเนื้อหาหลักที่อยู่โดยรอบ โดยมีจุดประสงค์เพื่อให้แยกออกจากเนื้อหาหลัก

และใช้เป็นกรอบคำอธิบายเพิ่มเติมที่เกี่ยวข้องกับเนื้อหาหลัก และนอกจากนี้ <aside> ยังสามารถใช้เป็นส่วนของ แถบด้านข้าง (Sidebar) ได้อีกด้วย

Element: <footer>

แท็ก footer เป็นแท็กที่ใช้สำหรับใส่อะไรก็ได้ที่อยู่ด้านล่างๆ อย่างเช่น creadit ผู้แต่งเว็บไซต์ หรือหน้า site map รวบรวมลิ้งก์ของเว็บไซต์เราเอง

วิธีการสร้าง Layout

การสร้าง Loayout มีหลายวิธี

• ใช้ตาราง HTML
• ใช้ Property float ของ CSS
• ใช้ CSS Framework
• ใช้ CSS flexbox

แล้วควรใช้วิธีไหนดี ?

สร้าง Layout ด้วยตาราง HTML

<table> ไม่ได้ถูกออกแบบมาเพื่อสร้าง Layout!! จุดประสงค์ของ <table> ก็เพื่อแสดงข้อมูลเป็นตาราง

ฉะนั้นอย่าใช้ตารางสร้าง Layout โดยเด็ดขาด มันจะทำให้โค้ดของคุณยุ่งเหยิง และลองคิดดูสิว่า หากต้องมาแก้ใหม่หลังจากทำไปแล้ว 2 เดือนมันจะโหดขนาดไหน

สร้าง Layout ด้วย Property float ของ CSS

เป็นปกติมากที่ทั้งหน้าเว็บจะใช้ Property float ของ CSS และมันก็เรียนรู้ไม่ยาก

ข้อเสียของมันก็คือ Element ที่ใช้ property float จะต้องอยู่ในลำดับก่อนหลังที่ถูกต้อง ทำให้มีผลต่อความยืดหยุ่นของเว็บไซต์

ใช้ CSS Framework

ใช้งานง่าย สร้าง Layout ได้เร็ว

CSS Framework ที่นิยมใช้กันคือ Bootstrap, Material Framework

ใช้ CSS flexbox

Flexbox คือโหมดสร้าง Layout ของ CSS3 ซึ่งออกแบบมาเพื่อให้หน้าเว็บสามารถรองรับได้ทุกขนาดหน้าจอ มีความยืดหยุ่นสูง

แต่ข้อเสียก็คือ ไม่สามารถใช้ได้กับเบราว์เซอร์ Internet Explorer Version 10 ลงไป

Tag ที่ใช้กับ Layout