Frontend Academy · บทเรียน

HTML5 เชิงความหมาย: เชิงความหมายเทียบกับ div ที่ปะปน

แทนที่ div ที่ใช้ห่อโดยไม่มีความหมายด้วยองค์ประกอบเชิงความหมาย และทำความเข้าใจอัลกอริทึมโครงร่างเอกสารกับลำดับชั้นหัวเรื่อง

บทเรียน 3 จาก 413 ขั้นตอน

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

ปัญหาโครงสร้างที่มีแต่ div

Div soup คือหน้าที่สร้างขึ้นทั้งหมดจากองค์ประกอบ <div> และ <span> โครงสร้างลักษณะนี้ต้องใช้ชื่อคลาสเพื่อสื่อโครงสร้าง โปรแกรมอ่านหน้าจอจะทำความเข้าใจไม่ได้หากไม่มีคลาสเหล่านั้น และเครื่องมือค้นหาจะไม่ได้รับข้อมูลความหมายใด ๆ

<!-- Div soup (avoid) -->
<div class="container">
  <div class="header">
    <div class="logo">...</div>
    <div class="nav">...</div>
  </div>
  <div class="content">...</div>
  <div class="footer">...</div>
</div>

ทางเลือกเชิงความหมาย

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

<!-- Semantic HTML (preferred) -->
<body>
  <header>
    <a href="/"><img src="logo.svg" alt="Brand"></a>
    <nav>...</nav>
  </header>
  <main>...</main>
  <footer>...</footer>
</body>

อัลกอริทึมโครงร่างเอกสาร

องค์ประกอบหัวข้อ (h1-h6) จะสร้างโครงร่างเอกสาร ผู้ใช้โปรแกรมอ่านหน้าจอนำทางด้วยหัวข้อ และเทคโนโลยีช่วยเหลือจะแจ้งระดับของโครงร่าง ควรรักษาลำดับชั้นให้เป็นเหตุเป็นผล: h1 สำหรับชื่อหน้า h2 สำหรับส่วนหลัก และ h3 สำหรับส่วนย่อย

<time> — วันที่อ่านได้โดยเครื่อง

องค์ประกอบ <time> ใช้กำกับวันที่และเวลาด้วยแอตทริบิวต์ datetime ที่อ่านได้โดยเครื่องมือค้นหา เครื่องมือค้นหาจะเข้าใจวันที่ของกิจกรรม และโปรแกรมอ่านหน้าจอสามารถประกาศวันที่ในรูปแบบที่จัดรูปแบบแล้วได้

<p>Published on <time datetime="2025-06-15">June 15, 2025</time></p>
<time datetime="2025-06-15T14:30">2:30 PM</time>

<address>

องค์ประกอบ <address> ใช้ครอบข้อมูลติดต่อของบทความหรือเอกสารที่อยู่ใกล้ที่สุด ข้อมูลนี้ไม่จำเป็นต้องเป็นที่อยู่ไปรษณีย์ อีเมล หมายเลขโทรศัพท์ และชื่อบัญชีโซเชียลก็นับรวมด้วย

<address>
  <a href="mailto:hello@coddy.app">hello@coddy.app</a><br>
  <a href="https://twitter.com/coddykit">@coddykit</a>
</address>

<figure> และ <figcaption>

<figure> ใช้ครอบเนื้อหาที่สมบูรณ์ในตัวเอง เช่น รูปภาพ แผนภูมิ ตัวอย่างโค้ด หรือวิดีโอ ส่วน <figcaption> ใช้แสดงคำบรรยายที่เชื่อมโยงเชิงความหมายกับ figure

<figure>
  <img src="chart.png" alt="Monthly active users 2025">
  <figcaption>Figure 1: Monthly active users increased 42% in Q4 2025.</figcaption>
</figure>

<blockquote> และ <cite>

<blockquote> ใช้กำกับข้อความอ้างอิงขนาดยาว ใช้แอตทริบิวต์ cite สำหรับ URL ของแหล่งที่มา ส่วนองค์ประกอบ <cite> ใช้กำกับชื่อผลงานสร้างสรรค์ เช่น หนังสือ บทความ หรือภาพยนตร์

