Mengenal Tag, Elemen, dan Atribut HTML

Tag: Penanda yang Memberi Tahu Browser#

Coba kita lihat lagi kode yang sudah pernah kita buat:

1
<h1>Halo, Gabuters!</h1>

Di situ kita punya dua buah tag:

1
<h1>                    </h1>
2
 ↑                        ↑
3
tag pembuka            tag penutup

<h1> disebut opening tag atau tag pembuka.

Sedangkan:

1
</h1>

disebut closing tag atau tag penutup.

Perbedaannya cuma satu karakter kecil:

1
/

Tapi karakter kecil itu penting karena memberi tahu browser bahwa bagian tersebut sudah selesai.

Kurang lebih kita sedang mengatakan:

1
<h1>
2
Mulai judul utama.
3

4
Halo, Gabuters!
5

6
</h1>
7
Oke, judulnya selesai.

Hal yang sama berlaku untuk paragraf:

1
<p>Ini sebuah paragraf.</p>

Atau teks yang ingin kita tandai sebagai penting:

1
<strong>Ini penting!</strong>

Jadi tag membantu browser memahami struktur dan peran sebuah konten.

<h1> mengatakan bahwa isinya adalah heading utama.

<p> mengatakan bahwa isinya adalah paragraf.

<strong> mengatakan bahwa bagian tersebut memiliki penekanan atau kepentingan yang kuat.

Browser kemudian tahu bagaimana konten itu harus diperlakukan.

1
<img src="kucing.jpg" alt="Kucing sedang tidur">

1
<img>...</img>

Tag dan Elemen Ternyata Beda#

Nah, ini salah satu istilah yang sering tercampur ketika baru belajar HTML.

Perhatikan:

1
<p>Gabuters sedang belajar HTML.</p>

Kita bisa membedahnya seperti ini:

1
<p>    Gabuters sedang belajar HTML.    </p>
2
 ↑                  ↑                    ↑
3
tag               konten                tag
4
pembuka                               penutup
5

6
 └──────────────────┬────────────────────┘
7
                 elemen

Jadi:

1
<p>

adalah tag pembuka.

Kemudian:

1
</p>

adalah tag penutup.

Sedangkan keseluruhan:

1
<p>Gabuters sedang belajar HTML.</p>

merupakan sebuah elemen HTML.

Jadi kalau nanti kita mengatakan:

“Tambahkan elemen <p>.”

Maksudnya bukan hanya mengetik:

1
<p>

tetapi membuat elemen paragraf secara utuh, misalnya:

1
<p>Saya sedang belajar HTML.</p>

Dalam percakapan sehari-hari programmer memang kadang menggunakan istilah tag dan elemen secara agak longgar.

Tidak masalah.

Yang penting sekarang Gabuters sudah tahu bahwa secara konsep keduanya tidak persis sama.

Elemen Bisa Berada di Dalam Elemen Lain#

Sekarang coba kita buat paragraf seperti ini:

1
<p>
2
  Saya sedang belajar <strong>HTML</strong>.
3
</p>

Di sini kita punya elemen <strong>:

1
<strong>HTML</strong>

yang berada di dalam elemen <p>.

Struktur seperti ini disebut nesting.

Kalau diterjemahkan secara bebas, ya… elemen yang bersarang di dalam elemen lain.

Kurang lebih strukturnya seperti ini:

1
<p>
2
│
3
├── Saya sedang belajar
4
│
5
└── <strong>
6
      └── HTML

Dan sebenarnya kita sudah melakukan nesting sejak artikel sebelumnya.

Ingat struktur ini?

1
<body>
2
  <h1>Halo, Dunia!</h1>
3
  <p>Ini halaman web pertama saya.</p>
4
</body>

Elemen <h1> dan <p> berada di dalam <body>.

Dalam hubungan seperti ini kita juga bisa mendengar istilah parent dan child.

Pada contoh tadi:

