HTML5 การใช้งาน footer Tag

น HTML5 แท็ก <footer> ใช้สำหรับกำหนดส่วนท้ายของเอกสารหรือส่วนประกอบต่าง ๆ ของหน้าเว็บ เช่น บทความ หัวข้อหลัก หรือส่วนย่อย ๆ ของเนื้อหา แท็กนี้มักประกอบไปด้วยข้อมูล เช่น ลิขสิทธิ์ (copyright), ลิงก์ไปยังหน้าต่าง ๆ, ข้อมูลการติดต่อ หรือข้อมูลที่เกี่ยวข้องกับผู้เขียนหรือผู้ดูแลเนื้อหา

ลักษณะการใช้งาน <footer>

ใช้ <footer> สำหรับส่วนท้ายของหน้าเว็บ

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

<footer>
  <p>© 2024 My Website. All rights reserved.</p>
  <nav>
    <ul>
      <li><a href="/about">About Us</a></li>
      <li><a href="/contact">Contact</a></li>
      <li><a href="/privacy">Privacy Policy</a></li>
    </ul>
  </nav>
</footer>

ในตัวอย่างนี้ <footer> ใช้กำหนดส่วนท้ายของหน้าเว็บไซต์ โดยมีข้อความลิขสิทธิ์และลิงก์ไปยังหน้าอื่น ๆ เช่น หน้า “เกี่ยวกับเรา” และ “นโยบายความเป็นส่วนตัว”

ใช้ <footer> สำหรับบทความหรือเนื้อหาบางส่วน

แท็ก <footer> ยังสามารถใช้ในบทความหรือส่วนของเนื้อหาได้ โดยมักใช้สำหรับใส่ข้อมูลเพิ่มเติมเกี่ยวกับบทความนั้น เช่น ชื่อผู้เขียน วันที่เผยแพร่ หรือแหล่งที่มา

<article>
  <h2>Understanding HTML5 Semantics</h2>
  <p>HTML5 introduces several semantic elements...</p>
  <footer>
    <p>Written by Jane Doe, October 3, 2024</p>
  </footer>
</article>

ในตัวอย่างนี้ <footer> ถูกใช้อยู่ภายในแท็ก <article> เพื่อใส่ข้อมูลของผู้เขียนบทความและวันที่เขียน

ใช้ <footer> ร่วมกับ <section> หรือ <header>

สามารถใช้งานแท็ก <footer> ภายใน <section> หรือร่วมกับ <header> เพื่อสร้างโครงสร้างส่วนย่อย ๆ ของเนื้อหาได้ เช่น กรณีมีหลายบทความในหน้าเดียวกัน หรือแบ่งเนื้อหาออกเป็นส่วน ๆ

<section>
  <header>
    <h3>Latest News</h3>
  </header>
  <p>This is the latest news update for our website...</p>
  <footer>
    <p>Updated on: October 4, 2024</p>
  </footer>
</section>

ในตัวอย่างนี้ <footer> ใช้สำหรับแสดงวันที่ปรับปรุงล่าสุดในส่วนข่าวของเว็บไซต์

การใช้ <footer> หลายส่วนในเอกสารเดียวกัน

แท็ก <footer> สามารถใช้ได้หลายครั้งในเอกสารเดียวกัน เช่น การใช้งานแยกในแต่ละ <article> หรือ <section> นอกจากการใช้เป็นส่วนท้ายของหน้าเว็บหลัก

<article>
  <h2>First Article</h2>
  <p>This is the first article...</p>
  <footer>
    <p>Author: John Smith | Published: September 20, 2024</p>
  </footer>
</article>

<article>
  <h2>Second Article</h2>
  <p>This is the second article...</p>
  <footer>
    <p>Author: Emily Johnson | Published: September 25, 2024</p>
  </footer>
</article>

ในตัวอย่างนี้มีการใช้แท็ก <footer> สำหรับแต่ละบทความ (<article>) เพื่อแสดงข้อมูลเกี่ยวกับผู้เขียนและวันที่เผยแพร่

สรุป

แท็ก <footer> ใน HTML5 ช่วยให้โครงสร้างของหน้าเว็บหรือเนื้อหามีความเป็นระเบียบ และสามารถใช้ได้หลายบริบท เช่น ส่วนท้ายของหน้าเว็บ ส่วนท้ายของบทความ หรือแม้แต่ใช้ในแต่ละส่วนย่อยของเนื้อหาในหน้าเว็บเดียวกัน