แทนที่ div ที่ไร้ชื่อของคุณด้วยแท็กที่ให้ความหมายแก่โครงสร้าง
เปิดบทเรียนนี้ใน Kodokonหน้าเว็บที่สร้างจาก div ทั้งหมดก็ใช้งานได้ แต่มัน ไม่บอกอะไร เลย: ไม่บอกโปรแกรมอ่านหน้าจอ ไม่บอกเครื่องมือค้นหา และไม่บอกเพื่อนร่วมงานที่จะมารับช่วงต่อโค้ดของคุณในอีกหกเดือนข้างหน้า แท็กเชิงความหมายอธิบายบทบาทของแต่ละพื้นที่: header, nav, main, article, section, footer
<body>
<header>
<nav aria-label="Main navigation">
<a href="/">Home</a>
<a href="/articles">Articles</a>
<a href="/contact">Contact</a>
</nav>
</header>
<main>
<h1>The blog for curious devs</h1>
</main>
<footer>
<p>© 2026 Kodokon. All rights reserved.</p>
</footer>
</body>header รวมส่วนหัวของหน้า (โลโก้ เมนูนำทาง) footer รวมข้อมูลปิดท้าย (ประกาศทางกฎหมาย ลิงก์รอง) main บรรจุเนื้อหาหลักและต้อง มีเพียงหนึ่งเดียว บนหน้าเว็บ nav ระบุพื้นที่นำทาง: เมนูหลัก เส้นทางเบรดครัมบ์ หรือสารบัญ
ความแตกต่างที่ยากที่สุด: article กับ section หลักง่ายๆ: ถ้าบล็อกนั้นมีความหมายในตัว นอกบริบท (บทความบล็อก ความคิดเห็น การ์ดสินค้า) มันคือ article แต่ถ้ามันเป็นการจัดกลุ่มตามหัวข้อภายในเนื้อหาชิ้นหนึ่ง โดยมีหัวข้อของตัวเอง มันคือ section
<main>
<article>
<h1>Understanding semantic HTML</h1>
<section>
<h2>Accessibility</h2>
<p>Screen readers rely on the
structure to navigate.</p>
</section>
<section>
<h2>SEO</h2>
<p>Search engines understand the page better.</p>
</section>
</article>
</main>แบบฝึกคิด: บนหน้าสินค้าอีคอมเมิร์ซ คุณจะมาร์กอัปรายการรีวิวของลูกค้าอย่างไร? รีวิวแต่ละอันมีผู้เขียน วันที่ และเนื้อหาที่ยืนอยู่ได้ด้วยตัวเอง: ดังนั้นรีวิวแต่ละอันจึงเป็น article และบล็อก "Customer reviews" ที่รวมพวกมันไว้พร้อมหัวข้อ คือ section