<strong>Pengertian Elemen pada HTML | Belajar HTML</strong> - 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:
<p style="text-align: center"><strong>BACA JUGA : <a href="https://www.codepolitan.com/tutorial/pengenalan-html5-belajar-html">Pengenalan HTML5 | Belajar HTML</a></strong></p>

<table class="table table-bordered" style="height: 121px" width="749"><caption>Konsep Elemen pada HTML</caption>
<tbody>
<tr>
<th>Tag Pembuka</th>
<th>Konten Elemen</th>
<th>Tag Penutup</th>
</tr>
<tr>
<td><code>&lt;nama_tag&gt;</code></td>
<td>Isi dari konten</td>
<td><code>&lt;/nama_tag&gt;</code></td>
</tr>
<tr>
<td><code>&lt;nama_tag/&gt;</code></td>
<td> -</td>
<td>-</td>
</tr>
</tbody>
</table>
<table class="table table-bordered" style="height: 121px" width="749"><caption>Contoh Elemen pada HTML</caption>
<tbody>
<tr>
<th>Tag Pembuka</th>
<th>Konten Elemen</th>
<th>Tag Penutup</th>
</tr>
<tr>
<td><code>&lt;h1&gt;</code></td>
<td>Isi dari konten</td>
<td><code>&lt;/h1&gt;</code></td>
</tr>
<tr>
<td><code>&lt;IMG/&gt;</code></td>
<td> -</td>
<td>-</td>
</tr>
</tbody>
</table>
Secara umum penulisan tag pada html itu berpasang- pasangan dimulai dengan <code>&lt;tag_pembuka&gt;</code> Isi dari konten<code>&lt;/tag_penutup&gt;</code>,  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 <code>&lt;nama_tag/&gt;</code> tag tersebut merupakan contoh dari elemen HTML yang tidak memiliki tag penutup atau disebut dengan <em>Void Element.</em>

Dari tabel konsep dapat kita lihat terdapat elemen <code>&lt;nama_tag&gt;</code>Isi dari konten<code>&lt;/nama_tag&gt; </code>untuk penerapan dalam tag yang sebenarnya dapat dilihat pada tabel contoh terdapat elemen <code>&lt;H1&gt;</code>Isi dari konten<code>&lt;/H1&gt;</code>. Sedangkan untuk <em>Void Element</em> dari tabel konsep dapat kita lihat elemen <code>&lt;nama_tag/&gt;</code> untuk penerapan dalam tag yang sebenarnya dapat dilihat pada tabel contoh terdapat elemen <code>&lt;IMG/&gt;</code><em>.</em>

<strong>Contoh penggunaan <em>Void Element</em></strong>
<pre>&lt;img src="url_gambar.png"/&gt;</pre>
<strong>Penjelasan</strong>

Dari code di atas elemen yang digunakan adalah elemen "IMG", dimulai dari tag pembuka <code>&lt;img&gt;</code> dan diakhiri oleh tanda " <code>/&gt; </code>" didalam tag tersebut, merupakan sebuah kesatuan elemen dan elemen "IMG" ini digunakan untuk menampilkan file berupa gambar.

<strong>Contoh penggunaan elemen dasar</strong>
<pre>&lt;h1&gt; Isi dari konten paragraf &lt;/h1&gt;</pre>
<strong>Penjelasan</strong>

Dari code di atas elemen yang digunakan adalah elemen "H1", dimulai dari tag pembuka <code>&lt;h1&gt;</code> isi, hingga tag penutup <code>&lt;/h1&gt;</code> , 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 :
<ul>
 	<li><a href="https://www.codepolitan.com/tutorial/belajar-html-cara-membuat-paragraf/">Belajar HTML – Cara Membuat Paragraf</a></li>
 	<li><a href="https://www.codepolitan.com/tutorial/belajar-html-cara-membuat-heading/">Belajar HTML – Cara Membuat Heading</a></li>
</ul>
<h2>Pengertian Elemen HTML Bersarang</h2>
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.

<strong>Contoh penulisan elemen HTML bersarang yang SALAH:</strong>
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
     &lt;head&gt;
          &lt;title&gt;Elemen Bersarang&lt;/title&gt;
     <del>&lt;body&gt;</del>
     <del>&lt;head&gt;</del>
          &lt;h1&gt; Sebuah Heading &lt;/h1&gt;
          &lt;p&gt;Sebuah Paragraf dengan &lt;strong&gt;tulisan tebal<del>&lt;/p&gt;</del> di dalamnya.
     <del>&lt;/body&gt;</del>
                                    <del>&lt;/strong&gt;</del>
&lt;/html&gt;</pre>
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.

<strong>Contoh penulisan elemen HTML bersarang yang BENAR:</strong>
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
     &lt;head&gt;
          &lt;title&gt;Elemen Bersarang&lt;/title&gt;
     &lt;/head&gt;
     &lt;body&gt;
          &lt;h1&gt; Sebuah Heading &lt;/h1&gt;
          &lt;p&gt;Sebuah Paragraf dengan &lt;strong&gt;tulisan tebal&lt;/strong&gt; di dalamnya.&lt;/p&gt;
     &lt;/body&gt;
