HTML Academy · บทเรียน

หัวเรื่อง h1-h6 และลำดับชั้น

ใช้ระดับหัวเรื่องเพื่อสร้างโครงสร้างเอกสารที่มีความหมาย

หัวเรื่อง h1-h6 และลำดับชั้น เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

หัวข้อทั้งหกระดับ

HTML มีองค์ประกอบหัวข้อหกระดับ ตั้งแต่ <h1> ถึง <h6>:

h1 — ชื่อหลักของหน้า (สำคัญที่สุด)
h2 — ส่วนหลัก
h3 — ส่วนย่อย
h4, h5, h6 — ส่วนย่อยที่ลึกลงไป (มักไม่จำเป็น)

ขนาดของหัวข้อลดหลั่นกันทางภาพ แต่ขนาดถูกควบคุมด้วย CSS ไม่ใช่ตัวเลข

ลำดับชั้นเชิงความหมาย

หัวข้อจะสร้าง โครงร่างเอกสาร ซึ่งเปรียบเสมือนสารบัญของหน้าเว็บ:

<h1>HTML Fundamentals</h1>
  <h2>Document Structure</h2>
    <h3>The html Element</h3>
    <h3>The head Element</h3>
  <h2>Text Elements</h2>
    <h3>Headings</h3>
    <h3>Paragraphs</h3>

กฎ h1

แนวทางปฏิบัติที่ดีสำหรับ <h1>:

ใช้ <h1> เพียงหนึ่งรายการเท่านั้นต่อหน้า
ควรตรงกันหรือมีความเกี่ยวข้องอย่างใกล้ชิดกับองค์ประกอบ <title>
ควรเป็นหัวข้อหลักของหน้า
เครื่องมือค้นหาให้น้ำหนักกับหัวข้อนี้มากในการเพิ่มประสิทธิภาพสำหรับเครื่องมือค้นหา

อย่าข้ามระดับ

ต้องใช้ระดับหัวข้อตามลำดับ อย่าข้ามจาก h2 ไป h4:

<!-- Bad: skips h3 -->
<h2>Section</h2>
<h4>Subsection</h4>

<!-- Good: sequential order -->
<h2>Section</h2>
<h3>Subsection</h3>
<h4>Detail</h4>
<!-- Screen readers use outline order to navigate. Skipping breaks navigation. -->

หัวข้อสำหรับการนำทาง

ผู้ใช้โปรแกรมอ่านหน้าจออาศัยหัวข้อเพื่อไปยังส่วนต่าง ๆ ของหน้ายาว:

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

รูปแบบกับความหมาย

อย่าเลือกระดับหัวข้อเพราะขนาดที่แสดงผล ให้ใช้ CSS ควบคุมขนาดแทน:

<!-- Bad: using h4 because it looks right -->
<h4 style="font-size: 2rem">Big Heading</h4>

<!-- Good: correct level, sized with CSS -->
<h1>Big Heading</h1>
<!-- CSS: h1 { font-size: 2rem; } -->

หัวข้อในส่วนต่าง ๆ

เมื่อใช้องค์ประกอบสำหรับแบ่งส่วนของ HTML5 ลำดับชั้นของหัวข้อจะเริ่มใหม่ในแต่ละส่วน:

<article>
  <h2>Article Title</h2>    <!-- h2 within article -->
  <section>
    <h3>Subtopic</h3>       <!-- h3 within section -->
  </section>
</article>

<aside>
  <h2>Related Links</h2>   <!-- h2 in aside, independent section -->
</aside>

เคล็ดลับการเข้าถึงสำหรับหัวข้อ

ปฏิบัติตามกฎเกี่ยวกับหัวข้อต่อไปนี้เพื่อให้เข้าถึงได้:

ทุกหน้าต้องมีหัวข้ออย่างน้อยหนึ่งรายการ
พื้นที่เนื้อหาหลักควรเริ่มต้นด้วย <h1>
อย่าใช้หัวข้อเพียงเพื่อทำให้ข้อความเป็นตัวหนาหรือมีขนาดใหญ่
อย่าใช้ข้อความตัวหนาแทนหัวข้อ

หัวข้อกับการเพิ่มประสิทธิภาพสำหรับเครื่องมือค้นหา

เครื่องมือค้นหาใช้หัวข้อเพื่อทำความเข้าใจเนื้อหาของหน้า:

<h1> มีน้ำหนักมากที่สุดต่อการเพิ่มประสิทธิภาพสำหรับเครื่องมือค้นหา
ใส่คำสำคัญเป้าหมายในหัวข้ออย่างเป็นธรรมชาติ
หัวข้อช่วยแบ่งเนื้อหาและปรับปรุงตัวชี้วัดด้านความอ่านง่าย
เครื่องมือค้นหาจะแสดงหัวข้อในผลการค้นหา (ตัวอย่างข้อมูลเด่น)

รูปแบบเริ่มต้นของเบราว์เซอร์

เบราว์เซอร์จะใช้รูปแบบเริ่มต้นกับหัวข้อ:

/* Default browser heading sizes (approximate) */
h1 { font-size: 2em;   font-weight: bold; }
h2 { font-size: 1.5em; font-weight: bold; }
h3 { font-size: 1.17em;font-weight: bold; }
h4 { font-size: 1em;   font-weight: bold; }
h5 { font-size: 0.83em;font-weight: bold; }
h6 { font-size: 0.67em;font-weight: bold; }

หัวข้อในการนำทาง

นอกจากนี้ยังสามารถใช้หัวข้อในจุดระบุส่วนต่าง ๆ สำหรับการนำทางได้:

<nav aria-labelledby="nav-heading">
  <h2 id="nav-heading">Main Navigation</h2>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

ตรวจสอบความเข้าใจ

โดยทั่วไป หน้าที่มีโครงสร้างดีควรมีองค์ประกอบ h1 กี่รายการ

ทบทวน: หัวข้อ

สาระสำคัญของลำดับชั้นหัวข้อ:

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

คำถามที่พบบ่อย

บทเรียน “หัวเรื่อง h1-h6 และลำดับชั้น” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “หัวเรื่อง h1-h6 และลำดับชั้น” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “หัวเรื่อง h1-h6 และลำดับชั้น”

ใช้ระดับหัวเรื่องเพื่อสร้างโครงสร้างเอกสารที่มีความหมาย คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “หัวเรื่อง h1-h6 และลำดับชั้น” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม

ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ HTML Academy