Tag dan elemen

Sebuah elemen biasanya terdiri atas tiga hal berurutan: tag pembuka, konten, dan tag penutup dengan garis miring.

Bagian-bagian elemen

Lihat <p>Bread is ready.</p>. Tag pembuka <p> menyatakan bahwa paragraf dimulai di sini. Tag penutup </p>, dengan garis miring setelah kurung sudut pertama, menyatakan paragraf berakhir. Semua yang ada di antaranya adalah konten. Keseluruhannya, tag beserta konten, adalah elemen. Orang sering menyebut tag padahal maksudnya elemen, dan dalam percakapan itu tidak apa-apa, tetapi perbedaannya membantu saat membaca dokumentasi: tag adalah bagian di dalam kurung sudut, elemen adalah potongan halaman yang sudah jadi.

Atribut menambahkan rincian

Tag pembuka bisa membawa atribut, pengaturan tambahan yang ditulis sebagai name="value". Pada <a href="menu.html">Menu</a> atribut href menyatakan tujuan tautan. Pada <html lang="en"> atribut lang menyebut bahasanya. Tulis nilainya di dalam tanda petik ganda; standar membolehkan beberapa nilai tanpa petik, tetapi petik tidak pernah menimbulkan masalah. Beberapa atribut dipisahkan dengan spasi, dan urutannya tidak penting. Beberapa atribut, seperti required pada kolom formulir, bersifat boolean: menulis namanya saja sudah menyalakannya.

<p class="note" id="opening">We open at <strong>7 am</strong>.</p>

Bersarang: tutup dengan urutan terbalik

Elemen bisa berada di dalam elemen lain. Pada contoh di atas, <strong> berada di dalam <p>. Aturannya sama dengan tanda kurung dalam aritmetika: yang dibuka terakhir harus ditutup lebih dulu. <p><strong>7 am</p></strong> salah karena paragraf ditutup saat elemen strong masih terbuka. Browser akan menebak maksudmu, tetapi kesalahan yang berbeda menghasilkan tebakan yang berbeda. Menjorokkan elemen anak dua spasi, seperti contoh-contoh di kursus ini, membuat susunan bersarangnya mudah dilihat.

Elemen kosong (void)

Beberapa elemen tidak boleh punya konten, jadi tidak punya tag penutup. Elemen ini disebut elemen void. Yang umum adalah <br> (pindah baris), <hr> (pemisah tema), <img>, <input>, <meta>, dan <link>. Kamu mungkin melihatnya ditulis dengan garis miring, seperti <br />; dalam HTML garis miring itu boleh dan diabaikan, jadi kedua bentuk berfungsi.

Makna, bukan tampilan

Di dalam paragraf kamu bisa menandai kata dengan <strong> untuk kepentingan yang kuat dan <em> untuk penekanan, yaitu tekanan yang mengubah cara kalimat diucapkan. Browser menampilkan strong sebagai tebal dan em sebagai miring, tetapi yang penting adalah maknanya. Pembaca layar bisa membacanya dengan suara berbeda, dan mesin pencari memperlakukannya sebagai kata penting. Kalau kamu hanya ingin teks tebal sebagai hiasan, itu tugas CSS. <b> dan <i> masih ada untuk teks yang dibedakan tanpa kepentingan tambahan, seperti nama kapal atau kata asing.

Karakter khusus dan komentar

Karena < memulai tag, kamu tidak bisa mengetiknya sebagai teks biasa. Tulis rujukan karakter sebagai gantinya: < untuk kurang dari, > untuk lebih dari, dan & untuk tanda ampersand itu sendiri. Komentar, <!-- like this -->, diabaikan browser dan berguna untuk catatan bagi dirimu sendiri. Terakhir, HTML meringkas spasi: sepuluh spasi atau tiga pindah baris di file-mu tampil sebagai satu spasi. Tata letak berasal dari elemen dan CSS, bukan dari menekan tombol spasi.