Elemen di HTML: Contoh Code dan Jenisnya

Sebuah elemen pada HTML selalu didefinisikan oleh tag awal, konten, dan tag akhir.

Section Artikel

1 Elemen HTML
2 Elemen HTML Bersarang
3 Penjelasan dari Contoh
4 Jangan Pernah Melewatkan tag Akhir
5 Elemen Kosong HTML
6 HTML Tidak Case Sensitive
7 Tag HTML

Elemen HTML

Sebuah elemen pada HTML selalu didefinisikan oleh tag awal, konten, dan tag akhir. Contoh penulisannya:

<namatag>Konten disini…</namatag>

Elemen pada HTML adalah segala yang dimulai dari tag awal hingga tag akhir, contoh:

<h1>Heading pertamaku</h1>

<p>Paragraf pertamaku</p>

Tag awal	Konten	Tag akhir
<h1>	Heading pertamaku	</h1>
<p>	Paragraf pertamaku	</p>

Catatan: Beberapa elemen pada HTML tidak memiliki konten (seperti elemen <br>). Elemen-elemen ini disebut elemen kosong. Elemen kosong juga tidak memiliki tag akhir.

Elemen HTML Bersarang

Elemen HTML dapat bersarang yang berarti dalam suatu elemen dapat berisi elemen lain

Semua dokumen HTML terdiri dari elemen HTML bersarang.

Contoh berikut berisi empat elemen HTML <html>, <body>, <h1>, dan <p>.

<!DOCTYPE html>
<html>
<body>

<h1>Heading pertamaku</h1>
<p>Paragraf pertamaku</p>

</body>
</html>

Penjelasan dari Contoh

Elemen <html> adalah elemen root dan mendefinisikan seluruh dokumen adalah HTML.

Elemen ini memiliki tag awal <html> dan tag akhir </html>

Kemudian, di dalam elemen <html> terdapat elemen <body>.

<body>

<h1>Heading pertamaku</h1>
<p>Paragraf pertamaku</p>

</body>

Elemen <body> mendefinisikan badan dokumen HTML.

Elemen ini memiliki tag awal <body> dan tag akhir </body> .

Kemudian, di dalam elemen <body> terdapat dua macam elemen lainnya yaitu elemen <h1> dan <p>.

<h1>Heading pertamaku</h1>
<p>Paragraf pertamaku</p>

Elemen <h1> mendefinisikan sebuah heading dalam HTML.

Elemen ini memiliki tag awal <h1> dan tag akhir </h1>.

<h1>Heading pertamaku</h1>

Elemen <p> mendefinisikan sebuah paragraf dalam HTML.

Elemen ini memiliki tag awal <p> dan tag akhir </p>.

<p>Paragraf pertamaku.</p>

Jangan Pernah Melewatkan tag Akhir

Beberapa elemen pada HTML akan ditampilkan dengan benar, meskipun tidak ditambahkan tag akhir.

Contoh :

<!DOCTYPE html>
<html>
<body> 

<p>Ini paragraf.
<p>Ini paragraf.

</body>
</html>

Meskipun demikian jangan pernah mengandalkan hal ini! Hasil tidak diharapkan dan error dapat terjadi jika anda lupa menambahkan tag akhir.

Elemen Kosong HTML

Elemen HTML yang tidak dapat ditambahkan konten disebut dengan elemen kosong.

Tag <br> mendefinisikan jeda baris, dan merupakan elemen kosong tanpa tag penutup.

Contoh :

<!DOCTYPE html>
<html>
<body> 

<p>Ini adalah <br> sebuah paragraf dengan jeda baris</p>

</body>
</html>

HTML Tidak Case Sensitive

Tag HTML tidak peka huruf besar-kecil atau tidak case sensitive.

penulisan tag <p> artinya sama dengan <P>.

Standar HTML tidak menentukan penulisan tag dalam huruf kecil, tetapi direkomendasikan dalam penulisan dokumen HTML gunakan huruf kecil, dan akan berguna ketika kita hendak memakai jenis dokumen HTML yang lebih ketat seperti XHTML.

Tag HTML

Tag	Deskripsi
<html>	Mendefinisikan root dari dokumen HTML
<body>	Mendefinisikan badan dokumen
<h1> sampai <h6>	Mendefinisikan heading (judul) pada dokumen HTML

html