1
<body>
2
│
3
├── <h1>
4
└── <p>

<body> adalah parent.

Sedangkan <h1> dan <p> merupakan child dari <body>.

Untuk sekarang tidak perlu terlalu memikirkan istilah tersebut.

Cukup pahami bahwa HTML bisa memiliki struktur bertingkat: elemen bisa berada di dalam elemen lain.

Nanti konsep ini akan semakin terasa penting ketika HTML kita mulai kompleks.

Kalau Dibuka, Tutup dengan Urutan yang Benar#

Karena elemen bisa bersarang, ada satu kebiasaan yang sebaiknya kita bangun dari sekarang.

Misalnya kita menulis:

1
<p>
2
  Saya sedang belajar <strong>HTML</strong>.
3
</p>

Perhatikan urutannya:

1
buka <p>
2
    buka <strong>
3
    tutup </strong>
4
tutup </p>

Elemen yang dibuka terakhir ditutup lebih dulu.

Jangan seperti ini:

1
<p>
2
  Saya sedang belajar <strong>HTML.
3
</p>
4
</strong>

Kalau kita gambarkan:

1
buka <p>
2
    buka <strong>
3
tutup </p>       ← eh?
4
tutup </strong>

Strukturnya jadi saling silang.

Bayangkan kita punya kotak besar, kemudian memasukkan kotak kecil ke dalamnya.

1
┌─────────────────────┐
2
│ Kotak A             │
3
│                     │
4
│   ┌─────────────┐   │
5
│   │ Kotak B     │   │
6
│   └─────────────┘   │
7
│                     │
8
└─────────────────────┘

Kita harus menutup kotak B dahulu sebelum menutup kotak A.

Konsepnya kurang lebih seperti itu.

Browser memang cukup pintar dan dalam beberapa kondisi bisa mencoba memperbaiki HTML yang kurang rapi.

Tapi jangan mengandalkan browser untuk membereskan kekacauan kita. 😄

Biasakan membuat struktur yang benar sejak awal.

Kalau Tag Menjelaskan “Apa”, Atribut Memberi Informasi Tambahan#

Sekarang kita sudah tahu tag dan elemen.

Saatnya kembali ke kode misterius yang tadi sempat muncul:

1
<a href="https://www.bapakgabut.com">BapakGabut</a>

Tag <a> digunakan untuk membuat link.

Misalnya kita menulis:

1
<a>BapakGabut</a>

Browser tahu:

Oke, ini sebuah link.

Masalahnya…

Link ke mana?

Browser bukan cenayang. 😄

Kita harus memberitahunya.

Di sinilah kita membutuhkan atribut.

1
<a href="https://www.bapakgabut.com">BapakGabut</a>

Perhatikan bagian ini:

1
href="https://www.bapakgabut.com"
2
  ↑                    ↑
3
nama atribut          nilai

href adalah nama atribut.

Sedangkan:

1
https://www.bapakgabut.com

adalah nilainya.

Secara umum bentuk atribut akan sering terlihat seperti ini:

1
nama-atribut="nilai"

Atribut ditulis pada tag pembuka dan digunakan untuk memberikan informasi tambahan tentang sebuah elemen.

Jadi pada contoh:

1
<a href="https://www.bapakgabut.com">BapakGabut</a>

kita bisa membacanya seperti ini:

Buat sebuah link dengan tulisan BapakGabut, lalu ketika link tersebut diklik, arahkan pengunjung ke https://www.bapakgabut.com.

Nah, sekarang kodenya mulai terasa lebih masuk akal, kan?

Beberapa Atribut yang Akan Sering Kita Temui#

HTML punya banyak sekali atribut.

Tapi kita tidak perlu menghafalkan semuanya.

Serius.

Programmer juga tidak duduk malam-malam sambil menghafal daftar atribut HTML. 😄

Untuk sekarang, kenalan saja dengan beberapa yang bakal sering kita temui.

