หลายคนๆ เมื่อได้ยินคำว่า “footer” คงจะนึกถึงด้านล่างสุดของหน้าเว็บ ที่จะมีลิ้งค์เต็มไปหมดใช่มั้ยครับ สำหรับ html5 แล้ว footer เป็นได้มากกว่านั้นครับ บทความนี้ ผมจะอธิบายว่า footer element ใน html5 มีความสำคัญอย่างไร ใช้กับเนื้อหาแบบไหน รวมไปถึงตัวอย่างการใช้งานด้วยครับ
footer ไม่จำเป็นต้องอยู่ล่างสุด
footer element คือส่วนที่ให้ข้อมูลเพิ่มเติม(Information) สำหรับ section ที่มันอยู่ครับ ถ้าเป็น footer ของ article ก็จะให้ข้อมูลเกี่ยวกับ article นั้นๆ ไม่ว่าจะเป็น ผู้แต่ง บทความที่เกี่ยวข้อง หรือส่วนสำหรับแชร์ไปยัง social network แต่ถ้า footer นั้นเป็นของ body ก็หมายความว่า footer นี้จะให้ข้อมูลเกี่ยวกับหน้านี้ทั้งหน้าครับ
จะเห็นว่า spec ของ footer นั้น ไม่ได้บอกเลยว่ามันควรอยู่ตำแหน่งไหน และแน่นอนครับว่า มันไม่จำเป็นต้องมีแค่จุดเดียวในหน้านั้นๆ แต่สามารถมีได้ในทุกๆ section เลยทีเดียว ดังนั้น การจะใช้ footer ให้เราดูว่าในแต่ละ section ของเรา มีส่วนไหนบ้าง ที่เอาไว้ให้ข้อมูล ถ้ามีให้เรา mark up ด้วย <footer> ได้เลยครับ
1 2 3 4 5 6 7 | <article> <h1>วิธีใช้ footer element</h1> <footer> <p>Posted <time pubdate="" datetime="2013-03-25T22:15-00:00">25 มีนาคม 2556</time>.</p> </footer> <p>เนื้อหา...</p> </article> |
นี้เป็นตัวอย่างการใช้ footer element แบบง่ายๆ ครับ จะเห็นว่าข้างใต้ชื่อของบทความ ผมได้ใส่วันที่โพสเอาไว้ด้วย ซึ่งข้อมูลในส่วนนี้ ผมมองว่ามันเป็น “Information” ผมจึงเลือกที่จะ mark up ด้วย <footer> ครับ สังเกตนะครับว่า ผมจะไม่สนใจดีไซน์เลย ว่ามันจะอยู่บน หรืออยู่ล่างของบทความ ผมสนแค่ว่ามันคืออะไรเท่านั้นเอง
บางคนมีคำถามว่าทำไม ผมไม่ mark up ส่วนวันที่โพส รวมกับหัวข้อด้วย <header> ไปเลย ตอบว่าสามารถทำได้ครับ เรื่องนี้ขึ้นอยู่กับการมองว่า “วันที่โพส” คือส่วนที่ให้ข้อมูล(footer) หรือจะมองว่ามันเป็นส่วนแนะนำ หรือเกริ่นก่อนเริ่มเนื้อหา(header) เท่านั้นเอง
1 2 3 4 5 6 7 | <article> <header> <h1>วิธีใช้ footer element</h1> <p>Posted <time pubdate="" datetime="2013-03-25T22:15-00:00">25 มีนาคม 2556</time>.</p> </header> <p>เนื้อหา...</p> </article> |
อย่างที่ผมได้บอกไปครับ ว่าเราสามารถใช้ footer element ได้หลายๆ จุดในหน้าเดียวกัน ให้เรามองทีละ section ไป footer อยู่ใน section ไหนก็จะมีข้อมูลเกี่ยวกับ section นั้นๆ ครับ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <body> <h1>Siam HTML</h1> <article> <h1>ชื่อบทความ</h1> <p>เนื้อหา...</p> <section> <h2>หัวข้อย่อย</h2> <p>เนื้อหา...</p> <footer> <p>Information สำหรับ "หัวข้อย่อย"</p> </footer> </section> <footer> <p>Information สำหรับ "บทความ"</p> </footer> </article> <footer> <p>Information สำหรับ "หน้า"</p> </footer> </body> |
ตัวอย่างนี้ มี footer element อยู่ 3 จุดด้วยกัน ไม่ว่าจะเป็น footer ของ section ของ article รวมไปถึงของ body ด้วยครับ
ใช้ address กับ Contact information
ข้อมูลสำหรับการติดต่อ หรือ “Contact information” โดยส่วนใหญ่แล้ว จะอยู่ใน footer element ดังตัวอย่างนี้ครับ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <body> . . . <footer> <nav> <ul> <li><a href="/about">About</a> <li><a href="/contact">Contact</a> </ul> </nav> <p> For more information, contact <a href="mailto:suranart@siamhtml.com"> Suranart Niamcome </a> </p> <p>© copyright 2013 Siam HTML</p> </footer> </body> |
ตัวอย่างนี้ เราใช้ <p> กับ “Contact information” ซึ่งไม่ผิดครับ แต่การใช้ <address> จะเหมาะสมกว่า เนื่องจาก address element มีไว้แสดงถึง “Contact information” ของ article หรือ body ที่มันอยู่ ตัวอย่างเช่น หากอยู่ใน article ก็จะเป็น “Contact information” ของคนเขียนบทความนั้นๆ แต่ถ้าอยู่ใน body ก็มักจะเป็น “Contact information” ของเว็บไซต์นั้นๆ ครับ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <body> . . . <footer> <nav> <ul> <li><a href="/about">About</a> <li><a href="/contact">Contact</a> </ul> </nav> <address> For more information, contact <a href="mailto:js@example.com"> Suranart Niamcome </a> </address> <p>© copyright 2013 Siam HTML</p> </footer> </body> |
มีข้อควรระวังนิดนึงครับ คือ ไม่ใช่ว่าพอเราเห็น ที่อยู่ หรือเบอร์โทรศัพท์ แล้วหมายความว่าเราจะสามารถ mark up ด้วย <address> ได้ทันทีนะครับ เพราะ <address> จะใช้กับข้อมูลที่เป็นประโยชน์แก่ผู้อ่านในการติดต่อสื่อสาร เพื่อต้องการทราบข้อมูลเพิ่มเติมเท่านั้นครับ สมมติในบทความของเราเป็นข่าวเกี่ยวกับเหตุการณ์ไฟไหม้ที่อาคารแห่งหนึ่ง ซึ่งในเนื้อหามีบอกที่อยู่ของอาคารแห่งนี้ด้วย ข้อมูลตรงนี้ เราไม่ต้อง mark up ด้วย <address> ก็ได้ครับ เพราะเราไม่ได้ต้องการให้ผู้อ่านไปติดต่ออะไรกับอาคารนั้น ตรงกันข้าม หากบทความของเราเป็นการรีวิวร้านอาหารแห่งหนึ่ง แล้วมีข้อมูลการติดต่อให้กับผู้อ่านที่สนใจจะไปที่ร้านอาหารแห่งนี้ ข้อมูลตรงนี้ควร mark up ด้วย <address> ครับ
footer ไม่ได้มีไว้กำหนดโครงสร้าง
เรื่องสุดท้ายที่ผมอยากพูดคือ footer element นั้น ก็เหมือนกับ header element ตรงที่มันไม่ได้เป็น “Sectioning content” และมีจุดประสงค์เพื่อให้ข้อมูล มากกว่าที่จะมีไว้สำหรับสร้าง block ขึ้นมา หรือเอาไว้กำหนด style sheets ดังนั้น เวลาเราเขียน html เราไม่จำเป็นต้องดูกราฟฟิกดีไซน์ว่ามีหน้าตาเป็นอย่างไร แต่ให้เราดูเนื้อหาของเรา แล้วเอามาเขียน html โดยเลือกใช้ html element ให้เหมาะสมกับเนื้อหา และลำดับความสำคัญให้ถูก ว่าอะไรควรอยู่ก่อนหลัง เมื่อเขียน html เสร็จแล้ว เราค่อยมาแต่งหน้าตาให้ตรงตามที่ได้ออกแบบไว้ด้วย style sheets ครับ