HTML em dan strong: Penekanan, Kepentingan, serta Perbedaan dari b dan CSS

HTML <em> menandai penekanan kata dalam sebuah kalimat, sementara <strong> menandai kepentingan kuat, keseriusan, atau urgensi. Browser biasanya menampilkannya sebagai teks miring dan tebal masing-masing, tetapi pilih elemen berdasarkan maknanya dalam konteks daripada berdasarkan tampilan defaultnya.

Bagaimana perbedaan antara em dan strong?

Gunakan em ketika menekankan kata tertentu mengubah fokus dari sebuah kalimat. Dalam “Saya memeriksa dokumen hari ini,” menekankan “Saya” memfokuskan pada siapa yang memeriksa, sedangkan menekankan “hari ini” memfokuskan pada kapan. strong menandai pentingnya konten itu sendiri, seperti peringatan yang perlu diketahui pembaca atau kesimpulan penting.

Kedua elemen bekerja dalam kalimat. Jangan membungkus seluruh paragraf hanya untuk membuatnya tampak seperti judul besar. Strukturkan judul dokumen dengan h1 hingga h6 dan terapkan penekanan yang bermakna hanya ketika diperlukan.

Bandingkan fokus dalam contoh lengkap

Simpan dokumen ini sebagai emphasis.html dan buka di browser. Bandingkan tekanan pada dua kalimat pertama, instruksi penting, dan kalimat terakhir yang hanya menggunakan gaya tebal visual.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Penekanan dan kepentingan</title>
  <style>.visual-bold { font-weight: bold; }</style>
</head>
<body>
  <h1>Penekanan dalam konteks</h1>
  <p><em>Saya</em> memeriksa dokumen hari ini.</p><p>Saya memeriksa dokumen <em>hari ini</em>.</p><p><strong>Periksa cadangan sebelum mengganti berkas.</strong></p><p>Istilah dalam dokumen ini: <b>elemen</b> dan <b>atribut</b></p><p>Contoh tampilan: <span class="visual-bold">Bagian ini dicetak tebal melalui CSS.</span></p></body>
</html>

Dengan gaya default umum, “Saya” dan “hari ini” muncul miring, sementara instruksi cadangan dan kata-kata yang diberi tanda b muncul tebal. Elemen span juga tebal karena CSS, tetapi itu tidak menjadi elemen yang mengekspresikan pentingnya yang kuat. Font dan gaya pengguna dapat mengubah tampilannya, jadi ungkapkan makna penting dengan jelas dalam kata-kata juga.

Bedakan b dari gaya tebal CSS

Memikirkan b hanya sebagai “strong tanpa makna” melewatkan tujuannya: itu menarik perhatian. Gunakan CSS ketika penampilan saja yang menjadi tujuan. Demikian juga, jangan memilih em hanya karena Anda ingin teks miring.

Menghapus italic pada em atau mengubah ketebalan strong melalui CSS tetap mempertahankan makna yang diekspresikan dalam HTML. Sebaliknya, membuat span menjadi tebal tidak memberikan makna strong. Pengumuman aktual oleh teknologi bantu bervariasi tergantung lingkungan, jadi jangan berasumsi perubahan suara tertentu akan selalu terjadi. Lihat MDN referensi em, MDN referensi strong, dan MDN referensi b untuk definisi elemen.