Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / html

Cara Membuat Teks Tebal Miring dan Garis Bawah pada HTML

Dipublikasikan Oleh: elfanmauludi 11 komentar
HTML menyediakan kemampuan untuk melakukan format teks seperti yang biasa dilakukan pada MS Word atau aplikasi edit teks lainnya. Pada artikel ini, akan dibahas beberapa jenis pilihan untuk melakukan format teks.


Sebelum mempelajari materi tentang Cara Membuat Teks Tebal Miring dan Garis bawah pada HTML, terlebih dahulu pelajari materi tentang: Bagian Dasar HTML Fungsi dan Contohnya, Atribut Populer HTML dan Fungsinya, dan Elemen Paragraf pada HTML dan Fungsinya.

Format jika dilihat dari Kamus Besar Bahasa Indonesia bermakna 'bentuk dan ukuran', jika dihubungkan dengan teks, maka yang dimaksud dengan format adalah ukuran dan jenis huruf yang digunakan pada suatu teks atau huruf. Melakukan pemformatan berarti melakukan pengaturan atau setting terhadap bentuk dan ukuran dari sebuah karakter, dalam hal ini adalah karakter yang dapat ditampilkan pada halaman website. Ada banyak manfaat dari penggunaat format teks, utamanya dalam penulis artikel atapun juga membuat informasi pada halaman website. Contoh, memberi tanda coret pada tulisan yang mengalami koreksi, atau memberikan penebalan huruf atau kata yang memiliki makna khusus, dan lain sebagainya.

satu, Membuat teks Bold atau Strong: Untuk membuat teks tebal (bold) dalam HTML, Programmer dapat menggunakan tag <strong> atau <b>. Kedua tag ini digunakan untuk menyoroti teks sebagai teks yang penting atau penting secara visual. Dengan menggunakan kedua tag tersebut maka dapat dilakukan pemformatan teks menjadi bold menggunakan tag <b> dan tag <strong>:
  • Tag bold menggunakan pembukaan tag dan penutupan tag. Teks yang akan dibuat menjadi bold harus menggunakan tag <b> dan tag </b>.
  • Tag <strong> untuk membuat teks menjadi strong, untuk penekanan pada kata yang penting pada kalimat. Tag yang digunakan adalah <strong> dan diakhiri dengan tag </strong>.

Kedua tag ini akan menghasilkan teks yang sama-sama tebal saat dirender di browser. Secara semantik, tag <strong> memiliki makna yang lebih berat secara logis karena disarankan untuk digunakan ketika teks tersebut memang memiliki arti yang kuat atau penting dalam konteksnya, sedangkan tag <b> lebih berfokus pada estetika tampilan.

Catatan: Saat merancang halaman web, sebaiknya gunakan tag <strong> untuk menekankan pentingnya teks secara struktural, dan gunakan tag <b> untuk tujuan pemformatan atau estetika tertentu jika diperlukan. Dalam prakteknya, browser umumnya me-render keduanya dengan gaya tebal yang sama.

Contoh:

<!DOCTYPE html>

<html>

<!-- html format teks-->

 

<head>

<title>

Bold

</title>

</head>

 

<body>

<!--Teks dalam format normal-->

<p>

Selamat datang

</p>

 

<!--Teks dalam format Bold-->

<p>

<b>Selamat datang</b>

</p>

 

<!--Teks dalam format Strong-->

<p>

<strong>Selamat datang</strong>

</p>

 

</body>

</html>

Output:

Selamat datang

Selamat datang

Selamat datang


dua, Membuat teks menjadi Italic atau Emphasize: Untuk membuat teks menjadi italic atau menekankan (emphasized) dalam HTML, Programmer dapat menggunakan tag <em> atau <i>. Kedua tag ini digunakan untuk menyoroti teks sebagai teks yang penting atau ingin ditekankan secara visual, sebagai berikut:
  • Tag <i> digunakan untuk membuat teks menjadi Italic (miring). Tag dibuka dengan kode <i> dan diakhiri dengan </i>.
  • Tag <em> digunakan untuk membuat teks menjadi emphasize, yang dimulai dengan tag <em> dan diakhiri dengan </em>.

Kedua tag ini akan menghasilkan teks yang sama-sama miring (italic) saat di-render di browser. Secara semantik, tag <em> menandakan bahwa teks tersebut memiliki penekanan penting atau makna yang kuat dalam konteksnya, sedangkan tag <i> lebih berfokus pada estetika tampilan.

