Elemen HTML

0

Back to: Pemrograman HTML

0

Elemen HTML

Dalam kesempatan kali ini, Anda akan belajar tentang elemen HTML. Seperti yang telah Anda pelajari di pelajaran sebelumnya (Pengenalan HTML), Elemen HTML didefinisikan dengan adanya tag awal, beberapa konten dan tag akhir. Elemen ini adalah semua bagian mulai dari tag awal sampai dengan tag akhir, sebagaimana yang Anda lihat di contoh berikut ini:

<h1>Judul Pertama Saya</h1>
<p>Paragraf pertama saya. <br>
Dan ini adalah baris baru dalam paragraf yang sama.
</p>

Tag awalKonten elemenTag akhir
<h1>Judul Pertama Saya</h1>
<p>Paragraf Pertama Saya.
<br> Dan ini adalah baris baru dalam paragraf yang sama.		</p>

Seperti yang Anda lihat pada contoh di atas, <br> adalah elemen yang tidak memiliki konten dan tidak memiliki tag akhir. Oleh karenanya, elemen ini disebut sebagai elemen kosong dan berfungsi untuk membuat baris baru dalam paragraf yang sama.

Elemen HTML Bersarang

Dalam dokumen HTML, elemen dapat bertingkat / bersarang, yang berarti elemen dapat mengandung elemen lain. Sesungguhnya, semua dokumen HTML mengandung elemen yang bersarang.

Contoh HTML Bersarang

Berikut contoh dari empat elemen, yaitu <html>, <body>, <h1>, dan <p>:

<!DOCTYPE html>
<html>
<body>

<h1>Judul Pertama Saya</h1>
<p>Paragraf pertama saya.</p>

</body>
</html>

Berikut penjelasan dari contoh tersebut:

  • Elemen <html> adalah elemen akar yang mendefinisikan seluruh dokumen. Elemen ini memiliki tag awal <html> dan tag akhir </html>.
  • Di dalam elemen <html> terdapat elemen <body> yang mendefinisikan badan dokumen dan memiliki tag awal <body> dan tag akhir </body>.
  • Di dalam elemen <body> terdapat dua elemen lain yaitu elemen <h1> dan <p>.
  • Elemen <h1> mendefinisikan judul dan memiliki tag awal <h1> dan tag akhir </h1>.
  • Elemen <p> mendefinisikan paragraf dan memiliki tag awal <p> dan tag akhir </p>.

Jangan Lupa Tag Akhir

Beberapa elemen masih akan menampilkan secara benar sekalipun Anda melupakan tag akhir, seperti contoh di bawah ini.

Contoh Tanpa Tag

<html>
<body>

<p>Ini adalah paragraf
<p>Ini juga paragraf

</body>
</html>

Namun demikian, jangan pernah mengandalkan hal ini. Hasil dan kesalahan yang tak terduga dapat terjadi ketika Anda melupakan tag akhir.

Elemen Kosong

Elemen tanpa konten disebut elemen kosong. Tag <br> mendefinisikan jeda baris (perpindahan ke baris baru dalam paragraf yang sama). Lihat contoh berikut ini.

Contoh Elemen Kosong

<p>Ini adalah sebuah paragraf dengan satu jeda baris, <br>yaitu baris baru dalam paragraf yang sama.</p>

Kapitalisasi

Tag HTML tidak mempedulikan kapiitalisasi. Tag <P> sama dengan tag <p>. Standar HTML tidak mengharuskan penggunaan huruf kecil, namun kami sarankan penggunaan huruf kecil di HTML, dan sangat kami sarankan untuk menggunakan huruf kecil untuk jenis dokumen yang lebih ketat seperti XHTML.

Referensi