Tag: bahasa label untuk browser

Browser itu cuma membaca teks. Ia tidak tahu mana yang judul, mana yang paragraf, mana yang cuma tulisan biasa. Kalau kamu mengetik “Resep Teh Manis” begitu saja, ia menampilkannya sebagai tulisan biasa.

Jadi kamu harus memberi tahu. Alatnya bernama tag.

Tag: label yang membungkus

TagTagPenanda di HTML yang ditulis di antara tanda kurung sudut, seperti h1 untuk judul atau p untuk paragraf.Penjelasan lengkap → adalah penanda yang ditulis di antara tanda < dan >. Biasanya berpasangan:

<p>Ini sebuah paragraf.</p>

Bedah satu per satu:

• <p> : tag pembuka. Artinya “mulai paragraf di sini”.
• Ini sebuah paragraf. : isi.
• </p> : tag penutup. Sama dengan pembuka, tapi ada garis miring /. Artinya “paragraf selesai”.

Seluruh paketnya, dari pembuka sampai penutup, disebut elemenElemenSatu bagian halaman web yang lengkap, misalnya sebuah judul atau sebuah tombol.Penjelasan lengkap →.

Tag teks yang paling sering dipakai

Beberapa catatan:

• h1 biasanya dipakai sekali per halaman, sebagai judul utama. Sisanya h2, h3, dan seterusnya untuk sub-judul.
• strong dan em dipakai di dalam paragraf, untuk menandai kata tertentu.
• br adalah tag yang tidak punya penutup, karena tidak membungkus apa-apa. Ia cuma berarti “ganti baris di sini”.

Elemen di dalam elemen

Elemen boleh berisi elemen lain. Contohnya:

<p>Siapkan <strong>teh dan gula</strong> secukupnya.</p>

Di sini <strong> hidup di dalam <p>. Ini disebut bersarang.

Aturannya jadi sederhana: tutup yang terakhir dibuka lebih dulu.

<p>Aku <em>suka <strong>banget</strong></em> belajar.</p>

Urutan buka: p, em, strong. Urutan tutup harus terbalik: strong, em, p. Lihat contoh di atas, tutupnya </strong></em></p>. Pas.

Ini yang salah:

<p>Aku <em>suka <strong>banget</em></strong> belajar.</p>

Kotaknya bersilangan. Browser mungkin tetap menampilkannya, tapi hasilnya bisa tidak sesuai maumu.

Coba sendiri: perbaiki halaman yang rusak

Halaman di bawah ini sengaja dirusak. Ada empat kesalahan tag. Sekilas tampilannya mungkin hampir benar, tapi tag-nya salah. Tugasmu mencari dan memperbaikinya. Tiga petunjuk:

1. Ada tag penutup yang lupa garis miring.
2. Ada paragraf yang lupa ditutup.
3. Ada pasangan tag yang tidak cocok (dibuka dengan satu jenis, ditutup dengan jenis lain). Jumlahnya dua.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Halaman rusak</title>
</head>
<body>
  <h1>Resep Teh Manis<h1>
  <p>Teh manis itu gampang dibuat.
  <p>Siapkan <strong>teh, gula, dan air panas</em>.</p>
  <h2>Langkahnya</h2>
  <p>Seduh tehnya, <em>aduk pelan-pelan</strong>, lalu minum.</p>
</body>
</html>

Mencari kesalahan tag adalah keterampilan yang kamu pakai seumur hidup ngoding, jadi coba cari sendiri dulu sebelum mengintip jawabannya.

Latihan kecil: perkenalkan dirimu

Satu lagi, opsional tapi seru. Tulis halaman perkenalan dirimu: judul dengan namamu, satu paragraf cerita singkat, dan beri tebal pada satu kata penting. Bonus kalau kamu memakai <br> untuk pindah baris.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Kenalan</title>
</head>
<body>
  <!-- Tantangan: tulis judul dengan namamu (h1), satu paragraf perkenalan (p),
       dan beri tebal (strong) pada satu kata penting -->

</body>
</html>

Kesalahan umum

• Lupa menutup tag. Tag pembuka ada, penutupnya tidak. Efeknya bisa menjalar: tulisan setelahnya ikut tebal atau ikut jadi judul.
• Salah urutan tutup. Ingat matryoshka: tutup yang terakhir dibuka.
• Lupa garis miring. <h1>Judul<h1> itu bukan penutup, malah membuka judul baru.
• Salah kurung sudut. Mengetik (p) atau [p] bukannya <p>. Browser menganggap itu tulisan biasa.
• Salah eja nama tag. <strng> tidak dikenal, jadi diabaikan.

Kamu sudah bisa membungkus teks dengan tag. Selanjutnya kita bikin sesuatu yang lebih berguna: daftar dan tautan ke halaman lain.