1
<a href="https://www.bapakgabut.com">
2
  BapakGabut
3
</a>

1
<a href="https://www.google.com">
2
  Buka Google
3
</a>

1
<img src="kucing.jpg" alt="Kucing sedang tidur">

1
src="kucing.jpg"

1
<img src="kucing.jpg" alt="Kucing sedang tidur">

1
alt="Kucing sedang tidur"

1
<img src="kucing.jpg">

class dan id#

Ada dua atribut lain yang bakal sangat sering Gabuters temui:

1
class
2
id

Contohnya:

1
<p class="perkenalan">
2
  Halo, Gabuters!
3
</p>

atau:

1
<h2 id="tentang-saya">
2
  Tentang Saya
3
</h2>

Kalau sekarang muncul pertanyaan:

Buat apa?

Jawaban singkatnya:

belum terlalu terasa.

😄

Nanti ketika kita mulai bermain dengan CSS dan JavaScript, class dan id akan jauh lebih berguna.

Untuk sekarang cukup kenali bentuknya.

Jadi ketika nanti menemukan:

1
class="perkenalan"

Gabuters sudah tidak melihatnya sebagai mantra misterius yang entah datang dari mana.

Itu hanya sebuah atribut.

Satu Elemen Bisa Punya Banyak Atribut#

Sebuah elemen tidak terbatas hanya boleh memiliki satu atribut.

Misalnya:

1
<a
2
  href="https://www.bapakgabut.com"
3
  class="link-utama"
4
  id="link-bapakgabut"
5
>
6
  Buka BapakGabut
7
</a>

Elemen <a> tersebut memiliki tiga atribut:

1
href
2
class
3
id

Kita juga sengaja menuliskannya dalam beberapa baris.

Apakah harus seperti itu?

Tidak.

Kita bisa saja menulis:

1
<a href="https://www.bapakgabut.com" class="link-utama" id="link-bapakgabut">Buka BapakGabut</a>

Hasilnya sama.

Ketika kode mulai panjang, memecahnya menjadi beberapa baris kadang membuat kode lebih nyaman dibaca.

Browser tidak keberatan.

Mata kita yang biasanya lebih cepat menyerah. 😄

Sekarang Coba Kita Baca HTML Ini#

Kita sudah mengenal tag.

Kita sudah tahu apa itu elemen.

Kita juga sudah bertemu atribut.

Sekarang coba lihat kode berikut:

1
<body>
2
  <h1>Profil Saya</h1>
3

4
  <p>
5
    Halo! Saya sedang belajar <strong>HTML</strong>.
6
  </p>
7

8
  <p>
9
    Kunjungi
10
    <a href="https://www.bapakgabut.com">BapakGabut</a>
11
    untuk belajar bareng.
12
  </p>
13
</body>

Kalau di artikel sebelumnya kode seperti ini masih terlihat seperti sekumpulan simbol, sekarang kita sudah bisa membacanya.

Kurang lebih strukturnya seperti:

1
<body>
2
│
3
├── <h1>
4
│     └── Profil Saya
5
│
6
├── <p>
7
│     ├── Halo! Saya sedang belajar
8
│     └── <strong>
9
│           └── HTML
10
│
11
└── <p>
12
      ├── Kunjungi
13
      ├── <a href="...">
14
      │     └── BapakGabut
15
      └── untuk belajar bareng.

Kita bisa melihat bahwa <body> berisi beberapa elemen.

Kita bisa melihat <strong> berada di dalam sebuah paragraf.

Kita juga bisa melihat elemen <a> memiliki atribut href.

Kalau kode HTML mulai terlihat seperti sebuah struktur, bukan sekadar kumpulan <, >, dan /, berarti kita sudah membuat kemajuan.

Yuk, Upgrade Halaman Pertama Kita#

Sekarang buka kembali file HTML yang kita buat pada artikel sebelumnya.

