Selamat datang kembali di seri belajar HTML dari dasar! Setelah pada level sebelumnya Anda mengenal tag-tag dasar, kini saatnya kita naik tingkat ke LEVEL 2: HTML Semantic.
Apa itu HTML Semantic?
HTML Semantic adalah penggunaan elemen HTML yang memiliki makna (meaningful) baik bagi browser maupun bagi pembaca (programmer). Dulu, sebelum HTML5, kita sangat bergantung pada tag <div> generik untuk hampir semua bagian website. Akibatnya, kode menjadi sulit dibaca dan tidak memiliki struktur yang jelas.
Catatan Penting: Menggunakan elemen semantic membuat kode Anda lebih mudah diakses (accessibility), ramah Screen Reader, dan sangat disukai oleh mesin pencari (SEO Friendly).
Mengenal Elemen-Elemen HTML Semantic Utama
Berikut adalah elemen semantic utama yang wajib Anda kuasai:
<header>: Mewakili bagian kepala dari halaman atau sebuah section, biasanya berisi logo, judul, atau navigasi utama.<nav>: Wadah khusus untuk kumpulan tautan navigasi menu.<main>: Konten utama yang unik dari dokumen atau aplikasi web.<section>: Bagian tematik dari konten, biasanya memiliki judul (heading).<article>: Konten mandiri yang dapat berdiri sendiri, seperti postingan blog, berita, atau komentar.<aside>: Konten pelengkap yang tidak langsung berhubungan dengan konten utama, contohnya sidebar.
Praktik: Membuat Struktur Halaman Website yang Rapi
Mari kita langsung praktikkan elemen-elemen di atas ke dalam sebuah kerangka kode HTML yang utuh.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Website Semantic HTML</title>
</head>
<body>
<!-- Header Website -->
<header>
<h1>Portal Berita Teknologi</h1>
<nav>
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Artikel</a></li>
<li><a href="#">Tentang Kami</a></li>
</ul>
</nav>
</header>
<!-- Konten Utama -->
<main>
<section>
<h2>Artikel Terbaru</h2>
<article>
<h3>Mengenal HTML Semantic untuk Pemula</h3>
<p>HTML semantic adalah standar baru dalam penulisan koding web yang lebih terstruktur...</p>
<p><em>Dipublikasikan oleh Admin</em></p>
</article>
<article>
<h3>Tips Belajar CSS dengan Cepat</h3>
<p>CSS adalah kunci agar tampilan website Anda terlihat menarik dan responsif...</p>
<p><em>Dipublikasikan oleh Admin</em></p>
</article>
</section>
<!-- Konten Samping -->
<aside>
<h3>Kategori Populer</h3>
<ul>
<li><a href="#">HTML & CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">UI/UX Design</a></li>
</ul>
</aside>
</main>
<!-- Footer Website -->
<footer>
<p>© 2023 Belajar Coding Indonesia. Hak Cipta Dilindungi.</p>
</footer>
</body>
</html>
Mengapa Struktur Ini Lebih Baik?
- Mudah Dibaca: Saat Anda atau developer lain melihat kode di atas, fungsi setiap bagian langsung jelas hanya dari nama tag-nya.
- SEO Optimal: Mesin pencari seperti Google dapat dengan mudah memahami bagian mana yang merupakan konten utama (
<main>), bagian mana yang merupakan navigasi (<nav>), dan mana artikel utamanya (<article>).
Kesimpulan
Menguasai HTML Semantic adalah langkah awal yang krusial untuk menjadi seorang Frontend Developer yang profesional. Dengan membiasakan diri menulis kode yang terstruktur rapi, website Anda tidak hanya berfungsi dengan baik, tetapi juga memiliki fondasi kode yang bersih dan mudah dikembangkan. Sampai jumpa di level berikutnya!