Baca Juga:

Catatan: Saat merancang halaman web, sebaiknya gunakan tag <em> untuk menunjukkan teks yang perlu ditekankan secara struktural atau memiliki makna penting dalam konteksnya, dan gunakan tag <i> untuk tujuan pemformatan atau estetika tertentu jika diperlukan. Meskipun browser umumnya me-render keduanya sebagai teks miring, namun tag <em> lebih menekankan makna semantik yang penting.

Contoh:

<!DOCTYPE html>

<html>

<!-- HTML format teks -->

 

<head>

<title>

Italic

</title>

</head>

 

<body>

 

<!--Teks dalam format normal-->

<p>

Selamat datang

</p>

 

<!--Teks dalam format Italics-->

<p>

<i>Selamat datang</i>

</p>

 

<!--Teks dalam format Emphasize-->

<p>

<em>Selamat datang</em>

</p>

 

</body>

</html>

Output:

Selamat datang

Selamat datang

Selamat datang


tiga, Highlight teks: Pada HTML dimungkinkan untuk melakukan highlight teks menggunakan tag <mark>. Untuk menyoroti atau memberi penekanan visual pada teks dalam HTML, maka dapat menggunakan beberapa metode, salah satu diantaranya adalah menggunakan tag <mark> dan menggunakan CSS, sebagai berikut:
  • Tag tersebut dimulai dengan kode <mark> dan diakhiri dengan </mark>. Tag <mark> digunakan untuk menandai atau menyoroti teks tertentu dalam sebuah paragraf atau bagian dari teks.
  • Dapat juga menggunakan CSS untuk memberikan penyorotan atau penekanan pada teks. Programmer dapat menggunakan properti background-color untuk memberikan warna latar belakang pada teks dan membuatnya menonjol.

Catatan: Kedua metode tersebut memberikan penyorotan visual pada teks, baik menggunakan tag khusus seperti <mark> maupun dengan menerapkan gaya CSS langsung pada elemen tertentu. Pilihan antara menggunakan tag atau CSS tergantung pada konteks dan kebutuhan desain halaman web yang sedang dibuat.

Contoh:

<!DOCTYPE html>

<html>

<!-- HTML format teks-->

 

<head>

<title>

Highlight

</title>

</head>

 

<body>

 

<!--Teks dalam format normal-->

<p>

Selamat datang

</p>

 

<!--Teks dalam format Highlight-->

<p>

<mark>Selamat datang</mark>

</p>

 

</body>

</html>

Output:

Selamat datang

Selamat datang


empat, Membuat sebuah teks menjadi subscript atau superscript: Pada HTML, Programmer dapat membuat teks subscript (subskrip) atau superscript (superskrip) menggunakan tag <sub> dan <sup>, yakni sebagai berikut:
  • Elemen <sup> digunakan untuk membuat teks superscript. Tag <sup> digunakan untuk menampilkan teks di posisi superscript, yang sering digunakan untuk menampilkan eksponen dalam rumus matematika, catatan kaki, dan sebagainya.
  • Element <sub> digunakan untuk membuat teks subscript. Tag <sub> digunakan untuk menampilkan teks di posisi subscript, yang biasanya digunakan untuk menampilkan simbol kimia, rumus matematika, tanggal dalam format ordinal (misalnya, 1st, 2nd, 3rd), dan sebagainya.

Catatan: Kedua elemen tersebut memiliki tag pembukaan dan penutupan. Dengan menggunakan tag <sub> dan <sup>, maka dapat dilakukan proses penampilan teks dalam posisi subscript atau superscript, berguna untuk menampilkan informasi dengan gaya penulisan yang sesuai untuk simbol matematika, kimia, catatan kaki, dan konten lainnya yang memerlukan perubahan dalam ketinggian atau posisi teks.

Contoh:

<!DOCTYPE html>

<html>

<!-- HTML format teks-->

 

<head>

<title>

Superscript dan Subscript

</title>

</head>

 

<body>

 

<!--Teks dalam format normal-->

<p>

Selamat datang

</p>

 

<!--Teks dalam format Superscript-->

<p>

Hello <sup>Selamat datang</sup>

</p>

 

<!--Teks dalam format Subcript-->

<p>

Hello <sub>Selamat datang</sub>

</p>

 

</body>

</html>

