พัฒนาเว็บไซต์ด้วย HTML5

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

ใน HTML5 แท็ก <header> ใช้สำหรับกำหนดส่วนหัวของหน้าเว็บหรือส่วนหนึ่งของเนื้อหา ซึ่งมักประกอบด้วยข้อมูลอย่างเช่น โลโก้ ชื่อเรื่อง หรือเมนูนำทาง โดยสามารถใช้ได้ทั้งในระดับของหน้าเว็บ (global header) หรือในส่วนย่อยๆ ของเนื้อหา (sectional header) เช่น ภายในบทความ หรือส่วนย่อยอื่นๆ ของหน้า

คุณสมบัติหลักของ <header>

  1. โครงสร้างส่วนหัว: สามารถมีได้มากกว่าหนึ่งในหน้าเดียวกัน
  2. เนื้อหาที่นิยมใส่ใน <header>
    • ชื่อเรื่อง (Title)
    • โลโก้ (Logo)
    • เมนูนำทาง (Navigation)
    • แถบค้นหา (Search Bar)

ตัวอย่างการใช้งาน <header> ในหลายบริบท

ส่วนหัวหลักของหน้าเว็บ (Global Header)

ส่วนนี้คือส่วนหัวของทั้งหน้าเว็บ มักอยู่ด้านบนสุดและแสดงผลอยู่ในทุกๆ หน้าของเว็บไซต์

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website Title</title>
</head>
<body>
    <header>
        <h1>My Website</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

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

ส่วนหัวภายในบทความ (Article Header)

สามารถใช้ <header> ภายในบทความเพื่อแสดงหัวข้อของบทความหรือข้อมูลเมตาอื่นๆ เช่น วันที่เผยแพร่และชื่อผู้เขียน

HTML
<article>
    <header>
        <h2>Article Title</h2>
        <p>By John Doe | Published on October 3, 2024</p>
    </header>
    <p>This is the content of the article...</p>
</article>

ในกรณีนี้ <header> ถูกใช้เพื่อแสดงหัวข้อบทความและข้อมูลเมตาของบทความนั้นๆ

ส่วนหัวของ section (Sectional Header)

หากใช้ <section> ภายในหน้าเว็บ <header> สามารถใช้เพื่อแสดงส่วนหัวของแต่ละ section

HTML
<section>
    <header>
        <h3>Section 1: Introduction</h3>
    </header>
    <p>This section introduces the topic...</p>
</section>

<section>
    <header>
        <h3>Section 2: Details</h3>
    </header>
    <p>This section provides detailed information...</p>
</section>

ในตัวอย่างนี้ <header> ถูกใช้ในแต่ละส่วนย่อยของหน้า (sections) เพื่อแสดงหัวข้อของแต่ละส่วน

การประยุกต์ใช้ในหลายระดับ

สามารถใช้ <header> ในหลายระดับของเนื้อหาในหน้าเดียวกัน เช่น ทั้งในระดับของหน้าเว็บและระดับบทความ

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog</title>
</head>
<body>
    <header>
        <h1>My Blog</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#blog">Blog</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <header>
                <h2>Blog Post Title</h2>
                <p>By Jane Smith | Published on October 4, 2024</p>
            </header>
            <p>This is the content of the blog post...</p>
        </article>
    </main>
</body>
</html>

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

สรุป

  • <header> เป็นแท็กที่ใช้กำหนดส่วนหัวของหน้าเว็บหรือส่วนย่อยของเนื้อหา เช่น บทความหรือ section
  • มักประกอบไปด้วยองค์ประกอบต่างๆ เช่น ชื่อเรื่อง เมนูนำทาง หรือข้อมูลเมตา
  • สามารถใช้งานได้ในหลายระดับ เช่น ส่วนหัวหลักของหน้า หรือในบทความหรือ section เฉพาะ

การใช้งาน <header> ช่วยให้โครงสร้างของหน้าเว็บมีระเบียบและสื่อความหมายที่ชัดเจนมากขึ้น ทั้งสำหรับผู้ใช้งานและเครื่องมือค้นหา (SEO)

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