Pertanyaan ini muncul di salah satu kelas kuliah saya. Profesor itu hanya memberikan jawaban bahwa itu lebih deskriptif, tetapi sepertinya seolah-olah <b>
dan <i>
agak eksplisit dalam artinya dan lebih mudah untuk mengetik daripada <strong>
dan <em>
.
Apa argumen resmi untuk penghentian tag ini?
html
deprecation
LanceLafontaine
sumber
sumber
<b>
dan<i>
tidak ditinggalkan.b
- ini secara harfiah berarti "ini berani", bukan "ini ditekankan". Tapi intinya adalah, mereka berbeda dalam artinya - tidak ada penghinaan, hanya saja tidak bahwa ketika Anda melakukanb
ataui
, Anda biasanya berartistrong
atauem
.<i>
dan<b>
tidak benar-benar usang,<tt>
dan<u>
sedang, dan pertanyaannya akan sama berlaku untuk mereka.Jawaban:
Musim panas lalu, saya membaca spesifikasi HTML5 yang lengkap, dan setiap spesifikasi HTML sebelumnya (bahkan yang ditinggalkan), dan semua spesifikasi CSS yang bisa saya temukan, dan banyak spesifikasi XML. Karena saya suka dokumen hypertext yang kaya semantik, izinkan saya memberi Anda ide di balik semantik HTML yang relevan di HTML5.
Sebelum HTML5
Sebelum HTML5,
i
danb
memang sudah ketinggalan zaman. Alasannya adalah bahwa mereka pada dasarnya bekerja sepertiem
danstrong
, masing-masing, tetapi dengan fokus pada presentasi dan bukan pada semantik (yang buruk).Memang,
i
berarti bahwa teks harus dicetak miring (dikatakan sesuatu tentang bagaimana teks harus ditampilkan di layar). Di sisi lain,em
berarti bahwa teks harus ditekankan (dikatakan sesuatu tentang semantik teks).Ada perbedaan teoretis yang penting di sini. Jika Anda menggunakan
em
, agen pengguna (= browser) tahu teks harus ditekankan, sehingga dapat membuatnya dalam huruf miring jika dokumen ditampilkan di layar (atau all-caps jika pemformatan tidak dimungkinkan, atau mungkin bahkan dalam huruf tebal adalah pengguna lebih suka itu), ia dapat mengucapkannya secara berbeda jika dokumen tersebut diucapkan kepada pengguna, dll.Perhatikan bahwa penekanannya adalah tentang semantik. Misalnya, frasa
tidak memiliki arti yang sama.
Perbedaan yang sama berlaku untuk
b
(huruf tebal) danstrong
(penekanan kuat).Prinsip umum penulisan digital secara umum, dan penulisan hypertext pada khususnya, adalah bahwa Anda harus memisahkan konten dan gaya. Dalam pembuatan hypertext, ini berarti bahwa konten harus dalam file HTML, dan gaya harus dalam file CSS (atau sejumlah file CSS). Prinsip yang berbeda tetapi terkait adalah bahwa dokumen tersebut harus kaya akan semantik (seperti menandai header, footer, daftar, penekanan, alamat, area navigasi, dll.). Ini memiliki sejumlah keunggulan:
Jadi, singkatnya,
i
danb
sudah usang karena mereka adalah tag HTML yang mengkhawatirkan presentasi , yang sama sekali salah.Dalam HTML5
Dalam HTML5
i
danb
tidak lagi ditinggalkan. Sebaliknya, mereka diberi makna sematik . Jadi mereka sekarang sebenarnya tentang semantik, dan bukan tentang presentasi.Seperti sebelumnya, Anda gunakan
em
untuk menandai penekanan: "Kucing itu milikku." Tetapi Anda menggunakani
untuk hampir semua kasus lain di mana Anda akan menggunakan cetak miring dalam karya cetak. Misalnya:i
untuk menandai sebutan taksonomi: "Saya suka R. norvegicus ."i
untuk menandai frasa dalam bahasa yang berbeda dibandingkan dengan teks di sekitarnya: À la cartei
untuk menandai sebuah kata ketika Anda berbicara tentang kata itu sendiri: " minum adalah kata benda dan kata kerja"Sebaiknya gunakan
class
atribut untuk menentukan penggunaan yang tepat (juga Google "mikroformat" dan "mikrodata"). Dan, tentu saja, dalam kasus kedua, Anda harus benar-benar menggunakanlang
atribut untuk menentukan bahasa yang benar. (Kalau tidak, misalnya , agen text-to-speech mungkin salah mengucapkan kata sandi.)Setahun yang lalu atau lebih, spesifikasi HTML5 juga mengatakan bahwa
cite
harus digunakan untuk menandai nama buku, film, opera, lukisan, dll.:Akhirnya, sejak dahulu kala,
dfn
digunakan untuk menandai turunan frase dalam teks (seperti definisi matematika, atau definisi istilah):Jadi huruf miring dalam buku cetak Anda, yang dapat berarti banyak hal yang berbeda, diwakili oleh empat tag HTML5 yang berbeda, yang benar-benar hebat, karena semantiknya baik, karena saya mencoba meyakinkan Anda tentang sebelumnya. (Misalnya, Anda dapat meminta browser Anda untuk membuat daftar semua definisi dalam teks, sehingga Anda dapat memastikan Anda mengetahui semuanya sebelum ujian.)
Beralih ke
strong
danb
, spesifikasi HTML5 mengatakan bahwa itustrong
harus digunakan untuk menandai bagian penting dari teks, seperti peringatan atau kata yang sangat penting untuk ditangkap dalam sebuah kalimat. Di sisi lain,b
harus digunakan untuk menandai hal-hal yang perlu mudah ditemukan dalam teks, seperti kata kunci. Saya juga menggunakanb
sebagai pos dalam daftar item (LI).sumber
<dfn>
, bukan<def>
. Jika tidak, ringkasan komprehensif dari semua masalah. Saran Anda untuk digunakan<b>
sebagai pos dalam daftar item menarik; pendekatan semantik adalah menggunakan daftar definisi , tetapi karena saat ini tidak ada browser yang mendukungdisplay:run-in
, markup kata kunci inline dengan<b>
atau<span>
adalah yang terbaik yang dapat Anda lakukan.display:run-in
, tapi karena dukungan yang menurun , Anda harus menggunakanfloat
ataucontent:
trik, lihat rejbrand.se/rejbrand/news.asp?ItemIndex=169 . Ketika saya berbicara tentang penggunaanb
untuk menandai 'judul' dalam daftar, saya tidak bermaksud pasangan nama-nilai, tetapi daftar sederhana di mana saya ingin menggunakan 'header' di setiap item.<b>
menjamin teks yang berani. 1) Pembaca layar, tampilan braille, dan cara lain untuk mengonsumsi teks yang konsepnya lebih tebal adalah konsep yang tidak berarti. 2)b { font-weight: normal }
, artinya gaya tampilan juga tidak diperbaiki<b>
.b, strong { font-weight:bold; }
. Dengan begitu Anda bisa yakin. CSS adalah cara untuk menentukan format visual. HTML adalah tentang makna (konten), CSS tentang presentasi visual itu.Seperti kata Doval, mereka tidak ditinggalkan. Mereka masih ada tetapi harus digunakan secara berbeda dari apa yang digunakan banyak orang sebelum HTML5.
Ini tentang html 'semantik'. Seharusnya menggambarkan 'apa' itu, alih-alih bagaimana seharusnya. Browser atau secara teoritis media tampilan lainnya (katakanlah aplikasi membaca untuk orang buta) harus dapat memutuskan bagaimana tepatnya harus ditafsirkan.
Ini mirip mengapa Anda tidak harus menggunakan nama-nama kelas CSS seperti "merah" dan menggunakan kelas-kelas yang lebih deskriptif yang menggambarkan ide fungsional di belakang menggunakan warna yang berbeda di sini. Anda nanti dapat memutuskan bahwa hijau lebih baik (dan mungkin sesuatu yang "kuat" harus ditunjukkan dengan menggunakan warna merah dan bukan teks tebal). Atau pengguna buta warna mungkin memiliki beberapa pengaturan browser khusus di mana warna diganti dengan cara lain.
sumber
<span class="keyword">...</span>
di tempat pertama menghemat Anda banyak masalah.<b>
adalah kasus tepi, tetapi ada contoh kuat untuk menggunakan<i>
untuk kasus di mana<em>
tidak pantas: nama ilmiah spesies atau kata latin diadopsi ke dalam bahasa Inggris (Anda dapat menggunakan rentang dengan atribut bahasa, tetapi itu memiliki segala macam implikasi lain - - pembaca layar mungkin mengganti suara untuk bahasa yang berbeda). Ini juga dapat digunakan untuk membuat judul yang dicetak miring dari karya lain, meskipun pendekatan semantik yang benar adalah untuk digunakan<cite>
.Kisah sebenarnya adalah bahwa
b
dani
pertama kali usang, usang, dikutuk, dan di-anatematiasikan sebagai “presentasi” dalam berbagai konsep HTML5 (secara umum), tetapi kemudian mereka menyadari bahwa tag ini banyak digunakan dan juga dihasilkan oleh banyak program penulisan. Alih-alih hanya membiarkan mereka, mereka mengembangkan definisi baru "semantik" untuk mereka, untuk dapat memungkinkan unsur-unsur tetapi masih berpura-pura ketat tentang markup "presentasional". Definisi baru bervariasi dari satu konsep ke konsep lainnya dan tidak jelas: Anda tidak dapat menemukan dua orang yang memahami dan menafsirkannya dengan cara yang sama.Maaf, tidak ada referensi. Deskripsi di atas adalah hasil dari mengikuti perubahan dan membaca draf dan diskusi, sering di antara baris. Mereka tidak secara eksplisit mengatakan penyebabnya. Saya masih berpikir itu adalah kisah nyata.
Kesimpulannya adalah: Pindah. Tidak ada yang berguna di sini. The
b
dani
elemen melakukan hal yang sama karena mereka selalu memiliki: mereka membuat font tebal atau miring, masing-masing, dengan peringatan biasa. Ini adalah kenyataan yang harus Anda pertimbangkan, bukan "semantik" quasischolastic yang tidak memiliki dampak pada browser, mesin pencari, atau perangkat lunak lainnya.sumber
<b>
sebagai jenis lucu<span>
yang secara default diterjemahkan dalam huruf tebal. Kemudian jika Anda dapat merasa terganggu, berikanclass
juga atribut itu kepada Anda sehingga jika perlu Anda dapat menata ulang beberapa hal sekaligus yang menggunakannya karena mereka memiliki semantik yang sama. Ini quasischolastic dalam arti bahwa orang akan berpikir Anda sombong di kepala untuk melakukanb.productname {font-weight: normal; font-style: italic; }
setelah Anda berubah pikiran tentang presentasi dan mengambil keuntungan dari pilihan bijaksana Anda semantik markup ;-)<b>this</b>
tampaknya jauh lebih masuk akal daripada<span class="bold">this</b>
(overhead delapan byte dari yang sebelumnya cukup menjengkelkan; overhead 23-byte yang terakhir tampaknya gila). Saya bertanya-tanya mengapa HTML tidak pernah mendefinisikan representasi bentuk pendek seperti yang<@quack>this</@>
setara dengan<span class="quack">this</span>
?class='bold'
? Master Suku dari Kode Tanpa Kode akan berbicara dengan Anda tentang penggunaan nama kelas yang buruk . Pertimbangkan ini boldRedText terakhir Anda .The
<b>
dan<i>
tag berasal dengan konsep "berani" dan "miring". Masalahnya adalah ini mungkin sama sekali tidak berarti bagi beberapa agen pengguna. Misalnya, seperti apa suara "italic" dalam pembaca layar untuk orang buta?Menggantinya dengan
<strong>
dan<em>
menghapus tautan langsung ke konsep tipografis. Sebaliknya, agen pengguna dapat membuat mereka namun itu cocok.sumber
<b>
dan<i>
bagaimanapun juga cocok.The
<b>
dan<i>
tag adalah penting ketika Anda benar-benar membutuhkan teks dalam 'berani' atau 'miring'.Jika Anda menulis persamaan dalam HTML di mana huruf ' I ' yang dicetak miring memiliki arti yang berbeda dari huruf 'I' yang tidak dicetak miring, penting untuk membuat perbedaan itu.
Saya memikirkan mereka dengan cara yang sama seperti yang saya pikirkan
<sup>
atau<sub>
tag - Anda tidak dapat dengan benar mewakili arti suatu persamaan tanpa menggunakan tag 'penampilan' tersebut.Pendekatan murni akan menggunakan MathML atau TeX tetapi dukungan browser belum ada ...
sumber
in a monospaced typeface
tetapi yang tidak membuat perbedaan mengapa, maka menggunakan salah satu dari "penggantian" untuk<tt>
secara salah akan menyiratkan bahwa kode melakukan impor tahu lebih banyak daripada yang dilakukannya tentang tujuan.b
dani
dalam konteks matematika (dan fisik), tetapi penggunaan tersebut tidak disebutkan dalam konsep HTML5. Ketika saya mengajukan pertanyaan ini, sangat ditanggapi bahwa karakter khusus Unicode (huruf tebal matematika dan huruf miring matematika) digunakan sebagai gantinya!class="source-X-asserts-it-should-be-monospace"
, dengan demikian membedakannya dari teks yang secara semantik berbeda dalam arti bahwa beberapa sumber lain menyatakan dengan alasan yang tidak diketahui bahwa itu harus monospace. Akibatnya ini mengaudit hal-hal yang dianggap buruk oleh HTML, alih-alih hanya menerjemahkan kejahatan ke dalam HTML.<TT>
, yang secara langsung menyarankan teks harus diatur dalam font monospace yang kontras, dengan markup yang, setelah beberapa lapisan tipuan, akan menunjukkan bahwa teks harus ditampilkan dalam beberapa font tertentu yang terjadi pada jadilah monospace. Meskipun saya tidak berharap semua pembaca layar melakukan sesuatu yang berguna<tt>
, saya berharap mereka akan memiliki waktu yang jauh lebih mudah dengan<tt>
daripada<span class="styleNameThisImportUtilityPicked">
.Prinsip-prinsip desain yang mendasari tag HTML adalah bahwa mereka harus "semantik" yaitu mereka harus menunjukkan makna dan maksud daripada instruksi tingkat rendah.
Tes klasiknya adalah "apakah tag dapat digunakan secara bermakna di browser untuk orang buta".
Jadi untuk peramban berbasis audio, "i" untuk italic sangat tidak berguna karena Anda tidak dapat menggunakan italic speech. Namun tag "em" bermakna karena perangkat audio dapat menekankan frasa dalam banyak cara: dengan menaikkan nada, menambah volume, atau mengubah aksen. Penyaji Braille dapat menekankan dengan menaikkan titik-titik mengubah jarak, mengubah ukuran atau menambahkan getaran.
sumber
<img>
karena Anda tidak dapat berbicara gambar, dan sistem tanpa perangkat keras suara tidak dapat hadir<audio>
. Kadang-kadang presentasi adalah tujuan utama suatu elemen, dan itu tidak perlu didukung secara universal (dan tidak seperti elemen yang berpotensi tidak didukung,<i>
tidak perlu alt teks karena fakta bahwa itu miring adalah satu-satunya informasi yang hilang). Masalah sebenarnya adalah ketika orang mengatakani
kapan maksudnyaem
.<i>
tag menggunakan pitch 120 dan teks dalam<b>
tag menggunakan 80, dan memiliki teks dalam<tt>
sinkronisasi pidato dengan mesin tik disintesis menghasilkan teks akan memungkinkan pendengar untuk dengan mudah membedakan bentuk-bentuk markup. Pekerjaan itu akan jauh lebih sulit jika daripada menggunakan<i>
tag teks alih- alih menggunakan tag<span class="whatever">
yang menyebabkan bagian dari teks ditampilkan menggunakan "Acme SemiScript" daripada "Waldorf Sans" [beberapa keluarga font ...