Output:

Selamat datang

Hello Selamat datang

Hello Selamat datang


lima, Membuat ukuran teks menjadi kecil: Element <small> digunakan untuk membuat teks menjadi berukuran kecil. Teks yang akan ditampilkan hurufnya dalam ukuran kecil harus dituliskan dalam tag <small> dan <\small>. Elemen <small> dalam HTML digunakan untuk menunjukkan teks yang lebih kecil dari teks sekitarnya. Ini umumnya digunakan untuk menampilkan teks yang dianggap sebagai catatan kecil, keterangan, atau informasi tambahan yang kurang penting dari teks utama di halaman web.

Elemen <small> memberi tahu browser atau pembaca layar bahwa teks yang terdapat didalamnya seharusnya ditampilkan dalam ukuran yang lebih kecil secara default. Namun, gaya atau ukuran teks dapat diubah menggunakan CSS untuk menyesuaikan tampilan sesuai kebutuhan desain halaman web.

Catatan: Elemen <small> sering digunakan untuk menampilkan keterangan, catatan kaki, atau informasi tambahan yang tidak begitu penting secara visual dalam konteks dokumen HTML. Meskipun dianggap sebagai teks "kecil", namun ini bukanlah cara yang tepat untuk mengurangi ukuran teks untuk membuatnya lebih sulit dibaca, tetapi lebih untuk menunjukkan tingkat pentingan atau keterangan tambahan yang kurang dominan secara visual.

Contoh:

<!DOCTYPE html>

<html>

<!-- HTML format teks-->

 

<head>

<title>

Small

</title>

</head>

 

<body>

 

<!--Teks dalam format Normal-->

<p>

Selamat datang

</p>

 

<!--Teks dalam format small-->

<p>

<small>Selamat datang</small>

</p>

 

</body>

</html>

Output:

Selamat datang

Selamat datang


enam, Memberi garis delete pada teks: Elemen <del> digunakan untuk membuat garis delete sepanjang teks. Elemen ini juga memiliki bagian pembukaan dan penutupan tag. Pada HTML, dapat digunakan elemen <del> untuk menandai teks yang dihapus atau dihapus dari dokumen. Ini sering digunakan dalam konteks revisi atau perubahan pada teks di halaman web, seperti riwayat perubahan pada artikel atau dokumen, dimana hasilnya akan menampilkan teks yang dikelilingi oleh tag <del> dengan garis bawah (strikethrough) secara default, menandakan bahwa teks tersebut telah dihapus. Namun, gaya dari garis tersebut dapat diubah menggunakan CSS jika ingin mengubah tampilannya.

Catatan: Dalam halaman web, elemen <del> sering digunakan bersamaan dengan elemen <ins> yang menandai teks yang baru ditambahkan atau diinisialisasi. Namun, tag <ins> jarang digunakan secara luas dan lebih umum menandai teks yang baru ditambahkan dalam dokumen.

Contoh:

<!DOCTYPE html>

<html>

<!-- HTML format teks-->

 

<head>

<title>

Delete

</title>

</head>

 

<body>

 

<!--Teks dalam format normal-->

<p>

Selamat datang

</p>

 

<!--Teks dalam format Delete-->

<p>

<del>Selamat datang</del>

</p>

 

</body>

</html>

Output:

Selamat datang

Selamat datang


tujuh, Menambah garis bawah teks: Elemen <ins> digunakan untuk menambah garis bawah (underline). Tag ini memiliki bagian pembukaan dan bagian penutupan. Elemen <ins> dalam HTML digunakan untuk menandai teks yang baru ditambahkan atau diinisialisasi dalam suatu dokumen. Elemen ini secara visual umumnya menampilkan teks yang ditambahkan dengan garis bawah (underline) secara default, namun, seperti halnya dengan sebagian besar elemen HTML, dimana gaya default ini dapat diubah menggunakan CSS.

Catatan: Penting untuk diingat bahwa penggunaan elemen <ins> tidak seumum penggunaan elemen <del> yang menandai teks yang dihapus dalam suatu dokumen. Elemen <ins> lebih jarang digunakan dan biasanya diperlukan dalam konteks spesifik dimana penambahan atau inisialisasi teks harus ditandai secara visual. Seperti halnya dengan hampir semua elemen HTML, gaya dan tata letak elemen <ins> juga dapat disesuaikan dengan menggunakan CSS sesuai kebutuhan desain halaman web.

