Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

แท็ก footer: สร้างส่วนท้ายเอกสาร/ส่วนใน HTML5

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

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

<!DOCTYPE html>
<html>
<head>
    <title>ตัวอย่าง HTML Footer Tag</title>
</head>
<body>
    <header>
        <h1>การเรียนรู้อย่างง่ายดาย</h1>
        <p>คุณกำลังเยี่ยมชม tutorialspoint.com - ศูนย์รวมบทเรียนง่ายๆ</p>
    </header>
    
    <main>
        <p>เนื้อหาหลักของหน้าเว็บ...</p>
    </main>
    
    <footer>
        <p>&copy; 2024 สงวนลิขสิทธิ์ &vert; <a href="/privacy">นโยบายความเป็นส่วนตัว</a> &vert; <a href="/contact">ติดต่อเรา</a></p>
    </footer>
</body>
</html>

จุดสำคัญ

  • สามารถมี <footer> หลายอันในหน้าเดียวได้ (หนึ่งต่อ section/article)
  • ไม่ต้องอยู่ท้ายหน้าเว็บเสมอไป วางได้ที่ท้าย article/section ด้วย
  • ไม่ควรวาง <header> หรือ <footer> ซ้อนกัน
  • ช่วย SEO และ Accessibility (Screen readers จะบอก landmark)

โครงสร้างหน้าเว็บมาตรฐาน HTML5

<body>
    <header>...</header>
    <nav>...</nav>
    <main>
        <article>
            <header>...</header>
            <section>...</section>
            <footer>...</footer> <!-- Footer ของ Article -->
        </article>
    </main>
    <footer>...</footer> <!-- Footer ของหน้าเว็บ -->
</body>