Mengenal Konsep Elemen HTML dan Fungsinya
Konsep Elemen HTML dan Fungsinya. Setelah sebelumnya Agan berkenalan dengan konsep dasar HTML, sekarang waktunya Agan cari tahu soal konsep elemen HTML. Sebab, konsep ini penting untuk dipahami dan dikuasai ketika Agan belajar soal pengembangan web. Apalagi, script HTML sangat berkaitan erat bahkan ketika Agan berbicara soal CSS, JavaScript, maupun PHP saat membangun sebuah web.
Oh iya, supaya Agan lebih mudah memahami elemen HTML dan tidak keliru saat menjalankannya lewat script program, ingat-ingat kembali soal TAG HTML juga, ya!
Mengenal Konsep Elemen HTML
Elemen HTML merupakan kode HTML yang dimulai dari TAG pembuka sampai TAG penutup, dengan konten yang diisi di dalamnya. Bingung? Kalau iya, simak contoh kode berikut ini:
Di dalam contoh tersebut, Agan bisa perhatikan kalau <tagname> adalah TAG pembuka, dan </tagname> adalah TAG penutup. Sementara itu, yang ada di antara keduanya adalah isi atau konten. Kemudian, keseluruhan kode tersebut mulai dari <tagname> sampai </tagname> adalah elemen HTML.
Coba simak contoh lain berikut ini:
Berdasarkan contoh tersebut, mana yang disebut TAG pembuka, TAG penutup, dan elemen? Jawabannya adalah <p> merupakan TAG pembuka, </p> adalah TAG penutup, dan elemen merupakan keseluruhan kode sejak <p> sampai </p>, atau bisa juga disebut elemen P karena dibangun dari TAG P. Kalau Agan ingat-ingat lagi, TAG P digunakan saat membuat paragraf.
Meskipun elemen pada dasarnya dibagun sejak TAG pembuka hingga TAG penutup, sebenarnya ada beberapa elemen HTML yang terdiri atas TAG pembuka saja, lho! Jadi, tidak ada TAG penutupnya. Contohnya seperti TAG IMG, yang bisa Agan lihat contohnya berikut ini:
Walaupun tidak punya konten dan TAG penutup, TAG IMG seperti di atas sudah bisa disebut sebagai elemen HTML, lho! Contoh lain dari pengecualian ini adalah TAG BR, INPUT, dan HR.
Elemen HTML Bersarang
Di samping itu, ada juga kemungkinan besar bagi elemen HTML untuk nested alias bersarang. Maksudnya, sebuah elemen HTML mempunyai elemen lain di dalamnya, seperti contoh berikut ini:
Dalam contoh di atas, Agan bisa amati ada 4 elemen HTML di dalamnya: elemen HTML, BODY, H1, dan P. Kemudian, di dalam elemen HTML ada elemen BODY, yang di dalamnya masih terdapat dua elemen lain, yaitu elemen H1 dan P. Di dalam elemen P juga masih ada elemen STRONG. Inilah yang dimaksud dengan elemen HTML bersarang.
Hubungan Antar Elemen HTML
Di dalam elemen HTML, ada 5 jenis hubungan yang dapat terjadi antara satu sama lain, yaitu:
1. Parent Element, di mana sebuah elemen memiliki elemen lain secara langsung di dalamnya. Dari contoh di atas, elemen HTML adalah parent untuk elemen BODY, sementara elemen BODY adalah parent dari elemen H1 dan elemen P, dan elemen P adalah parent dari elemen STRONG.
2. Child Element, di mana sebuah elemen berada secara langsung di dalam elemen tertentu. Bisa dibilang child element adalah kebalikan dari parent element. Jadi, elemen BODY merupakan child element dari elemen HTML, dan seterusnya.
3. Sibling Element, di mana dua elemen atau lebih dengan satu parent element yang sama, sehingga berada di dalam tingkatan yang sama pula. Mengacu dari contoh di atas, maka hubungan sibling element dapat ditemukan antara H1 terhadap P, maupun sebaliknya.
4. Ancestor Element, yang mengacu pada sebuah elemen yang mengandung elemen-elemen lain. Ancestor element berbeda dengan parent element, karena elemen yang ada di dalamnya tidak harus langsung berada di dalamnya. Jadi, elemen HTML di dalam contoh di atas masih merupakan ancestor element untuk elemen H1, elemen P, maupun elemen STRONG.
5. Descendant Element, yang mengacu pada elemen-elemen yang terdapat di dalam sebuah elemen lain. Dengan begitu, elemen STRONG dalam contoh di atas adalah descendant element dari elemen P, BODY, dan STRONG. Tapi, elemen STRONG bukanlah descendant element dari H1.
Itulah rangkuman singkat soal elemen HTML. Semoga bisa membantu Agan belajar pemrograman, termasuk ketika belajar pemrograman sendiri secara otodidak, ya!
Oh iya, supaya Agan lebih mudah memahami elemen HTML dan tidak keliru saat menjalankannya lewat script program, ingat-ingat kembali soal TAG HTML juga, ya!
Mengenal Konsep Elemen HTML
Elemen HTML merupakan kode HTML yang dimulai dari TAG pembuka sampai TAG penutup, dengan konten yang diisi di dalamnya. Bingung? Kalau iya, simak contoh kode berikut ini:
<tagname>konten</tagname>
Di dalam contoh tersebut, Agan bisa perhatikan kalau <tagname> adalah TAG pembuka, dan </tagname> adalah TAG penutup. Sementara itu, yang ada di antara keduanya adalah isi atau konten. Kemudian, keseluruhan kode tersebut mulai dari <tagname> sampai </tagname> adalah elemen HTML.
Coba simak contoh lain berikut ini:
<p>Ini merupakan sebuah paragraf di dalam HTML.</p>
Berdasarkan contoh tersebut, mana yang disebut TAG pembuka, TAG penutup, dan elemen? Jawabannya adalah <p> merupakan TAG pembuka, </p> adalah TAG penutup, dan elemen merupakan keseluruhan kode sejak <p> sampai </p>, atau bisa juga disebut elemen P karena dibangun dari TAG P. Kalau Agan ingat-ingat lagi, TAG P digunakan saat membuat paragraf.
Meskipun elemen pada dasarnya dibagun sejak TAG pembuka hingga TAG penutup, sebenarnya ada beberapa elemen HTML yang terdiri atas TAG pembuka saja, lho! Jadi, tidak ada TAG penutupnya. Contohnya seperti TAG IMG, yang bisa Agan lihat contohnya berikut ini:
<img src=”Nama_File_Gambar.jpg”>
Walaupun tidak punya konten dan TAG penutup, TAG IMG seperti di atas sudah bisa disebut sebagai elemen HTML, lho! Contoh lain dari pengecualian ini adalah TAG BR, INPUT, dan HR.
Elemen HTML Bersarang
Di samping itu, ada juga kemungkinan besar bagi elemen HTML untuk nested alias bersarang. Maksudnya, sebuah elemen HTML mempunyai elemen lain di dalamnya, seperti contoh berikut ini:
<!DOCTYPE html>
<html>
<body>
<h1>Ini adalah Heading</h1>
<p>Ini adalah paragraf dengan <strong>teks tebal</strong> di dalamnya.</p>
</body>
</html>
Dalam contoh di atas, Agan bisa amati ada 4 elemen HTML di dalamnya: elemen HTML, BODY, H1, dan P. Kemudian, di dalam elemen HTML ada elemen BODY, yang di dalamnya masih terdapat dua elemen lain, yaitu elemen H1 dan P. Di dalam elemen P juga masih ada elemen STRONG. Inilah yang dimaksud dengan elemen HTML bersarang.
Hubungan Antar Elemen HTML
Di dalam elemen HTML, ada 5 jenis hubungan yang dapat terjadi antara satu sama lain, yaitu:
1. Parent Element, di mana sebuah elemen memiliki elemen lain secara langsung di dalamnya. Dari contoh di atas, elemen HTML adalah parent untuk elemen BODY, sementara elemen BODY adalah parent dari elemen H1 dan elemen P, dan elemen P adalah parent dari elemen STRONG.
2. Child Element, di mana sebuah elemen berada secara langsung di dalam elemen tertentu. Bisa dibilang child element adalah kebalikan dari parent element. Jadi, elemen BODY merupakan child element dari elemen HTML, dan seterusnya.
3. Sibling Element, di mana dua elemen atau lebih dengan satu parent element yang sama, sehingga berada di dalam tingkatan yang sama pula. Mengacu dari contoh di atas, maka hubungan sibling element dapat ditemukan antara H1 terhadap P, maupun sebaliknya.
4. Ancestor Element, yang mengacu pada sebuah elemen yang mengandung elemen-elemen lain. Ancestor element berbeda dengan parent element, karena elemen yang ada di dalamnya tidak harus langsung berada di dalamnya. Jadi, elemen HTML di dalam contoh di atas masih merupakan ancestor element untuk elemen H1, elemen P, maupun elemen STRONG.
5. Descendant Element, yang mengacu pada elemen-elemen yang terdapat di dalam sebuah elemen lain. Dengan begitu, elemen STRONG dalam contoh di atas adalah descendant element dari elemen P, BODY, dan STRONG. Tapi, elemen STRONG bukanlah descendant element dari H1.
Itulah rangkuman singkat soal elemen HTML. Semoga bisa membantu Agan belajar pemrograman, termasuk ketika belajar pemrograman sendiri secara otodidak, ya!
Post a Comment for "Mengenal Konsep Elemen HTML dan Fungsinya"
Untuk menyisipkan kode pendek, gunakan <i rel="code"> ... KODE ... </i>
Untuk menyisipkan kode panjang, gunakan <i rel="pre"> ... KODE ... </i>
Untuk menyisipkan gambar, gunakan <i rel="image"> ... URL GAMBAR ... </i>