Elemen HTML adalah komponen individual dari dokumen HTML. Sebagai contoh, elemen judul mewakili judul dokumen.
Sebagian besar elemen HTML ditulis dengan tag awal (atau tag pembuka) dan tag akhir (atau tag penutup), dengan konten di antara tag-nya. Elemen juga dapat berisi atribut yang mendefinisikan properti tambahannya. Misalnya, paragraf, yang diwakili oleh elemen <p>, akan ditulis sebagai:
Kita akan mempelajari tentang atribut HTML pada bab selanjutnya.
Catatan: Semua elemen tidak memerlukan tag akhir atau tag penutup untuk muncul. Ini disebut sebagai elemen kosong, elemen yang menutup sendiri atau elemen yang tidak berlaku.
Tag HTML Vs Elemen
Secara teknis, elemen HTML adalah kumpulan-kumpulan tag awal, atributnya, tag akhir dan semua yang ada di antaranya. Di sisi lain, tag HTML (baik membuka atau menutup) digunakan untuk menandai awal atau akhir suatu elemen, seperti yang kalian lihat pada ilustrasi di atas.
Kasus Ketidaksensitifan Dalam Tag HTML dan Atribut HTML
Dalam HTML, penulisan nama tag dan atribut sebenarnya tidak bermasalah mengunakan huruf besar-kecil (tetapi pada sebagian besar nilai atribut akan bermasalah bila menggunakan huruf besar-kecil). Sebagai contoh tag <P>, dan tag <p> mendefinisikan hal yang sama dalam HTML yang merupakan paragraf.
Namun pada XHTML penggunaan huruf besar pada tag <P> mempunyai arti yang berbeda dengan penggunaan huruf kecil pada tag <p>.
Contoh kodenya :
<p>This is a paragraph.</p> <P>This is also a valid paragraph.</P>Elemen Kosong HTML
Elemen HTML tanpa isi disebut elemen kosong. Elemen <meta> adalah elemen kosong tanpa tag penutup
Sebagai contoh tipikal elemen kosong, adalah elemen <br>, yang merepresentasikan garis putus. Beberapa elemen kosong umum lainnya adalah <img>, <input>, <link>, <meta>, <hr>, dll.
Tips : Dalam XHTML, semua elemen harus ditutup. Menambahkan garis miring dalam tag awal, seperti <meta/>, adalah cara yang tepat untuk menutup elemen kosong di XHTML (dan XML).
Contoh kodenya :
Elemen HTML Bersarang
Sebagian besar elemen HTML bersarang (dapat berisi elemen HTML lainnya).
Contoh Dokumen HTML Bersarang
<!doctype html> <html lang="id"> <head> <title>Selamat Belajar</title> <meta charset= “UTF-8” /> </head> <body> </body> </html>Contoh di atas mengandung beberapa elemen HTML.
Tag HTML harus disarangkan dengan urutan yang benar. Tag terakhir yang dibuka harus ditutup terlebih dahulu. Contohnya :
<p><strong>Contoh tag yang benar</strong></p> <p><strong>Contoh tag yang salah</p></strong>Menulis Komen Pada HTML
Komentar biasanya ditambahkan dengan tujuan agar membuat kode sumber lebih mudah dimengerti. Ini dapat membantu pengembang lain (atau bahkan kalian ketika kalian ingin mengedit kode sumber) untuk memahami apa yang kalian coba lakukan dengan HTML. Komentar tidak ditampilkan di browser.
Komentar HTML dimulai dengan <!–, dan diakhiri dengan –>, seperti yang ditunjukkan pada contoh di bawah ini:
Kalian juga dapat mengomentari bagian dari kode HTML yang kalian buat untuk tujuan debugging, seperti yang ditunjukkan di sini:
<!-- Hiding this image for testing <img src="images/smiley.png" alt="Smiley"> -->Tipe Elemen HTML
Elemen dapat ditempatkan dalam dua grup yang berbeda: elemen Block Level dan elemen Inline Level. Block Level untuk membuat struktur dokumen, sedangkan yang Inline level untuk mempercantik isi blok.
Juga, block level element menempati 100% dari lebar yang tersedia dan disisipkan dengan line break sebelum dan sesudah. Sedangkan, elemen inline hanya akan mengambil ruang sebanyak yang dibutuhkan.
Elemen block level yang paling umum digunakan adalah <div>, <p>, <h1> hingga <h6>, <form>, <ol>, <ul>, <li>, dan seterusnya. Sedangkan, elemen inline level yang umum digunakan adalah <img>, <a>, <span>, <strong>, <b>, <em>, <i>, <code>, <input>, <button>, dll.
Catatan: Elemen block level tidak boleh ditempatkan di dalam elemen inline level. Misalnya, elemen
tidak boleh ditempatkan di dalam elemen .