Membuat Teks Tebal dalam HTML

Pendahuluan

HTML (Hypertext Markup Language) adalah bahasa markah yang digunakan untuk membuat dan menyusun halaman web. Dalam HTML, kita dapat mengatur struktur, tata letak, dan gaya dari elemen-elemen pada halaman web.

Teks tebal adalah salah satu fitur yang dapat diterapkan pada teks dalam HTML untuk memberikan penekanan atau perhatian khusus. Dengan menggunakan elemen dan atribut yang sesuai, kita dapat membuat teks terlihat lebih menonjol, mudah dibaca, dan memperkuat pesan yang ingin disampaikan.

Cara Membuat Teks tebal di HTML

Bagaimana cara membuat teks tebal/bold dengan HTML untuk website? Untuk menerapkan teks tebal atau bold dalam HTML, Anda dapat menuliskan kode tag: "b" atau "strong".

Teks tebal biasanya digunakan untuk memberikan penegasan atau perhatian khusus pada teks tertentu, misalnya seperti pada judul, subjudul, huruf penting, dll.

Tag yang digunakan untuk membuat teks tebal di HTML adalah tag <b> (bold) dan tag <strong>. Kamu bebas mau pakai yang mana saja, hasilnya akan sama-sama tebal.

Fungsi Teks Tebal dalam HTML

Teks tebal memiliki peran penting dalam desain web yang efektif. Berikut adalah beberapa alasan mengapa teks tebal penting:

1. Penekanan dan Hierarki: Dalam sebuah halaman web, kita ingin mengarahkan perhatian pengguna ke informasi yang paling penting. Dengan menggunakan teks tebal, kita dapat menyoroti judul, subjudul, atau poin penting dalam konten, sehingga memudahkan pengguna untuk memahami struktur dan hierarki informasi.

2. Meningkatkan Keterbacaan: Teks tebal dapat membuat teks lebih jelas dan mudah dibaca. Saat menggunakan teks tebal dengan bijak, kita dapat meningkatkan keterbacaan konten, terutama ketika menyoroti kata kunci atau poin penting dalam teks.

3. Memperkuat Pesan: Ketika ingin menyampaikan pesan yang kuat atau menonjolkan argumen tertentu, teks tebal dapat digunakan untuk memberikan kekuatan dan kejelasan pada kata-kata yang dipilih. Hal ini dapat membantu audiens memahami dan mengingat pesan yang ingin disampaikan.

4. Membedakan Konten: Dalam desain web yang kompleks, teks tebal dapat digunakan untuk membedakan jenis konten atau elemen tertentu. Misalnya, dengan menggunakan teks tebal pada tombol atau tautan, kita dapat membedakan elemen interaktif dari teks biasa.

5. Estetika dan Visual: Selain memberikan penekanan dan kejelasan, teks tebal juga dapat memberikan dimensi visual yang menarik pada halaman web. Dalam kombinasi dengan elemen desain lainnya, teks tebal dapat membantu menciptakan tampilan yang indah dan estetis.

Memilih Elemen yang Tepat untuk Menerapkan Teks Tebal

Ada dua elemen yang sering digunakan untuk membuat teks tebal dalam HTML, Berikut adalah elemen-elemen yang sering digunakan:

• <strong>: Elemen <strong> digunakan untuk menandai teks yang sangat penting atau sangat menonjol. Ini memberikan penekanan yang kuat pada teks dan secara bawaan akan diubah menjadi teks tebal oleh browser.

  Elemen <strong> memiliki makna semantik yang kuat, menunjukkan bahwa teks tersebut penting secara kontekstual. Oleh karena itu, disarankan untuk menggunakan elemen <strong> ketika ingin memberikan penekanan yang kuat pada teks.

Contoh:

<p>ini adalah <strong>teks tebal</strong> dalam HTML.</p>

• <b>: Elemen <b> (bold) digunakan untuk menandai teks tebal. Meskipun secara visual mirip dengan <strong>, elemen <b> tidak memberikan penekanan yang sama pada makna teks seperti <strong>. Penggunaan elemen <b> sebaiknya terbatas pada tujuan tampilan saja.

  Dalam contoh di dibawah ini, kata "teks tebal" akan ditampilkan tebal pada halaman web. Elemen <b> lebih cocok digunakan jika tujuan Anda hanya menciptakan tampilan visual dengan teks tebal tanpa memberikan penekanan yang kuat pada makna teks tersebut.

Contoh:

<p>ini adalah <b>teks tebal</b> dalam HTML.</p>

