14 HTML Text Formatting (Bold, Italic, Underline, dll)

Pahami berbagai cara formatting pada HTML text lengkap dengan contohnya!
RevoU Staff
September 1, 2023
6
min read

Mau Belajar

Software Engineering

?

Belajar di RevoU! Dapatkan skill digital paling in-demand langsung dari praktisi terbaik di bidangnya. Kelas online 100% LIVE, 1:1 career coaching, dan akses ke Community Hub dengan 6000+ member selamanya untuk support perkembangan karir kamu!
DAFTAR FULL PROGRAMCOBA COURSE GRATIS

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:

  • &lt; untuk <
  • &gt; 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.

RevoU Staff
Kickstart your career in tech with RevoU!

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!)

Artikel Lainnya

Mau belajar

Software Engineering

?

Belajar di RevoU! Dapatkan skill digital paling in-demand langsung dari praktisi terbaik di bidangnya. Kelas online 100% LIVE, 1:1 career coaching, dan akses ke Community Hub dengan 6000+ member selamanya untuk support perkembangan karir kamu!
Menu

Mulai karirmu dalam

Software Engineering

Belajar di RevoU! Dapatkan skill digital paling in-demand langsung dari praktisi terbaik di bidangnya. Kelas online 100% LIVE, 1:1 career coaching, dan akses ke Community Hub dengan 6000+ member selamanya untuk support perkembangan karir kamu!

Mau Belajar

Software Engineering

?

Belajar di RevoU! Dapatkan skill digital paling in-demand langsung dari praktisi terbaik di bidangnya. Kelas online 100% LIVE, 1:1 career coaching, dan akses ke Community Hub dengan 6000+ member selamanya untuk support perkembangan karir kamu!

DAFTAR FULL PROGRAM

Mau Belajar

Software Engineering

?