Elemen HTML ditulis tag pembuka dan tag penutup, sedangkan diantara tag pembuka dan penutup adalah konten
<tagname>content</tagname>
Elemen HTML adalah setiap tag dari tag pembuka sampai tag penutup.
<p>My first HTML paragraph.</p>
Catatan: Beberapa tag HTML tidak memiliki tag penutup, seperti tag <br> diatas.
Elemen HTML Bertingkat (Nested HTML)
Elemen HTML dapat bertingkat-tingkat atau bercabang-cabang yaitu elemen dapat berisikan elemen lain.
Contoh elemen bertingkat (Nested HTML)
<!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
Penjelasan Contoh HTML
- Elemen <html> mendefinisikan seluruh halaman/dokumen.
- Tag pembuka <html> dan tag penutup </html>
- Konten elemen merupakan elemen HTML seperti elemen <body>
<html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
Elemen <body> mendefinisikan ‘halaman body’.
Tag pembuka <body> dan tag penutup </body>.
Konten elemen diatas ada 2 elemen HTML, yaitu tag <h1> dan <p>.
<body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body>
- Elemen <h1> mendefinisikan ‘sebuah heading’.
- Tag pembuka <h1> dan tag penutup </h1>.
- Konten elemen adalah ‘My First Heading’.
<h1>My First Heading</h1>
- Elemen <p> mendefinisikan ‘sebuah paragraf’.
- Tag pembuka <p> dan tag penutup </p>.
- Konten elemennya adalah ‘My first paragrah’.
<p>My first paragraph.</p>
Jangan Lupa Tag Penutup
Beberapa elemen HTML akan menamilkan dengan tepat, bahkan jika kamu lupa dengan tag penutup.
Contoh Tanpa Tag Penutup
<html> <body> <p>This is a paragraph <p>This is a paragraph </body> </html>Contoh diatas akan berjalan di semua browser, karena tag penutup dianggap opsional.
Jangan pernah bergantung pada hal ini. Itu mungkin akan memberikan hasil yang tidak diharapkan atau terjadi error jika kamu lupa tag akhir.
Elemen HTML Kosong (Empty HTML)
- ‘HTML Kosong’ merupakan sebuah elemen HTML tanpa konten.
- <br> merupakan elemen kosong tanpa tag penutup (tag <br> mendefinisikan satu baris ‘Line Break’).
- Elemen kosong dapat ditutup dengan memberikan garis miring ‘/’ seperti <br/>.
- HTML5 tidak memerlukan elemen kosong, jadi harus ditutup. Namun jika kamu ingin validasi yang baik, atau kamu perlu halaman/dokumen yang dapat dibaca oleh ‘Parser XML’, maka kamu harus menutup semua elemen HTML.
Tips: Menggunakan Tag Huruf Kecil (Lowercase)
- Tag HTML tidak termasuk ‘case sensitive’, <P> dengan huruf besar sama dengan <p> dengan huruf kecil.
- Standar HTLM5 tidak memerlukan tag huruf kecil, tapi W3C merekomendasikan dengan huruf kecil di HTML4, dan menuntut huruf kecil untuk tipe dokumen/halaman yang ketat seperti XHTML.
Catatan: kita akan menggunakan tag huruf kecil dalam pembelajaran ini.
English Version: http://www.w3schools.com/html/html_elements.asp
