0Pricing
Frontend Academy · บทเรียน

แท็กเชิงความหมาย: header nav main article footer

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

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

HTML เชิงความหมายคืออะไร

HTML เชิงความหมาย ใช้องค์ประกอบที่อธิบายความหมายของเนื้อหา ไม่ใช่เพียงรูปลักษณ์ของเนื้อหา <article> บอกว่า "นี่คือเนื้อหาที่สมบูรณ์ในตัวเอง" ส่วน <div> ทั่วไปไม่ได้บอกอะไร

ก่อนมีความหมายเชิงโครงสร้าง: โครงสร้าง div ที่ยุ่งเหยิง

นักพัฒนาเว็บยุคแรกสร้างการจัดวางทั้งหมดด้วยองค์ประกอบ <div> และ <span> โปรแกรมอ่านหน้าจอไม่สามารถแยกแยะส่วนการนำทาง เนื้อหา และโฆษณาได้ เครื่องมือค้นหาจึงต้องคาดเดาโครงสร้างของหน้าเว็บ

<!-- Old way -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="content">...</div>
<div class="footer">...</div>

&lt;header&gt; — ส่วนหัวของเว็บไซต์หรือส่วนเนื้อหา

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

<header>
  <a href="/"><img src="logo.svg" alt="CoddyKit"></a>
  <nav>...</nav>
</header>

&lt;nav&gt; — ลิงก์การนำทาง

ใช้ <nav> ครอบชุดลิงก์การนำทาง เช่น เมนูหลัก เส้นทางแสดงตำแหน่ง หรือสารบัญ โปรแกรมอ่านหน้าจอจะแจ้งจุดนำทางของ nav เพื่อให้ผู้ใช้ข้ามไปยังจุดเหล่านั้นหรือข้ามผ่านไปได้โดยตรง

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/courses">Courses</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

&lt;main&gt; — เนื้อหาหลัก

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

<main>
  <h1>Learn Frontend Development</h1>
  <p>Start your journey here...</p>
</main>

&lt;article&gt; — เนื้อหาที่สมบูรณ์ในตัวเอง

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

<article>
  <h2>Introduction to CSS Grid</h2>
  <p>CSS Grid revolutionised web layout...</p>
  <time datetime="2025-01-15">January 15, 2025</time>
</article>

&lt;section&gt; — การจัดกลุ่มตามหัวข้อ

<section> จัดกลุ่มเนื้อหาที่เกี่ยวข้องและควรอยู่ด้วยกัน เช่น บท บัตรแท็บ หรือส่วนหัวข้อต่าง ๆ โดยทั่วไปแต่ละ section จะมีหัวข้อ หากเนื้อหานั้นสามารถอยู่ได้ด้วยตัวเอง ให้ใช้ article

<section>
  <h2>Core Technologies</h2>
  <p>HTML, CSS, and JavaScript...</p>
</section>

&lt;aside&gt; — เนื้อหาเสริม

<aside> ประกอบด้วยเนื้อหาที่เกี่ยวข้องกับเนื้อหาโดยรอบเพียงด้านข้าง เช่น แถบด้านข้าง คำพูดที่ดึงมาเน้น โฆษณา หรือลิงก์ที่เกี่ยวข้อง โปรแกรมอ่านหน้าจอจะแสดงส่วนนี้เป็นจุดนำทางเสริม

&lt;footer&gt; — เนื้อหาส่วนท้าย

<footer> ประกอบด้วยข้อมูลเกี่ยวกับองค์ประกอบที่ครอบอยู่ เช่น ประกาศลิขสิทธิ์ ลิงก์ติดต่อ หรือเอกสารที่เกี่ยวข้อง เช่นเดียวกับ header หนึ่งหน้าเว็บสามารถมีส่วนท้ายได้หลายส่วน

<footer>
  <p>&copy; 2025 CoddyKit. All rights reserved.</p>
  <nav aria-label="Footer">
    <a href="/privacy">Privacy</a>
    <a href="/terms">Terms</a>
  </nav>
</footer>

ลำดับชั้นของหัวข้อ: h1 ถึง h6

ใช้หัวข้อเพื่อสร้างโครงร่างเอกสารที่เป็นเหตุเป็นผล แต่ละหน้าควรมี <h1> เพียงหนึ่งรายการ ใช้ h2 สำหรับหัวข้อย่อยระดับแรก h3 สำหรับหัวข้อย่อยถัดไป และต่อไปตามลำดับ อย่าข้ามระดับหรือใช้หัวข้อเพียงเพราะต้องการขนาดตัวอักษรแบบนั้น

เหตุใดความหมายเชิงโครงสร้างจึงสำคัญต่อการค้นหาและการเข้าถึง

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

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

องค์ประกอบใดควรครอบเนื้อหาหลักที่เป็นเอกลักษณ์ของหน้าเว็บ ซึ่งต้องมีเพียงหนึ่งครั้ง

ทบทวน: จุดนำทางของ HTML5 เชิงความหมาย

ใช้ <header>, <nav>, <main>, <article>, <section>, <aside> และ <footer> เพื่อมอบโครงสร้างให้เอกสารที่เบราว์เซอร์ เครื่องมือค้นหา และโปรแกรมอ่านหน้าจอเข้าใจได้

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

บทเรียน “แท็กเชิงความหมาย: header nav main article footer” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “แท็กเชิงความหมาย: header nav main article footer”

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

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

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

บทเรียน “แท็กเชิงความหมาย: header nav main article footer” ใช้เวลานานแค่ไหน

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

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

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

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

  1. โครงสร้างเอกสาร: DOCTYPE html head body
  2. แท็กเชิงความหมาย: header nav main article footer
  3. ข้อความ รูปภาพ ลิงก์ และรายการ
  4. ฟอร์ม: input label button
← กลับไปที่ Frontend Academy