Pemformatan Teks HTML

Dalam tutorial ini akan belajar bagaimana memformat teks pada halaman web menggunakan tag HTML.

Memformat Teks dengan HTML

HTML menyediakan beberapa tag yang dapat gunakan untuk membuat beberapa teks di halaman web tampil berbeda dari teks biasa, misalnya, kalian dapat menggunakan tag <b> untuk membuat teks menjadi tebal, tag <i> untuk membuat teks menjadi miring, tag <mark> untuk menyorot teks, tag <code> untuk menampilkan fragmen kode komputer, tag <ins> dan <del> untuk menandai penyisipan dan penghapusan editorial, dan banyak lagi.

Contoh berikut menunjukkan tindakan tag pemformatan yang paling umum digunakan. Sekarang, mari kita coba ini untuk memahami bagaimana tag ini pada dasarnya bekerja:

<p>Ini <b>teks tebal</b>.</p>
<p>Ini adalah <strong>teks yang sangat penting</strong>.</p>
<p>Ini <i>teks miring</i>.</p>
<p>Ini adalah <em>teks yang diberi penekanan</em>.</p>
<p>Ini adalah <mark>teks yang disorot</mark>.</p>
<p>Ini adalah <code>kode komputer</code>.</p>
<p>Ini adalah <small>teks yang lebih kecil</small>.</p>
<p>Ini adalah teks <sub>subskrip</sub> dan <sup>superskrip</sup>.</p>
<p>Ini <del>teks yang dihapus</del>.</p>
<p>Ini adalah <ins>teks yang disisipkan</ins>.</p>

Secara default, tag <strong> biasanya dirender di browser sebagai <b>, sedangkan tag <em> dirender sebagai <i>. Namun, ada perbedaan dalam arti dari tag ini.

Perbedaan antara tag <strong> dan <b>

Baik tag <strong> dan <b> membuat teks terlampir dalam jenis huruf tebal secara default, tetapi tag <strong> menunjukkan bahwa isinya sangat penting, sedangkan tag <b> hanya digunakan untuk menarik perhatian pembaca tanpa menyampaikan kepentingan khusus apa pun.

<p><strong>PERINGATAN!</strong> Lanjutkan dengan hati-hati.</p>
<p>Konser akan diadakan di <b>Hyde Park</b> di London.</p>

Perbedaan antara tag <em> dan <i>

Demikian pula, tag <em> dan <i> merender teks terlampir dalam tipe miring secara default, tetapi tag <em> menunjukkan bahwa isinya telah menekankan penekanan dibandingkan dengan teks di sekitarnya, sedangkan tag <i> digunakan untuk menandai teks yang menyimpang dari teks normal karena alasan keterbacaan, seperti istilah teknis, frasa idiomatik dari bahasa lain, pemikiran, dll.

<p>Kucing adalah hewan <em>imut</em>.</p>
<p>The <i>Royal Cruise</i> berlayar tadi malam.</p>

CATATAN

Gunakan tag <em> dan <strong> bila konten laman mengharuskan kata atau frasa tertentu memiliki penekanan atau kepentingan yang kuat. Juga, dalam HTML5 tag <b> dan <i> telah didefinisikan ulang, sebelumnya mereka tidak memiliki arti semantik.

Memformat Kutipan

Kalian dapat dengan mudah memformat blok kutipan dari sumber lain dengan tag HTML <blockquote>.

Blockquotes umumnya ditampilkan dengan margin kiri dan kanan yang menjorok, bersama dengan sedikit ruang ekstra yang ditambahkan di atas dan di bawah. Mari kita coba contoh untuk melihat cara kerjanya:

<blockquote>
  <p>
    Belajar dari kemarin, hidup untuk hari ini, berharap untuk hari esok. Yang
    penting jangan berhenti bertanya.
  </p>
  <cite>— Albert Einstein</cite>
</blockquote>

TIP

Tag cite digunakan untuk mendeskripsikan referensi ke sebuah karya kreatif. Itu harus menyertakan judul karya itu atau nama penulis (orang atau organisasi) atau referensi URL.

Untuk kutipan sebaris pendek, Anda dapat menggunakan tag HTML <q>. Sebagian besar browser menampilkan kutipan sebaris dengan mengapit teks dalam tanda kutip. Berikut ini contohnya:

<p>
  Menurut Organisasi Kesehatan Dunia (WHO):
  <q>Kesehatan adalah keadaan sejahtera fisik, mental, dan sosial yang utuh.</q>
</p>

Menampilkan Singkatan

Singkatan adalah bentuk singkat dari kata, frase, atau nama.

Kalian dapat menggunakan tag <abbr> untuk menunjukkan singkatan. Atribut title digunakan di dalam tag ini untuk memberikan perluasan penuh dari singkatan, yang ditampilkan oleh browser sebagai tooltip ketika kursor mouse diarahkan ke elemen. Mari kita coba sebuah contoh:

<p>
  <abbr title="World Wide Web Consortium">W3C</abbr> adalah organisasi standar
  internasional utama untuk <abbr title="World Wide Web">WWW atau W3</abbr>.
  Perusahaan ini didirikan oleh Tim Berners-Lee.
</p>

Menandai Alamat Kontak

Halaman web sering kali menyertakan alamat jalan atau pos. HTML menyediakan tag khusus <address> untuk mewakili informasi kontak (fisik dan/atau digital) untuk seseorang, orang, atau organisasi.

Tag ini idealnya digunakan untuk menampilkan informasi kontak yang terkait dengan dokumen itu sendiri, seperti penulis artikel. Sebagian besar browser menampilkan blok alamat dalam huruf miring. Berikut ini contohnya:

<address>
  Yayasan Mozilla<br />
  331 E. Evelyn Avenue<br />
  Pemandangan Gunung, CA 94041, AS
</address>

Silakan periksa bagian referensi HTML untuk daftar lengkap tag pemformatan HTML.