0

0

0

share

0 Reaksi

0 Komentar

Pengertian Elemen pada HTML | Belajar HTML

Profile
Damar Yosa Aji•

25 Mei 2016

Pengertian Elemen pada HTML | Belajar HTML - Hallo teman- teman, kali ini kita akan membahas pertanyaan seputar, apa itu elemen pada html? apa yang dimaksud dengan elemen pada html? bagaimana penggunaan elemen pada html yang baik? dan apa pengertian elemen? pengertian Elemen pada HTML adalah susunan dari tag pembuka sampai tag penutup, elemen html didefinisikan oleh tag pembuka, lalu di lanjutkan oleh kontent lalu di akhiri oleh tag penutup. contoh:

BACA JUGA : Pengenalan HTML5 | Belajar HTML

Konsep Elemen pada HTML
Tag PembukaKonten ElemenTag Penutup
<nama_tag>Isi dari konten</nama_tag>
<nama_tag/> --
Contoh Elemen pada HTML
Tag PembukaKonten ElemenTag Penutup
<h1>Isi dari konten</h1>
<IMG/> --
Secara umum penulisan tag pada html itu berpasang- pasangan dimulai dengan <tag_pembuka> Isi dari konten</tag_penutup>,  Jadi yang dimaksud dengan pengertian elemen pada HTML adalah satu blok code yang dimulai dari tag pembuka hingga tag penutup, namun ada juga tag yang dalam penulisannya berdiri sendiri seperti <nama_tag/> tag tersebut merupakan contoh dari elemen HTML yang tidak memiliki tag penutup atau disebut dengan Void Element.

Dari tabel konsep dapat kita lihat terdapat elemen <nama_tag>Isi dari konten</nama_tag> untuk penerapan dalam tag yang sebenarnya dapat dilihat pada tabel contoh terdapat elemen <H1>Isi dari konten</H1>. Sedangkan untuk Void Element dari tabel konsep dapat kita lihat elemen <nama_tag/> untuk penerapan dalam tag yang sebenarnya dapat dilihat pada tabel contoh terdapat elemen <IMG/>.

Contoh penggunaan Void Element

<img src="url_gambar.png"/>

Penjelasan

Dari code di atas elemen yang digunakan adalah elemen "IMG", dimulai dari tag pembuka <img> dan diakhiri oleh tanda " /> " didalam tag tersebut, merupakan sebuah kesatuan elemen dan elemen "IMG" ini digunakan untuk menampilkan file berupa gambar.

Contoh penggunaan elemen dasar

<h1> Isi dari konten paragraf </h1>

Penjelasan

Dari code di atas elemen yang digunakan adalah elemen "H1", dimulai dari tag pembuka <h1> isi, hingga tag penutup </h1> , merupakan sebuah kesatuan elemen dan elemen "H1" ini digunakan untuk membuat sebuah heading. Jika teman- teman ingin membuat tulisan heading atau membuat paragraf di HTML kalian bisa melihat tutorial :

Pengertian Elemen HTML Bersarang

Apa itu Elemen HTML bersarang? Apa yang di maksud dengan Elemen HTML bersarang? pengertian elemen HTML bersarang adalah dimana didalam sebuah elemen bisa di isi oleh element lain.

Contoh penulisan elemen HTML bersarang yang SALAH:

<!DOCTYPE html>
<html>
     <head>
          <title>Elemen Bersarang</title>
     <body>
     <head>
          <h1> Sebuah Heading </h1>
          <p>Sebuah Paragraf dengan <strong>tulisan tebal</p> di dalamnya.
     </body>
                                    </strong>
</html>

Perhatikan beberapa tag penutup di atas, penulisan seperti itu merupakan contoh yang salah, karena terdapat beberapa elemen dengan tag pembuka di tutup oleh elemen lain, yang bukan merupakan satu rumpun dengan elemennya.

Contoh penulisan elemen HTML bersarang yang BENAR:

<!DOCTYPE html>
<html>
     <head>
          <title>Elemen Bersarang</title>
     </head>
     <body>
          <h1> Sebuah Heading </h1>
          <p>Sebuah Paragraf dengan <strong>tulisan tebal</strong> di dalamnya.</p>
     </body>
</html>

Ingat setiap elemen wajib hukumnya untuk menggunakan tag penutup, jika elemen tersebut menggunakan tag pembuka, agar tidak terjadi saling timpah dan timpang.

BACA JUGA : 12 Gaya Indentasi dalam Pemrograman

Contoh hasil tampilan code diatas :
[caption id="attachment_9929" align="alignnone" width="350"]
hasil elemen bersarang
Hasil code elemen bersarang[/caption]

Penjelasan elemen HTML bersarang

<html>
     <head>...</head>
     <body>...</body>
</html>

Pada contoh diatas dapat dilihat elemen HTML memiliki 2 buah elemen didalamnya yaitu elemen HEAD dan BODY.

<head>
     <title>...</title>
</head>

Didalam elemen HEAD terdapat elemen TITLE.

<body>
     <h1>...</h1>
     <p>...<strong>...</strong>...</p>
</body>

Didalam elemen BODY terdapat elemen H1 dan P, didalam elemen P terdapat elemen STRONG. Penulisan Elemen yang seperti itulah yang dinamakan Elemen bersarang dan untuk penulisan setiap elemen yang berada didalam elemen lain lebih baik memberikan jarak menjorok kedalam namun tergantung pada hubungan antara elemen tersebut.

Hubungan Antara Elemen HTML

Jika kita lihat Elemen bersarang diatas terdapat beberapa elemen yang saling menjorok kedalam, dan ada juga elemen yang dibuat satu garis atau line apa yang membedakannya? kapan kita harus memberikan jarak menjorok kedalam, dan kapan kita harus membuat dalam satu line? 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.

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.

Oke, Pengenalan elemen pada HTML sudah selesai, kita akan sambung belajar HTMLnya pada kesempatan berikutnya, sampai ketemu lagi keep watch and learn at Code Politan.

Referensi Pengertian Elemen pada HTML :

0

0

0

share