Semantic Elements

Kita sudah mempelajari beberapa tag, seperti paragraf (<p>), heading (<h1>, <h2>), image <img>, dll, yang merupakan tag yang memang punya fungsi khusus. Jadi yaa tag paragraf memang berfungsi untuk membuat paragraf, tag image untuk menampilkan image, dsb.

Nah elemen-elemen yang memiliki fungsi khusus disebut dengan Semantic Elements. Mereka adalah elemen yang memiliki makna dan memberi tahu browser apa yang akan diisi di elemen ini. Semantic elements akan memudahkan search engine untuk dapat mengindeks website kalian lebih mudah dan akurat.

Jadi secara best practices atau hal yang lebih baik dilakukan, adalah menggunakan tag sesuai dengan fungsinya. Jadi kalau kalian mau nulis judul pakainya heading, jangan pakai paragraf.

Apa Saja?

Berikut beberapa semantic elements di HTML dan fungsinya:

Elemen	Fungsi / Makna
<header>	Bagian kepala halaman atau section, biasanya berisi judul, logo, atau navigasi.
<nav>	Bagian yang berisi link navigasi utama.
<main>	Menandai konten utama dari halaman (hanya satu per halaman).
<section>	Bagian terpisah dengan topik tertentu di dalam halaman.
<article>	Konten mandiri seperti artikel, post, atau komentar.
<aside>	Konten sampingan seperti sidebar, catatan, atau iklan.
<footer>	Bagian bawah halaman atau section, biasanya berisi informasi tambahan atau copyright.
<h1>–<h6>	Heading atau judul dari yang paling penting (<h1>) sampai yang paling kecil (<h6>).
<p>	Paragraf teks.
<ul>	Daftar tak berurutan (bullet list).
<ol>	Daftar berurutan (numbered list).
<li>	Item di dalam daftar (<ul> atau <ol>).
<table>	Tabel data.
<thead>	Bagian kepala tabel.
<tbody>	Bagian isi tabel.
<tr>	Baris pada tabel.
<th>	Sel header tabel (teks otomatis bold dan rata tengah).
<td>	Sel data tabel.
<form>	Formulir untuk mengirim data.
<label>	Label untuk input pada form.
<input>	Bidang input (teks, angka, checkbox, dsb).
<textarea>	Bidang input teks yang lebih panjang.
<button>	Tombol yang bisa diklik.
<select>	Dropdown pilihan.
<option>	Pilihan di dalam <select>.
<figure>	Wadah untuk gambar, diagram, atau media lain.
<figcaption>	Caption atau keterangan untuk <figure>.
<strong>	Menandai teks penting (dibaca lebih tegas).
<em>	Menandai teks yang diberi penekanan (biasanya miring).
<mark>	Menandai teks yang disorot (highlight).
<time>	Menandai waktu atau tanggal.

Semantic HTML Grouping

Nah kalian tahu kan kalau semantic elements punya fungsi masing-masing. Sebelum ini kalian pakai div atau mungkin span untuk mengelompokkan elemen. Nah sebenarnya ketika ingin mengelompokkan elemen atau bagian, ada juga aturan semanticnya. Agar seperti yang kalian tahu, struktur web kalian lebih baik, konsisten, dan lebih mudah bahkan akurat untuk diindeks search engine.

Nah kita tahu sebelumnya, kita pakai div untuk mengelompokkan beberapa bagian dari website. Misal bagian navbar, hero, about, footer, dll. Itu kita masih menggunakan div. Nah sebenarnya ada tag yang khusus difungsikan untuk grouping mereka. Seperti ini:

Elemen	Fungsi / Makna
<header>	Bagian kepala halaman atau section. Biasanya berisi logo, judul, atau navigasi.
<nav>	Bagian navigasi yang berisi kumpulan link utama.
<main>	Konten utama dari halaman. Hanya boleh ada satu <main> per halaman.
<section>	Bagian tertentu dari halaman yang punya topik sendiri. Bisa berisi heading dan konten terkait.
<article>	Konten mandiri seperti artikel, blog post, atau komentar. Bisa berdiri sendiri.
<aside>	Konten sampingan seperti sidebar, iklan, atau catatan tambahan.
<footer>	Bagian bawah halaman atau section. Biasanya berisi informasi penutup, copyright, atau link tambahan.

Jadi kalau kita ambil contoh website dari halaman sebelumnya. Websitenya bisa aku struktur ulang seperti ini:

<!-- Bagian Judul -->
<header>
	<h1>Dap's Site</h1>
	<p>Welcome to my site</p>
	<a href="index.html">Home</a> | <a href="about.html">About</a>
</header>

<main>
	<!-- Bagian Tentang -->
	<section id="about">
		<h2>Tentang Aku</h2>
		<p>Aku adalah seorang mahasiswa informatika semester 3 yang memiliki passion terutama dalam berbagi ilmu melalui mengajar dan konten.</p>
	</section>

	<!-- Bagian Sosial Media -->
	<section id="socials">
		<h2>Follow Me</h2>
		<p>Follow aku di sosial media untuk konten asik</p>
		<ul>
			<li><a href="https://instagram.com/daffarahmn_">Instagram</a></li>
			<li><a href="https://www.tiktok.com/@callsigndap">TikTok</a></li>
			<li><a href="https://x.com/madebydap">X</a></li>
		</ul>
	</section>
</main>

Kenapa Semantic Elements Itu Penting?

Menggunakan semantic elements dengan benar bukan cuma soal gaya penulisan yang rapi. Ada beberapa alasan penting kenapa kita harus memakainya:

1. Membantu SEO

Mesin pencari seperti Google membaca struktur halaman untuk memahami mana judul, konten utama, dan navigasi. Dengan semantic elements, halaman kita lebih mudah diindeks dan bisa tampil lebih baik di hasil pencarian.

2. Aksesibilitas

Pengguna dengan pembaca layar bergantung pada struktur semantic. Elemen seperti <header>, <main>, <nav>, dan heading (<h1>–<h6>) membantu mereka menavigasi halaman tanpa harus membaca semuanya dari atas sampai bawah.

3. Kode Lebih Mudah Dibaca

Kalau kalian ngerjain project bareng programmer lain atau nanti pas kita sendiri di masa depan ngerjain kode kita. Struktur halaman HTML nya akan lebih mudah dipahami maknanya.

4. Konsistensi Tampilan

Browser sudah memiliki gaya bawaan (default styling) untuk elemen semantic seperti <h1>, <p>, atau <table>.

5. Future-Proof

Teknologi web terus berkembang. Jika kita menulis HTML dengan semantic yang benar, halaman akan lebih siap mendukung fitur baru seperti pencarian berbasis AI, integrasi asisten suara, atau perangkat lain di masa depan.