Tutorial HTML - Element HTML

Hallo teman-teman Patner Coding semuanya. Kali ini Patner Coding akan membahas tentang Elemen Pada HTML, Nah pasti kalian ada juga yang bertanya-tanya dalam hati, Apa itu elemen pada html?, Bagaimana cara menggunakan elemen di html?. Maka dari itu Patner Coding akan membahasnya satu persatu agar kalian mengerti, langsung aja kita bahas Elemen Pada HTML dibawah ini.

---

Pengertian Elemen Pada HTML

Elemen pada html merupakan sebuah susunan dari tag pembuka sampai tag penutup, Seperti ini : , , , Ada juga elemen html yang berdiri sendiri ( Void Element ). Void Element merupakan sebuah Elemen yang tidak memiliki tag akhir, seperti elemen .

---

Konsep Elemen pada Html

No	Start Tag	Element Content	End Tag
1	<name_tag>	Content	<name_tag>
2	<name_tag />	-	-

Bisa kita lihat dari konsep di atas, bahwa yang nomor 1 memiliki tag pembuka, konten dan tag penutup, sedangkan nomor 2 memiliki tag pembuka tetapi tidak memiliki konten dan tag penutup, maka setelah name_tag kita kasih slash ( / ) untuk menutupnya.

Contoh Elemen Html

No	Start Tag	Element Content	End Tag
1	<p>	Content	</p>
2	<h1>	Content	</h1>
3	<br />	-	-
4	<hr />	-	-

Pada umumnya penulisan tag pada html meliputi , , , bisa kita lihat di contoh nomor 1-2. Sedangkan Void Element ( elemen kosong ) tidak memiliki dan , maka dari itu untuk menutup elemen tersebut kita dapat menambahkan slash ( / ) di belakang seperti nomor3-4. Inti dari Elemen pada html adalah adanya tag pembuka dan tag penutup untuk menutup sebuah program.

Contoh Void Element

No	Void Element
1	<img src="url_image" />
2	<br />
3	<hr />

Dari contoh Void Element diatas bisa dijelaskan untuk menutup tag Void Element kita hanya dengan menambahkan slash ( / ) di belakang tag tersebut.

Contoh Elemen Dasar

No	Start Tag	Element Content	End Tag
1	<p>	Ini adalah paragraf	</p>
2	<h1>	Ini adalah Heading	</h1>

Dari contoh di atas kita melihat elemen yang digunakan adalah dan , pada elemen kita melihat adanya , , dan , Dan pada pun sama seperti .

Baca juga : Tutorial HTML - Pengenalan HTML

---

Nested HTML Elements

Elemen Nested ( Elemen Bersarang ) adalah sebuah elemen yang berada dalam elemen, semua dokumen HTML terdiri dari elemen HTML yang disarangkan.

Contoh Nested HTML

See the Pen Element Nested by Ezra Yoanda Nicolas (@ezrayoandanicolas) on CodePen.

Penjelasan :

Pada contoh di atas menjelaskan bahwa :

Elemen mendefinisikan seluruh dokumen html dengan menggunakan dan yaitu : sebagai tag pembuka dan sebagai tag penutupnya. isi elemen lainnya adalah elemen yang berada dalam .

Elemen mendefinisikan seluruh dokumen body dengan menggunakan dan yaitu : sebagai tag pembuka dan sebagai tag penutupnya. Didalam elemen terdapat 2 elemen lainnya yaitu : elemen dan yang berada dalam .

Elemen mendefinikan sebuah heading dengan menggunakan dan yaitu : sebagai tag pembuka dan sebagai tag penutupnya, dan isi kontenya adalah : Ini adalah sebuah heading.

Elemen mendefinikan sebuah paragraf dengan menggunakan dan yaitu : sebagai tag pembuka dan sebagai tag penutupnya, dan isi kontenya adalah : Ini adalah sebuah paragraf.

Beberapa elemen HTML akan ditampilkan dengan benar, meskipun kamu lupa dengan tag akhirnya, seperti :

contoh :
Ini adalah sebuah paragraf
Ini adalah sebuah paragraf

Pada code di atas akan menghasilkan output yang sama walaupun kita lupa menutup tag akhirnya.
Contoh di atas berfungsi di semua browser, karena tag penutup dianggap opsional.

Jangan bergantung pada ini. Ini mungkin menghasilkan hasil atau kesalahan yang tidak terduga jika Anda lupa tag akhir. Jadi usahakan semua tag pembuka di akhiri dengan tag penutup.

---

Gunakan Tag dengan Huruf Kecil

Tag HTML tidak peka huruf besar kecil, berbeda dengan JavaSctipt yang Case Sensitive, tetapi tidak pada html : berarti sama dengan .
Standar HTML5 tidak memerlukan tag huruf kecil, tetapi W3C merekomendasikan huruf kecil dalam HTML, dan menuntut huruf kecil untuk jenis dokumen yang lebih ketat seperti XHTML.

---

Next Post : Tutorial HTML - Mengenal Atribut HTML