Pengenalan HTML 2
Penampil Informasi

Dua kelompok elemen: blok dan sebaris

Agar tidak bingung memilih tag, kenali dulu dua kelompok besarnya. Elemen blok seperti <p>, <div>, dan <blockquote> selalu mulai di baris baru dan memenuhi lebar tersedia, ibarat satu paragraf di buku tulis yang selalu dimulai dari awal baris. Elemen sebaris seperti <span>, <a>, dan <img> hanya selebar isinya dan mengalir bersama teks di sekitarnya, ibarat kata yang diberi stabilo di tengah kalimat. Dengan memahami ini, kamu akan tahu mengapa <span> cocok untuk menandai satu kata, sedangkan <p> cocok untuk satu gagasan utuh.

Contoh gabungan

<p>Ujian akan dilaksanakan <span>hari Senin</span> pukul 07.30.</p>
<hr>
<blockquote>
    Pendidikan adalah senjata paling ampuh untuk mengubah dunia.
</blockquote>
<footer>Kutipan dari Nelson Mandela</footer>
<p>
    Alamat sekolah:<br>
    Jalan Merdeka No. 10<br>
    Kota Contoh
</p>
<a href="https://id.wikipedia.org" target="_blank">Buka Wikipedia</a>
<img src="logo.png" alt="Logo sekolah">

Perhatikan bahwa <br> dipakai untuk pindah baris di dalam satu paragraf, misalnya pada alamat. Jangan memakai banyak <br> berturut-turut hanya untuk membuat jarak; untuk memisahkan gagasan, buatlah paragraf baru. Tag <hr> menarik garis pemisah antar bagian, sedangkan <blockquote> dipakai untuk kutipan panjang dari sumber lain.

Atribut alt pada gambar

Setiap <img> sebaiknya diberi atribut alt, yaitu teks pengganti yang dibacakan oleh pembaca layar bagi tunanetra dan ditampilkan bila gambar gagal dimuat. Deskripsi yang baik singkat dan jelas, misalnya "Siswa sedang praktik di laboratorium komputer". Mesin pencari juga memakai teks ini untuk memahami isi gambar.

Tips memilih tag yang tepat

Sebelum menulis tag, tanyakan pada diri sendiri: "Apa makna bagian ini?" Jika ia adalah kutipan, pakai blockquote. Jika ia adalah gagasan utuh, pakai p. Jika hanya ingin menandai sepotong kata, pakai span. Kebiasaan memilih tag berdasarkan makna, bukan hanya tampilan, membuat halamanmu lebih mudah dirawat, lebih ramah mesin pencari, dan lebih mudah dibaca oleh teman satu tim.

Kesalahan yang sering terjadi

• Memakai <marquee> di halaman serius. Tag ini sudah usang dan tidak disarankan lagi; efek bergerak sebaiknya dibuat dengan CSS.
• Salah menulis lokasi gambar pada src, sehingga muncul ikon gambar rusak. Periksa nama file, huruf besar-kecil, dan foldernya.
• Menulis <br/> sebagai pengganti jarak antar paragraf, padahal seharusnya memakai tag <p> terpisah.
• Menaruh <footer> tanpa isi yang relevan, hanya demi tampilan.

Ringkasan

Gunakan p untuk paragraf, span untuk bagian teks, pre untuk teks berformat tetap, blockquote untuk kutipan, br dan hr untuk pemisah, a untuk tautan, serta img untuk gambar lengkap dengan alt.

Latihan

1. Tag apa yang cocok untuk menandai satu kata di tengah kalimat tanpa memutus baris?
   Lihat jawaban

   <span>, karena sifatnya sebaris.
2. Apa fungsi atribut target="_blank" pada tautan?
   Lihat jawaban

   Membuka tujuan tautan di tab atau jendela baru, tanpa menutup halaman yang sedang dibaca.
3. Tulislah kode untuk menampilkan gambar kucing.jpg dengan teks pengganti "Kucing sedang tidur".
   Lihat jawaban

   <img src="kucing.jpg" alt="Kucing sedang tidur">
4. Mengapa tag <pre> berguna untuk menampilkan potongan kode program?
   Lihat jawaban

   Karena pre mempertahankan spasi dan baris baru persis seperti yang diketik, dengan huruf berlebar tetap sehingga rata dan mudah dibaca.