Ketika memilih elemen yang tepat, penting untuk mempertimbangkan makna konten dan tujuan penggunaannya. Jika ingin memberikan penekanan yang kuat pada teks penting, menggunakan <strong> adalah lebih disarankan. Namun, jika tujuan Anda adalah menciptakan tampilan visual dengan teks tebal tanpa penekanan makna, <b> dapat digunakan.

Memperluas Penggunaan Teks Tebal dalam HTML

Selain menggunakan elemen <strong> dan <b> untuk membuat teks tebal dalam HTML, terdapat beberapa cara lain yang bisa Anda terapkan. Berikut adalah dua cara yang umum digunakan:

1. Menggunakan CSS untuk mengubah gaya teks tebal. Selain mengandalkan elemen HTML, Anda juga dapat menggunakan CSS untuk mengubah gaya teks tebal sesuai dengan preferensi desain Anda. Dengan CSS, Anda memiliki lebih banyak kendali terhadap tampilan dan gaya teks tebal.

   Dalam contoh di bawah ini, kita menggunakan CSS untuk memberikan properti font-weight: bold; pada kelas CSS .teks-tebal. Kemudian, kita menerapkan kelas tersebut pada elemen <span> yang mengelilingi teks "teks tebal". Hal ini akan membuat teks tersebut ditampilkan tebal sesuai dengan gaya CSS yang ditentukan. Dengan menggunakan CSS, Anda dapat menyesuaikan lebih banyak aspek dari tampilan teks tebal, seperti ukuran, warna, dan efek lainnya.

Contoh:

<style>
    .teks-tebal {
      font-weight: bold;
    }
  </style>

  <p>Ini adalah <span class="teks-tebal">teks tebal</span> menggunakan CSS.</p>

2. Menggunakan elemen lain, seperti link dan paragraf. Anda juga dapat mengombinasikan teks tebal dengan elemen lain dalam HTML, seperti link dan paragraf. Misalnya, Anda dapat menambahkan teks tebal pada link untuk menyoroti bagian penting dari teks tersebut.

   Dalam contoh di bawah ini, teks "halaman utama" di dalam elemen <a> diberi penekanan teks tebal menggunakan elemen <strong>. Ketika diklik, link tersebut akan membawa pengguna ke halaman utama. Anda juga dapat menggunakan teks tebal dengan elemen paragraf, judul, atau elemen lainnya untuk memberikan penekanan pada bagian tertentu dari konten Anda.

Contoh:

<p>Untuk informasi lebih lanjut, kunjungi <a href="https://www.example.com"><strong>Halaman utama</strong></a>.</p>

Praktikum

Current Browser Support:

Edge Firefox Chrome Safari

Berikut adalah langkah-langkah untuk mengetahui perbedaan ukuran judul teks (h1, h2, h3, h4, h5 dan h6):

1. Jalankan aplikasi Text Editor
2. Isikan kode dibawah ini kedalam text editor
3. Simpan file dengan nama judul.html dan tempatkan ke dalam direktori kerja.
4. Jalankan file tersebut melalui web browser dan lihat hasilnya.

Berikut adalah Contoh judul dalam HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Format Teks</title>
  </head>

  <!--[ <body> open ]-->
  <body>
    <h2>Demo Membuat Teks Tebal</h2>
    <p>
      Menggunakan tag &lt;b&gt; :<br />
      <b>Modul Pemprograman Web Dasar</b><br />
      Cakupan Bahasan: <b>HTML</b> | <b>CSS</b> | <b>Javascript</b> | <b>XML</b>
    </p>
    <p>
      Menggunakan tag &lt;strong&gt; :<br />
      <strong>Modul Pemprograman Web Dasar</strong><br />
Cakupan Bahasan:
      <strong>HTML</strong> | <strong>CSS</strong> | <strong>Javascript</strong> | <strong>XML</strong>
    </p>
  </body>
  <!--[ </body> close ]-->
</html>

Gambar dibawah ini adalah Gambar hasil praktikum mengatur posisi button/tombol sesuai dengan script diatas.

Kesimpulan

Dalam materi ini, kami membahas cara membuat teks tebal dalam HTML dengan penggunaan elemen <strong> dan <b>, serta mengubah gaya teks tebal menggunakan CSS. Kami juga memberikan tip praktis untuk menghindari penyalahgunaan teks tebal, memastikan keterbacaan yang baik, dan menggunakan gaya teks alternatif untuk perangkat seluler. Dengan memahami dan menerapkan materi ini, pembaca dapat meningkatkan keterampilan mereka dalam menciptakan halaman web yang menarik dan efektif. Selamat mencoba!