Contoh:

<!DOCTYPE html>

<html>

<!-- HTML format teks-->

 

<head>

<title>

Inserting

</title>

</head>

 

<body>

 

<!--Teks dalam format normal-->

<p>

Selamat datang

</p>

 

<!--Teks dalam format Insert-->

<p>

<ins>Selamat datang</ins>

</p>

 

</body>

</html>

Output:

Selamat datang

Selamat datang


Referensi Tambahan:

Artikel ini akan dibaca oleh: Muhammad Irfan Pratama, Nadya Putri Al-Fath, Nena Mahaesti, Nyawiji Rizki Lestari, dan Putri Safina Liestyana.
Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia

11 komentar untuk "Cara Membuat Teks Tebal Miring dan Garis Bawah pada HTML"

  1. AnonimJumat, 21 Mei 2021 pukul 19.20.00 WIB

    Apa yang dimaksud dengan teks format pada HTML?

    BalasHapus
    Balasan
    1. AnonimJumat, 21 Mei 2021 pukul 19.21.00 WIB

      HTML format merupakan proses pemformatan teks yang digunakan untuk menampilkan nuansa tertentu pada teks. HTML memberi kemampuan untuk melakukan format teks dengan menggunakan CSS.

      Hapus
    2. AnonimJumat, 21 Mei 2021 pukul 19.21.00 WIB

      Ada banyak tag yang dipat digunakan dalam pemformatan teks HTML. Tag-tag tersebut digunakan untuk membuat teks menjadi lebih tebal, mirifng, atapun bergaris. Ada hampir sekitar 14 pilihan yang tersedia pada HTML yang dapat digunakan untuk melakukan pemformatan teks.

      Hapus
  2. AnonimJumat, 21 Mei 2021 pukul 19.23.00 WIB

    Ada berapa tipe teks format dalam HTML?

    BalasHapus
    Balasan
    1. AnonimJumat, 21 Mei 2021 pukul 19.24.00 WIB

      1. Pemformatan karakter atau font.
      2. Pemformatan paragraf.
      3. Pemformatan dokumen atau halaman.
      4. Pemformatan section.

      Hapus
  3. AnonimKamis, 04 Agustus 2022 pukul 13.45.00 WIB

    Apa yang dimaksud dengan memformat teks atau text formatting pada html?

    BalasHapus
    Balasan
    1. AnonimKamis, 04 Agustus 2022 pukul 13.46.00 WIB

      HTML formatting adalah proses pemformatan teks untuk tampilan dan nuansa yang lebih baik. HTML memberi kemampuan untuk memformat teks tanpa menggunakan bantuan kode CSS. Ada banyak tag pemformatan dalam html, beberapa diantaranya dapat digunakan untuk membuat teks tebal, membuat teks miring, atau membuat garis bawah teks yang digunakan untuk memberikan tampilan visual yang lebih menarik pada teks.

      Hapus
  4. AnonimKamis, 04 Agustus 2022 pukul 13.46.00 WIB

    Adakah cara yang lebih efisien dalam melakukan format teks pada laman html selain dengan menulis secara langsung pada kode html?

    BalasHapus
    Balasan
    1. AnonimKamis, 04 Agustus 2022 pukul 13.46.00 WIB

      Alternatif lain untuk melakukan format teks adalah dengan menggunakan atribut style. Atribut style CSS dapat digunakna untuk menentukan gaya pada baris sebuah elemen. Dengan style CSS proses format teks dapat dilakukan secara terpisah dari laman html yang akan dilakukan format.

      Hapus
  5. AnonimKamis, 04 Agustus 2022 pukul 13.47.00 WIB

    Apa perbedaan antara pemformatan teks dan edit teks pada pembuatan html?

    BalasHapus
    Balasan
    1. AnonimKamis, 04 Agustus 2022 pukul 13.47.00 WIB

      Melakukan format teks artinya adalah melakukan perubahan pada tipe teks. Contoh membuat gais tebal, membuat garis miring, membuat garis bawah teks, mengubah ukuran font, mengubawah warna teks, dan lain sebagainya. Sedangkan proses pengedit teks lebih berkaitan dengan konten atau isi yang ditulis menggunakan teks. Contoh, melakukan perubahan kata atau kalimat yang dapat mengubah keseluruhan makna dari tulisan yang dibuat dalam artikel.

      Hapus

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -