Dalam proses pembangunan sebuah website, ada dua hal penting yang perlu dipahami yaitu Struktur HTML dan Elemen Semantik. Keduanya memainkan peran besar dalam membangun sebuah website yang terorganisir, mudah dibaca, dan ramah terhadap mesin pencari khususnya Google (SEO). Pada artikel ini kita akan memahami apa itu Struktur HTML, dan mengapa Elemen Semantik itu sangat penting.
Apa itu Struktur HTML?
Struktur HTML merujuk pada kerangka dasar pada sebuah halaman web, dimana kita dapat menentukan konten yang disusun dan ditampilkan di browser. Setiap kali kita menulis kode HTML dimulai dengan deklarasi <!DOCTYPE html>, diikuti dengan elemen <html> yang menjadi wadah utama dari semua konten.
Didalam elemen <html>, terdapat dua bagian utama yang penting yaitu <head> dan <body>. Mari kita perjelas lebih lanjut mengenai dua tag utama tersebut.
<head>berisi informasi meta seperti judul halaman<title>, link ke file CSS, JavaScript, ataupun library<link>, dan pengaturan meta lainnya.<body>memuat semua konten visual yang akan ditampilkan pada browser, seperti teks, gambar, tautan, dan elemen lainnya.
Struktur yang rapi dan jelas dapat membantu browser memahami halaman website yang kita buat dengan lebih baik. Misalnya jika kita mendefinisikan sebuah judul atau sub judul, kita bisa menggunakan tag heading seperti <h1> dan <h2>. contohnya sebagai berikut.
<!DOCTYPE html>
<html>
<head>
<title>Learn HTML Basic with NganggurDev</title>
</head>
<body>
//main title
<h1>this is my main title</h1>
<p> lorem ipsum dolor sit amet....</p>
//sub title
<h2>this is my sub title<h2>
</body>
</html>
Apa itu Elemen Semantik?
Elemen Semantik adalah elemen HTML yang memiliki makna khusus dan jelas tentang jenis konten yang dibuat. Berbeda dengan elemen non-semantik seperti <div> dan <span>, elemen semantik secara eksplisit menyampaikan tujuan dan isi konten kepada browser maupun pembaca. Contoh elemen semantik yang sering digunakan adalah sebagai berikut.
<header>digunakan untuk menandai bagian atas dari sebuah halaman.<nav>berisi tautan navigasi yang mengarah ke halaman lain dalam situs atau ke bagian tertentu dalam halaman yang sama.<section>digunakan untuk mengelompokkan konten yang memiliki topik atau tema yang sama. Contohnya pada halaman Tentang Kami terdapat beberapa konten yaitu Layanan dan Testimoni, kedua konten tersebut bisa kita bungkus (wrapping) dengan tag section.<article>digunakan untuk konten yang berdiri sendiri dan bisa digunakan secara mandiri. Contohnya postingan blog artikel dan berita.<aside>biasa digunakan untuk elemen tambahan seperti sidebar.<footer>digunakan untuk menandai bagian bawah dari sebuah halaman.
Hubungan Antara Struktur dan Semantik Pada HTML
Struktur memberikan kerangka logis tentang bagaimana konten yang kita susun, sedangkan semantik memberikan makna pada setiap bagian konten tersebut. Apa keuntunganya?
- Kode HTML menjadi rapi.
- Halaman web yang kita buat menjadi mudah diakses.
- Mesin pencari lebih cepat memahami struktur dari web yang kita buat.
Implementasi
Berikut implementasi dari elemen semantik pada HTML.
<!DOCTYPE html>
<html>
<head>
<title>Learn HTML Basic with NganggurDev</title>
</head>
<body>
<nav>
<a href="/">Home</a>
<a href="/">Article</a>
<a href="/">About Us</a>
</nav>
<main>
<article>
<header>
<h1>Article Title</h1>
<p>Written by Admin Nganggur - 16 Juli 2025</p>
</header>
<section>
<p>content article....</p>
</section>
</article>
</main>
<footer>
<p>© 2025 All Rights Reserved | NganggurDev</p>
</footer>
</body>
</html>
Struktur HTML diatas menunjukkan penggunaan elemen semantik untuk menyusun artikel dengan jelas. Browser dapat mengenali bahwa bagian dari halaman ini adalah sebuah artikel, siapa penulis dari artikel, kapan artikel di publikasikan, dan apa topik dari artikel tersebut.
Kesimpulan
Dengan memahami struktur dan elemen semantik dalam HTML adalah langkah penting untuk belajar web development. Struktur membantu menyusun konten secara logis, sedangkan semantik memberikan makna dan memperjelas tujuan pada setiap bagian.
Terimakasih, sampai jumpa di artikel selanjutnya.
