HTML Dasar | #9 Semantic

Semantic HTML

Pada artikel ini, kita akan membahas tentang **Semantic HTML**, yaitu penggunaan elemen-elemen HTML yang secara spesifik menjelaskan tujuan dan isi konten, sehingga lebih mudah dipahami oleh mesin pencari dan browser.

Pengenalan Elemen Semantik

Elemen semantik adalah elemen HTML yang secara jelas mendefinisikan makna dari konten di dalamnya. Elemen-elemen ini sangat penting untuk memastikan bahwa struktur halaman web Anda bisa dibaca dengan baik oleh mesin pencari dan pengguna. Beberapa elemen semantik yang sering digunakan antara lain:

1. <header>

Elemen <header> digunakan untuk mendefinisikan bagian atas halaman, biasanya berisi logo, judul, dan navigasi utama. Ini adalah tempat untuk memuat informasi penting yang muncul di bagian atas halaman.

<header>
    <h1>Judul Situs Web</h1>
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
        </ul>
    </nav>
</header>

        

2. <nav>

Elemen <nav> digunakan untuk mendefinisikan bagian navigasi di dalam halaman, yang biasanya berisi tautan ke bagian lain dari website.

<nav>
    <ul>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</nav>

        

3. <section>

Elemen <section> digunakan untuk mendefinisikan bagian dari halaman yang berisi kelompok konten yang terkait. Ini biasanya digunakan untuk membagi konten menjadi beberapa bagian yang logis dan terorganisir.

<section>
    <h2>Layanan Kami</h2>
    <p>Kami menawarkan berbagai layanan untuk memenuhi kebutuhan Anda.</p>
</section>

        

4. <article>

Elemen <article> digunakan untuk mendefinisikan bagian independen dari sebuah dokumen atau situs web, seperti artikel berita, posting blog, atau konten mandiri lainnya.

<article>
    <h2>Cara Membuat Website</h2>
    <p>Berikut adalah panduan langkah demi langkah untuk membuat situs web dari awal...</p>
</article>

        

5. <footer>

Elemen <footer> biasanya digunakan untuk mendefinisikan bagian bawah halaman, yang sering kali berisi informasi tentang hak cipta, tautan penting, atau kontak.

<footer>
    <p>Hak Cipta © 2024. Semua Hak Dilindungi.</p>
</footer>

        

Mengapa Menggunakan Semantic HTML?

Penggunaan elemen semantik membantu meningkatkan aksesibilitas, optimasi mesin pencari (SEO), dan pengalaman pengguna secara keseluruhan. Browser dan perangkat bantu, seperti screen reader, dapat lebih mudah memahami konten Anda ketika menggunakan elemen-elemen semantik yang tepat.