Mengenal tag HTML secara semantik

Maksud dari menulis HTML secara semantik adalah menulis struktur HTML sesuai dengan konteks isi dokumen.

Contoh jika membuat navigasi, gunakan tag <nav>, jika kita menulis catatan kaki, kita bungkus menggunakan tag <footer>, atau jika kita ingin membuat judul atau sub-judul, pakailah <h1> sampai <h6> sesuai dengan hirarki isi dokumen.

Keuntungan menulis struktur HTML secara sematik adalah peningkatan skor SEO karena crawler lebih mudah memahami isi web kalian. Yang tak kalah penting adalah tag sudah memiliki ARIA role dan attribute yang sesuai jadi sangat bermanfaat untuk pengguna yang mengakses website kalian menggunakan screen reader atau sejenisnya.

Crawler adalah algoritma yang digunakan mesin pencari seperti Google untuk menilai suatu website lalu mengkategorikan dan memberi skor berdasarkan isi dan kualitas website tersebut.

Maka dari itu yuk kita pelajari tag-tag HTML yang tepat secara semantik yang sering digunakan untuk membangun struktur sebuah website.

Tag <main> mereprenstasikan konten yang paling dominan di dalam laman web. Konten berulang seperti header utama, footer, navigasi, atau/dan logo laman tidak seharusnya disimpan di dalam tag ini .

<header>
  <nav></nav>
</header>
<main>
  <section>
    <h1>Heading</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  </section>
</main>
<footer></footer>

Seperti namanya <nav> mereprenstasikan bagian dari laman yang berhubungan dengan laman lain atau ke bagian lain yang berada di laman yang sama.

<nav>
  <ul>
    <li>
      <a>Beranda</a>
    </li>
    <li>
      <a>Kategori</a>
    </li>
    <li>
      <a>Tentang</a>
    </li>
  </ul>
</nav>

<header> digunakan untuk mengkelompokan pengantar seperti penulisan judul dan subjudul atau alat bantu navigasi biasanya diletakan di atas laman.

Tag <header> juga dapat digunakan untuk membuat header situs secara global, biasanya mencangkup logo, nama perusahaan, fitur pencarian, dan mungkin navigasi global.

<header>
  <h1>Judul Website</h1>
  <img src="logo.png" alt="Logo website" />
</header>

Digunakan untuk diisi catatan kaki konten utama seperti detail penulis, dokumen pendukung, atau informasi hak cipta.

Tag <section> seperti namanya digunakan untuk membagi bagian dari suatu garis besar dokumen yang masih satu konteks dengan dokumen utama contohnya seperti bab baru dalam tulisan laporan.

<main>
  <h1>Harimau</h1>
  <section>
    <h2>Taksonomi & Genetika</h2>
    <p>
      Pada tahun 1758, Carl Linnaeus mendeskripsikan harimau dalam karyannya
      Systema Naturae dan memberinya nama ilmiah Felis tigris.
    </p>
  </section>
  <section>
    <h2>Ciri fisik</h2>
    <p>
      Harimau dikenal sebagai kucing terbesar, harimau berukuran seperti singa
      tetapi sedikit lebih berat.
    </p>
  </section>
</main>

Tag <article> digunakan untuk menampung satu dokumen yang tidak berkaitan satu sama lain contohnya seperti daftar tulisan blog kalian.

<main>
  <h1>Tulisanku</h1>
  <article>
    <h2>Akuisisi Figma oleh Adobe</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  </article>
  <article>
    <h2>Musim Dingin Startup Is Coming</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  </article>
</main>

<aside> merepresentasikan bagian dari dokumen yang secara tidak langsung berkaitan dengan dokumen itu sendiri. Contohnya kutipan dari suatu tulisan atau daftar tulisan lain yang dimunculkan di dalam detail tulisan.

<main>
  <section>
    <h1>Gajah</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  </section>
  <aside>
    <nav>
      <ul>
        <h2>Tulisan Tentang Hewan Lainnya</h2>
        <li>
          <a href="#">Harimau</a>
        </li>
        <li>
          <a href="#">Serigala</a>
        </li>
      </ul>
    </nav>
  </aside>
</main>