Ketika Anda membuka sebuah file HTML di text editor, hal pertama yang akan mencolok adalah tanda kurung sudut yang bertebaran di mana mana, seperti <p>, <h1>, <br>, dan berbagai bentuk lainnya. Inilah yang disebut sebagai tag dalam HTML. Tag adalah inti dari cara kerja HTML: ia adalah instruksi yang ditulis langsung di dalam teks dokumen untuk memberi tahu browser bagaimana setiap bagian konten harus diperlakukan dan ditampilkan. Tanpa tag, browser tidak akan tahu mana yang harus ditampilkan sebagai judul, mana yang merupakan paragraf, di mana harus menyisipkan gambar, atau bagaimana sebuah tautan harus bekerja. Bagi pemula yang baru memahami konsep dokumen HTML, memahami cara kerja tag secara menyeluruh adalah langkah kritis berikutnya setelah mengetahui bahwa sebuah dokumen HTML memiliki kerangka berupa DOCTYPE, html, head, dan body. Artikel ini akan membedah tiga jenis tag yang ada dalam HTML secara mendalam: opening tag yang membuka sebuah elemen, closing tag yang menutupnya, serta self-closing tag yang bekerja tanpa pasangan penutup. Pemahaman yang kuat tentang ketiganya akan menjadi bekal yang Anda gunakan setiap kali menulis HTML, tanpa terkecuali.
Penting untuk memahami sejak awal bahwa ada perbedaan konseptual antara "tag" dan "elemen" yang sering digunakan secara bergantian namun sebenarnya merujuk pada hal yang sedikit berbeda. Tag adalah tanda kurung sudut beserta nama dan atribut di dalamnya, misalnya <p> atau </p>. Elemen adalah keseluruhan unit yang terdiri dari opening tag, konten di dalamnya, dan closing tag secara bersama sama. Jadi kalimat "elemen paragraf" merujuk pada seluruh unit mulai dari <p> hingga </p> beserta teks yang ada di antara keduanya. Sementara "tag paragraf" merujuk pada tanda <p> saja. Memahami perbedaan ini akan membantu Anda membaca dokumentasi teknis dan tutorial dengan lebih tepat. Artikel ini menggunakan VS Code sebagai text editor dan Google Chrome sebagai browser pengujian. Anda akan mempraktikkan contoh kode secara langsung di file baru yang dibuat khusus untuk sesi latihan ini, sehingga file latihan sebelumnya tetap utuh sebagai referensi.
Landasan Sains dan Prinsip Kerja Metode
Cara browser memproses tag HTML berkaitan erat dengan bagaimana ia membangun pohon DOM yang telah dibahas pada artikel sebelumnya. Ketika browser menemukan sebuah opening tag seperti <p>, ia membuat sebuah node baru dalam pohon DOM dan mulai menetapkan semua teks serta elemen yang menyusul sebagai bagian dari elemen tersebut. Ketika browser kemudian menemukan closing tag </p>, ia menutup node tersebut dan kembali ke level hierarki di atasnya. Proses ini bersifat berurutan dan bersarang: elemen bisa mengandung elemen lain di dalamnya, menciptakan hubungan induk dan anak dalam pohon DOM. Browser modern dilengkapi dengan mekanisme pemulihan kesalahan yang cukup canggih, sehingga tag yang tidak ditutup atau tag yang salah posisi sering kali masih menghasilkan tampilan yang "terlihat benar". Namun mengandalkan mekanisme pemulihan ini adalah praktik yang berbahaya karena hasilnya tidak selalu konsisten antara satu browser dengan browser lainnya.
Self-closing tag, yang juga dikenal sebagai void element dalam spesifikasi HTML5, adalah kategori elemen yang secara inheren tidak bisa memiliki konten anak. Ini bukan sekadar konvensi penulisan melainkan bagian dari definisi elemen tersebut dalam standar HTML. Elemen seperti <br>, <img>, <input>, dan <meta> adalah void element karena sifat dasarnya memang tidak memerlukan konten teks atau elemen lain di dalamnya. Sebuah gambar tidak "mengandung" teks, sebuah baris baru tidak memiliki konten, dan sebuah field input tidak membungkus apapun. Spesifikasi HTML5 menetapkan bahwa void element tidak boleh memiliki closing tag dan tidak boleh ditulis dalam format <br></br>. Anda mungkin pernah melihat penulisan <br /> dengan garis miring sebelum kurung sudut penutup, ini adalah gaya penulisan dari era XHTML yang masih sering muncul di tutorial lama. Dalam HTML5 modern, garis miring tersebut bersifat opsional dan diterima oleh parser namun tidak diperlukan.
Konsep nesting atau penyarangan elemen adalah hal yang tidak bisa dipisahkan dari pemahaman tentang tag. Nesting berarti menempatkan satu elemen di dalam elemen lain. HTML sangat bergantung pada nesting untuk membangun struktur konten yang bermakna dan hierarkis. Namun nesting memiliki aturan yang harus dipatuhi: elemen yang dibuka di dalam elemen lain harus ditutup sebelum elemen pembungkusnya ditutup. Analoginya seperti kotak yang tersarang: jika Anda membuka kotak besar, lalu membuka kotak kecil di dalamnya, Anda harus menutup kotak kecil terlebih dahulu sebelum menutup kotak besar. Jika urutan penutupan ini dilanggar, browser akan berusaha memperbaiki struktur secara otomatis namun hasilnya bisa tidak terduga. Misalnya, <p><strong>teks</p></strong> adalah nesting yang salah karena <strong> ditutup setelah </p>. Penulisan yang benar adalah <p><strong>teks</strong></p> di mana elemen dalam ditutup terlebih dahulu sebelum elemen luarnya.
Formula, Komposisi Bahan, atau Spesifikasi Parameter
Tabel berikut merangkum seluruh komponen yang membentuk sistem tag dan elemen HTML, mencakup tiga kategori utama tag beserta elemen contoh nyata dari masing masing kategori. Memahami spesifikasi dan fungsi teknis setiap komponen ini akan membekali Anda dengan peta konseptual yang jelas sebelum mempraktikkannya secara langsung.
| Komponen | Spesifikasi/Format Penulisan | Fungsi Teknis |
|---|---|---|
| Opening Tag | Nama elemen diapit tanda kurung sudut: <nama> misalnya <p>, <h1>, <div> | Menandai titik awal sebuah elemen; memberi tahu browser bahwa konten berikutnya adalah bagian dari elemen tersebut |
| Closing Tag | Sama dengan opening tag namun ditambahkan garis miring setelah kurung sudut pembuka: </nama> misalnya </p>, </h1>, </div> | Menandai titik akhir sebuah elemen; memberi tahu browser bahwa cakupan elemen tersebut sudah selesai |
| Konten Elemen | Teks atau elemen lain yang ditempatkan di antara opening tag dan closing tag | Merupakan isi dari elemen yang akan diproses atau ditampilkan sesuai instruksi tag pembungkusnya |
| Self-Closing Tag (Void Element) | Hanya memiliki satu tag tanpa pasangan penutup: <br>, <img>, <input>, <meta>, <link>, <hr> | Mewakili elemen yang secara definisi tidak bisa memiliki konten anak; browser tidak mengharapkan closing tag untuk elemen jenis ini |
| Atribut dalam Opening Tag | Ditulis di dalam opening tag setelah nama elemen: <img src="foto.jpg" alt="Deskripsi foto"> | Memberikan informasi tambahan tentang elemen; mengonfigurasi perilaku atau tampilan elemen secara lebih spesifik |
| Nama Atribut | Teks tanpa spasi yang ditulis setelah nama elemen di dalam tag, misalnya src, alt, href, id, class | Mengidentifikasi jenis informasi tambahan yang diberikan kepada elemen tersebut |
| Nilai Atribut | Teks yang diapit tanda kutip ganda setelah tanda sama dengan: alt="Deskripsi foto" | Menetapkan nilai konkret untuk atribut yang bersangkutan; tanda kutip ganda adalah konvensi yang disarankan meski tanda kutip tunggal juga diterima parser |
| Nesting Elemen | Elemen di dalam elemen: <p><strong>teks tebal</strong></p> | Membangun hierarki konten; elemen dalam harus ditutup sebelum elemen luarnya ditutup agar pohon DOM terbentuk dengan benar |
| Elemen Blok | Contoh: <p>, <h1> sampai <h6>, <div>, <ul>, <ol>, <li>, <table> | Secara default menempati seluruh lebar yang tersedia dan dimulai dari baris baru; membentuk blok konten yang terpisah dari elemen sekitarnya |
| Elemen Inline | Contoh: <strong>, <em>, <a>, <span>, <img> | Mengalir di dalam baris teks tanpa memulai baris baru; biasanya digunakan untuk menandai bagian kecil dari konten yang lebih besar |
<br>, <img>, <input>, <meta>, <link>, dan <hr> tidak boleh memiliki closing tag. Jangan menulis <br></br> karena closing tag </br> tidak valid dalam HTML5 dan dapat menyebabkan browser menginterpretasikan tag tersebut sebagai elemen yang tidak dikenal. Penulisan <br /> dengan garis miring opsional masih diterima parser HTML5 namun tidak wajib dan tidak disarankan untuk ditulis dalam konteks HTML5 murni. Cukup tulis <br> saja.Panduan Langkah Kerja Bertahap
Membuat File Latihan Baru dan Memahami Anatomi Opening Tag
Buka VS Code dan pastikan folder proyek belajar-html sudah terbuka di panel Explorer. Buat file baru dengan mengklik ikon New File di panel Explorer, beri nama file tersebut tag-elemen.html, lalu tekan Enter. File ini akan menjadi tempat Anda mempraktikkan seluruh konsep tag dan elemen dalam artikel ini.
Ketikkan struktur dasar dokumen HTML berikut ke dalam file yang baru saja dibuat. Perhatikan setiap opening tag yang ada: masing masing dimulai dengan tanda kurung sudut pembuka <, diikuti nama elemen tanpa spasi, dan diakhiri tanda kurung sudut penutup >.
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Belajar Tag dan Elemen HTML</title>
</head>
<body>
<h1>Halaman Latihan Tag dan Elemen</h1>
<p>Ini adalah paragraf pertama untuk latihan memahami tag HTML.</p>
</body>
</html>Simpan file dengan Ctrl + S, kemudian buka di Chrome dengan Ctrl + O dan pilih file tag-elemen.html. Halaman seharusnya menampilkan judul "Halaman Latihan Tag dan Elemen" dan satu paragraf teks. Perhatikan bahwa setiap opening tag dalam kode di atas memiliki pasangan closing tag yang ditandai dengan garis miring, misalnya <h1> diakhiri oleh </h1>. Verifikasi: halaman terbuka di Chrome dengan judul dan paragraf tampil dengan benar.
Mempraktikkan Opening Tag dan Closing Tag dengan Berbagai Elemen Teks
Pada langkah ini Anda akan menambahkan berbagai elemen teks yang masing masing memiliki opening tag dan closing tag. Tujuannya adalah membangun pemahaman konkret tentang bagaimana pasangan tag mendefinisikan cakupan sebuah elemen. Setiap elemen yang ditambahkan memiliki makna semantik yang berbeda: <h2> untuk subjudul, <p> untuk paragraf, <strong> untuk penekanan penting, dan <em> untuk penekanan dengan intonasi.
Perbarui bagian <body> pada file tag-elemen.html Anda dengan konten berikut. Isi di luar <body> tidak perlu diubah.
<body>
<h1>Halaman Latihan Tag dan Elemen</h1>
<h2>Tentang Opening Tag dan Closing Tag</h2>
<p>Setiap elemen HTML memiliki opening tag dan closing tag yang bekerja berpasangan.</p>
<p>Opening tag memberi tahu browser kapan sebuah elemen dimulai.</p>
<p>Closing tag memberi tahu browser kapan elemen tersebut berakhir.</p>
<h2>Contoh Elemen Inline di Dalam Paragraf</h2>
<p>Kata <strong>ini sangat penting</strong> dan dicetak tebal oleh elemen strong.</p>
<p>Kata <em>ini ditekankan</em> dan dicetak miring oleh elemen em.</p>
<p>Anda bisa <strong>menggabungkan <em>keduanya</em></strong> dengan nesting yang benar.</p>
</body>Simpan dengan Ctrl + S lalu tekan Ctrl + R di Chrome untuk memuat ulang. Halaman sekarang seharusnya menampilkan dua subjudul, beberapa paragraf, teks tebal, dan teks miring. Perhatikan pada baris terakhir bagaimana <em> ditutup sebelum </strong> karena <em> dibuka di dalam <strong>, bukan sebelumnya. Ini adalah contoh nesting yang benar. Verifikasi: teks "ini sangat penting" tampil tebal, "ini ditekankan" tampil miring, dan "keduanya" tampil tebal sekaligus miring di Chrome.
Mengenal dan Mempraktikkan Self-Closing Tag
Self-closing tag atau void element adalah elemen yang tidak memiliki pasangan closing tag karena sifat dasarnya yang tidak bisa mengandung konten anak. Pada langkah ini Anda akan mempraktikkan dua void element yang paling sering ditemui: <br> untuk membuat baris baru di dalam teks tanpa memulai paragraf baru, dan <hr> untuk menggambar garis horizontal pemisah. Keduanya sering menjadi sumber kebingungan bagi pemula karena tampak "tidak lengkap" dibandingkan elemen lain yang memiliki pasangan tag.
Tambahkan bagian baru ke dalam <body> file tag-elemen.html Anda, tepat sebelum tag penutup </body>:
<h2>Contoh Self-Closing Tag</h2>
<p>
Ini adalah baris pertama dalam paragraf yang sama.<br>
Ini adalah baris kedua, dipisahkan oleh tag br di atas.<br>
Ini adalah baris ketiga dalam paragraf yang sama.
</p>
<hr>
<p>Paragraf ini muncul setelah garis horizontal yang dibuat oleh tag hr.</p>Simpan dengan Ctrl + S dan muat ulang Chrome dengan Ctrl + R. Perhatikan efek dari kedua void element tersebut. Tag <br> membuat teks melanjutkan ke baris berikutnya namun masih dalam paragraf yang sama, sehingga tidak ada jarak vertikal tambahan seperti yang terjadi jika Anda memulai elemen <p> baru. Tag <hr> menghasilkan sebuah garis horizontal yang membentang dari kiri ke kanan, memisahkan konten secara visual. Penting untuk dicatat bahwa tidak ada closing tag </br> atau </hr> dalam kode di atas, dan memang seharusnya tidak ada. Verifikasi: teks dalam paragraf pertama tampil dalam tiga baris terpisah tanpa jarak ekstra, dan sebuah garis horizontal tampil di antara dua paragraf.
Memahami Atribut dalam Opening Tag melalui Elemen img
Atribut adalah informasi tambahan yang ditulis di dalam opening tag untuk mengonfigurasi perilaku atau tampilan elemen tersebut. Atribut selalu ditulis di dalam opening tag, tidak pernah di closing tag, dan formatnya selalu terdiri dari nama atribut, tanda sama dengan, dan nilai yang diapit tanda kutip ganda. Elemen <img> adalah contoh sempurna untuk mempelajari atribut karena elemen ini adalah void element yang sepenuhnya bergantung pada atribut untuk bisa berfungsi: tanpa atribut src, browser tidak tahu gambar mana yang harus ditampilkan.
Untuk praktik ini Anda tidak memerlukan file gambar eksternal. Anda akan menggunakan URL gambar contoh dari layanan placeholder yang tersedia secara publik. Tambahkan kode berikut ke dalam <body> file Anda, tepat sebelum </body>:
<h2>Contoh Atribut dalam Opening Tag</h2>
<p>Elemen img di bawah ini adalah void element dengan dua atribut wajib:</p>
<img src="https://via.placeholder.com/300x150" alt="Gambar placeholder berukuran 300 kali 150 piksel">
<p>Atribut src memberi tahu browser lokasi file gambar.</p>
<p>Atribut alt menyediakan teks alternatif jika gambar tidak dapat dimuat.</p>Simpan dengan Ctrl + S dan muat ulang Chrome. Pastikan komputer Anda terhubung ke internet untuk memuat gambar placeholder dari URL eksternal. Sebuah gambar abu abu berukuran 300 kali 150 piksel seharusnya tampil di halaman. Perhatikan bahwa tag <img> tidak memiliki closing tag karena ia adalah void element, namun ia memiliki dua atribut dalam opening tag-nya. Jika gambar tidak tampil karena tidak ada koneksi internet, teks dari atribut alt akan muncul sebagai penggantinya, menunjukkan fungsi atribut alt. Verifikasi: gambar placeholder tampil di halaman, atau teks alt muncul jika tidak ada koneksi internet.
Mengamati Dampak Nesting yang Salah melalui Percobaan Terkontrol
Memahami aturan nesting tidak hanya berarti mengetahui cara yang benar, tetapi juga memahami apa yang terjadi ketika aturan tersebut dilanggar. Pada langkah ini Anda akan melakukan percobaan terkontrol: menulis nesting yang salah, mengamati bagaimana Chrome menanganinya melalui Developer Tools, lalu memperbaikinya. Percobaan ini akan membuat aturan nesting terasa nyata dan tidak sekadar teori.
Tambahkan kode berikut ke dalam <body> file Anda sebelum </body>. Perhatikan bahwa ada nesting yang sengaja dibuat salah pada baris kedua paragraf pertama:
<h2>Percobaan Nesting</h2>
<p>Ini contoh nesting yang <strong>SALAH: tag strong ditutup setelah tag p</p></strong></p>
<p>Ini contoh nesting yang <strong>BENAR: tag strong ditutup sebelum tag p</strong></p>Simpan dan muat ulang Chrome. Secara visual, kemungkinan besar halaman tampak normal karena Chrome memiliki mekanisme pemulihan kesalahan yang canggih. Sekarang buka Developer Tools dengan F12 dan klik tab Elements. Amati struktur DOM yang dihasilkan Chrome untuk baris pertama. Anda akan melihat bahwa Chrome telah mengubah struktur secara otomatis untuk memperbaiki nesting yang salah, hasilnya mungkin berbeda dari yang Anda tulis. Ini membuktikan bahwa browser melakukan koreksi otomatis yang hasilnya tidak dapat diprediksi. Perbaiki kode dengan menghapus baris nesting yang salah dan hanya menyisakan baris yang benar. Simpan kembali dan verifikasi di panel Elements bahwa struktur DOM untuk baris yang benar menampilkan <strong> sebagai anak dari <p> secara hierarkis.
Menyusun Dokumen Latihan Final yang Menggunakan Ketiga Jenis Tag
Langkah terakhir adalah menyusun dokumen latihan yang lengkap dan bersih, menggabungkan opening tag dengan closing tag, void element, dan atribut dalam satu halaman yang terorganisir. Ini bukan sekadar latihan menulis ulang, melainkan latihan menyusun kode HTML yang bermakna secara struktural dan benar secara teknis dari awal hingga akhir tanpa kesalahan nesting. Gantikan seluruh isi file tag-elemen.html dengan kode lengkap berikut:
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Rangkuman Tag dan Elemen HTML</title>
</head>
<body>
<h1>Tiga Jenis Tag dalam HTML</h1>
<h2>1. Opening Tag dan Closing Tag</h2>
<p>Elemen dengan opening dan closing tag mengapit konten di antara keduanya.</p>
<p>Contoh: elemen <strong>strong</strong> dan elemen <em>em</em>.</p>
<h2>2. Self-Closing Tag (Void Element)</h2>
<p>Tag br membuat baris baru:<br>ini melanjutkan di baris berikutnya.</p>
<hr>
<p>Tag hr di atas menghasilkan garis pemisah horizontal.</p>
<h2>3. Atribut dalam Opening Tag</h2>
<p>Atribut ditulis di dalam opening tag untuk mengonfigurasi elemen:</p>
<img src="https://via.placeholder.com/400x200" alt="Gambar placeholder latihan HTML">
</body>
</html>Simpan dengan Ctrl + S dan muat ulang Chrome. Halaman seharusnya menampilkan tiga bagian konten secara berurutan: bagian pertama menampilkan teks dengan penekanan tebal dan miring, bagian kedua menampilkan efek baris baru dan garis horizontal, dan bagian ketiga menampilkan gambar placeholder. Buka Developer Tools dengan F12 dan periksa tab Elements untuk memastikan seluruh struktur DOM terbentuk dengan hierarki yang benar: <html> sebagai akar, <head> dan <body> sebagai cabang utama, dan semua elemen konten sebagai turunan di dalam <body>. Verifikasi akhir: tidak ada elemen yang berada di posisi hierarki yang salah di panel Elements.
Verifikasi Akhir dan Parameter Kelayakan
Gunakan tabel berikut untuk mengevaluasi pemahaman dan implementasi Anda tentang ketiga jenis tag HTML. Setiap parameter dapat diverifikasi langsung melalui tampilan visual di Chrome dan inspeksi DOM di Developer Tools. Jika ada parameter yang belum mencapai target, tinjau kembali langkah yang relevan dan perhatikan detail penulisan kode dengan seksama.
| Parameter | Sebelum Menerapkan Metode | Sesudah Menerapkan Metode (Target) |
|---|---|---|
| Pemahaman opening tag dan closing tag | Tag ditulis tanpa pasangan atau pasangan penutup tidak konsisten formatnya | Setiap elemen yang membutuhkan closing tag memiliki pasangan </nama> yang tepat dan sesuai dengan opening tag-nya |
| Penerapan void element | Void element ditulis dengan closing tag seperti <br></br> atau dihindari karena membingungkan | Void element seperti br, hr, img, dan meta ditulis hanya dengan satu tag tanpa closing tag sesuai spesifikasi HTML5 |
| Penulisan atribut | Atribut ditulis tanpa tanda kutip atau ditempatkan di luar opening tag | Semua atribut ditulis di dalam opening tag dengan format nama="nilai" menggunakan tanda kutip ganda |
| Urutan penutupan nesting | Elemen dalam ditutup setelah elemen luarnya atau urutan penutupan tidak konsisten | Elemen yang dibuka paling dalam selalu ditutup terlebih dahulu sebelum elemen pembungkusnya ditutup |
| Validitas struktur DOM di Developer Tools | Pohon DOM di Developer Tools menunjukkan elemen di posisi yang tidak diharapkan karena koreksi otomatis browser | Pohon DOM di tab Elements Chrome mencerminkan hierarki yang persis sama dengan yang ditulis di kode tanpa ada koreksi otomatis dari browser |
Solusi Masalah di Lapangan (FAQ Teknis)
1. Saya lupa menutup sebuah elemen dengan closing tag dan halaman masih tampak normal di Chrome. Apakah ini berarti closing tag tidak wajib?
Ini adalah kesalahpahaman yang sangat umum di kalangan pemula dan pemahaman yang tepat sangat penting untuk karier Anda ke depan. Browser modern, khususnya Chrome, memiliki algoritma pemulihan kesalahan yang sangat canggih berdasarkan spesifikasi HTML5. Algoritma ini mampu menebak posisi closing tag yang hilang dan menyisipkannya secara otomatis ke posisi yang dianggap paling masuk akal. Hasilnya memang sering terlihat normal untuk halaman sederhana. Namun ada dua risiko nyata. Pertama, perilaku pemulihan ini tidak selalu identik antara Chrome, Firefox, dan Safari, sehingga halaman yang tampak benar di Chrome bisa tampil berbeda di browser lain. Kedua, semakin kompleks halaman Anda dengan CSS dan JavaScript, semakin besar kemungkinan kesalahan struktural yang disebabkan oleh tag yang tidak ditutup akan menyebabkan masalah yang sulit dilacak. Biasakan selalu menutup elemen yang membutuhkan closing tag sebagai kebiasaan dasar yang tidak bisa dikompromikan.
2. Mengapa elemen img membutuhkan atribut alt? Apakah halaman akan rusak jika saya tidak menuliskannya?
Secara teknis, halaman tidak akan "rusak" jika atribut alt tidak ada pada elemen <img> dalam artian gambar tetap akan tampil. Namun tidak menyertakan atribut alt menimbulkan beberapa masalah nyata. Pertama, jika gambar gagal dimuat karena masalah jaringan atau URL yang salah, tidak ada teks apapun yang ditampilkan sebagai pengganti sehingga pengunjung tidak tahu apa yang seharusnya muncul di sana. Kedua, pengguna yang mengandalkan screen reader karena keterbatasan penglihatan akan mendengar sesuatu seperti "image" atau nama file gambar dibacakan tanpa konteks, karena screen reader tidak bisa "melihat" isi gambar. Atribut alt menyediakan deskripsi tekstual yang dibacakan oleh screen reader. Ketiga, mesin pencari menggunakan teks alt untuk memahami isi gambar karena mesin pencari tidak dapat menganalisis gambar secara visual. Selalu sertakan atribut alt dengan deskripsi yang bermakna untuk setiap elemen <img>.
3. Bolehkah saya menulis nama tag menggunakan huruf kapital seperti <P> atau <STRONG>?
Dari sisi parser HTML5, penulisan nama tag dalam huruf kapital, huruf kecil, atau kombinasi keduanya akan diterima dan diproses dengan hasil yang sama. Spesifikasi HTML5 menyatakan bahwa nama tag tidak sensitif terhadap huruf besar atau kecil. Jadi <P>, <p>, dan <P> semuanya merujuk pada elemen paragraf yang sama di mata browser. Namun komunitas pengembang web secara konsisten menggunakan konvensi huruf kecil untuk semua nama tag dan atribut HTML. Alasannya adalah konsistensi dan keterbacaan kode: huruf kecil lebih mudah dibaca, lebih mudah diketik, dan merupakan standar de facto yang diikuti oleh seluruh ekosistem alat pengembangan web modern termasuk VS Code, linter, dan formatter. Ikuti konvensi huruf kecil sejak awal agar kode Anda mudah dibaca oleh siapapun, termasuk oleh diri Anda sendiri ketika membacanya kembali di kemudian hari.
4. Saya melihat penulisan <br /> di banyak tutorial lama. Apakah ini salah atau berbeda dari <br>?
Penulisan <br /> dengan garis miring sebelum kurung sudut penutup adalah gaya penulisan yang berasal dari era XHTML, yaitu versi HTML yang mengikuti aturan sintaks XML yang lebih ketat. Dalam XHTML, semua elemen tanpa konten harus ditulis dengan garis miring penutup di dalam tag-nya. Ketika HTML5 menjadi standar modern yang dominan mulai sekitar tahun 2014, aturan XHTML ini tidak lagi diwajibkan. Parser HTML5 menerima <br>, <br/>, dan <br /> sebagai hal yang identik dan menghasilkan void element yang sama. Tidak ada salah satu yang "salah" dalam artian akan menyebabkan error, namun untuk dokumen HTML5 modern, cukup menulis <br> tanpa garis miring adalah gaya yang lebih bersih dan disarankan. Jika Anda menemukan tutorial lama yang menggunakan gaya XHTML, pahami bahwa kode tersebut masih valid namun tidak mencerminkan praktik penulisan HTML5 yang paling mutakhir.
Kesimpulan dan Rencana Aksi
Anda kini telah memiliki pemahaman yang solid tentang cara kerja ketiga jenis tag dalam HTML: opening tag yang membuka sebuah elemen, closing tag yang menutupnya, dan void element yang bekerja tanpa pasangan penutup. Anda juga telah memahami konsep atribut sebagai mekanisme untuk mengonfigurasi elemen, aturan nesting yang mengharuskan elemen dalam ditutup sebelum elemen luarnya, serta perbedaan konseptual antara elemen blok yang menempati baris sendiri dan elemen inline yang mengalir di dalam teks. Semua konsep ini bukan sekadar aturan hafalan, melainkan prinsip yang mencerminkan bagaimana browser membangun pohon DOM dari teks dokumen HTML. Setiap kali Anda menulis tag yang tidak ditutup atau nesting yang salah urutan, Anda sedang memberi browser sebuah teka teki yang harus ia selesaikan dengan tebakannya sendiri, dan tebakan browser tidak selalu sesuai dengan yang Anda inginkan. Dengan memahami cara kerja tag secara mendasar, Anda kini memiliki alat untuk menulis HTML yang dapat diprediksi, konsisten lintas browser, dan mudah dipelihara.
Rencana aksi yang disarankan setelah menguasai materi ini adalah memperluas pengetahuan Anda tentang elemen elemen HTML yang lebih beragam, khususnya elemen yang sering digunakan dalam konten nyata. Mulailah dengan mempelajari elemen tautan <a> beserta atribut href yang menentukan tujuan tautan, elemen daftar <ul> dan <ol> beserta elemen anak <li>, serta elemen pengelompokan seperti <div> dan <span>. Untuk setiap elemen baru yang Anda pelajari, praktikkan langsung di file HTML, amati hasilnya di Chrome, dan periksa struktur DOM-nya di Developer Tools. Kebiasaan memeriksa DOM setiap kali mempelajari elemen baru akan mempercepat pemahaman Anda secara signifikan karena Anda melihat langsung bagaimana browser menginterpretasikan kode yang Anda tulis.
Ditulis dan diedit oleh Ahmad Ismail Al Malik