Memformat Teks

Tebal, miring, sorot, coret, subskrip, superskrip, kode, kutipan, dan singkatan, beserta perbedaan tag bermakna vs tag tampilan.

Part 4 dari 20 ± 35 menit Gratis

Tag formatting yang punya makna

HTML punya banyak tag untuk menandai teks. Yang penting dipahami: sebagian tag punya makna (bukan sekadar tampilan), sehingga mesin pencari dan pembaca layar ikut memahaminya.

Tag	Makna	Tampilan bawaan
`<strong>`	Sangat penting	Tebal
`<em>`	Penekanan (nada bicara)	Miring
`<mark>`	Disorot / relevan	Latar kuning
`<small>`	Keterangan kecil	Teks kecil
`<del>`	Dihapus	~~Dicoret~~
`<ins>`	Ditambahkan	Bergaris bawah
`<sub>`	Subskrip	H₂O
`<sup>`	Superskrip	x²
`<code>`	Potongan kode	`console.log()`

dan vs dan

Tag  dan  hanya mengubah tampilan tanpa makna khusus (misalnya istilah asing atau nama produk). Jika teks itu benar-benar penting, pakai . Jika ingin menekankan kata saat dibaca, pakai .

<p><strong>Peringatan:</strong> jangan bagikan kata sandimu.</p>
<p>Aku <em>benar-benar</em> suka belajar HTML.</p>

Kutipan

<blockquote>: kutipan panjang yang berdiri sendiri (blok).
<q>: kutipan pendek di tengah kalimat (browser menambahkan tanda petik otomatis).
<cite>: judul karya atau nama sumber.

<blockquote>
  <p>Belajar tanpa berpikir itu sia-sia.</p>
</blockquote>
<p>Kata orang bijak: <q>sedikit demi sedikit lama-lama menjadi bukit</q>.</p>

Singkatan dan teks prapemformatan

<abbr title="..."> menandai singkatan; atribut title muncul saat kursor diarahkan ke teks.

<abbr title="HyperText Markup Language">HTML</abbr>

<pre> mempertahankan spasi dan baris baru persis seperti yang kamu ketik, dengan font monospace. Cocok untuk menampilkan kode atau puisi:

<pre>
Baris satu
    baris dua menjorok
</pre>

Menggabungkan tag

Tag format boleh digabung selama urutan tutupnya benar: sangat penting.