HTML <header> แบบตัวอย่าง

  • หน้าก่อน <head>
  • หน้าต่อไป <hgroup>

คำนิยามและวิธีใช้

<header> องค์ประกอบนี้แสดงว่าเป็นเนื้อหานำเสนอหรือตัวแทนของกลุ่มลิงก์นำเสนอ.

<header> องค์ประกอบนี้มักมี:

  • หัวข้อหรือหลายหัวข้อ (h1 - h6)
  • โลโก้หรือไอคอน
  • ข้อมูลผู้เขียน

คำแนะนำ:<header> แท็กประเภทนี้มักถูกใช้เพื่อกำหนดหัวข้อหน้าเอกสาร.

สัญญาณเตือน:มีอาจมีหลายองค์ประกอบ HTML หนึ่งในแบบเดียวกัน <header> องค์ประกอบ. แต่<header> ไม่สามารถใส่ได้ใน <footer>、<address> หรืออีก <header> ในองค์ประกอบ.

ดูเพิ่มเติมที่:

คู่มือ HTML DOM:Header วัตถุ

ตัวอย่าง

ตัวอย่าง 1

หัวข้อของ <article> คือ

<article>
  <header>
    <h1>นี่คือหัวข้อ</h1>
    <p>โดยบิล แกลเทน</p>
    <p>นี่เป็นข้อมูลเพิ่มเติม</p>
  </header>
  <p>นี่คือข้อความหลัก.... นี่คือข้อความหลัก....</p>
</article>

ทดลองด้วยตัวเอง

ตัวอย่าง 2

หัวข้อเรื่อง

<header>
  <h1>นี่คือหัวข้อหน้าหลัก</h1>
  <p>โดยบิล แกลเทน</p>
</header>

ทดลองด้วยตัวเอง

รายละเอียดโครงสร้างทั่วไป

<header> แบบบันทึกยังสนับสนุน รายละเอียดโครงสร้างทั่วไปใน HTML.

รายละเอียดเหตุการณ์

<header> แบบบันทึกยังสนับสนุน รายละเอียดเหตุการณ์ใน HTML.

การตั้งค่า CSS ปริยาย

โดยทั่วไปแล้ว โปรแกรมบราวเซอร์ส่วนใหญ่จะแสดงค่าปริยายดังนี้ <header> องค์ประกอบ：

header {
  display: block;
}

การสนับสนุนโดยบราวเซอร์

ตัวเลขในตารางระบุเวอร์ชั่นบราวเซอร์ที่สนับสนุนแบบบันทึกนี้ทั้งหมดเต็ม

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
5.0 9.0 4.0 5.0 11.1
  • หน้าก่อน <head>
  • หน้าต่อไป <hgroup>