HTML Element Khusus
Tipografi Khusus dalam HTML
Selain paragraf dan pemformatan tebal-miring, HTML menyediakan elemen spesifik untuk menangani teks yang memiliki fungsi teknis atau literasi tertentu. Penggunaan elemen yang tepat akan membuat konten kamu lebih profesional dan mudah dibaca.
1. Teks Superskrip (<sup>) dan Subskrip (<sub>)
Dalam penulisan ilmiah atau matematika, kita sering membutuhkan teks yang diletakkan sedikit di atas atau di bawah garis dasar teks normal.
<sup>(Superscript): Digunakan untuk pangkat matematika, indikator urutan (seperti 1st), atau catatan kaki.- Contoh:
E = mc<sup>2</sup>→ E = mc²
- Contoh:
<sub>(Subscript): Digunakan untuk rumus kimia atau indeks variabel.- Contoh:
H<sub>2</sub>O→ H₂O
- Contoh:
2. Pemutusan Baris (<br>)
Elemen <br> digunakan untuk memaksa teks pindah ke baris baru tanpa membuat paragraf baru (tanpa margin tambahan).
Catatan
Gunakan <br> hanya jika baris baru tersebut memang bagian dari konten yang sama, seperti pada penulisan alamat atau bait puisi. Jangan gunakan <br> berulang kali untuk memberikan jarak antar paragraf. gunakan margin CSS untuk hal tersebut (Nanti akan kita bahas di materi CSS).
<p>
Jl. Sudirman No. 123<br>
Jakarta Selatan<br>
Indonesia
</p>3. Kutipan (Quotations) dengan <blockquote>
Untuk menyisipkan kutipan panjang yang diambil dari sumber lain, kita menggunakan elemen <blockquote>. Biasanya, browser akan memberikan indentasi (jarak kiri) secara otomatis pada elemen ini.
Untuk kutipan pendek di dalam baris kalimat, kita bisa menggunakan tag <q>.
<blockquote>
"Teknologi hanyalah alat. Dalam hal membuat anak-anak bekerja sama dan memotivasi mereka, guru adalah yang paling utama."
<cite>— Bill Gates</cite>
</blockquote>4. Elemen Singkatan: <abbr> dan <acronym>
Memberikan penjelasan pada singkatan sangat penting untuk aksesibilitas (pembaca layar) dan SEO.
<abbr>(Abbreviation): Digunakan untuk singkatan. Saat pengguna mengarahkan kursor ke teks, penjelasan yang ada di atributtitleakan muncul sebagai tooltip.
<p>Saya sedang belajar <abbr title="HyperText Markup Language">HTML</abbr> di kampus.</p>Contoh
<!DOCTYPE html>
<html lang="id">
<head>
<title>Elemen Teks Khusus</title>
</head>
<body>
<h2>Laporan Sains</h2>
<p>Hasil eksperimen menunjukkan bahwa suhu mencapai 100<sup>o</sup>C saat dicampur dengan H<sub>2</sub>SO<sub>4</sub>.</p>
<hr>
<h2>Kutipan Hari Ini</h2>
<blockquote>
Masa depan web ditentukan oleh seberapa baik kita memahami <abbr title="World Wide Web Consortium">W3C</abbr>.
</blockquote>
<p>Alamat Pengirim:<br>Gedung Teknik Informatika<br>Lantai 3</p>
</body>
</html>