Bagaimana cara membuat teks tebal html?

Tutorial Dasar-Dasar HTML sesi kali ini akan mengetahkan tentang cara pembuatan huruf tebal HTML dan perbedaan tag<b> dan tag<strong> dalam level semantik HTML.

Dalam mempublikasikan sebuah konten artikel yang mengandung banyak kalimat, terkadang kita perlu memberi penekanan khusus terhadap sebuah kata dengan cara menebalkannya.

Nah sekarang bagaimana caranya menebalkan kata dalam HTML ?.  Pada HTML terdapat beberapa cara untuk membuat huruf tebal:

  • Menggunakan tag <b>..</b>
  • Menggunakan tag <strong>...</strong>

Dengan menggunakan tag<b>...</b> kita dapat membuat huruf tebal. Namun menurut w3school dan W3C berdasarkan spesifikasi HTML 5 spesifikasi, tag <b> harus digunakan sebagai pilihan terakhir bila tidak ada tag lain yang lebih sesuai.

HTML 5 menyatakan spesifikasi yang judul harus dilambangkan dengan tag <h2> sampai dengan tag<h6> , untuk menekankan teks harus menggunakan tag <em> , sedangkan untuk teks penting harus dilambangkan dengan tag <strong>.

Berikut ini contoh penggunaan tag<b>

<!DOCTYPE html>
<html>
<head>
<title>Tutorial HTML DTC-ILMU</title>
</head>

<body>
<p>Belajar Dasar-dasar HTML di <b>DTC-ILMU</b></p>
<p><b>SEMOGA SUKSES</b></p>
</body>
</html>

Outputnya ditunjukkan oleh Gambar.1 dibawah ini :


(Gambar.1)

Membuat Huruf tebal dengan tag

Dengan menggunakan tab<strong>...</strong> kita juga dapat membuat sebuah kata menjadi tebal.

<!DOCTYPE html>
<html>
<head>
<title>Tutorial HTML DTC-ILMU</title>
</head>

<body>
<p>Belajar Dasar-dasar HTML di <strong>DTC-ILMU</strong></p>
<p><b>SEMOGA SUKSES</b></p>
</body>
</html>

Outputnya ditunjukkan oleh Gambar.2 dibawah ini :


(Gambar.2)

Perbedaan tag <b> dan tag <strong>dalam HTML

Jika kita perhatikan penulisan huruf tebal dari dua tag diatas: tag<b> dan tag<strong>, kita melihat output yang dihasilkan sama. Hal ini sering menjadi pertanyaan, apa perbedaan tag<b> dan tag<strong>.?


Secara visual (tampilan di browser) tidak terlihat perbedaanya. Ouput dari penggunaan kedua tag tersebut terlihat persis sama. Perbedaan akan terlihat ketika tunanetra mengakses web.

Agar mereka (tunanetra) dapat membaca konten web diperlukan sebuah screen reader dimana terdapat program text-to-speech. Jadi saat mereka membuka sebuah page di website, teks diterjemahkan dalam bentuk suara. Pembacaan teks yang dimaksud dibaca dari kode htmlnya, berdasarkan spesifikasi aturan HTML yang ditetapkan oleh W3C. Dalam hal ini tag<b> dan tag<strong> termasuk kategori text-level semantic.

Jika Anda menggunakan  tag <b>, program suara tidak akan melakukan hal berbeda ketika membaca teks itu. Tetapi jika Anda menggunakan tag <strong>, program suara akan membacanya dengan nada suara yang berbeda. Hal ini dilakukan untuk menyampaikan kepada tunanetra bahwa teks tesebut penting.

Bisakah seseorang memberi tahu saya apa yang saya lakukan salah? "

"bold" belum pernah menjadi elemen HTML ("b" adalah kecocokan terdekat).