&lt;/html&gt;</pre>
Ingat setiap elemen wajib hukumnya untuk menggunakan tag penutup, jika elemen tersebut menggunakan tag pembuka, agar tidak terjadi saling timpah dan timpang.
<p style="text-align: center"><strong>BACA JUGA : <a href="https://www.codepolitan.com/12-gaya-indentasi-dalam-pemrograman/">12 Gaya Indentasi dalam Pemrograman</a></strong></p>
<strong>Contoh hasil tampilan code diatas :</strong>

[caption id="attachment_9929" align="alignnone" width="350"]<img class="wp-image-9929 size-medium" src="https://www.codepolitan.com/wp-content/uploads/2016/05/hasil-elemen-bersarang-350x302.png" alt="hasil elemen bersarang" width="350" height="302" /> Hasil code elemen bersarang[/caption]

<strong>Penjelasan elemen HTML bersarang</strong>
<pre>&lt;html&gt;
     &lt;head&gt;...&lt;/head&gt;
     &lt;body&gt;...&lt;/body&gt;
&lt;/html&gt;</pre>
Pada contoh diatas dapat dilihat elemen HTML memiliki 2 buah elemen didalamnya yaitu elemen HEAD dan BODY.
<pre>&lt;head&gt;
     &lt;title&gt;...&lt;/title&gt;
&lt;/head&gt;</pre>
Didalam elemen HEAD terdapat elemen TITLE.
<pre>&lt;body&gt;
     &lt;h1&gt;...&lt;/h1&gt;
     &lt;p&gt;...&lt;strong&gt;...&lt;/strong&gt;...&lt;/p&gt;
&lt;/body&gt;</pre>
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.
<h2>Hubungan Antara Elemen HTML</h2>
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:

<strong>1. Parent Element</strong>
<pre>&lt;html&gt; //Parent Elemen dari HEAD dan BODY
     &lt;head&gt; //Paret Elemen dari TITLE
          &lt;title&gt;...&lt;/title&gt;
     &lt;/head&gt;
     &lt;body&gt; //Parent Elemen dari H1 dan P
          &lt;h1&gt;...&lt;/h1&gt;
          &lt;p&gt;...&lt;strong&gt;...&lt;/strong&gt;...&lt;/p&gt; //Elemen P merupakan Parent Elemen dari elemen STRONG
     &lt;/body&gt;
&lt;/html&gt;</pre>
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.

<strong>2. Child Element</strong>
<pre>&lt;html&gt;
     &lt;head&gt; //Child Elemen dari HTML
          &lt;title&gt;...&lt;/title&gt; //Child Elemen dari HEAD
     &lt;/head&gt;
     &lt;body&gt; //Child Elemen dari HTML
          &lt;h1&gt;...&lt;/h1&gt; //Child Elemen dari BODY
          &lt;p&gt;...&lt;strong&gt;...&lt;/strong&gt;...&lt;/p&gt; //Elemen P merupakan Child Elemen dari BODY dan Elemen STRONG merupakan Child Elemen dari P
     &lt;/body&gt;
&lt;/html&gt;</pre>
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.

<strong>3. Sibling Element</strong>
<pre>&lt;html&gt;
     &lt;head&gt;
          &lt;title&gt;...&lt;/title&gt;
     &lt;/head&gt;
     &lt;body&gt;
          &lt;h1&gt;...&lt;/h1&gt; //Sibling Elemen
          &lt;p&gt;...&lt;strong&gt;...&lt;/strong&gt;...&lt;/p&gt; //Elemen P adalah Sibling Elemen
     &lt;/body&gt;
&lt;/html&gt;</pre>
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.

<strong>4. Ancestor Element</strong>
<pre>&lt;html&gt; //Ancestor Elemen dari HEAD, TITLE, BODY, H1, P dan Strong
     &lt;head&gt; //Ancestor Elemend dari TITLE
          &lt;title&gt;...&lt;/title&gt;
     &lt;/head&gt;
     &lt;body&gt; //Ancestor Elemen dari H1, P dan STRONG
          &lt;h1&gt;...&lt;/h1&gt;
          &lt;p&gt;...&lt;strong&gt;...&lt;/strong&gt;...&lt;/p&gt;
     &lt;/body&gt;
&lt;/html&gt;</pre>
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.

<strong>5. Descendant Element</strong>
<pre>&lt;html&gt;
     &lt;head&gt;
          &lt;title&gt;...&lt;/title&gt;
     &lt;/head&gt;
     &lt;body&gt;
          &lt;h1&gt;...&lt;/h1&gt;
          &lt;p&gt;...&lt;strong&gt;...&lt;/strong&gt;...&lt;/p&gt; //Elemen Strong merupakan Descendant Elemen
     &lt;/body&gt;
