Pembahasan Soal Element pada HTML

Oke pada artikel kali ini saya akan membahas tentang Element pada HTML, Setelah kemarin kita telah membahas tentang Tag pada HTML. Oke langsung saja ya!

 

Element Pada HTML

Element pada HTML merupakan isi atau objek yang berada di dalam tag pembuka dan tag penutup, perhatikan contoh script program dibawah ini:

Dari contoh program diatas “H2” adalah heading dan kalimat “Isi Dari Element “ merupakan element dari H2.

Didalam sebuah elemen HTML ada yang disebut dengan elemen HTML bersarang, apa  yang disebut dengan elemen HTML  bersarang itu?

Elemen HTMl bersarang adalah dimana didalam sebuah elemen terdapat elemen yang lainnya. Contoh:

Jadi, pada script perogram diatas terdapat 2 buah elemen yang pertama elemen dengan tag HEAD dan yang kedua elemen dengan tag BODY. Lalu didalam elemen HEAD terdapat elemen TITLE. Dan juga didalam elemen BODY terdapat H1 dan P, lalu didalam elemen P terdapat elemen STRONG. Penulisan elemen seperti itulah yang dinamakan dengan elemen bersarang.

 

Hubungan Antar Elemen HTML

Coba lita lihat pada penulisan elemen HTML bersarang diatas, terdapat beberapa elemen yang menjorok kedalam, dan ada juga beberapa elemen yang dibuat satu garis atau inline, lalu apa yang membedakan dalam penulisan HTML tersebut? Dan  juga kapan kita harus memberikan jarak menjorok kedalam, dan kapan kita harus membuat satu jajar?. Berikut adalah jenis-jenis hubungan yang  mungkin terjadi antar elemen pada HTML, yaitu sebagai berikut:

 

1. Parent Element

Parent elemen adalah elemen yang secara langsung memiliki elemen lain didalamanya. Contohnya seperti ini:

Pada kode diatas dapat kita lihat bahwa elemen HTML merupakan parent dari elemen HEAD dan BODY, elemen HEAD merupakan parent dari elemen TITLE, dan elemen BODY merupakan parent dari elemen H1 dan P. Namun, pada contoh script diatas walaupun elemen STRONG berada didalam elemen BODY, namun elemen BODY tidak disebut sebagai parent dari elemen STRONG, karena elemen STRONG tersebut tidak secara langsung berada didalam elemen BODY.

 

2. Child Element

Child elemen adalah elemen yang secara langsung berada didalam sebuah elemen tertentu, atau bisa disebut sebagai sebuah elemen yang berada didalam sebuah elemen parent. Contoh:

Pada script program diatas elemen HEAD dan BODY merupakan elemen child dari elemen HTML, elemen TITLE merupakan elemen child elemen dari HEAD, elemen H1 dan P merupakan elemen child dari BODY, namun elemen STRONG bukan elemen child dari BODY melainkan elemen child dari P.

 

3. Sibling Element

Sibling elemen adalah sebuah elemen yang memilki parent elemen yang sama dengan elemen yang lainnya dan berada pada tingkatan yang sama. Contoh:

Pada script tersebut yang disebut sebagai sibling elemen adalah H1 terhadap P atau sebaliknya, namun tidak berlakuu untuk elemen STRONG, karena elemen STRONG berada didalam elemen P.

 

4. Ancestor Element

Ancestor elemen adalah elemen yang didalamnya terdapat elemen-elemen yang lain. Namun berbeda dengan parent elemen, ancestor elemen tidak secara langsung berada diatasnya. Contoh:

Jadi, pada script diatas HTML masih termasuk ancestor elemen dari HEAD, BODY, H1, P, dan STRONG. Jadi, intinya semua yang ada diatas sebuah elemen maka disebut sebagai ancestor elemen dari elemen yang bersangkutan.

 

5. Descendant Elemen

Descendant elemen adalah sebuah elemen dari elemen-elemen lain yang ada mengandungnya. Contoh:

Dalam contoh diatas, STRONG merupakan descendant elemen dari P, BODY dan HTML, namun bukan termasuk descendant elemen dari H1, TITLE dan HEAD karena tidak dalam kandungan yang sama.