Elemen HTML

Dalam tutorial ini akan belajar tentang tag dan elemen HTML.

Sintaks Elemen HTML

Elemen HTML adalah komponen individual dari dokumen HTML. Ini mewakili semantik, atau makna. Misalnya, elemen title mewakili judul dokumen.

Sebagian besar elemen HTML ditulis dengan tag awal (atau tag pembuka) dan tag akhir (atau tag penutup), dengan konten di antaranya. Elemen juga dapat berisi atribut yang mendefinisikan properti tambahannya. Misalnya, sebuah paragraf, yang diwakili oleh elemen p, akan ditulis sebagai:

Kita akan belajar tentang atribut HTML di bab berikutnya.

CATATAN

Semua elemen tidak memerlukan tag akhir atau tag penutup. Ini disebut sebagai elemen kosong, elemen yang menutup sendiri atau elemen kosong.

Tag HTML Vs Elemen

Secara teknis, elemen HTML adalah kumpulan tag awal, atributnya, tag akhir, dan semua yang ada di antaranya. Di sisi lain tag HTML (baik pembukaan atau penutupan) digunakan untuk menandai awal atau akhir elemen, seperti yang Kalian lihat pada ilustrasi di atas.

Namun, dalam penggunaan umum istilah elemen HTML dan tag HTML dapat dipertukarkan yaitu tag adalah elemen adalah tag. Demi kesederhanaan situs web ini, istilah "tag" dan "elemen" digunakan untuk arti yang sama — karena akan mendefinisikan sesuatu di halaman web Kalian.

Ketidakpekaan Huruf Besar dalam Tag dan Atribut HTML

Dalam HTML, tag dan nama atribut tidak peka huruf besar/kecil (tetapi sebagian besar nilai atribut peka huruf besar/kecil). Artinya tag <P>, dan tag <p> mendefinisikan hal yang sama dalam HTML yaitu paragraf.

Namun dalam XHTML mereka peka huruf besar/kecil dan tag <P> berbeda dari tag <p>.

<p>Ini adalah baris paragraf.</p>
<p>Ini juga baris paragraf yang valid.</p>

TIP

Sebaiknya gunakan huruf kecil untuk tag dan nama pengaitan dalam HTML, karena dengan melakukan ini dapat membuat dokumen lebih sesuai untuk peningkatan di masa mendatang.

Elemen HTML Kosong

Elemen kosong (juga disebut menutup sendiri atau elemen batal) bukan tag penampung — artinya, Kalian tidak dapat menulis <hr>beberapa konten</hr> atau <br>beberapa konten</br>.

Contoh khas dari elemen kosong, adalah elemen <br>, yang mewakili jeda baris. Beberapa elemen kosong umum lainnya adalah <img>, <input>, <link>, <meta>, <hr>, dll.

<p>
  Paragraf ini mengandung <br />
  jeda baris.
</p>
<img src="images/sky.jpg" alt="Cloudy Sky" />
<input type="text" name="username" />

CATATAN

Dalam HTML, elemen self-closing ditulis hanya sebagai <br>. Dalam XHTML, elemen yang menutup sendiri membutuhkan spasi dan garis miring, seperti <br />.

Elemen HTML Bersarang

Sebagian besar elemen HTML dapat berisi sejumlah elemen lebih lanjut (kecuali elemen kosong), yang, pada gilirannya, terdiri dari tag, atribut, dan konten atau elemen lainnya.

Contoh berikut menunjukkan beberapa elemen yang bersarang di dalam elemen <p>.

<p>Ini beberapa teks <b>tebal</b>.</p>
<p>Ini beberapa teks yang <em>ditekankan</em>.</p>
<p>Berikut adalah beberapa teks <mark>yang disorot</mark>.</p>

TIP

Menempatkan satu elemen di dalam elemen lain disebut bersarang. Elemen bersarang, juga disebut elemen anak, dapat menjadi elemen induk juga jika elemen lain bersarang di dalamnya.

Tag HTML harus bersarang dalam urutan yang benar. Mereka harus ditutup dalam urutan kebalikan dari bagaimana mereka didefinisikan, itu berarti tag terakhir yang dibuka harus ditutup terlebih dahulu.

<p><strong>Tag ini bertumpuk dengan benar.</strong></p>
<p><strong>Tag ini tidak bertumpuk dengan benar.</p></strong>

Menulis Komentar dalam HTML

Komentar biasanya ditambahkan dengan tujuan agar kode sumber lebih mudah dipahami. Ini dapat membantu pengembang lain (atau Kalian di masa mendatang ketika Kalian mengedit kode sumber) untuk memahami apa yang Kalian coba lakukan dengan HTML. Komentar tidak ditampilkan di browser.

Komentar HTML dimulai dengan <!--, dan diakhiri dengan -->, seperti yang ditunjukkan pada contoh di bawah ini:

<!-- Ini adalah komentar HTML -->
<!-- Ini adalah komentar HTML multi-baris
     yang membentang di lebih dari satu baris -->
<p>Ini adalah teks biasa.</p>

Kalian juga dapat mengomentari bagian dari kode HTML Kalian untuk tujuan debugging, seperti yang ditunjukkan di sini:

<!-- Menyembunyikan gambar ini untuk percobaan
<img src="gambar/smiley.png" alt="Smiley">
-->

Jenis Elemen HTML

Elemen dapat ditempatkan dalam dua kelompok berbeda: elemen level blok dan level inline. Yang pertama membentuk struktur dokumen, sedangkan yang kedua mendandani isi blok.

Juga, elemen blok menempati 100% dari lebar yang tersedia dan ditampilkan dengan jeda baris sebelum dan sesudah. Padahal, elemen sebaris hanya akan memakan ruang sebanyak yang dibutuhkan.

Elemen level blok yang paling umum digunakan adalah <div>, <p>, <h1> hingga <h6>, <form>, <ol>, <ul>, <li>, dan seterusnya. Sedangkan elemen inline-level yang umum digunakan adalah <img>, <a>, <span>, <strong>, <b>, <em>, <i>, <code>, <input>, <button>, dll.

Kalian akan belajar tentang elemen-elemen ini secara rinci dalam bab-bab mendatang.

CATATAN

Elemen level blok tidak boleh ditempatkan di dalam elemen level inline. Misalnya, elemen <p> tidak boleh ditempatkan di dalam elemen <b>.