Hubungan Antara Elemen HTML

Berikut ini ada 5 jenis hubungan yang mungkin terjadi antar elemen dalam HTML, yaitu sebagai berikut:

1. Parent Element

<html> //Parent Elemen dari HEAD dan BODY
     <head> //Paret Elemen dari TITLE
          <title>...</title>
     </head>
     <body> //Parent Elemen dari H1 dan P
          <h1>...</h1>
          <p>...<strong>...</strong>...</p> //Elemen P merupakan Parent Elemen dari elemen STRONG
     </body>
</html>

Parent elemen adalah elemen yang secara langsung memiliki elemen lain di dalamnya, disebut sebagai parent element dari elemen yang di dalamnya. Pada contoh kode di atas elemen HTML merupakan parent dari elemen BODY. Dan elemen BODY merupakan parent element dari elemen H1 dan P. Dan elemen P merupakan parent element dari elemen STRONG. Pada contoh di atas walaupun elemen STRONG berada di dalam elemen BODY, tapi BODY tidak disebut sebagai parent element dari STRONG, karena tidak secara langsung berada di dalam BODY.

2. Child Element

<html>
     <head> //Child Elemen dari HTML
          <title>...</title> //Child Elemen dari HEAD
     </head>
     <body> //Child Elemen dari HTML
          <h1>...</h1> //Child Elemen dari BODY
          <p>...<strong>...</strong>...</p> //Elemen P merupakan Child Elemen dari BODY dan Elemen STRONG merupakan Child Elemen dari P
     </body>
</html>

Child elemen adalah elemen yang secara langsung berada di dalam sebuah elemen tertentu, maka element tersebut disebut sebagai child element dari elemen yang menaunginya. Pada contoh kode di atas elemen HEAD dan BODY merupakan child element dari elemen HTML, Elemen TITLE merupakan child elemen dari elemen HEAD, Elemen H1 dan P merupakan child elemen dari elemen BODY dan Elemen STRONG merupakan child elemen dari elemen P.

3. Sibling Element

<html>
     <head>
          <title>...</title>
     </head>
     <body>
          <h1>...</h1> //Sibling Elemen
          <p>...<strong>...</strong>...</p> //Elemen P adalah Sibling Elemen
     </body>
</html>

Sibling element adalah elemen yang memiliki parent element yang sama dengan elemen lainnya dan berada dalam tingkatan yang sama. Adapun dalam contoh di atas maka yang disebut sibling element adalah H1 terhadap P atau sebaliknya, namun tidak berlaku untuk elemen STRONG, karena sebenarnya elemen STRONG itu berada didalam elemen P.

4. Ancestor Element

<html> //Ancestor Elemen dari HEAD, TITLE, BODY, H1, P dan Strong
     <head> //Ancestor Elemend dari TITLE
          <title>...</title>
     </head>
     <body> //Ancestor Elemen dari H1, P dan STRONG
          <h1>...</h1>
          <p>...<strong>...</strong>...</p>
     </body>
</html>

Ancestor elemen adalah elemen yang di dalamnya terdapat elemen-elemen lain, maka elemen tersebut merupakan ancestor element dari elemen yang ada di dalamnya. Berbeda dengan parent element, ancestor element tidak mesti secara langsung berada di atasnya. Dalam contoh di atas HTML masih termasuk ancestor element dari HEAD, TITLE, BODY, H1, P dan STRONG. Intinya semua yang ada di atas sebuah elemen maka disebut sebagai ancestor element dari elemen yang bersangkutan.

Read More :  Perbedaan Tugas Web Designer, Web Developer dan Web Master

5. Descendant Element

<html>
     <head>
          <title>...</title>
     </head>
     <body>
          <h1>...</h1>
          <p>...<strong>...</strong>...</p> //Elemen Strong merupakan Descendant Elemen
     </body>
</html>

Descendant elemen adalah elemen yang ada di dalam elemen lain, maka elemen tersebut merupakan descendant element dari elemen-elemen yang ada mengandungnya, walaupun tidak harus secara langsung. Dalam contoh kode di atas, maka STRONG merupakan descendant element dari P, BODY dan HTML. Tapi STRONG tidak termasuk descendant element dari H1, TITLE dan HEAD karena tidak dalam kandungan yang sama.

Leave a Reply

Your email address will not be published. Required fields are marked *