21 Jan 2017

Belajar HTML : Elements


HTML Elements

Pada sebuah element HTML biasanya terdapat tag pembuka dan tag penutu, dengan konten yang di masukkan di antara kedua tag tersebut :

<namatag>isi konten ada di sini...</namatag>

Element HTML adalah semua bagian mulai dari tag pembuka sampai tag penutup :

<p>Ini paragraf pertamaku</p> 

Tag Pembuka Isi Element Konten Penutup
<h1> Ini Heading Pertamaku </h1>
<p> Ini paragraf pertamaku. </p>
<br>
Element HTML yang tidak memiliki konten disebut dengan element kosong. Element kosong tidak memiliki tag penutup, seperti element <br>.

Nested HTML

  • Element HTML dapat di buat nested (element yang di dalamnya ada element)
  • Semua dokuen HTML terdiri atas nested HTLM element
Berikut ini contoh yang berisi 4 element HTML :

Contoh :


<!DOCTYPE html>
<html>
<body>

<h1>Ini Heading Pertamaku.</h1>
<p>Ini paragraf pertamaku.</p>

</body>
</html> 

Output :

Output

Penjelasan :

  • Element <html> mendefinisikan seluruh dokumen.
  • Memiliki tag pembuka <html> dan tag penutup </html >.
  • Isi dari element adalah element HTML yang lainnya (Element <body>).

<html>
<body>

<h1>Ini Heading Pertamaku.</h1>
<p>Ini paragraf pertamaku.</p>

</body>
</html> 
  • Element <body> menerangkan badan dari dokumen
  • Memiliki tag pembuka <body> dan tag penutup </body>.
  • isi dari element adalah dua element HTML lainnya yaitu : <h1> dan <p>.

<body>

<h1>Ini Heading Pertamaku.</h1>
<p>Ini paragraf pertamaku.</p>

</body>
  • Element <h1> digunakan untuk membuat sebuah judul yang besar.
  • Memiliki tag pembuka <h1> dan tag penutup</h1>
  • isi konten dari Element adalah : Ini Heading Pertamaku.

<h1>Ini Heading Pertamaku.</h1>
  • Element <p> digunakan untuk membuat sebuah paragraf.
  • Memiliki tag pembuka <p> dan tag penutup <p>.
  • isi konten dari Element adalah : Ini paragraf pertamaku.

<p>Ini paragraf pertamaku.</p>

Jangan Lupa Tag Penutup

Beberapa element HTML akan di tampilkan dengan benar, bahka jika kamu melupakan tag penutupnya :

<html>
<body>

<p>Ini paragraf pertamaku.
<p>Ini paragraf pertamaku.

</body>
</html>
Contoh diatas akan dapat dijalankan di semua browser, karena tag penutup dianggap opsional.
Jika kamu lupa dengan tag penutup, maka mungkin saja hasilnya tidak seperti yang kamu inginkan atau bahkan malah error.

Element HTML Kosong

Element HTML yang tidak memiliki isi disebut dengan Element kosong.
<br> merupakan element kosong tanpa tag penutup.
Element kosong bisa "tertutup" dalam tag pembuka seperti ini : <br />.
HTML5 tidak mengharuskan Element kosong untuk tertutup. Tapi jika kamu ingin mevalidasinya dengan sangat ketat, atau jika kamu ingin membuat dokumen HTML mu dapat dibasa oleh XML parser, maka kamu harus menutup semua Element HTML dengan benar.

Gunakan Lowercase Tag

Tag - tag pada HTML tidak case sensitive: <P> berarti sama dengan <p>.
Standard HTML5  tidak mengharuskan lowercase tags, tapi W3C merekomendasikan untuk menggunakan lowecase tags di HTML, dan tuntutan lowecase untuk tipe dokumen yang ketat akan validasi seperti XHTML.
Kebanyakan Programmer / Web Developer menggunakan Lowercase Tag dalam dokumen HTML miliknya.