<p>

Panduan ini meneroka kelebihan menggunakan unsur -unsur HTML semantik berbanding div. Mari kita periksa beberapa contoh praktikal. <p>

Mengapa memilih tag semantik divs? Faedahnya penting: <p>

1. pembacaan yang lebih baik: HTML semantik yang berstruktur lebih mudah dibaca dan difahami.
2. SEO yang dipertingkatkan: enjin carian dengan mudah mengindeks kandungan secara semantik, meningkatkan kedudukan carian anda.
3. Kebolehcapaian yang lebih baik: Pembaca skrin dan teknologi bantuan dengan cekap mengkategorikan dan mengindeks laman web anda.
4. Amalan yang lebih baik secara keseluruhan: Ini hanya amalan terbaik untuk pembangunan web.
Contohnya: Struktur HTML semantik biasa

<p> inilah boilerplate html biasa yang mempamerkan unsur -unsur semantik:

<p>

Penjelasan:

<header>
  <img src="/static/imghw/default1.png"  data-src="logo.png"  class="lazy"  alt="Berhenti terlalu banyak Divs! Panduan Praktikal untuk Amalan Terbaik HTML Semantik">
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>
<main>
  <h2>About Us</h2>
  <p>Lorem ipsum...</p>
  <h2>How It Works</h2>
  <p>Lorem ipsum...</p>
  <aside>Sidebar content...</aside>
</main>
<footer>
  <p>Terms & Conditions</p>
</footer>

<p>

: Mengandungi logo dan navigasi utama.

• <header>: menempatkan pautan navigasi utama.
• <nav>: melampirkan kandungan utama halaman.
• <main> dan
: Struktur kandungan utama secara logik.
• <h2> <p>: mewakili kandungan sekunder, seperti bar sisi.
• <aside>: Termasuk maklumat yang kurang penting, seperti terma dan syarat.
• <footer>
MDN Web Docs Contoh

<p> Perhatikan struktur Panduan Panduan JavaScript MDN:

<p>

Takeaways utama:

<main>
  <h1>JavaScript Guide</h1>
  <p>Learn JavaScript...</p>
  <nav>
    <ul>
      <li><a href="#toc">Table of Contents</a></li>
    </ul>
  </nav>
</main>

<p> elemen

jelas mentakrifkan kandungan teras. Ia mandiri dan boleh diguna semula.

• navigasi diletakkan dengan sewajarnya dalam bahagian <main>