Apa perbedaan antara <b> dan <strong>, <i> dan <em>?

Apa perbedaan antara <b>dan <strong>, <i>dan <em>dalam HTML / XHTML? Kapan Anda harus menggunakan masing-masing?

Mereka memiliki efek yang sama pada mesin rendering browser web normal , tetapi ada perbedaan mendasar di antara mereka.

Sebagai penulis menulis dalam posting daftar diskusi :

Pikirkan tiga situasi berbeda:

• browser web
• orang buta
• ponsel

"Bold" adalah gaya - ketika Anda mengatakan "bold a word" , orang pada dasarnya tahu bahwa itu berarti menambahkan lebih banyak, katakanlah "tinta", di sekitar huruf sampai lebih menonjol di antara huruf-huruf lainnya.

Sayangnya, itu tidak ada artinya bagi orang buta. Di ponsel dan PDA lainnya, teks sudah tebal karena resolusi layar sangat kecil. Anda tidak dapat cetak tebal tanpa mengacaukan sesuatu.

<b>adalah gaya - kita tahu seperti apa "tebal" seharusnya.

<strong>namun merupakan indikasi bagaimana sesuatu harus dipahami . "Kuat" bisa (dan sering kali) berarti "tebal" di browser, tetapi juga bisa berarti nada yang lebih rendah untuk program berbicara seperti Jaws (untuk orang buta) atau diwakili oleh garis bawah (karena Anda tidak dapat berani) menggunakan Palm Pilot.

HTML tidak pernah dimaksudkan tentang gaya. Lakukan beberapa pencarian untuk "Tim Berners-Lee" dan "web semantik." <strong>bersifat semantik — teks ini menggambarkan teks yang mengelilinginya (misalnya, "teks ini harus lebih kuat dari teks yang telah Anda tampilkan" ) sebagai lawan dari menggambarkan bagaimana teks yang mengelilingi harus ditampilkan (misalnya, "teks ini harus berani " ).

<b>dan <i>eksplisit - masing-masing menentukan huruf tebal dan miring.

<strong>dan <em>bersifat semantik - mereka menentukan bahwa teks yang dilampirkan harus "kuat" atau "ditekankan" dalam beberapa cara, biasanya tebal dan miring, tetapi memungkinkan penataan aktual dikendalikan melalui CSS. Karenanya ini lebih disukai di halaman web modern.

<strong>dan <em>tambahkan makna semantik tambahan ke dokumen Anda. Kebetulan mereka juga memberi gaya huruf tebal dan miring ke teks Anda.

Tentu saja Anda bisa mengganti gaya mereka dengan CSS.

<b>dan <i>di sisi lain hanya menerapkan gaya font dan tidak boleh lagi digunakan. (Karena Anda seharusnya memformat dengan CSS, dan jika teks itu sebenarnya penting maka Anda mungkin akan membuatnya "kuat" atau "ditekankan" pula!)

Harapan itu masuk akal.

Berikut ringkasan definisi bersama dengan penggunaan yang disarankan:

<b>... rentang teks yang menarik perhatian untuk tujuan utilitarian tanpa menyampaikan kepentingan ekstra dan tanpa implikasi suara atau suasana hati alternatif, seperti kata kunci dalam abstrak dokumen, nama produk dalam ulasan, kata-kata yang dapat ditindaklanjuti dalam perangkat lunak berbasis teks interaktif, atau lede artikel .

<strong> ... sekarang mewakili kepentingan daripada penekanan yang kuat.

<i>... rentang teks dalam suara atau suasana hati alternatif, atau jika tidak diimbangi dari prosa normal dengan cara yang menunjukkan kualitas teks yang berbeda, seperti penunjukan taksonomi , istilah teknis , ungkapan idiomatik dari bahasa lain , sebuah pemikiran , atau nama kapal dalam teks-teks Barat.

<em> ... menunjukkan penekanan.

