Elemen HTML adalah komponen individual dari sebuah dokumen HTML. Setiap halaman web terdiri dari banyak elemen HTML.
Tag HTML memberi tahu peramban Anda elemen mana yang akan ditampilkan dan bagaimana cara menampilkannya. Urutan kemunculan elemen ditentukan oleh urutan kemunculan tag.
HTML terdiri dari lebih dari 100 tag. Namun, jangan biarkan hal itu menghalangi Anda, Anda mungkin akan mendapati bahwa sebagian besar waktu, Anda hanya menggunakan beberapa tag di halaman web Anda. Meskipun demikian, saya sangat menyarankan untuk mempelajari semua tag HTML pada akhirnya, tetapi kita akan membahasnya nanti.
Baiklah, mari kita lihat lebih dekat contoh yang kita buat di pelajaran sebelumnya.
<!DOCTYPE html> <html> <head> <title>Contoh Tutorial HTML</title> </head> <body> <h1>Situs Web Pertama Saya</h1> <p>Kurang dari 5 menit dalam tutorial HTML ini dan saya sudah membuat beranda pertama saya!</p> </body> </html>
Penjelasan kode di atas:
- Deklarasi <!DOCTYPE... > memberi tahu browser versi HTML mana yang digunakan dokumen.
- Elemen <html> adalah elemen akar dokumen, elemen ini dapat dianggap sebagai wadah tempat semua tag lainnya berada (kecuali deklarasi !DOCTYPE).
- Tag <head> berisi informasi yang biasanya tidak dapat dilihat di peramban Anda (seperti tag meta, JavaScript, dan CSS), meskipun tag <title> merupakan pengecualian. Konten tag
<title>ditampilkan di bilah judul peramban (tepat di bagian paling atas peramban). - Tag <body> adalah area utama untuk konten Anda. Di sinilah sebagian besar kode Anda (dan elemen yang dapat dilihat) akan ditempatkan.
- Tag <h1> mendefinisikan judul level 1.
- Tag <p> mendefinisikan paragraf. Ini berisi teks body.
Menutup Tag Anda
Seperti yang telah disebutkan di pelajaran sebelumnya, Anda akan melihat bahwa semua elemen HTML ini memiliki tag pembuka dan penutup, dan konten elemen tersebut ditempatkan di antara tag tersebut. Ada beberapa pengecualian untuk aturan ini.
Anda juga akan melihat bahwa tag penutup sedikit berbeda dengan tag pembuka, tag penutup berisi garis miring (/) setelah <. Ini memberi tahu peramban bahwa tag ini menutup tag sebelumnya.
Indentasi dan Carriage Returns
Anda dapat membuat indentasi kode dan menambahkan carriage return tambahan jika diinginkan. Ini dapat membantu keterbacaan, dan tidak memengaruhi tampilan halaman di browser.
Faktanya, indentasi kode adalah praktik universal dalam dunia pemrograman komputer, dan sebagian besar HTML Editor secara otomatis membuat indentasi kode saat Anda mengetik.
Sebagai contoh, kita dapat mengambil contoh di atas, dan membuat indentasi seperti contoh berikut, dan hasilnya akan tetap sama di peramban.
<!DOCTYPE html>
<html>
<head>
<title>Contoh Tutorial HTML</title>
</head>
<body>
<h1>Situs Web Pertama Saya</h1>
<p>Kurang dari 5 menit dalam tutorial HTML ini dan saya sudah membuat beranda pertama saya!</p>
</body>
</html>HURUF KAPITAL atau huruf kecil?
Anda bisa menggunakan huruf besar atau kecil saat mengode HTML, namun kebanyakan developer menggunakan huruf kecil. Ini membantu keterbacaan kode Anda, dan juga menghemat waktu Anda karena tidak perlu terus-menerus beralih antara huruf besar dan kecil. Huruf kecil juga membantu menjaga kode Anda tetap sesuai XML (jika Anda menggunakan XHTML), tapi itu topik lain.
Oleh karena itu...
- Bagus:
<head> - OKE:
<HEAD>
Tag Opsional
Beberapa tag di atas bersifat opsional dalam situasi tertentu. Khususnya, tag <html>, <head>, dan <body> dapat dihilangkan.
Jadi, akan sangat valid untuk mengubah contoh di atas menjadi ini:
<!DOCTYPE html> <title>Contoh Tutorial HTML</title> <h1>Situs Web Pertama Saya</h1> <p>Kurang dari 5 menit dalam tutorial HTML ini dan saya sudah membuat beranda pertama saya!</p>
Namun, ada beberapa aturan yang sangat spesifik tentang kapan Anda boleh dan tidak boleh melakukan ini. Misalnya, tag pembuka <html> dapat dihilangkan jika tidak langsung diikuti oleh komentar, dan hal yang sama berlaku untuk tag penutupnya. Tag pembuka elemen <head> hanya dapat dihilangkan jika elemen tersebut kosong, atau jika elemen pertama di dalam elemen tersebut adalah sebuah elemen. Tag penutupnya hanya dapat dihilangkan jika elemen tersebut tidak langsung diikuti oleh karakter spasi atau komentar. Elemen body juga memiliki aturan spesifiknya sendiri untuk menghilangkan tag.
Jika Anda tertarik mempelajari tag mana yang bisa dihilangkan, periksa spesifikasi HTML untuk aturan seputar tag spesifik yang ingin Anda hilangkan.
Jika Anda tidak yakin apakah boleh menghilangkan suatu tag, cukup sertakan semua tag (seperti pada contoh pertama).
Menghilangkan tag pembuka suatu elemen bukan berarti elemen tersebut tidak ada dalam dokumen HTML saat Anda melihatnya di peramban. Peramban tetap menghasilkan elemen tersebut di balik layar.{alertInfo}
Di pelajaran berikutnya, kita akan mempelajari beberapa tag pemformatan yang umum.