Kalau sebelumnya bagian <body> kita masih sederhana seperti ini:

1
<body>
2
  <h1>Halo, Dunia!</h1>
3
  <p>Ini halaman web pertama saya.</p>
4
</body>

Mari kita ubah menjadi sedikit lebih menarik:

1
<body>
2
  <h1>Profil Saya</h1>
3

4
  <p>
5
    Halo! Saya sedang belajar <strong>HTML</strong>.
6
  </p>
7

8
  <h2>Yang Sedang Saya Pelajari</h2>
9

10
  <p>
11
    Sekarang saya sedang memahami tag, elemen, dan atribut HTML.
12
  </p>
13

14
  <a href="https://www.bapakgabut.com">
15
    Belajar bareng di BapakGabut
16
  </a>
17
</body>

Simpan file.

Kemudian refresh browser.

Sekarang halaman kita sudah punya beberapa jenis elemen dan sebuah link yang bisa diklik.

Tapi jangan berhenti dengan menyalin kode saya.

Coba ubah sendiri.

Misalnya ganti:

1
<h1>Profil Saya</h1>

dengan nama atau judul yang Gabuters inginkan.

Ubah isi paragrafnya.

Kemudian coba ganti alamat dan tulisan link.

Tujuannya bukan menghasilkan halaman yang cantik.

Untuk urusan cantik-mempercantik, nanti CSS yang kebagian kerja. 😄

Tujuan kita sekarang adalah mulai merasa nyaman membaca dan menulis struktur HTML.

Beberapa Kesalahan yang Perlu Dihindari#

Sebelum selesai, ada beberapa kesalahan kecil yang sering terjadi ketika baru belajar HTML.

1
<h1>Judul halaman</h2>

1
<h1>Judul halaman</h1>

1
<p>
2
  Belajar <strong>HTML
3
</p>
4
</strong>

1
<p>
2
  Belajar <strong>HTML</strong>
3
</p>

1
buka A
2
    buka B
3
    tutup B
4
tutup A

1
<a href=https://www.bapakgabut.com>

1
<a href="https://www.bapakgabut.com">

Tag, Elemen, dan Atribut#

Mari kita ringkas apa yang sudah kita pelajari.

1
TAG
2
↓
3
Penanda seperti:
4

5
<p>
6
</p>
7

8

9
ELEMENT
10
↓
11
Keseluruhan struktur:
12

13
<p>Hello!</p>
14

15

16
ATTRIBUTE
17
↓
18
Informasi tambahan pada elemen:
19

20
<a href="https://www.bapakgabut.com">
21
  BapakGabut
22
</a>

Kita juga belajar bahwa elemen HTML bisa berada di dalam elemen lain.

1
<p>
2
  Saya sedang belajar <strong>HTML</strong>.
3
</p>

Dan struktur tersebut harus disusun dengan rapi.

Kalau sekarang Gabuters melihat:

1
<a href="https://www.bapakgabut.com">
2
  BapakGabut
3
</a>

dan bisa mengatakan:

“Oh, ini elemen link. <a> adalah tag-nya dan href adalah atribut yang menentukan tujuannya.”

berarti misi artikel ini selesai. 🎉

Kita sudah mulai membaca HTML, bukan sekadar menyalinnya.

Selanjutnya: Kita Bikin Form#

Sampai sekarang halaman kita masih punya satu kebiasaan:

kita yang berbicara, pengunjung yang membaca.

Bagaimana kalau kita ingin pengunjung ikut memberikan sesuatu?

Misalnya:

• memasukkan nama,
• menulis email,
• memilih sebuah pilihan,
• atau menekan tombol kirim.

Untuk itu kita membutuhkan form HTML.

Di artikel berikutnya kita akan mulai membuatnya.

Dan tenang…

Kita tidak akan langsung membuat form pendaftaran sepanjang formulir administrasi pemerintahan. 😄

Kita mulai dari yang sederhana dulu.