Pelajari elemen-elemen semantik HTML5 yang digunakan untuk meningkatkan struktur dan aksesibilitas halaman web.

Elemen Semantik HTML (HTML Semantic Elements)

Elemen semantik HTML5 adalah elemen-elemen yang memberikan arti atau makna tertentu pada konten halaman web. Penggunaan elemen semantik membantu mesin pencari dan pembaca layar untuk memahami struktur dan tujuan konten. Ini juga meningkatkan aksesibilitas dan SEO (Search Engine Optimization).

Elemen Semantik Dasar

Beberapa elemen semantik HTML5 yang umum digunakan adalah:

<header> - Untuk bagian header atau judul halaman.
<nav> - Untuk bagian navigasi.
<section> - Untuk bagian yang memiliki topik tertentu dalam halaman.
<article> - Untuk bagian konten yang bisa berdiri sendiri (misalnya artikel, posting blog).
<aside> - Untuk konten yang berhubungan dengan konten utama, seperti sidebar.
<footer> - Untuk bagian footer atau informasi penutup halaman.
<main> - Untuk konten utama yang tidak termasuk dalam header, footer, atau sidebar.
<figure> - Untuk elemen media seperti gambar atau ilustrasi.
<figcaption> - Untuk memberikan keterangan atau deskripsi pada elemen <figure>.
<mark> - Untuk menandai teks yang relevan atau penting.

Contoh Penggunaan Elemen Semantik

<!DOCTYPE html>
<html>
<head>
  <title>Elemen Semantik HTML</title>
</head>
<body>
 
  <header>
    <h1>Selamat Datang di Situs Kami</h1>
    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>
 
  <main>
    <section>
      <h2>Artikel Terbaru</h2>
      <article>
        <h3>Judul Artikel 1</h3>
        <p>Ini adalah konten artikel pertama.</p>
      </article>
      <article>
        <h3>Judul Artikel 2</h3>
        <p>Ini adalah konten artikel kedua.</p>
      </article>
    </section>
  </main>
 
  <aside>
    <h3>Berita Terkini</h3>
    <p>Informasi tentang berita terbaru.</p>
  </aside>
 
  <footer>
    <p>&copy; 2025 Situs Kami</p>
  </footer>
 
</body>
</html>

Keuntungan Menggunakan Elemen Semantik

SEO yang Lebih Baik: Elemen semantik membantu mesin pencari untuk memahami konteks halaman dengan lebih baik.
Aksesibilitas: Pembaca layar dapat memahami struktur halaman dengan lebih jelas.
Pengembangan Lebih Mudah: Mempermudah pengelolaan dan pemeliharaan kode, karena struktur yang jelas.

Dengan menggunakan elemen semantik HTML, halaman web menjadi lebih mudah dipahami oleh berbagai alat, serta lebih ramah bagi pengguna dengan keterbatasan.

HTML Semantic

Elemen Semantik HTML (HTML Semantic Elements)

Elemen Semantik Dasar

Contoh Penggunaan Elemen Semantik

Keuntungan Menggunakan Elemen Semantik

On this page