Overview
Mulai dari membuat teks tebal dan miring, menggarisbawahi kata penting, menambahkan efek seperti subscript dan superscript, sampai menggunakan kutipan panjang; semuanya bisa dilakukan dengan memahami text formatting pada HTML.
HTML text merupakan inti dari setiap halaman web, menghidupkan konten yang kamu lihat di berbagai situs setiap hari.
Mulai dari judul yang menarik sampai paragraf informatif, teks biasa hingga efek khusus seperti bold, italic, maupun underline; semuanya adalah hasil dari pengaplikasian HTML text.
Artikel ini akan menjelajahi dasar-dasar pemformatan teks di HTML. Selamat membaca!
Apa itu Text Formatting pada HTML?
Text formatting pada HTML adalah proses mengatur tampilan teks di dalam sebuah website sehingga terlihat menarik dan rapi. Dengan kata lain, ini adalah cara kamu untuk mengontrol penuh penampilan teks di website.
Dengan HTML text, kamu dapat memberi format pada teks dengan berbagai cara, seperti membuatnya menjadi tebal, miring, atau bergaris bawah.
Penggunaan HTML text juga membantu dalam konsistensi tampilan di berbagai perangkat. Tidak peduli apakah website kamu diakses melalui komputer, tablet, atau ponsel, teks akan tetap terlihat rapi dan sesuai dengan yang kamu inginkan.
Berikut berbagai tag text formatting yang sering digunakan di HTML5:
Artikel ini akan membahas cara membuat beberapa HTML text di atas. Simak langkah-langkahnya berikut.
Cara Membuat Teks Tebal (Bold) di HTML
Secara semantik, teks tebal (bold) sering digunakan untuk menekankan makna pada kata tertentu.
Untuk membuat teks tebal di HTML, kamu dapat menggunakan tag < b >. Kamu cukup menempatkan teks yang ingin ditebalkan di antara tag pembuka < b > dan tag penutup < /b >. Berikut contoh penggunaannya:
Hasilnya akan terlihat seperti ini:
Cara Membuat Teks Miring (Italic) di HTML
Teks miring (italic) dalam HTML biasanya dipakai untuk menyoroti istilah atau kata-kata asing yang mungkin tidak familiar bagi pembaca. Untuk menerapkannya, gunakan tag < i >.
Kamu juga hanya perlu menempatkan teks yang ingin kamu miringkan di antara tag pembuka < i > dan tag penutup < /i >.
Contoh penggunaan:
Hasilnya akan tampak seperti ini:
Cara Membuat Teks Bergaris Bawah (Underline) di HTML
Menggarisbawahi teks (underline) di HTML berfungsi dalam menambahkan penekanan pada bagian tertentu dari konten web kamu, seperti tautan penting atau detail yang ingin kamu soroti.
Underline bisa diterapkan dengan tag < u >. Kamu cukup menempatkan teks yang ingin diberi garis bawah di antara tag pembuka < u > dan tag penutup < /u >.
Contohnya sebagai berikut:
Output:
Cara Membuat Subscript dan Superscript di HTML
Subscript dan superscript adalah elemen yang sering dimanfaatkan untuk konteks sains, matematika, atau footnote.
Subscript adalah teks yang ditampilkan sedikit di bawah garis teks normal. Elemen ini dapat dijalankan dengan tag < sub >.
Sementara itu, superscript adalah teks yang ditampilkan sedikit di atas garis teks normal. Penulisannya bisa dilakukan menggunakan tag < sup >.
Berikut contoh penggunaan tag < sub >:
Hasilnya akan seperti ini:
Berikut contoh penggunaan tag < sup >:
Hasilnya akan terlihat sebagai berikut:
{{COMPONENT_IDENTIFIER}}
Cara Membuat Strikethrough di HTML
Strikethrough adalah gaya teks di mana garis horizontal ditarik melalui tengah teks. Elemen ini sering digunakan untuk menunjukkan perubahan, revisi, atau penghapusan dalam dokumen.
Di HTML, kamu bisa menggunakan tag < s > atau < strike > untuk membuat teks dengan garis melintang.
Berikut contohnya:
Hasilnya akan terlihat seperti ini:
Cara Membuat Teks Kutipan (Blockquote) di HTML
Kutipan (blockquote) biasanya dipakai dalam konten web untuk menyoroti pernyataan dari sumber lain atau referensi penting. Elemen ini membantu dalam memberikan konteks atau mendukung argumen yang sedang dibuat.
Di HTML, kamu bisa membuatnya menggunakan tag < blockquote >
Berikut contohnya:
Output:
FAQ (Frequently Ask Question)
Bagaimana cara membuat hyperlink di teks HTML?
Kamu dapat menggunakan tag < a > untuk membuat hyperlink.
Contoh:
Apakah ada cara untuk menampilkan kode HTML sebagai teks biasa di halaman web?
Ya, kamu bisa menggunakan entitas HTML, seperti:
- < untuk <
- > untuk >
Apa perbedaan antara tag < blockquote > dan tag < q >?
Tag < blockquote > dipakai untuk kutipan panjang dan biasanya menampilkan teks dalam blok terpisah, sementara tag < q > digunakan untuk kutipan pendek dan inline.
Penutup
HTML text adalah kumpulan teknik dan elemen yang memungkinkan kamu menyajikan informasi dengan cara yang efektif dan menarik.
Mulai dari membuat teks tebal dan miring, menggarisbawahi kata penting, menambahkan efek seperti subscript dan superscript, sampai menggunakan kutipan panjang; semua ini membentuk bagian dari alat yang dimiliki web developer.
Masih ragu? Coba dulu 3 hari, GRATIS
di Full-Stack Trial Class!
Rasakan pengalaman belajar di RevoU Full-Stack Program: Kelas 100% LIVE, Mini portofolio lewat hands-on assignment, Bimbingan Team Lead & small group discussion. Kalau cocok, kamu bisa lanjut daftar Full Program dengan kesempatan Fast-Track (skip semua tes seleksi masuk, langsung ke tahap akhir!)
Masih ragu? Coba dulu 3 hari, GRATIS
di Full-Stack Trial Class!
Rasakan pengalaman belajar di RevoU Full-Stack Program: Kelas 100% LIVE, Mini portofolio lewat hands-on assignment, Bimbingan Team Lead & small group discussion. Kalau cocok, kamu bisa lanjut daftar Full Program dengan kesempatan Fast-Track (skip semua tes seleksi masuk, langsung ke tahap akhir!)
Masih ragu? Coba dulu 3 hari, GRATIS
di Full-Stack Trial Class!
Rasakan pengalaman belajar di RevoU Full-Stack Program: Kelas 100% LIVE, Mini portofolio lewat hands-on assignment, Bimbingan Team Lead & small group discussion. Kalau cocok, kamu bisa lanjut daftar Full Program dengan kesempatan Fast-Track (skip semua tes seleksi masuk, langsung ke tahap akhir!)