Selamat datang di IDCSharp.com! Sebelumnya kita sudah membahas bagaimana menggunakan tag paragraph beserta tag pendukungnya pada HTML5. Sekarang saatnya kita melanjutkan pembahasan ke bagian yang tak kalah menarik, yaitu Teks Formatting pada HTML5. Kira-kira apa ya Teks Formatting itu? Yuk, simak penjelasannya secara lengkap di artikel Part 2 dari Paragraph dan Teks Formatting HTML5 ini! Jangan sampai ketinggalan, ya!
Text Formatting HTML5
Teks yang diformat dengan baik akan mempermudah pembaca dalam membaca dan memahami informasi yang disampaikan. Teks tebal, miring, heading, dan lainnya memberikan penekanan yang membantu membedakan bagian penting dari teks. Dalam membuat website, penggunaan text formatting sangat dianjurkan untuk meningkatkan kualitas tampilan dan keterbacaan. Tapi, apa saja sih text formatting yang tersedia di HTML5? Simaklah beberapa tag khusus text formatting pada HTML5 berikut ini.
Teks Tebal, Tag <b> dan <strong>
Mengapa hanya membuat teks tebal saat kita bisa membuatnya lebih kuat dan memperkuat maknanya? Dalam HTML5, kita memiliki dua tag untuk membuat teks tebal, yaitu <b> dan <strong>. Kedua tag ini memiliki fungsi yang sama, tetapi tag <strong> memiliki arti yang lebih kuat dalam mempertegas teks. Sehingga disarankan untuk lebih sering menggunakan tag <strong> dalam memberikan penegasan pada teks yang penting seperti judul, subjudul, dan kata kunci.
Meskipun keduanya memiliki fungsi yang sama dalam membuat teks tebal, terdapat perbedaan antara tag <b> dan <strong> pada HTML.
Tag <b> digunakan untuk memberikan penekanan visual pada teks, tetapi tidak memiliki makna khusus dalam hal arti atau pentingnya teks tersebut. Sedangkan tag <strong> digunakan untuk memberikan penekanan visual pada teks, serta memberikan makna penting pada teks tersebut. Dalam hal SEO, penggunaan tag <strong> dianggap lebih baik karena mesin pencari seperti Google akan memberikan bobot lebih pada teks yang diberi tag <strong>, sehingga membantu meningkatkan keterlihatan konten pada hasil pencarian.
Berikut adalah contoh penggunaan tag <b> dan <strong>:
<p>Ini adalah teks <b>tebal</b>.</p>
<p>Ini adalah teks <strong>sangat tebal</strong>.</p>Teks Miring, Tag <i> dan <em>
Menambahkan teks miring pada website dapat memberikan penekanan pada kata atau frasa tertentu, sehingga mudah dibedakan dengan teks biasa. Dalam HTML5, ada dua tag yang dapat digunakan untuk menambahkan teks miring, yaitu <i> (italic) dan <em> (emphasis). Namun, perlu diingat bahwa kedua tag tersebut memiliki perbedaan makna.
Tag <i> digunakan untuk membuat teks menjadi miring secara visual tanpa mengubah makna dari teks itu sendiri. Sedangkan tag <em> digunakan untuk memberikan penekanan pada teks yang dianggap penting atau menonjol, sehingga secara makna teks tersebut lebih ditekankan.
Meskipun keduanya digunakan untuk membuat teks miring, <i> dan <em> memiliki perbedaan dalam arti dan fungsinya.
Tag <i> digunakan untuk memberikan penekanan pada teks secara visual, namun tidak secara semantik. Artinya, penekanan yang diberikan oleh tag <i> hanya berdasarkan pada penampilan, bukan makna yang ingin disampaikan. Oleh karena itu, tag <i> biasanya digunakan untuk menunjukkan kata asing, kata dalam bahasa lain, atau judul buku.
Sedangkan, tag <em> digunakan untuk memberikan penekanan pada teks secara semantik. Tag <em> menekankan bahwa kata atau frasa tersebut memang memiliki arti yang penting dalam konteks teks yang sedang ditulis. Dalam hal ini, tag <em> digunakan untuk memberikan penekanan yang lebih kuat daripada tag <i>.
Dalam hal SEO, tag <em> dianggap lebih penting karena memberikan penekanan secara semantik pada kata atau frasa tertentu, sehingga dapat membantu mesin pencari dalam memahami konten halaman web.
Jadi, meskipun keduanya digunakan untuk membuat teks miring, namun penggunaannya harus disesuaikan dengan konteks dan tujuan yang ingin dicapai.
Berikut contoh penggunaan tag <i> dan <em>:
<p>Ini adalah contoh penggunaan tag <i>italic</i> dan tag <em>emphasis</em>.</p>Teks Underline, Tag <u> dan <ins>
Untuk menandai teks dengan garis bawah pada HTML5, terdapat dua tag yang dapat digunakan yaitu <u> (underline) dan <ins> (insert). Teks dengan garis bawah biasanya digunakan untuk menunjukkan kata yang baru diperkenalkan atau informasi yang penting. Namun, penggunaan teks underline perlu dihindari karena terkadang dapat membuat teks terlihat seperti hyperlink.
Tag <u> (underline) digunakan untuk memberikan efek garis bawah pada teks, sedangkan tag <ins> (insert) digunakan untuk menunjukkan teks yang baru disisipkan ke dalam dokumen, biasanya dengan memberikan efek garis bawah pada teks tersebut. Perbedaan utamanya adalah pada penggunaan konteks atau makna dari teks yang diberi efek garis bawah tersebut.
Berikut adalah contoh penggunaan tag <u> dan <ins> pada HTML5:
<p>Ini adalah <u>teks yang bergaris bawah</u> dan <ins>teks yang disisipkan</ins>.</p>Teks Tercoret, Tag <s> dan <del>
Di dalam HTML5, ada dua tag yang dapat kita gunakan untuk membuat teks tercoret, yaitu tag <s> (strikethrough) dan <del> (delete). Teks yang tercoret biasanya menunjukkan bahwa teks tersebut tidak relevan atau tidak digunakan lagi. Hal ini berguna untuk memberitahu pembaca bahwa teks tersebut sudah tidak relevan. Berikut adalah contoh penggunaan tag teks tercoret:
<s>Ini adalah teks tercoret dengan tag s</s>
<del>Ini adalah teks tercoret dengan tag del</del>Teks Pangkat, Tag <sup> dan <sub>
Teks pangkat digunakan untuk menunjukkan angka yang dipangkatkan atau menunjukkan kaki pangkat suatu satuan dalam satuan pengukuran. Dalam HTML5, kita bisa membuat teks pangkat menggunakan tag <sup> untuk pangkat atas, dan tag <sub> untuk pangkat bawah. Tag-tag ini berguna saat membuat formula matematika atau kimia, serta dalam menampilkan simbol satuan pengukuran pada web. Ingin tahu bagaimana cara menggunakan tag <sup> dan <sub>? Berikut contoh penggunaannya:
<p>Contoh penggunaan pangkat: 2<sup>3</sup> = 8</p>
<p>Contoh penggunaan akar: √<span>4</span> = 2</p>
<p>Contoh penggunaan subscript: H<span>2</span>O</p>
<p>Contoh penggunaan superscript: E = mc<sup>2</sup></p>
Teks Marker, Tag <mark>
Menandai kata kunci atau teks penting pada sebuah teks dapat membantu pembaca untuk lebih mudah memahami isi dokumen. Dalam HTML5, kita dapat menggunakan tag <mark> untuk membuat teks marker atau penanda. Tag ini sangat berguna untuk menyorot bagian penting pada sebuah paragraf atau halaman web.
<p>Hari ini cuacanya <mark>cerah</mark> sekali!</p>Dengan menambahkan tag <mark> pada kata “cerah”, maka kata tersebut akan ditampilkan dengan latar belakang warna kuning sebagai penanda bahwa kata tersebut penting.
Teks Formatting Komputer
Jika Anda ingin menampilkan kode program atau komputer di dalam dokumen HTML, terdapat beberapa tag yang dapat digunakan untuk memformatnya agar lebih mudah dibaca dan dipahami oleh pengguna. Ada lima tag khusus untuk memformat teks kode, yaitu <code>, <samp>, <kbd>, <var>, dan <pre>. Dengan menggunakan tag-tag ini, teks kode dapat ditampilkan dengan baik di dalam dokumen HTML.
Berikut adalah contoh penggunaan masing-masing tag:
- Tag <code> digunakan untuk menampilkan teks kode dalam satu baris. Contohnya seperti ini: <code>print(“Hello, world!”);</code>
- Tag <samp> digunakan untuk menampilkan contoh output dari kode tersebut. Misalnya: <samp>Hello, world!</samp>
- Tag <kbd> digunakan untuk menampilkan keyboard input. Contohnya: <kbd>Ctrl + Alt + Delete</kbd>
- Tag <var> digunakan untuk menampilkan variabel atau nilai variabel dalam kode. Contohnya: <var>x = 5;</var>
- Tag <pre> digunakan untuk menampilkan teks kode dalam beberapa baris.
Teks Heading, Tag <h1> sampai <h6>
Jadikan Kontenmu Memikat dengan Tag Heading pada HTML5
Dalam HTML5, judul atau heading bisa dibuat dengan tag <h1> sampai <h6>. Tag <h1> digunakan untuk judul utama atau level pertama, sedangkan tag yang lain digunakan untuk subjudul atau level yang lebih rendah.
Tidak hanya memudahkan pembaca untuk memahami struktur dan hierarki kontenmu, penggunaan tag heading yang benar juga membantu mesin pencari untuk mengindeks kontenmu dengan lebih baik. Selain itu, masing-masing level judul memiliki ukuran teks yang berbeda untuk memperjelas urutan dan bobot dari setiap informasi yang disajikan.
Jadi, pastikan kamu menggunakan tag heading dengan benar dan optimal untuk memikat pembaca dan meningkatkan visibilitas di mesin pencari!
HTML5 memiliki banyak tag untuk memformat teks sesuai dengan kebutuhan, seperti teks tebal dengan tag <b> atau <strong>, teks miring dengan tag <i> atau <em>, teks underline dengan tag <u> atau <ins>, teks tercoret dengan tag <s> atau <del>, teks pangkat dengan tag <sup> atau <sub>, teks marker dengan tag <mark>, dan masih banyak lagi.
Selain itu, HTML5 juga memiliki tag khusus untuk membuat judul atau heading dengan tag <h1> sampai <h6>. Penggunaan tag yang tepat akan membuat tampilan teks lebih rapi dan mudah dibaca oleh pengguna.
Dalam memilih tag yang akan digunakan, sebaiknya mempertimbangkan fungsinya dan kegunaannya dalam konteks dokumen atau halaman web yang sedang dibuat. Hal ini juga dapat membantu dalam membuat dokumen atau halaman web yang lebih SEO-friendly dan mudah dicari oleh mesin pencari.
