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.

1. 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.

2. 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?

Anda harus menggunakan metode berbeda untuk kasus penggunaan berbeda:

1. Jika Anda ingin menekankan suatu frasa, gunakan <em>.
2. The <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).
3. Jika teks yang dicetak miring adalah bagian dari konteks yang lebih besar, katakanlah paragraf pengantar, Anda harus melampirkan gaya CSS ke elemen yang lebih besar, yaitu p.intro { font-style: italic; }

<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.

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 property="italic" href="http://url/to/a/definition_of_italic"> Your text </em>

emdigunakan untuk presentasi (manusia akan melihatnya dalam huruf miring) dan propertydan hrefatribut 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/

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 adalah aside. 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. emadalah contoh yang bagus. Tapi mungkin Anda ingin semua aside > ul > lisitus Anda dicetak miring. Anda harus memisahkan pemikiran tentang markup dari memikirkan presentasi.

Seperti yang disebutkan oleh DisgruntledGoat , iadalah semantik dalam HTML5. Semantiknya agak sempit bagi saya. Penggunaannya mungkin jarang.

Semantik emtelah berubah dalam HTML5 untuk menekankan penekanan. strongdapat digunakan untuk menunjukkan kepentingan juga. strongbisa 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

• CSS Berorientasi Objek
• Pengantar CSS Berorientasi Objek (OOCSS)
• Cara Menulis CSS Berorientasi Objek
• Memulai dengan Object-Orientated CSS (OOCSS)
• CSS Berorientasi Objek: Apa, Bagaimana, dan Mengapa
• Menyelam ke CSS Berorientasi Objek

Mungkin itu tidak memiliki arti khusus dan hanya perlu diberikan dalam huruf miring untuk memisahkannya secara presentasi dari teks yang mendahuluinya.

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.

Teks italic HTML menampilkan teks dalam format italic.

<i>HTML italic text example</i>

Penekanan dan elemen yang kuat dapat digunakan untuk meningkatkan pentingnya kata atau kalimat tertentu.

<p>This is <em>emphasized </em> text format <em>example</em></p>

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

The ielemen non-semantik, sehingga untuk pembaca layar, Googlebot, dll, itu harus menjadi semacam transparan (seperti spanatau divelemen). Tapi itu bukan pilihan yang baik untuk pengembang, karena ia bergabung dengan lapisan presentasi dengan lapisan struktur - dan itu praktik yang buruk.

emelemen ( strongjuga) 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 menggunakan emuntuk 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 ematau stronguntuk 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.

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.

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!

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 itu emsingkatan 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:

Fancy some <em class="special">shiny</em> text?

em { font-weight: bold; font-style: normal; }
em.special { color: red; }

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.

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.

MELAKUKAN

1. Berikan nilai pada atribut kelas yang menunjukkan sifat data (yaitu class="footnote"baik)

2. Buat lembar gaya CSS untuk halaman tersebut

3. Tentukan gaya CSS yang dilampirkan ke kelas yang Anda tetapkan untuk elemen

   .footnote { font-style:italic; }

TIDAK

1. Jangan gunakan <i>atau <em>elemen - mereka tidak didukung dan mengikat data dan presentasi terlalu dekat.
2. Jangan beri nilai pada kelas yang menunjukkan aturan presentasi (yaitu jangan gunakan class="italic").