Skip to main content

Atribut ID

Layaknya sebuah binatang, terkadang kita perlu menamai elemen atau tag. Tidak wajib, tapi terkadang kita perlu nama ketika kita ingin melakukan sesuatu terhadap tag atau hanya sekadar menamainya saja untuk kerapian.

Memberikan ID​

Salah satu cara kita menamai sebuah elemen adalah dengan atribut id. Cara menamainya sesederhana:

<elemen id="nama-elemen"></elemen>

Jadi contoh aku ingin memberi id judul ke sebuah heading. Akan kulakukan seperti ini:

<h1 id="judul">Campsite Finder</h1>

ID di Div​

ID juga sering digunakan untuk memberi nama ke div. Sama seperti yang kita bahas sebelumnya. Div mengelompokkan beberapa elemen agar menjadi satu bagian. Nah pasti kita butuh id supaya kita tahu ini apa. Contoh:

<div id="about">
	<h1>Tentang Kami</h1>
	<p>Kami adalah perusahaan perkemahan terbesar di United States. Dengan 15+ cabang di berbagai negara bagian. Dari Los Santos ke Liberty City.</p>
	<p>Kami menyajikan beragam kebutuhan perkemahan, lahan penginapan, hingga persewaan RV.</p>
</div>

Sudah ada gambaran? semoga sudah.

Jadi sekarang kalau kita ambil contoh website. Websitenya akan menjadi seperti ini:

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

<!-- Bagian Tentang -->
<div 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>
</div>

<!-- Bagian Sosial Media -->
<div 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>
</div>

Ingat anchor / link (<a>? Kalian juga bisa memberikan href ke sebuah id. Nanti ketika kalian klik link itu. Website akan skrol ke bagian id tersebut. Jadi misal nih bagian paling bawah nih aku kasih id footer terus aku klik link yang mengarah ke #footer. Maka web akan otomatis skrol ke bawah ke bagian footer.

Cara melakukannya sesederhana:

<a href="#bagian-ini">Klik ini untuk ke bagian ini</a>

<div id="bagian-ini">
	<h1>Ini Adalah Bagian Ini</h1>
	<p>Ini isi dari bagian ini.</p>
</div>

Memang sepertinya tidak akan berubah karena #bagian-ini tidak berada jauh di bawah. Tapi jika kalian lihat url di browser terdapat misal localhost:5500/index.html#bagian-ini harusnya aman.

Jadi tahu ya sekarang yaa. Ketika mau link sebuah bagian ID tambahin # di depan nama id. Seperti contoh tadi #bagian-ini.

ID ini nanti juga akan berguna ketika kita ingin styling elemen tertentu menggunakan CSS. Jadi kita mungkin ingin styling beberapa elemen dengna style nya sendiri. Nah ID sangat berguna di sini.