Struktur Dasar

Dalam struktur dasar HTML, kita menggunakan tag pembuka dan penutup untuk menandai elemen. Tag pembuka dimulai dengan <, diikuti dengan nama elemen, dan ditutup dengan >. Tag penutup dimulai dengan <, diikuti dengan /, nama elemen, dan ditutup dengan >.

Contoh:

<p> Ini adalah paragraf pertama </p>
<p> Ini adalah paragraf kedua </p>

Penjelasan: Dalam contoh di atas, <p> adalah tag pembuka dan </p> adalah tag penutup. Satu pasang tag pembuka dan penutup membentuk sebuah elemen.

A. Elemen HTML

Element HTML adalah hasil gabungan dari tag pembuka, konten, dan tag penutup. Satu pasang tag pembuka dan penutup disebut dengan elemen.

Misalnya :

<p>Ini adalah paragraf pertama</p>

Penjelasan : Pada contoh di atas, <p> adalah tag pembuka, Ini adalah paragraf pertama adalah konten, dan </p> adalah tag penutup. Ketiga bagian tersebut membentuk sebuah elemen yang disebut dengan elemen paragraf.

🤔 Apakah elemen HTML harus memiliki tag penutup?

Tidak semua elemen HTML harus memiliki tag penutup. Elemen yang tidak memiliki tag penutup disebut dengan elemen tunggal. Elemen tunggal tidak memiliki konten dan tag penutup. Contoh elemen tunggal adalah elemen gambar, elemen garis, dan elemen baris. Element tersebut akan dibahas lebih lanjut pada materi selanjutnya.

🤔 Dimana saya bisa tau apa saja elemen HTML yang ada?

Kamu bisa mengunjungi MDN Web Docs atau W3Schools untuk melihat daftar lengkap elemen HTML.

🤔 Apakah elemen HTML bisa bersarang?

Tentu saja! Elemen HTML bisa bersarang. Artinya, elemen HTML bisa berada di dalam elemen HTML lainnya. Contoh elemen yang bersarang adalah ketika kita menambahkan elemen strong di dalam elemen p seperti contoh di bawah ini.

<p>Ini adalah paragraf <strong>tebal</strong></p>

Perlu diperhatikan, kita tidak boleh salah menutup elemen. Jika kita membuka elemen p, maka kita harus menutupnya dengan elemen p. Jika kita membuka elemen strong, maka kita harus menutupnya dengan elemen strong.

Urutan penulisan elemen harus sesuai dengan aturan yang berlaku. Jika kita membuka elemen p terlebih dahulu maka kita harus menutupnya terlebih dahulu. Begitu juga dengan elemen strong.

Contoh :

<p>Ini adalah paragraf <strong>tebal</strong></p> ✅

<p>Ini adalah paragraf <strong>tebal</p></strong> ❌

B. Atribut HTML

Atribut HTML adalah bagian yang memberikan informasi tambahan pada elemen. Atribut HTML terdiri dari nama atribut dan nilai atribut.

Contoh :

Pada contoh di atas, atribut yang digunakan adalah align dan nilainya adalah center. Atribut align digunakan untuk mengatur posisi teks pada elemen h1. Dengan menggunakan atribut align, teks pada elemen h1 akan berada di tengah.

Lalu, ada atribut yang digunakan adalah src, width, dan height. Atribut src digunakan untuk menentukan lokasi gambar yang akan ditampilkan. Atribut width dan height digunakan untuk menentukan lebar dan tinggi gambar.

🤔 Apakah semua elemen HTML memiliki atribut?

Tidak semua elemen HTML memiliki atribut. Beberapa elemen HTML memiliki atribut yang wajib, beberapa elemen HTML memiliki atribut yang opsional, dan beberapa elemen HTML tidak memiliki atribut. Kamu bisa melihat daftar atribut yang dimiliki oleh setiap elemen HTML pada MDN Web Docs atau W3Schools.

Penulis : Andika Tulus Pangestu