HTML harus mengandung konten terstruktur; CSS penerbit harus menyarankan gaya untuk konten itu. Dengan cara itu agen pengguna dapat mengekspos konten terstruktur dengan gaya yang berguna dan kontrol navigasi kepada pengguna yang tidak dapat melihat gaya yang disarankan tebal Anda (misalnya pengguna mesin pencari, pengguna benar-benar buta menggunakan pembaca layar, pengguna kurang terlihat menggunakan warna dan font mereka sendiri, pengguna culun menggunakan browser teks, pengguna browser yang dapat mengontrol suara dan berbicara seperti Opera untuk Windows). Jadi cara yang tepat untuk membuat teks tebal bergantung pada mengapa Anda ingin gaya itu tebal. Sebagai contoh:

  • Ingin membedakan judul dari teks lain? Gunakan elemen tajuk ("h2" hingga "h6") dan sarankan gaya tebal untuk mereka di dalam CSS Anda ("h2, h2, h3, h4, h5, h6 {font-weight: bold;}".

  • Ingin menanamkan label untuk bidang formulir? Gunakan elemen "label", kaitkan secara terprogram dengan elemen "pilih", "input" atau "textarea" yang relevan dengan memberikannya atribut "untuk" yang cocok dengan atribut "id" pada target, dan sarankan gaya berani untuk itu dalam CSS Anda ("label {font-weight: bold;"}).

  • Ingin memberanikan tajuk untuk sekelompok bidang terkait dalam formulir, seperti grup pilihan radio? Kelilingi mereka dengan elemen "fieldset", berikan elemen "legenda", dan sarankan gaya tebal untuk itu di dalam CSS Anda ("legend {font-weight: bold;}").

  • Ingin membedakan keterangan tabel dari keterangan tabel itu? Gunakan elemen "caption" dan sarankan gaya tebal untuk itu di dalam CSS Anda ("caption {font-weight: bold;}").

  • Ingin membedakan judul tabel dari sel data tabel? Gunakan elemen "th" dan sarankan gaya tebal untuk itu dalam CSS Anda ("th {font-weight: bold;}").

  • Ingin membedakan judul film atau album yang dirujuk dari teks di sekitarnya? Gunakan elemen "cite" dengan kelas ("cite class =" movie-title "), dan sarankan gaya yang berani untuk itu di dalam CSS Anda (" .movie-title {font-weight: bold;} ").

  • Ingin membedakan kata kunci yang ditentukan dari teks di sekitarnya yang mendefinisikan atau menjelaskannya? Gunakan elemen "dfn" dan sarankan gaya tebal untuk itu dalam CSS Anda ("dfn {font-weight: bold;}").

  • Ingin membedakan beberapa kode komputer dari teks di sekitarnya? Gunakan elemen "kode" dan sarankan gaya tebal untuk itu di dalam CSS Anda ("code {font-weight: bold;}").

  • Ingin membedakan nama variabel dari teks di sekitarnya? Gunakan elemen "var" dan sarankan gaya tebal untuk itu di dalam CSS Anda ("var {font-weight: bold;}").

  • Ingin menunjukkan bahwa beberapa teks telah ditambahkan sebagai pembaruan? Gunakan elemen "in" dan sarankan gaya tebal untuk itu di dalam CSS Anda ("ins {font-weight: bold;}").

  • Ingin sedikit menekankan teks ("Aku cinta anak kucing!")? Gunakan elemen "em" dan sarankan gaya tebal untuk itu di dalam CSS Anda (mis. "Em {font-weight: bold;}").

  • Ingin sangat menekankan beberapa teks, mungkin untuk peringatan (" Waspadai anjing! ")? Gunakan elemen "kuat" dan sarankan gaya tebal untuk itu di dalam CSS Anda (mis. "Strong {font-weight: bold;}").

... Anda mendapatkan ide (semoga).

Tidak dapat menemukan elemen HTML dengan hak semantik untuk mengekspresikan/mengapa/Anda ingin membuat teks khusus ini menjadi tebal? Bungkus dengan elemen "span" umum, berikan nama kelas yang bermakna yang mengekspresikan alasan Anda untuk membedakan teks itu ("<span class =" lede "> Biarkan saya memulai artikel berita ini dengan kalimat yang merangkumnya. </ Span >), dan sarankan gaya tebal untuk itu dalam CSS Anda (".lede {font-weight: bold;"}. Sebelum membuat nama kelas Anda sendiri, Anda mungkin ingin memeriksa apakah ada microformat (microformats.org) atau konvensi umum untuk apa yang ingin Anda ungkapkan.

Bagaimana membuat teks tebal pada HTML?

Membuat Teks Tebal Teks tebal biasanya digunakan untuk memberikan penegasan pada teks tertentu, misalnya seperti 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.

Bagaimana cara membuat teks tebal?

Di Word, Anda bisa membuat teks Anda tebal dalam tiga cara: gunakan tombol Tebal pada toolbar Mini, gunakan tombol Tebal pada tab Beranda, atau gunakan pintasan keyboard..
Gerakkan penunjuk Anda ke toolbar Mini di atas pilihan Anda dan klik. ..
Klik ikon. ... .
Ketikkan pintasan keyboard: CTRL+B..

Bagaimana cara membuat teks tebal pada CSS?

Di HTML, Anda dapat membuat teks atau tulisan menjadi tebal (bold) menggunakan tag <b> dan <strong>. Kedua tag HTML ini digunakan untuk peranan yang berbeda.

Apa itu HTML Formatting?

HTML menyediakan beberapa tag yang dapat digunakan untuk mengatur paragraf. Halaman Web yang dibuat dengan tag HTML (code HTML) dapat digabungkan dengan text. Berikut merupakan tag paragraf pembuka yang dapat digunakan pada halaman Web <p> dan tag paragraf penutupnya </p>.