HTML Dasar: Frasa Teks

Pada pertemuan kali ini kita masih membahas tag-tag HTML yang berhubungan dengan teks atau frasa.

Tag HTML frasa merupakan tag-tag khusus dengan tujuan untuk memperjelas bahwa suatu kata atau kalimat memiliki “makna” tertentu. Seperti misalnya tag <address> berarti merepresentasikan sebuah alamat dan tag <dfn> berarti sebuah definisi atau istilah khusus.

Beberapa tag yang akan kita bahas kali ini mungkin sudah pernah kalian temukan pada pertemuan-pertemuan sebelumnya.

Mari kita coba satu persatu!

Tag Empasis <em>

Yang pertama adalah tag empasis (<em>). Ia berfungsi untuk memberikan penekanan terhadap suatu kata atau kalimat. Dan output yang dihasilkan dari tag <em> akan dicetak miring.

Perhatikan contoh berikut;

Teks empasis digunakan untuk
<em>melakukan penekanan<em> terhadap suatu kata/kalimat.

Hasi keluaran:

Tag Stabilo <mark>

Berikutnya adalah tag <mark> untuk memberi tanda pada suatu kata atau kalimat yang penting.

Tag ini telah kita bahas pada pertemuan sebelumnya tentang pemformatan teks. Di mana teks atau kalimat yang berada di dalam element <mark> akan ditandai dengan warna kuning seperti halnya stabilo.

Perhatikan contoh berikut:

<h1>Penggunaan <mark>stabilo</mark></h1>

<p>
  Untuk hal-hal yang bersifat penting, kita bisa
  <mark>memanfaatkan fitur stabilo</mark>.
</p>

Hasil keluaran:

Kita juga bisa memanfaatkan style CSS background atau background-color untuk menggunakan warna lain semisal warna pink, orange, magenta, cyan dan lain sebagainya.

Perhatikan contoh berikut;

<p>
  <mark style="background: pink">Ini adalah</mark> sebuah teks penting
</p>
<p>
  Ini adalah <mark style="background: orange">sebuah teks</mark> penting
</p>
<p>
  Ini adalah sebuah <mark style="background: magenta">teks</mark> penting
</p>
<p>
  Ini adalah sebuah teks <mark style="background: orange">penting</mark>
</p>

Hasil keluaran:

Tag Strong <strong>

Berikutnya adalah tag <strong>, ia berfungsi untuk memberikan penekanan terhadap suatu kata atau kalimat.

Kata atau kalimat yang berada di dalam element <strong> akan dicetak tebal.

Tag <strong> mirip dengan tag <b>, sama-sama membuat teks menjadi tercetak tebal. Akan tetapi tag <strong> memiliki makna bahwa suatu teks memang penting dan layak untuk diberikan penekanan lebih.

Perhatikan contoh berikut:

Kita bisa menggunakan tag strong untuk <strong>memberikan
penekanan terhadap suatu kata</strong>.

Hasil keluaran:

Tag Singkatan <abbr>

Berikutnya kita bisa membuat kata singkatan (atau abbreviation) menggunakan tag <abbr>.

Kita juga bisa menambahkan atribut title pada tag <abbr> agar ketika teks di-hover, tooltip akan muncul.

Perhatikan contoh berikut:

Apakah kalian menyukai
<abbr title="Hypertext Markup Language">HTML</abbr>?

Hasil keluaran:

Perhatikan kata HTML di atas, terdapat garis titik-titik di bawahnya, dan jika kita arahkan mouse ke tulisan tersebut, browser akan menampilkan tooltip Hypertext Markup Language.

Tag Untuk Istilah Spesial / Definisi <dfn>

Berikutnya kita bisa mengapit teks berisi sebuah istilah tertentu menggunakan tag <dfn>.

Perhatikan contoh berikut:

<p>
  <dfn>HTML</dfn> adalah sebuah bahasa markup yang mendefinisikan
  struktur dokumen web
</p>

Hasil keluaran:

Tag Quote <blockquote>

Berikutnya kita bisa menulis quote pada suatu kalimat / paragraf menggunakan tag <blockquote>.

Perhatikan contoh berikut:

<p>Terdapat sebuah pribahasa:</p>
<blockquote>
  Berakit-rakit ke hulu, berenang-renang ketepian.
  Bersakit-sakit dahulu, bersenang-senang kemudian.
</blockquote> 
<p>
  Yang berarti kita harus berjuang terlebih dahulu
  sebelum menikmati hasil
</p>

Hasil keluaran:

Atau dengan CSS, kita bisa mengubah teks <blockquote> hingga ditampilkan seperti berikut:

Tag Quote Singkat <q>

Selain menggunakan tag <blockquote>, kita juga bisa menggunakan tag <q> untuk mengutip suatu kata atau kalimat dengan tanda petik.

Perhatikan contoh berikut:

Banyak orang bilang bahwa HTML bukanlah <q>bahasa pemrograman</q>.

Hasil keluaran:

Tag Untuk Kode Pemrograman <code>

Berikutnya jika kita ingin menampilkan potongan kode pemrograman, kita bisa menggunakan tag <code>.

Yang perlu diperhatikan adalah bahwa tag <code> bersifat inline, sehingga ia tidak membuat baris baru pada suatu dokumen.

Perhatikan contoh berikut:

<p>
  Di dalam bahasa pemrograman python, fungsi <code>len()</code>
  dipanggil untuk mendapatkan panjang suatu list, string,
  tuple, dan objek iterable lainnya.
</p>

Hasil keluaran:

Tag Untuk Tombol Keyboard <kbd>

Berikutnya, kita bisa menggunakan tag <kbd> untuk memberitahu user tentang sebuah kombinasi tombol keyboard seperti misalnya Ctrl+C atau Ctrl+V

Perhatikan contoh berikut:

Hendaknya para mahasiswa tidak mengandalkan <kbd>Ctrl+C</kbd>
dan <kbd>Ctrl+V</kbd> ketika mengerjakan tugas.

Hasil keluaran:

Tag Alamat <address>

Berikutnya kita bisa menggunakan tag <address> untuk memberikan “makna” bahwa suatu teks merupakan sebuah alamat.

Perhatikan contoh berikut:

Budi tinggal di: <address>Jl Mawar Melati</address>.

Hasil keluaran:

Dari keluaran di atas kita bisa simpulkan bahwa tag <address> merupakan block tag di mana browser akan membuat baris baru pada elemen tersebut.

Sitasi Sumber <cite>

Berikutnya kita bisa mengutip perkataan seseorang, atau mengutip sebuah jurnal, buku, dan lain-lain menggunakan tag <cite>.

Perhatikan contoh berikut:

<blockquote>
  Beri aku 1.000 orang tua, niscaya akan kucabut semeru
  dari akarnya, dan beri aku 10 pemuda niscaya akan
  kuguncangkan dunia
</blockquote>

<cite>–Soekarno–</cite>

Hasil keluaran:

Kode Program Lengkap

Bagi kalian yang ingin mendapatkan kode program lengkap, silakan kunjungi repository html-dasar di github.

Jangan lupa kasih ⭐⭐

Pertemuan Selanjutnya

Insyaallah pada pertemuan selanjutnya kita akan membahas tentang tag tautan (link) pada dokumen HTML.

Stay tune!