&lt;/html&gt;</pre>
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 <em>keep watch and learn at</em> Code Politan.
<h2>Referensi Pengertian Elemen pada HTML :</h2>
<ul>
 	<li><a href="http://www.tutorialspoint.com/html/html_elements.htm">www.tutorialspoint.com</a></li>
 	<li><a href="http://www.w3schools.com/html/html_elements.asp">www.w3schools.com</a></li>
 	<li><a href="https://www.codepolitan.com/tutorial/memahami-konsep-elemen-html/">www.codepolitan.com</a></li>
</ul>

Pengertian Elemen pada HTML | Belajar HTML

GenAI Video Fest adalah ajang kompetisi video kreatif yang diselenggarakan oleh CODEPOLITAN bekerjasama dengan Alibaba Cloud.

Kami menantang kreator, tech-enthusiast, dan siapa saja untuk mendobrak batas imajinasi menggunakan teknologi Generative AI terbaru. Di sini, kamu wajib menggunakan WAN Model Studio dari Alibaba Cloud sebagai tools utama untuk menghasilkan karya videomu (bisa dikombinasikan dengan tools editing lainnya).

Tunjukkan pada dunia bagaimana teknologi dan kreativitas bisa bersatu menciptakan karya visual yang berdampak!

Kategori Kompetisi
Pilih satu dari empat tema besar ini untuk karyamu:
* Humanity (Kemanusiaan): Cerita yang menyentuh hati, sosial, dan kepedulian antar sesama.
* Sports (Olahraga): Energi, semangat juang, dan dinamika dunia olahraga.
* Entertainment (Hiburan): Komedi, musik, video klip, atau parodi yang menghibur.
* Science (Sains): Visualisasi masa depan, teknologi, alam semesta, atau penemuan ilmiah.

Total Prize Pool senilai Rp 250.000.000 menunggu para pemenang!
* Top Winners Rewards: Uang Tunai, Alibaba Cloud Credits (hingga $500), Merchandise Eksklusif, dan SWAG CODEPOLITAN.
* Lucky Draw Event: Kesempatan menang hadiah tambahan bagi peserta yang beruntung.
* Massive Exposure: Karya terbaik akan di-highlight di media sosial CODEPOLITAN, Alibaba Cloud, dan channel industri kreatif lainnya.
* Special Access (Khusus Alumni RuangAI): Dapatkan 2 Token untuk klaim Kelas Spesialisasi di RuangAI secara gratis.

Jangan sampai ketinggalan tanggal penting ini:
* Pendaftaran & Submission: 23 Desember 2024 - 23 Januari 2025
* Penjurian (Judging Phase): 24 - 26 Januari 2025
* Pengumuman Pemenang: 27 Januari 2025

Cara Ikutan:
1. Daftar: Klik tombol "Daftar Sekarang" dan pastikan kamu punya akun RuangAI.
2. Join Discord: Masuk ke server Discord komunitas untuk info teknis dan diskusi.
3. Create: Buat video kreatifmu menggunakan WAN Model Studio (Alibaba Cloud) sesuai kategori pilihan.
4. Upload & Submit: Unggah videomu ke media sosial (IG/TikTok/YouTube) dan submit link karyamu di halaman submission RuangAI.

Ikuti kompetisi video Generative AI terbesar dari CODEPOLITAN dan Alibaba Cloud! Gunakan teknologi WAN Model Studio untuk menyulap ide liarmu menjadi visual memukau. Rebut total hadiah senilai Rp 250.000.000!

GenAI Video Fest

Beasiswa Basic Cybersecurity adalah program inisiatif dari JagoanSiber yang dirancang untuk membuka wawasan masyarakat luas tentang dunia keamanan digital. Program ini hadir untuk menjawab kebutuhan talenta keamanan siber yang tinggi, dimulai dengan membangun pemahaman fundamental yang kokoh.

Program ini berbentuk Kelas Online Belajar Mandiri (Self-Paced Learning) berbasis video. Peserta diberikan keleluasaan penuh untuk mengakses materi kapan saja dan di mana saja tanpa terikat jadwal, sehingga sangat fleksibel bagi pelajar, mahasiswa, maupun pekerja profesional.

Kelebihan utama program ini adalah aksesnya yang 100% GRATIS dan terbuka untuk siapa saja tanpa syarat latar belakang IT. Peserta akan dibimbing langsung oleh Mahrus Qusaery, seorang praktisi keamanan siber berpengalaman, yang akan mengupas tuntas materi dasar yang krusial.

Program beasiswa kelas online gratis untuk mempelajari dasar keamanan siber dari nol. Belajar mandiri berbasis video langsung dari praktisi ahli, Mahrus Qusaery.

Pengertian Elemen pada HTML | Belajar HTML

Learning

KelasFullstack

RuangAI

JagoanSiber

Baca Artikel Lainnya

Pengenalan HTML5 | Belajar HTML

Sejarah dan Perkembangan HTML5 | Belajar HTML

Pengertian Elemen pada HTML | Belajar HTML