Apa cara yang benar untuk membuat teks menjadi miring? Saya telah melihat empat pendekatan berikut:
<i>Italic Text</i>
<em>Italic Text</em>
<span class="italic">Italic Text</span>
<span class="footnote">Italic Text</span>
<i>
Ini adalah "cara lama". <i>
tidak memiliki makna semantik dan hanya menyampaikan efek presentasi membuat teks menjadi miring. Sejauh yang saya bisa lihat, ini jelas salah karena ini bukan semantik.
<em>
Ini menggunakan tanda semantik untuk tujuan presentasi murni. Kebetulan bahwa <em>
secara default membuat teks dalam huruf miring dan sering digunakan oleh mereka yang sadar yang <i>
harus dihindari tetapi tidak menyadari arti semantiknya. Tidak semua teks miring adalah miring karena ditekankan. Terkadang, itu bisa menjadi kebalikannya, seperti catatan pinggir atau bisikan.
<span class="italic">
Ini menggunakan kelas CSS untuk menempatkan presentasi. Ini sering disebut-sebut sebagai cara yang benar tetapi sekali lagi, ini tampaknya salah bagi saya. Ini sepertinya tidak menyampaikan makna semantik lagi <i>
. Tapi, para pendukungnya menangis, jauh lebih mudah untuk mengubah semua teks miring Anda nanti jika Anda, katakanlah, ingin tebal. Namun ini tidak terjadi karena saya kemudian akan dibiarkan dengan kelas yang disebut "miring" yang membuat teks tebal. Selain itu, tidak jelas mengapa saya ingin mengubah semua teks miring di situs web saya atau setidaknya kita bisa memikirkan kasus-kasus di mana ini tidak diinginkan atau diperlukan.
<span class="footnote">
Ini menggunakan kelas CSS untuk semantik. Sejauh ini tampaknya ini cara terbaik tetapi sebenarnya memiliki dua masalah.
Tidak semua teks memiliki arti yang cukup untuk menjamin markup semantik. Misalnya, apakah teks yang dicetak miring di bagian bawah halaman benar-benar catatan kaki? Atau itu samping? Atau sesuatu yang lain sama sekali. Mungkin itu tidak memiliki arti khusus dan hanya perlu diberikan dalam huruf miring untuk memisahkannya secara presentasi dari teks yang mendahuluinya.
Makna semantik dapat berubah ketika tidak hadir dalam kekuatan yang memadai. Katakanlah saya pergi dengan "catatan kaki" berdasarkan tidak lebih dari teks yang berada di bagian bawah halaman. Apa yang terjadi ketika beberapa bulan kemudian saya ingin menambahkan lebih banyak teks di bagian bawah? Itu bukan lagi catatan kaki. Bagaimana kita bisa memilih kelas semantik yang kurang generik daripada
<em>
tetapi menghindari masalah ini?
Ringkasan
Tampaknya persyaratan semantik tampaknya terlalu membebani dalam banyak kasus di mana keinginan untuk membuat sesuatu yang miring tidak dimaksudkan untuk membawa makna semantik.
Selain itu, keinginan untuk memisahkan gaya dari struktur telah menyebabkan CSS disebut-sebut sebagai pengganti <i>
ketika ada kesempatan ketika ini sebenarnya akan kurang bermanfaat. Jadi ini membuat saya kembali dengan <i>
tag sederhana dan bertanya-tanya apakah rangkaian pemikiran ini adalah alasan mengapa ia tertinggal dalam spesifikasi HTML5?
Apakah ada tulisan atau artikel blog yang bagus tentang hal ini juga? Mungkin oleh mereka yang terlibat dalam keputusan untuk mempertahankan / membuat <i>
tag?
sumber
Jawaban:
Anda harus menggunakan metode berbeda untuk kasus penggunaan berbeda:
<em>
.<i>
tag memiliki makna baru dalam HTML5 , mewakili "rentang teks dengan suara alternatif atau suasana hati". Jadi, Anda harus menggunakan tag ini untuk hal-hal seperti pemikiran / asides atau ungkapan idiomatik. Spesifikasi ini juga menyarankan nama kapal (tetapi tidak lagi menyarankan nama buku / lagu / film; gunakan<cite>
untuk itu).p.intro { font-style: italic; }
sumber
i
untuk nama buku, lagu, album, atau film (yang akan, dapat diperdebatkan menjadi kandidat untuk digunakancite
).<i>
tidak salah karena ini bukan semantik. Itu salah (biasanya) karena itu presentasi. Pemisahan perhatian berarti bahwa informasi presentasi harus disampaikan dengan CSS.Memberi nama pada umumnya bisa sulit untuk dilakukan dengan benar, dan nama kelas tidak terkecuali, tapi tetap itu yang harus Anda lakukan. Jika Anda menggunakan huruf miring untuk membuat blok menonjol dari teks isi, maka mungkin nama kelas "flow-khas" akan diurutkan. Pikirkan tentang penggunaan kembali: nama kelas untuk kategorisasi - di mana lagi Anda ingin melakukan hal yang sama? Itu akan membantu Anda mengidentifikasi nama yang cocok.
<i>
termasuk dalam HTML5, tetapi diberikan semantik khusus. Jika alasan mengapa Anda menandai sesuatu sebagai miring memenuhi salah satu semantik yang diidentifikasi dalam spesifikasi, itu akan sesuai untuk digunakan<i>
. Kalau tidak, tidak.sumber
Saya bukan ahli tetapi saya akan mengatakan bahwa jika Anda benar-benar ingin menjadi semantik, Anda harus menggunakan kosakata (RDFa).
Ini akan menghasilkan sesuatu seperti itu:
em
digunakan untuk presentasi (manusia akan melihatnya dalam huruf miring) danproperty
danhref
atribut menghubungkan ke definisi apa huruf miring itu (untuk mesin).Anda harus memeriksa apakah ada kosakata untuk hal semacam itu, mungkin properti sudah ada.
Info lebih lanjut tentang RDFa di sini: http://www.alistapart.com/articles/introduction-to-rdfa/
sumber
TLDR
Cara yang benar untuk membuat teks menjadi miring adalah dengan mengabaikan masalah sampai Anda mencapai CSS, kemudian gaya sesuai dengan semantik presentasi. Dua opsi pertama yang Anda berikan mungkin benar tergantung pada keadaan. Dua yang terakhir salah.
Penjelasan Lagi
Jangan khawatir tentang presentasi saat menulis markup. Jangan berpikir miring. Pikirkan dalam istilah semantik. Jika membutuhkan penekanan stres, maka itu adalah
em
. Jika bersinggungan dengan konten utama, maka itu adalahaside
. Mungkin itu akan tebal, mungkin akan miring, mungkin hijau neon. Tidak masalah ketika Anda menulis markup.Ketika Anda sampai ke CSS, Anda mungkin sudah memiliki elemen semantik yang masuk akal untuk meletakkan miring untuk semua kemunculannya di situs Anda.
em
adalah contoh yang bagus. Tapi mungkin Anda ingin semuaaside > ul > li
situs Anda dicetak miring. Anda harus memisahkan pemikiran tentang markup dari memikirkan presentasi.Seperti yang disebutkan oleh DisgruntledGoat ,
i
adalah semantik dalam HTML5. Semantiknya agak sempit bagi saya. Penggunaannya mungkin jarang.Semantik
em
telah berubah dalam HTML5 untuk menekankan penekanan.strong
dapat digunakan untuk menunjukkan kepentingan juga.strong
bisa dicetak miring daripada cetak tebal jika memang itu yang Anda inginkan. Jangan biarkan stylesheet browser membatasi Anda. Anda bahkan dapat menggunakan reset stylesheet untuk membantu Anda berhenti berpikir dalam default. (Meskipun ada beberapa peringatan .)class="italic"
buruk. Jangan gunakan itu. Itu tidak semantik dan tidak fleksibel sama sekali. Presentasi masih memiliki semantik, hanya berbeda dari markup.class="footnote"
meniru semantik markup dan juga salah. CSS Anda untuk catatan kaki seharusnya tidak sepenuhnya unik untuk catatan kaki Anda. Situs Anda akan terlihat terlalu berantakan jika setiap bagian ditata berbeda. Anda harus memiliki beberapa pola visual yang tersebar di halaman Anda yang dapat Anda ubah menjadi kelas CSS. Jika gaya Anda untuk catatan kaki dan blockquote Anda sangat mirip, maka Anda harus menempatkan kesamaan dalam satu kelas daripada mengulangi diri Anda berulang-ulang. Anda dapat mempertimbangkan untuk mengadopsi praktik-praktik OOCSS (tautan di bawah).Pemisahan masalah dan semantik besar di HTML5. Orang sering tidak menyadari bahwa markup bukan satu-satunya tempat semantik penting. Ada semantik konten (HTML), tetapi ada juga semantik presentasi (CSS) dan semantik perilaku (JavaScript) juga. Mereka semua memiliki semantik terpisah mereka sendiri yang penting untuk diperhatikan demi kelestarian dan tetap KERING.
Sumber Daya OOCSS
sumber
Jika tidak memiliki makna khusus, mengapa harus dipisahkan secara presentasi dari teks sebelumnya? Rangkaian teks ini terlihat agak aneh , karena saya membuat huruf miring tanpa alasan.
Saya mengambil poin Anda. Bukan tidak biasa bagi desainer untuk menghasilkan desain yang bervariasi secara visual, tanpa bervariasi bermakna. Saya sudah sering melihat ini dengan kotak: desainer akan memberi kita desain termasuk kotak dengan berbagai kombinasi warna, sudut, gradien dan drop-shadow, tanpa hubungan antara gaya, dan makna konten.
Karena ini adalah gaya cukup kompleks (dengan terkait isu-isu Internet Explorer) kembali digunakan di tempat yang berbeda, kami membuat kelas seperti
box-1
,box-2
, sehingga kita dapat kembali menggunakan gaya.Contoh spesifik membuat beberapa teks miring terlalu sepele untuk dikhawatirkan. Lebih baik tinggalkan hal-hal kecil seperti itu untuk dibantah Semantic Nutters.
sumber
Teks italic HTML menampilkan teks dalam format italic.
Penekanan dan elemen yang kuat dapat digunakan untuk meningkatkan pentingnya kata atau kalimat tertentu.
Tag penekanan harus digunakan ketika Anda ingin menekankan suatu titik dalam teks Anda dan tidak harus ketika Anda ingin mencetak miring teks itu.
Lihat panduan ini untuk lebih lanjut: Pemformatan Teks HTML
sumber
The
i
elemen non-semantik, sehingga untuk pembaca layar, Googlebot, dll, itu harus menjadi semacam transparan (sepertispan
ataudiv
elemen). Tapi itu bukan pilihan yang baik untuk pengembang, karena ia bergabung dengan lapisan presentasi dengan lapisan struktur - dan itu praktik yang buruk.em
elemen (strong
juga) harus selalu digunakan dalam konteks semantik, bukan yang presentasi. Itu harus digunakan setiap kali beberapa kata atau kalimat penting. Sebagai contoh dalam kalimat sebelumnya, saya harus menggunakanem
untuk lebih menekankan pada bagian 'harus selalu digunakan'. Peramban menyediakan beberapa properti CSS default untuk elemen-elemen ini, tetapi Anda dapat dan Anda seharusnya mengganti nilai default jika desain Anda mengharuskan ini untuk menjaga makna semantik yang benar dari elemen-elemen ini.<span class="italic">Italic Text</span>
adalah cara yang paling salah. Pertama-tama, itu tidak nyaman digunakan. Kedua, ini menyarankan bahwa teks harus miring. Dan layer struktur (HTML, XML, dll.) Seharusnya tidak pernah melakukannya. Presentasi harus selalu dipisahkan dari struktur.<span class="footnote">Italic Text</span>
tampaknya menjadi cara terbaik untuk catatan kaki. Itu tidak menyarankan presentasi apa pun dan hanya menggambarkan markup. Anda tidak dapat memprediksi apa yang akan terjadi pada fitur tersebut. Jika catatan kaki akan tumbuh di fitur, Anda mungkin terpaksa mengubah nama kelasnya (untuk menjaga logika dalam kode Anda).Jadi, setiap kali Anda memiliki beberapa teks penting, gunakan
em
ataustrong
untuk menekankannya. Tetapi ingat bahwa elemen-elemen ini adalah elemen sebaris dan tidak boleh digunakan untuk menekankan blok teks yang besar.Gunakan CSS jika Anda hanya peduli tentang bagaimana sesuatu terlihat dan selalu berusaha untuk menghindari markup tambahan.
sumber
Saya pikir jawabannya adalah menggunakan
<em>
ketika Anda bermaksud menekankan.Jika ketika membaca teks untuk diri sendiri, Anda menemukan bahwa Anda menggunakan suara yang sedikit berbeda untuk menekankan suatu poin, maka itu harus digunakan
<em>
karena Anda ingin pembaca layar melakukan hal yang sama.Jika itu murni hal gaya, seperti desainer Anda telah memutuskan bahwa semua
<h2>
judul Anda akan terlihat lebih baik dalam Garamond miring, maka tidak ada alasan semantik untuk memasukkannya dalam HTML dan Anda hanya perlu mengubah CSS untuk elemen yang sesuai.Saya tidak dapat melihat alasan untuk digunakan
<i>
, kecuali jika Anda secara khusus perlu mendukung beberapa browser lama tanpa CSS.sumber
<i>
sekarang juga bermanfaat secara semantik.Saya akan mengatakan gunakan
<em>
untuk menekankan elemen inline. Gunakan kelas untuk elemen blok seperti blok teks. CSS atau tidak, teks masih harus ditandai. Baik itu untuk semantik atau bantuan visual, saya berasumsi Anda akan menggunakannya untuk sesuatu yang bermakna ...Jika Anda menekankan teks untuk alasan APAPUN, Anda bisa menggunakan
<em>
, atau kelas yang membuat huruf miring teks Anda.Tidak apa-apa untuk melanggar aturan kadang-kadang!
sumber
OK, hal pertama yang perlu diperhatikan adalah itu
<i>
telah ditinggalkan, dan tidak boleh digunakan<i>
belum ditinggalkan, tetapi saya masih tidak merekomendasikan menggunakannya — lihat komentar untuk detailnya. Ini karena itu sepenuhnya bertentangan dengan menjaga presentasi di lapisan presentasi, yang telah Anda tunjukkan. Demikian pula,<span class="italic">
tampaknya memecahkan cetakan juga.Jadi sekarang kita memiliki dua cara nyata dalam melakukan sesuatu:
<em>
dan<span class="footnote">
. Ingat ituem
singkatan dari penekanan . Ketika Anda ingin menerapkan penekanan pada kata, frasa atau kalimat, tempelkan dalam<em>
tag terlepas dari apakah Anda ingin cetak miring atau tidak. Jika Anda ingin mengubah styling dalam beberapa cara lain, gunakan CSS:em { font-weight: bold; font-style: normal; }
. Tentu saja, Anda juga dapat menerapkan kelas ke<em>
tag: jika Anda ingin frasa yang ditekankan tertentu muncul dalam warna merah, beri mereka kelas dan tambahkan ke CSS:Jika Anda menerapkan huruf miring untuk alasan lain, lanjutkan dengan metode lain dan beri kelas bagian. Dengan begitu, Anda dapat mengubah gayanya kapan pun Anda inginkan tanpa menyesuaikan HTML. Dalam contoh Anda, catatan kaki tidak boleh ditekankan — pada kenyataannya, catatan itu harus tidak ditekankan, karena tujuan catatan kaki adalah menunjukkan informasi yang tidak penting tetapi menarik atau bermanfaat. Dalam hal ini, Anda jauh lebih baik menerapkan kelas ke catatan kaki dan membuatnya terlihat seperti di lapisan presentasi - CSS.
sumber
<i>
belum ditinggalkan.<i>
belum ditinggalkan, tetapi spec HTML4 mengatakan "Meskipun mereka tidak semuanya usang, penggunaannya tidak disarankan karena style sheet"<i>
digunakan untuk mewakili "rentang teks dalam suara atau suasana hati alternatif".<i>
dengan beberapa makna semantik. Secara pribadi saya pikir mereka sekarang telah mengacaukan masalah ini, tetapi mereka masih mengatakan "penulis didorong untuk mempertimbangkan apakah elemen lain mungkin lebih berlaku daripadai
elemen, misalnyaem
elemen untuk menandai penekanan stres".<i>
dan kapan harus digunakan<span class="semantic-meaning">
... mereka sepertinya menyiratkan bahwa Anda harus menggunakan<i>
untuk satu kasus khusus di mana semantik lebih diinginkan, yang tampaknya tidak cocok bagi saya — Anda masih menambahkan kode presentasi ke lapisan semantik. Jadi Anda benar: ini tidak usang, tetapi berdasarkan apa yang saya baca, saya juga tidak bisa merekomendasikannya.Gunakan <em> jika Anda memerlukan beberapa kata / karakter dalam huruf miring dalam konten tanpa gaya lain. Ini juga membantu membuat semantik konten.
text-style
lebih cocok untuk berbagai gaya dan tidak perlu semantik.sumber
MELAKUKAN
Berikan nilai pada atribut kelas yang menunjukkan sifat data (yaitu
class="footnote"
baik)Buat lembar gaya CSS untuk halaman tersebut
Tentukan gaya CSS yang dilampirkan ke kelas yang Anda tetapkan untuk elemen
.footnote { font-style:italic; }
TIDAK
<i>
atau<em>
elemen - mereka tidak didukung dan mengikat data dan presentasi terlalu dekat.class="italic"
).sumber
<i>
dan<em>
dalam HTML5. Nomor 2 di bawah "Jangan" benar, tetapi nomor 1 di bawah "Jangan" miring - tidak baik memberi label "catatan kaki" seluruh kelas jika barang lain yang tidak ada catatan kaki juga akan dicetak miring dengan itu kelas, meskipun memiliki kelas yang menunjukkan sifat data yang baik. Lembar kelas dan gaya tidak selalu diperlukan, namun, terutama jika hanya beberapa item yang akan dicetak miring.