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

HTML5 การใช้งาน h1 – h6 Tags

ใน HTML5 แท็ก <h1> ถึง <h6> ใช้สำหรับแสดงหัวข้อ (heading) ของหน้าเว็บ โดยมีระดับความสำคัญจากมากไปน้อย เริ่มจาก <h1> ซึ่งเป็นหัวข้อที่สำคัญที่สุด และลดลงเรื่อย ๆ จนถึง <h6> ที่มีความสำคัญน้อยที่สุด

การใช้งานและโครงสร้างพื้นฐาน

  1. <h1>: ใช้สำหรับหัวข้อหลัก (Main Heading) ของหน้า เป็นหัวข้อที่ควรมีเพียงหนึ่งเดียวในแต่ละหน้า
  2. <h2>: ใช้สำหรับหัวข้อรอง (Subheading) ที่สำคัญรองลงมา มักใช้สำหรับหัวข้อของเนื้อหาใหญ่ ๆ ในแต่ละส่วน
  3. <h3>: ใช้สำหรับหัวข้อย่อยที่อยู่ภายใต้ <h2> เหมือนกับการแบ่งระดับของหัวข้อให้ลึกลงไป
  4. <h4>: ใช้สำหรับหัวข้อที่ลึกกว่าระดับ <h3>
  5. <h5>: ใช้สำหรับหัวข้อที่ลึกลงไปอีก
  6. <h6>: เป็นหัวข้อที่มีความสำคัญน้อยที่สุด

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

HTML
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>การใช้งานหัวข้อ HTML</title>
</head>
<body>
    <h1>ประวัติความเป็นมาของ HTML</h1>
    <p>HTML เริ่มพัฒนาขึ้นในปี 1990 โดย Tim Berners-Lee</p>

    <h2>เวอร์ชันของ HTML</h2>
    <p>ตั้งแต่เวอร์ชันแรกจนถึง HTML5 มีหลายการปรับปรุง</p>

    <h3>HTML เวอร์ชัน 1.0</h3>
    <p>เปิดตัวในปี 1993 เป็นเวอร์ชันแรกสุด</p>

    <h3>HTML เวอร์ชัน 5</h3>
    <p>HTML5 ถูกพัฒนาขึ้นเพื่อตอบสนองต่อการใช้งานมัลติมีเดียในเว็บยุคใหม่</p>

    <h4>ความสามารถใหม่ใน HTML5</h4>
    <ul>
        <li>รองรับการเล่นวิดีโอ</li>
        <li>รองรับการเล่นเสียง</li>
        <li>สามารถใช้แคนวาส (canvas) เพื่อวาดกราฟิก</li>
    </ul>

    <h2>เครื่องมือพัฒนาเว็บ</h2>
    <h3>Visual Studio Code</h3>
    <p>เป็นโปรแกรมที่ได้รับความนิยมในการพัฒนาเว็บไซต์</p>

    <h4>คุณสมบัติเด่นของ Visual Studio Code</h4>
    <h5>การติดตั้ง Plugin</h5>
    <p>สามารถติดตั้งส่วนเสริมเพื่อเพิ่มความสามารถ</p>

    <h6>ตัวอย่าง Plugin ที่นิยม</h6>
    <p>เช่น Prettier, ESLint, Live Server</p>
</body>
</html>

การประยุกต์ใช้งาน <h1> ถึง <h6>

  1. โครงสร้างเนื้อหา: การใช้แท็ก <h1> ถึง <h6> ทำให้เนื้อหามีลำดับชั้นและอ่านง่าย ช่วยให้ผู้ใช้เข้าใจโครงสร้างของเนื้อหาได้ชัดเจน
  2. SEO (Search Engine Optimization): Search Engine อย่าง Google ใช้หัวข้อเหล่านี้เพื่อทำความเข้าใจโครงสร้างเนื้อหา ดังนั้นควรใช้ <h1> อย่างเหมาะสมและไม่ซ้ำกันในหน้าเดียว
  3. การเข้าถึง (Accessibility): เครื่องมือช่วยสำหรับผู้พิการ เช่น Screen Readers จะใช้แท็กหัวข้อเหล่านี้ในการบอกลำดับความสำคัญของเนื้อหาให้ผู้ใช้เข้าใจง่ายขึ้น
  4. การจัดรูปแบบด้วย CSS: แท็ก <h1> ถึง <h6> ยังสามารถใช้ร่วมกับ CSS เพื่อปรับขนาดตัวอักษร สี และลักษณะต่าง ๆ ของหัวข้อได้ เช่น
CSS
h1 {
    font-size: 2.5em;
    color: #333;
}
h2 {
    font-size: 2em;
    color: #555;
}

การใช้แท็กเหล่านี้อย่างเหมาะสมจึงเป็นสิ่งสำคัญทั้งในด้านการแสดงผลและการปรับปรุงคุณภาพ SEO ของเว็บไซต์

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

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