Tutorial HTML / Memberi makna pada teks: penekanan, kutipan, singkatan, dan kode

Elemen teks HTML menjelaskan mengapa sebuah bagian itu istimewa, dan bukan hanya tampilannya. Gunakan em untuk penekanan, strong untuk menandai konten penting, q dan blockquote untuk kutipan, abbr untuk singkatan dan code untuk kode.

Penekanan dan konten penting: em dan strong

Gunakan em untuk menyoroti sebuah kata dalam sebuah kalimat. Gunakan strong ketika kontennya sendiri memiliki arti khusus, seperti dalam sebuah peringatan. Peramban sering menampilkan elemen-elemen ini dengan huruf miring atau tebal, tetapi maknanya tidak ditentukan oleh gaya tersebut.

<p>Simpan file <em>sebelum Anda</em> memperbarui browser.</p>

<p><strong>Jangan bagikan kata sandi Anda.</strong></p>

Kalimat pertama menekankan urutan tindakan; yang kedua menandai sebuah peringatan. Jika Anda hanya memerlukan tampilan visual, gunakan CSS, daripada menambahkan elemen semantik tanpa makna yang sesuai.

Kutipan pendek dan kutipan blok: q dan blockquote

Gunakan q untuk kutipan pendek di dalam satu kalimat dan blockquote untuk kutipan yang membentuk blok terpisah. Kalimat-kalimat berikut ditulis semata-mata untuk mendemonstrasikan elemen-elemen.

<p>Instruksinya adalah <q>Simpan perubahan Anda</q>.</p>



<blockquote>

  <p>Rencanakan struktur dokumen sebelum menulis isiannya.</p>

</blockquote>

Sebuah browser dapat menyediakan tanda kutip untuk q, jadi jangan tambahkan pasangan kedua di sekelilingnya. Untuk kutipan yang sebenarnya, periksa kata-katanya dan cantumkan sumbernya dalam teks yang terlihat. Atribut cite pada blockquote tidak secara otomatis menunjukkan sumber kepada pembaca.

Menjelaskan singkatan dengan abbr

abbr menandai sebuah singkatan. Tulis istilah yang tidak dikenal secara lengkap saat pertama kali disebutkan dalam teks di sekitarnya; seorang pembaca tidak harus mengarahkan mouse ke atribut title untuk mengetahui artinya.

<p>HyperText Markup Language (<abbr title="HyperText Markup Language">HTML</abbr>) mendefinisikan struktur sebuah halaman web.</p>

Anda tidak perlu mengulang istilah lengkap pada setiap penggunaan berikutnya dalam konteks yang sama.

Kode dan masukan pengguna: code dan kbd

Gunakan code untuk fragmen kode kecil atau nama file yang dibahas sebagai kode. Gunakan kbd untuk tombol atau masukan lain yang harus disediakan pengguna. Gunakan tanda kurung kode literal sesuai aturan penyandian karakter dalam sintaks HTML.

<p>Simpan <code>index.html</code> dengan <kbd>Ctrl</kbd>+<kbd>S</kbd>.</p>

Untuk kode multilini yang perlu mempertahankan indentasi, HTML code dapat ditempatkan dalam pre. Blok kode dalam kursus ini menggunakan pre dan code, dengan kelas bahasa untuk sorotan sintaks.

Bandingkan semantik dalam dokumen lengkap

Simpan dokumen lengkap ini sebagai text-semantics.html dalam UTF-8. Kutipan ini adalah pernyataan fiktif yang ditulis untuk mendemonstrasikan elemen.

<!doctype html>
<html lang="id-ID">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Latihan tentang Semantik Teks</title>
</head>
<body>
  <h1>Instruksi singkat</h1>
  <p>Periksa hasilnya <em>setelah Anda</em> menyimpan file.</p>
  <p><strong>Simpan file asli.</strong></p>
  <p>Sebuah instruksi fiktif menyatakan <q>Simpan perubahan Anda</q>.</p>
  <p>Dokumen ini menggunakan HyperText Markup Language (<abbr title="HyperText Markup Language">HTML</abbr>).</p>
  <p>Simpan dengan <kbd>Ctrl</kbd>+<kbd>S</kbd>.</p>
  <pre><code>&lt;p&gt;Kalimat contoh&lt;/p&gt;</code></pre>
</body>
</html>

1. Identifikasi penekanan, peringatan, kutipan, dan singkatan dengan membaca teks sekitarnya.
2. Pastikan <p> akhir ditampilkan sebagai kode dan tidak diinterpretasikan sebagai paragraf.
3. Ganti sementara strong dengan span dan kemudian pulihkan untuk pesan penting. Ini membandingkan makna elemen dengan tampilan standarnya.

Referensi kode MDN menjelaskan elemen yang digunakan untuk menampilkan kode.

Pilih elemen yang sesuai dengan maknanya

• Gunakan em untuk penekanan dan strong untuk menandai konten penting.
• Gunakan q untuk kutipan dalam baris dan blockquote untuk kutipan mandiri.
• Gunakan abbr untuk singkatan dan jelaskan istilah yang tidak dikenal dalam teks yang dapat dibaca.
• Bedakan kode dengan code dan masukan pengguna dengan kbd.

Lihat referensi elemen HTML di MDN untuk konten yang diperbolehkan dan sintaks rinci setiap elemen. Pembedaan antara makna dan presentasi juga berlaku dalam Prinsip dasar aksesibilitas: Judul, Tautan, Gambar, dan Keyboard.