(Ini semua adalah kutipan langsung dari sumber W3C, dengan penekanan saya ditambahkan. Lihat: https://rawgithub.com/whatwg/html-differences/master/Overview.html#changed-elements dan http://www.w3.org /TR/html401/struct/text.html#h-9.2.1 untuk dokumen asli)

<b>dan <i>keduanya terkait dengan gaya, sedangkan <em>dan <strong>bersifat semantik. Dalam HTML 4, yang pertama diklasifikasikan sebagai elemen gaya font , dan yang terakhir sebagai elemen frase .

Seperti yang Anda tunjukkan dengan benar, <i>dan <em>sering dianggap serupa, karena browser sering membuat keduanya dalam huruf miring. Tetapi menurut spesifikasinya, <em> menunjukkan penekanan dan <strong> menunjukkan penekanan yang lebih kuat , yang cukup jelas, tetapi sering disalahartikan. Di sisi lain, perbedaan antara kapan digunakan <i>atau <b>benar-benar masalah gaya.

Meskipun <strong>dan <em>tentu saja lebih benar secara semantik, tampaknya ada alasan sah yang pasti untuk menggunakan <b>dan memberi <i>tag pada konten yang ditulis pelanggan.

Dalam konten seperti itu, kata-kata atau frasa dapat dicetak tebal atau dicetak miring dan biasanya tidak sampai pada kita untuk menganalisis alasan semantik untuk huruf tebal atau miring tersebut.

Selanjutnya, konten tersebut dapat merujuk pada kata-kata dan frase yang dicetak tebal dan dicetak miring untuk menyampaikan makna tertentu.

Contohnya adalah pertanyaan ujian bahasa Inggris yang memerintahkan siswa untuk mengganti kata yang dicetak tebal.

<em>dan <strong>mengkonsumsi lebih banyak bandwidth daripada <i>dan <b>.

Mereka juga membutuhkan lebih banyak pengetikan (jika tidak dihasilkan secara otomatis).

Mereka juga mengacaukan layar editor dengan lebih banyak teks. Saya ingat bahwa programmer suka file sumber yang lebih kecil jika mereka sama. (Dan mari kita menjadi nyata, mereka sama. Ya, ada perbedaan "teknis" (<i> batuk </i>, ahem, maafkan aku), tapi itu kebanyakan palsu.

Dengan salah satu dari tag di atas, Anda dapat menggunakan style sheet untuk menyesuaikan bagaimana mereka muncul namun Anda inginkan jika Anda membutuhkannya untuk tampil berbeda dari rendering default mereka.

Seperti yang orang lain katakan <b> dan <i> eksplisit (yaitu "buat teks ini tebal"), sedangkan <strong> dan <em> semantik (yaitu "teks ini harus ditekankan").

Dalam konteks browser web modern, sulit untuk melihat perbedaannya (keduanya muncul untuk menghasilkan hasil yang sama, bukan?), Tetapi pikirkan tentang pembaca layar untuk tunanetra. Jika pembaca layar menemukan tag <i>, itu tidak akan tahu apa yang harus dilakukan. Tetapi jika ia menemukan tag <em>, ia tahu bahwa apa pun yang ada di dalamnya harus ditekankan kepada pendengar. Dan di sana Anda mendapatkan perbedaan praktis.

<i>, <b>, <em>Dan <strong>tag secara tradisional representasional. Tetapi mereka telah diberi makna semantik baru dalam HTML5 .

<i>dan <b>digunakan untuk gaya font dalam HTML4. <i>digunakan untuk huruf miring dan <b>tebal. Dalam HTML5 <i>tag memiliki arti semantik baru ' suara atau suasana hati alternatif ' dan <b>tag memiliki arti offset gaya .

Contoh penggunaan <i>tag adalah - penunjukan taksonomi, istilah teknis, frase idiomatik dari bahasa lain, transliterasi, pemikiran, nama pengiriman dalam teks barat. Seperti -

<p><i>I hope this works</i>, he thought.</p>

Contoh penggunaan <b>tag adalah kata kunci dalam ekstrak dokumen, nama produk dalam ulasan, kata-kata yang dapat ditindaklanjuti dalam perangkat lunak berbasis teks interaktif, petunjuk artikel.

Paragraf contoh berikut secara gaya diimbangi dari paragraf yang mengikutinya.

<p><b class="lead">The event takes place this upcoming Saturday, and over 3,000 people have already registered.</b></p>

<em>dan <strong>memiliki arti penekanan dan penekanan kuat dalam HTML4. Tetapi dalam HTML5 <em>berarti penekanan yang ditekankan dan <strong>artinya sangat penting .

Dalam contoh berikut harus ada perubahan linguistik saat membaca kata sebelum ...

<p>Make sure to sign up <em>before</em> the day of the event, September 16, 2016</p>

Dalam contoh yang sama kita dapat menggunakan <strong>tag sebagai berikut ..

<p>Make sure to sign up <em>before</em> the day of the event, <strong>September 16, 2016</strong></p>

untuk memberi arti penting pada tanggal acara.

MDN Ref:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong

Seperti yang telah dinyatakan orang lain, perbedaannya adalah itu <b>dan <i>gaya font hardcode, sedangkan <strong>dan <em>menentukan makna semantik, dengan gaya font (atau intonasi browser berbicara, atau apa pun yang Anda) harus ditentukan pada saat teks diberikan (atau lisan).

Anda dapat menganggap ini sebagai perbedaan antara gaya font "fisik" dan gaya "logis", jika Anda mau. Di lain waktu, Anda mungkin ingin mengubah cara <strong>dan <em>teks ditampilkan, misalnya, dengan mengubah properti dalam style sheet untuk menambahkan perubahan warna dan ukuran, atau bahkan menggunakan wajah font yang berbeda sama sekali. Jika Anda telah menggunakan markup "logis" alih-alih markup "fisik" yang dikodekan, maka Anda dapat dengan mudah mengubah properti tampilan di satu tempat masing-masing dalam lembar gaya Anda, dan kemudian semua halaman yang merujuk pada lembar gaya dapat diubah secara otomatis , tanpa pernah harus mengeditnya.

Cukup apik, ya?

Ini juga merupakan alasan di balik mendefinisikan sub-gaya (direferensikan menggunakan style=properti dalam tag teks) untuk paragraf, sel tabel, teks header, keterangan, dll, dan menggunakan <div>tag. Anda bisa mendefinisikan representasi fisik untuk gaya logis Anda di lembar gaya, dan perubahan secara otomatis tercermin di halaman web yang mereferensikan lembar gaya itu. Ingin representasi yang berbeda untuk kode sumber? Tetapkan ulang font, ukuran, berat, jarak, dll. Untuk gaya "kode" Anda.

Jika Anda menggunakan XHTML, Anda bahkan dapat menetapkan tag semantik Anda sendiri, dan lembar gaya Anda akan melakukan konversi ke gaya dan tata letak font fisik untuk Anda.

Saya menggunakan <strong> dan <b>, sebenarnya, untuk alasan yang disebutkan dalam utas tanggapan ini. Ada saat-saat ketika berhadapan dengan beberapa teks hanya terlihat lebih baik, tetapi itu, tidak selalu, secara semantik lebih penting daripada kalimat lainnya. Berikut ini contoh dari halaman yang sedang saya kerjakan sekarang:

"Ambil <strong> semua </strong> buku tentang <b> lacrosse </b>."

Dalam kalimat itu, kata "semua" sangat penting, dan "lacrosse" kurang begitu - saya hanya ingin huruf tebal karena mewakili istilah pencarian, jadi saya ingin beberapa pemisahan visual. Jika Anda melihat halaman dengan pembaca layar, saya benar-benar tidak berpikir perlu keluar dari jalan untuk menekankan kata "lacrosse".

Saya cenderung membayangkan bahwa sebagian besar pengembang web menggunakan yang lain, tetapi keduanya baik-baik saja - <b> sudah pasti tidak ditinggalkan, seperti yang diklaim beberapa orang. Bagi saya, itu hanya garis tipis antara daya tarik visual dan makna.

Gunakan hanya jika menggunakan kelas gaya CSS karena alasan apa pun tidak meyakinkan atau tidak mungkin (seperti sistem blog, izinkan hanya beberapa tag untuk digunakan dalam pos dan akhirnya gaya tersemat). Alasan lain adalah dukungan untuk browser yang sangat lama (beberapa perangkat seluler?) Atau mesin pencari primitif (yang memberikan poin <b>atau <strong>tag, alih-alih menganalisis gaya CSS).

Jika Anda dapat menentukan gaya CSS, gunakan itu.

Untuk teks tebal menggunakan <b> tag

Untuk teks penting menggunakan <strong> tag

Untuk gaya teks miring menggunakan <i> tag

Untuk teks yang ditekankan menggunakan <em> tag

<b>dan <i>harus dihindari karena menggambarkan gaya teks. Sebagai gantinya, gunakan <strong>dan <em>karena itu menggambarkan semantik (makna) teks.

Seperti semua hal dalam HTML, Anda harus berpikir bukan tentang bagaimana Anda ingin terlihat , tetapi apa yang sebenarnya Anda maksudkan . Tentu, itu mungkin huruf tebal dan miring untuk Anda, tetapi tidak untuk pembaca layar.

b atau i berarti Anda ingin teks yang akan dicetak tebal atau miring. strong atau em berarti Anda ingin teks yang diterjemahkan dengan cara yang dipahami pengguna sebagai "penting". Standarnya adalah membuat kuat sebagai huruf tebal dan huruf miring, tetapi beberapa budaya lain mungkin menggunakan pemetaan yang berbeda.

Seperti string dalam sebuah program, b dan saya akan menjadi "kode keras" sementara yang kuat dan mereka akan "dilokalkan".

"Mereka memiliki efek yang sama. Namun, XHTML, yang lebih bersih, versi HTML yang lebih baru, merekomendasikan penggunaan <strong>tag. Kuat lebih baik karena lebih mudah dibaca - artinya lebih jelas. Selain itu, <strong>menyampaikan makna - menunjukkan teks - menunjukkan teks sangat - sementara <b>(untuk tebal) menyampaikan metode - tebal teks. Dengan kuat, kode Anda masih masuk akal jika Anda menggunakan stylesheet CSS untuk mengubah apa metode membuat teks kuat.

Hal yang sama berlaku untuk perbedaan antara <i>dan <em>".

Google dixit:

http://wiki.answers.com/Q/What_is_the_difference_between_HTML_tags_b_and_strong

Elemen Format HTML:

HTML juga mendefinisikan elemen-elemen khusus untuk mendefinisikan teks dengan makna khusus. HTML menggunakan elemen seperti <b> dan <i> untuk memformat output, seperti teks tebal atau miring.

Format HTML Tebal dan Kuat:

Elemen HTML <b> mendefinisikan teks tebal, tanpa lebih penting.

<b>This text is bold</b>

Elemen HTML <strong> mendefinisikan teks yang kuat, dengan menambahkan arti penting "kuat" semantik.

<strong>This text is strong</strong>

Format HTML Miring dan Ditekankan:

Elemen HTML <i> mendefinisikan teks miring, tanpa arti penting tambahan.

<i>This text is italic</i>

Elemen HTML <em> mendefinisikan teks yang ditekankan, dengan arti penting semantik yang ditambahkan.

<em>This text is emphasized</em>

Anda umumnya harus mencoba untuk menghindari <b>dan <i>. Mereka diperkenalkan untuk mengatur halaman (mengubah cara tampilannya) di versi HMTL awal sebelum pembuatan CSS, seperti fonttag yang dihapus sementara , dan terutama disimpan untuk kompatibilitas mundur dan karena beberapa forum memungkinkan inline HTML dan itu mudah cara untuk mengubah tampilan teks (seperti menggunakan BBCode [i], Anda dapat menggunakan <i>dan sebagainya).

Sejak pembuatan CSS, tata letak sebenarnya tidak ada yang harus dilakukan dalam HTML lagi, itu sebabnya CSS telah dibuat di tempat pertama (HTML == Structure, CSS == Layout). Tag-tag ini mungkin juga lenyap di masa depan, setelah semua Anda hanya dapat menggunakan CSS dan spantag untuk membuat teks tebal / miring jika Anda memerlukan variasi font yang "tidak berarti". HTML 5 masih memungkinkan mereka tetapi menyatakan bahwa menandai teks seperti itu tidak ada artinya .

<em>dan <strong>di sisi lain hanya mengatakan bahwa ada sesuatu yang "ditekankan" atau "sangat ditekankan", itu membuatnya benar-benar terbuka untuk browser bagaimana merendernya. Sebagian besar peramban akan menjadikannya emmiring dan strongsetebal yang disarankan oleh standar, tetapi mereka tidak dipaksa untuk melakukan itu (mereka dapat menggunakan warna, ukuran font, font, apa pun) yang berbeda. Anda dapat menggunakan CSS untuk mengubah perilaku seperti yang Anda inginkan. Anda dapat membuat emtebal jika Anda suka dan strongtebal dan merah, misalnya.

<strong>dan <em>abstrak (yang orang maksud ketika mereka mengatakan itu semantik). <b>dan <i>cara-cara khusus untuk membuat sesuatu "kuat" atau "ditekankan"

Analogi:

Keduanya <strong>adalah untuk <b>dan <em>untuk<i>

sebagai

"Kendaraan" adalah untuk "jip"

Kami menggunakan <strong>tag untuk teks yang memiliki prioritas tinggi untuk keperluan SEO seperti nama produk, nama perusahaan dll, sementara <b>sederhana membuatnya tebal.

Demikian pula, kami menggunakan <em>teks yang memiliki prioritas tinggi untuk SEO, sementara <i>untuk membuat teks hanya miring.