<blockquote cite="https://developer.mozilla.org">
  <p>HTML is the standard markup language for creating web pages.</p>
  <footer>—<cite>MDN Web Docs</cite></footer>
</blockquote>

<details> และ <summary>

คู่ <details> + <summary> จะสร้างวิดเจ็ตส่วนพับหรือเปิดเผยเนื้อหาแบบเนทีฟโดยไม่ต้องใช้ JavaScript เบราว์เซอร์จะจัดการการเปิดและปิด การโต้ตอบด้วยแป้นพิมพ์ และการเข้าถึงให้โดยอัตโนมัติ

<details>
  <summary>What is the refund policy?</summary>
  <p>We offer a 30-day money-back guarantee on all plans.</p>
</details>

<mark> — ข้อความที่เน้น

<mark> ใช้แทนข้อความที่เน้นไว้เพื่อการอ้างอิง เช่น ข้อความที่ตรงกับผลการค้นหา ซึ่งมีความหมายเชิงความหมายแตกต่างจากการใช้ CSS เปลี่ยนสีข้อความเป็นสีเหลือง

<p>Search results for <q>flexbox</q>:</p>
<p>Use <mark>flexbox</mark> for one-dimensional layouts...</p>

<abbr> — คำย่อ

ครอบคำย่อและอักษรย่อด้วย <abbr> และใส่คำเต็มในแอตทริบิวต์ title โปรแกรมอ่านหน้าจอและเบราว์เซอร์จะแสดงคำเต็มให้ผู้ใช้เห็นเมื่อวางเมาส์เหนือองค์ประกอบ

<abbr title="Cascading Style Sheets">CSS</abbr>
<abbr title="Accessible Rich Internet Applications">ARIA</abbr>

ควรใช้ <div> และ <span> เมื่อใด

ทั้งสององค์ประกอบยังมีประโยชน์ <div> เหมาะสำหรับตัวครอบแบบบล็อกทั่วไปที่ไม่มีความหมายเชิงความหมาย เช่น ตัวครอบเค้าโครงหรือรากของส่วนประกอบใน React ส่วน <span> เหมาะสำหรับจุดเชื่อมการจัดรูปแบบแบบอินไลน์ที่ไม่มีความหมายเชิงความหมาย

ตรวจสอบอย่างรวดเร็ว

องค์ประกอบ HTML ใดสร้างวิดเจ็ตสำหรับเปิดเผยเนื้อหาแบบพับได้ในตัวโดยไม่ต้องใช้ JavaScript

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุป: HTML5 เชิงความหมาย

แทนที่โครงสร้างที่มีแต่ div ด้วยองค์ประกอบเชิงความหมาย ได้แก่ header, nav, main, article, section, aside และ footer ใช้ time สำหรับวันที่ ใช้ figure/figcaption สำหรับสื่อ ใช้ details/summary สำหรับส่วนพับ และใช้ mark สำหรับการเน้นข้อความ สงวน div และ span ไว้สำหรับตัวครอบเค้าโครงที่ไม่มีความหมายเชิงความหมาย

เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 41
บทเรียน: 163

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

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

บทเรียน “HTML5 เชิงความหมาย: เชิงความหมายเทียบกับ div ที่ปะปน” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “HTML5 เชิงความหมาย: เชิงความหมายเทียบกับ div ที่ปะปน”

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

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

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

บทเรียน “HTML5 เชิงความหมาย: เชิงความหมายเทียบกับ div ที่ปะปน” ใช้เวลานานแค่ไหน

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

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

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

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

ตัวควบคุมฟอร์ม: ชนิด input select textarea
ARIA และการเข้าถึง: label role aria-*
HTML5 เชิงความหมาย: เชิงความหมายเทียบกับ div ที่ปะปน
แอตทริบิวต์ตรวจสอบความถูกต้องของฟอร์ม

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