วิธีปรับขนาดข้อความ h1, h2, h3

หน้านี้อธิบายวิธีการปรับขนาดฟอนต์ของแท็ก h1, h2 และ h3

🔹 โค้ดบางส่วน

<h1>นี่คือลิงก์ h1</h1>
<h2>นี่คือลิงก์ h2</h2>
<h3>นี่คือลิงก์ h3</h3>

<style>
  h1 {
    font-size: 2em;
  }
  h2 {
    font-size: 1.5em;
  }
  h3 {
    font-size: 1.2em;
  }
</style>

💻 โค้ดเต็มที่ทำงานได้ (คัดลอกและใช้งานได้ทันทีใน HTML)

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <title>วิธีปรับขนาดข้อความ h1, h2, h3</title>
  <style>
    h1 {
      font-size: 2em;
    }
    h2 {
      font-size: 1.5em;
    }
    h3 {
      font-size: 1.2em;
    }
  </style>
</head>
<body>
  <h1>นี่คือลิงก์ h1</h1>
  <h2>นี่คือลิงก์ h2</h2>
  <h3>นี่คือลิงก์ h3</h3>
</body>
</html>

🧩 การประยุกต์ใช้และกรณีการใช้งาน

การปรับขนาดฟอนต์ของแท็ก h1, h2, h3 สามารถปรับให้เหมาะสมกับการออกแบบหน้าเว็บของคุณ ตัวอย่างเช่น ทำให้ h1 เล็กลงและเพิ่มขนาดของ h2 เล็กน้อยเพื่อสร้างการจัดระเบียบที่สมดุลของเลย์เอาต์

🎯 เคล็ดลับเพิ่มเติมสำหรับการปรับขนาดข้อความ

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

📝 แนวทางปฏิบัติที่ดีที่สุดสำหรับการปรับขนาดหัวข้อ

การปรับขนาดหัวข้อเป็นส่วนสำคัญในการรักษาความชัดเจนของโครงสร้างลำดับชั้นในขณะที่ยังคงความสมดุลของการออกแบบ แม้จะมีแท็ก h1 ถึง h6 แต่แท็กที่ใช้บ่อยที่สุดคือ h1 ถึง h3

การตั้งค่าความสัมพันธ์ของขนาดที่เหมาะสม

โดยทั่วไปแล้ว ถ้าคุณตั้ง h1 เป็น 2em ขนาดของ h2 ควรจะประมาณ 75% ของมัน (1.5em) และ h3 ควรจะประมาณ 60% (1.2em) ซึ่งเป็นเพียงแนวทาง และอาจจะต้องปรับแต่งตามการออกแบบที่ต้องการ

การพิจารณาในการออกแบบแบบตอบสนอง

ในอุปกรณ์มือถือ, พิจารณาลดขนาดของ h1 (ประมาณ 1.8em) คุณสามารถทำได้ง่ายๆ โดยใช้ media queries เช่น @media (max-width: 768px) { h1 { font-size: 1.8em; } }

เมื่อปรับขนาดหัวข้อ อย่าลืมพิจารณาขนาดสัมพัทธ์ของมันกับองค์ประกอบอื่นๆ ตัวอย่างเช่น การมี h1 ขนาดเดียวกับ p จะทำให้โครงสร้างลำดับชั้นของหน้าไม่ชัดเจน

คัดลอกแล้ว!