Non 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. Tag-tag ini itu disebut dengan Semantic Elements dan kita akan bahas di bagian selanjutnya.

Nah tapi ada juga tag yang sebenarnya tida punya makna khusus, namanya Non-Semantic Elements. Contohnya <div>dan <span>. Dua tag ini hanya berfungsi sebagai wadah atau yang bakal sering disebut dengan container. Mereka biasanya dipakai untuk mengelompokkan beberapa elemen. Nah karena mereka tidak punya arti khusus, div dan span ini harus kita beri tahu apa maknanya secara manual menggunakan id atau class yang juga akan kita bahas.

Div

Di website yang sudah kalian buat di penugasan week 2. Website kalian terdiri dari beberapa bagian kan yaa. Dari mungkin header yang berisi h1, dan list link yang menggunakan li. Kemudian ada juga bagian menjelaskan riwayat pendidikan yang berisi h2 dan table. Contoh seperti ini:

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

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

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

Dapat dilihat bahwa sekarang kita secara teknis tidak membagi tiap bagian, kita hanya menggunakan comment yang sebenarnya tidak terbaca oleh browser. Nah disinilah fungsi <div>, untuk mengelompokkan tiap bagian agar lebih mudah kita sebagai programer untuk mengelompokkan dan mengetahui bagian mana yang sedang kita kerjakan.

div sama seperti tag lainnya. Di dalam div adalah kontennya. <div>Konten</div>. Jadi contoh, aku mau menaruh bagian tentang ke dalam div.

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

Div merupakan block-level element jadi tiap div akan berada di baris baru.

Sekarang akan ku kelompokkan tiap bagian menggunakan div yang akan menjadi seperti ini sekarang kodenya:

<!-- Bagian Judul -->
<div>
	<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>
	<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>
	<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>

Yep seperti itulah cara menggunakan div.

Oiya div juga bisa berada di dalam div dan mengelompokkan elemen yang lebih spesifik. Misal di bagian Sosial Media aku mau misah bagian judul dengan list. Jadi seperti ini:

<!-- Bagian Sosial Media -->
<div>
	<div>
		<h2>Follow Me</h2>
		<p>Follow aku di sosial media untuk konten asik</p>
	</div>
	<div>
		<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>
</div>

Semoga kamu sudah punya gambaran bagaimana kita menggunakan div di html.

Nah di browser memang tidak terlihat perubahan apapun, karena memang. Div akan lebih berguna lagi kalau kita styling menggunakan CSS. Yang akan kita bahas di pertemuan selanjutnya.

Span

Kita sudah tahu sebelumnya bahwa div merupakan block-level element dan dipakai untuk mengelompokkan beberapa elemen atau tag menjadi satu.

Lalu bagaimana dengan span?

Nah kalau span itu kebalikannya. span merupakan inline element yang artinya dia tidak akan membuat baris baru dan hanya selebar kontennya saja. span biasanya dipakai kalau kita ingin memberi style atau makna pada bagian kecil dari teks tanpa memecah paragraf.

Contoh, aku mau memberi warna berbeda pada kata tertentu di paragraf:

<p>Halo, nama aku <span>Dap</span> dan aku suka belajar HTML.</p>

Di browser, teks akan tetap satu baris, cuma kata Dap saja yang bisa kita kasih style khusus lewat CSS.

span cocok banget dipakai untuk menandai kata, frasa, atau bagian kecil lain di dalam kalimat. Bedanya dengan div adalah kalau div akan membuat baris baru, sedangkan span tetap berada di dalam aliran teks.

Contoh lain, misalnya aku ingin memisahkan dua kata dalam satu kalimat untuk nanti diberi warna yang berbeda:

<p>Belajar <span>HTML</span> itu <span>seru!</span></p>

Dengan begini, aku bisa kasih warna biru ke span pertama dan warna merah ke span kedua. Tapi itu nanti saat kita belajar CSS.

Semoga setelah ini kalian lebih ada gambaran mengenai perbedaan antara div dan span.

Div​

Span​

Div

Span