Apa itu Semantic HTML?

Semantic HTML mengacu pada penggunaan tag HTML yang menyampaikan makna atau struktur konten, bukan hanya presentasinya. Dengan kata lain, tag-tag ini menggambarkan jenis konten yang ada di dalamnya.


Mengapa Semantic HTML Penting?

1. Aksesibilitas : Membantu teknologi assistif seperti screen reader untuk memahami struktur halaman.

2. SEO : Meningkatkan pemahaman mesin pencari tentang konten Anda.

3. Maintainability: Membuat kode lebih mudah dibaca dan dipelihara.

4. Konsistensi: Mendorong pengembang untuk berpikir tentang struktur konten.


Elemen-elemen Semantic HTML Utama


 1. `<header>`

Digunakan untuk bagian pengantar atau kelompok tautan navigasi.






 2. `<nav>`

Menandai bagian navigasi utama.


3. `<main>`

Berisi konten utama halaman. Hanya boleh ada satu `<main>` per halaman.



4. `<article>`


Menandai konten yang berdiri sendiri dan bisa didistribusikan secara independen.



5. `<section>`


Mengelompokkan konten terkait.


```html

<section>

    <h2>Bagian Produk</h2>

    <!-- Daftar produk di sini -->

</section>

```


### 6. `<aside>`


Untuk konten yang berhubungan secara tidak langsung dengan konten utama.


```html

<aside>

    <h3>Artikel Terkait</h3>

    <!-- Daftar artikel terkait di sini -->

</aside>

```


### 7. `<footer>`


Untuk bagian penutup halaman atau bagian.


```html

<footer>

    <p>&copy; 2024 Nama Website. Hak Cipta Dilindungi.</p>

</footer>

```


## Elemen Semantik Lainnya


- `<figure>` dan `<figcaption>`: Untuk gambar, diagram, atau ilustrasi dengan keterangan.

- `<time>`: Untuk menandai waktu atau tanggal.

- `<mark>`: Untuk teks yang disorot atau ditandai.

- `<details>` dan `<summary>`: Untuk membuat konten yang bisa dibuka/tutup.


## Contoh Penggunaan


Berikut adalah contoh struktur halaman menggunakan elemen-elemen semantik:


```html

<!DOCTYPE html>

<html lang="id">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Contoh Semantic HTML</title>

</head>

<body>

    <header>

        <h1>Website Berita</h1>

        <nav>

            <!-- Navigasi di sini -->

        </nav>

    </header>


    <main>

        <article>

            <h2>Judul Berita Utama</h2>

            <p>Isi berita...</p>

        </article>


        <section>

            <h2>Berita Terkini</h2>

            <!-- Daftar berita terkini -->

        </section>

    </main>


    <aside>

        <h3>Berita Populer</h3>

        <!-- Daftar berita populer -->

    </aside>


    <footer>

        <p>&copy; 2024 Website Berita. Semua hak dilindungi.</p>

    </footer>

</body>

</html>

```


## Kesimpulan


Semantic HTML bukan hanya tentang menggunakan tag yang "benar", tetapi juga tentang membuat web yang lebih bermakna dan mudah diakses. Dengan mengadopsi praktik Semantic HTML, Anda tidak hanya meningkatkan kualitas kode Anda, tetapi juga berkontribusi pada web yang lebih inklusif dan terstruktur dengan baik.


Mulailah dengan mengganti div generik Anda dengan elemen semantik yang sesuai, dan Anda akan melihat bagaimana hal ini dapat meningkatkan kejelasan dan struktur proyek web Anda.