Semantic HTML: Menggunakan Tag Header, Main, Section, dan Footer

Semantic HTML adalah praktik penulisan kode HTML yang menggunakan tag-tag yang memiliki makna jelas tentang konten yang dibungkusnya. Daripada hanya menggunakan <div> untuk segala hal, kita menggunakan tag seperti <header>, <main>, <section>, <article>, <aside>, dan <footer>.

Mengapa Semantic HTML Penting?

Aksesibilitas: Membantu alat bantu seperti screen reader (pembaca layar) memahami struktur halaman, sehingga memudahkan pengguna tunanetra menavigasi konten.
SEO (Search Engine Optimization): Mesin pencari dapat lebih baik memahami hierarki dan relevansi konten di halaman Anda, yang berpotensi meningkatkan peringkat pencarian.
Keterbacaan Kode: Membuat kode lebih mudah dibaca dan dipelihara oleh pengembang lain (atau diri Anda di masa depan).
Kompatibilitas: Memastikan browser dan perangkat yang berbeda dapat menginterpretasikan dan menampilkan konten Anda dengan benar.

Mari kita bahas beberapa tag semantik yang paling umum digunakan:

1. Tag <header>

Fungsi: Elemen <header> mewakili konten pengantar atau navigasi untuk bagian induk terdekatnya (biasanya dokumen <body> atau elemen sectioning seperti <article> atau <section>).
Isi Umum: Biasanya berisi logo, judul situs (h1-h6), slogan, formulir pencarian, dan/atau elemen navigasi (<nav>).
Penting: Sebuah dokumen HTML bisa memiliki lebih dari satu <header>, misalnya, satu untuk seluruh halaman dan satu lagi untuk setiap <article> atau <section>.

Contoh:

<header>

    <img src="logo-kampus.png" alt="Logo Kampus ABC">

    <h1>Sistem Informasi Keluhan Mahasiswa</h1>

    <nav>

        <ul>

            <li><a href="/">Beranda</a></li>

            <li><a href="/keluhan">Ajukan Keluhan</a></li>

            <li><a href="/faq">FAQ</a></li>

        </ul>

    </nav>

</header>

2. Tag <main>

Fungsi: Elemen <main> mewakili konten dominan atau fungsionalitas utama dari <body> dokumen. Ini adalah konten unik halaman tersebut, tidak termasuk hal-hal seperti navigasi global, header berulang, footer, atau sidebar yang muncul di banyak halaman.
Aturan Penting:
- Hanya boleh ada satu elemen <main> per dokumen HTML.
- <main> tidak boleh menjadi turunan dari <article>, <aside>, <footer>, <header>, atau <nav>.
Isi Umum: Konten inti dari halaman tersebut (misalnya, teks artikel, formulir keluhan utama, daftar produk, dll.).

Contoh:

<main>

    <h2>Ajukan Keluhan Baru</h2>

    <p>Silakan isi formulir di bawah ini untuk melaporkan masalah atau menyampaikan saran.</p>

    <form action="/submit-keluhan" method="post">

        </form>

</main>

3. Tag <section>

Fungsi: Elemen <section> mewakili bagian generik mandiri dari dokumen yang tidak memiliki elemen semantik yang lebih spesifik untuk mewakilinya (misalnya <article>, <aside>, <nav>). Ini harus memiliki konten yang secara tematis terkait.
Penting: Setiap <section> harus memiliki setidaknya satu judul (menggunakan <h1> hingga <h6>) untuk menjelaskan isinya. Jika konten tidak memiliki judul atau tidak dapat dikelompokkan secara logis, pertimbangkan untuk menggunakan <div> saja.
Isi Umum: Bab-bab, bagian dari tab, bagian utama dari artikel, atau bagian lain dari konten yang dapat dikelompokkan secara tematis.

Contoh:

<main>

    <section>

        <h2>Keluhan Terbaru</h2>

        <p>Lihat daftar keluhan yang baru diajukan oleh mahasiswa.</p>

        </section>

    <section>

        <h2>FAQ (Frequently Asked Questions)</h2>

        <p>Temukan jawaban atas pertanyaan umum seputar penggunaan aplikasi.</p>

        </section>

</main>

4. Tag <footer>

Fungsi: Elemen <footer> mewakili footer (kaki) untuk bagian induk terdekatnya (biasanya <body> dokumen atau elemen sectioning).
Isi Umum: Informasi tentang penulis, hak cipta, tautan terkait, informasi kontak, peta situs, atau tautan ke dokumen terkait.
Penting: Sama seperti <header>, sebuah dokumen dapat memiliki lebih dari satu <footer> (misalnya, satu untuk seluruh halaman dan satu untuk setiap <article> atau <section>).

Contoh:

<footer>

    <p>&copy; 2025 Sistem Informasi Keluhan Mahasiswa. Semua Hak Dilindungi.</p>

    <ul>

        <li><a href="/privasi">Kebijakan Privasi</a></li>

        <li><a href="/syarat-ketentuan">Syarat & Ketentuan</a></li>

    </ul>

    <address>

        Kontak: <a href="mailto:admin@kampus.ac.id">admin@kampus.ac.id</a>

    </address>

</footer>

Kesimpulan

Menggunakan tag-tag semantik ini (<header>, <main>, <section>, <footer>, dan lainnya) bukan hanya tentang membuat kode Anda terlihat rapi, tetapi juga tentang memberikan makna struktural pada konten Anda. Ini adalah fondasi untuk halaman web yang lebih mudah diakses, diindeks oleh mesin pencari, dan lebih mudah dikelola dalam jangka panjang.

# HTML # Tutorial