Elemen HTML


Seperti yang telah kalian ketahui bahwa setiap elemen HTML terdiri dari tag pembuka dan tag penutup, meskipun ada beberapa elemen yang hanya menggunakan tag pembuka seperti tag <input>, <img>, <br>, dll. Sebuah konten diletakkan di antara tag pembuka dan tag penutup :

<nama tag>Isi konten…</nama tag>

Elemen Bersarang

Kalian dapat menempatkan elemen ke dalam sebuah elemen lain atau disebut sebagai elemen bersarang. Sebagai sebuah contoh elemen dibawah ini :

<p>Tutorial HTML bahasa indonesia</p>

Kalian ingin membuat konten atau teks HTML menjadi tebal maka kalian dapat menambahkan elemen <b> atau <strong> ke dalam elemen <p>. Artinya terdapat sebuah elemen di dalam elemen, itulah kenapa HTML dikatakan sebagai elemen bersarang. Namun perlu kalian perhatikan pada bagian penutup tag, kalian harus menempatkan tag penutup dengan benar. Berikut adalah contoh elemen bersarang yang benar dan yang salah :

Benar :

<p>Tutorial <strong>HTML</strong> bahasa indonesia</p>

Salah :

<p>Tutorial <strong>HTML</p> bahasa indonesia</strong>

Elemen yang menjadi pembuka dan penutup yang di dalamnya terdapat elemen lain, sebagai contoh di atas adalah elemen <p>. Itu artinya kalian harus menutup elemen yang paling dalam terlebih dahulu sebelum menutup elemen yang paling luar. Kalian harus memerhatikan penutup tag yang benar, karena hasil yang di tampilkan halaman akan berbeda jika kalian salah menempatkan penutup elemen/tag.

Kategori elemen dalam HTML

Setiap elemen HTML memiliki sebuah nilai tampilan standar, tergantung pada jenis elemennya. Nilai tampilan standar untuk sebagian besar elemen adalah block-level element (satu baris) dan inline element (sejajar).

Contoh :

<div>Hallo</div>
<div>Dunia</div>

Beberapa contoh block-level elements dalam HTML :
<div>
<article>
<header>
<footer>
<section>

Contoh :

<span>Hallo</span>
<span>Dunia</span>

Beberapa contoh inline elements dalam HTML :
<span>
<button>
<a>
<em>
<small>
<label>

Elemen Kosong

Tidak semua elemen HTML dimulai dengan tag pembuka, isi konten, lalu tag penutup. Beberapa diantaranya hanya memiliki tag pembuka saja tanpa adanya konten dan tag penutup. Elemen tersebut biasanya digunakan untuk menyisipkan / menanamkan sesuatu ke dalam halaman. Seperti menyisipkan gambar (<img>), membuat baris baru (<br>), atau garis (<hr>). Elemen – elemen tersebut sering disebut sebagai elemen kosong (Empty Elements).