Saya dulu punya bos ini siapa dicintai, dicintai, dicintai, dicintai untuk menekankan kata-kata. Ini jauh sebelum kami menggunakan editor WYSIWYG dan saya harus melakukan handcode pada omong kosong itu.
<p> I used to have this boss who <em>loved</em>, <strong>loved</strong>, <strong><em>loved</em></strong>, <strong><em><u>loved</u></em></strong> to emphasize words.
</p>
(Mari kita tidak membahas warna yang dia gunakan untuk genap MOAR tekanan.)
Menulis semua markup itu tidak pernah terasa menyenangkan. Upaya yang diperlukan, tentu saja, apa pun. Tetapi apakah itu ide yang bagus untuk menambahkan konten yang berlebihan dengan dua kali lipat - atau lebih! — penekanan?
Tag yang berbeda menyampaikan penekanan yang berbeda
Sebagai permulaan, the <strong>
dan <em>
tag dirancang untuk penggunaan yang berbeda. Kami mendapatkannya kembali di HTML5, di mana:
Jadi, <strong>
memberi bobot lebih pada konten dalam artian menunjukkan bahwa konten di dalamnya penting atau mendesak. Pikirkan peringatan:
Peringatan: Konten berikut telah ditandai karena luar biasa.
Mungkin tergoda untuk meraihnya <em>
untuk melakukan hal yang sama. Teks miring bisa menarik perhatian. Tapi itu sebenarnya dimaksudkan sebagai petunjuk untuk lebih menekankan saat membaca konten di dalamnya. Misalnya, berikut adalah dua versi dari kalimat yang sama dengan penekanan di lokasi yang berbeda:
<p>I ate the <em>entire</em> plate of burritos.</p>
<p>I ate the entire <em>plate</em> of burritos.</p>
Kedua contoh menekankan penekanan, tetapi pada kata-kata yang berbeda. Dan mereka akan terdengar berbeda jika Anda membacanya dengan lantang. Itu membuat <em>
cara yang bagus untuk mengekspresikan nada dalam tulisan Anda. Itu mengubah arti kalimat dengan cara itu <strong>
tidak.
Penekanan visual vs penekanan semantik
Itu adalah dua hal yang harus Anda pertimbangkan saat menekankan konten. Seperti, ada banyak contoh di mana Anda mungkin perlu mencetak miring konten tanpa memengaruhi arti kalimat. Tapi itu bisa ditangani dengan tag lain yang membuat huruf miring:
<i>
: Ini yang klasik! Sebelum HTML5, ini digunakan untuk menekankan penekanan dengan huruf miring di semua tempat. Sekarang, ini murni digunakan untuk membuat miring konten secara visual tanpa mengubah makna semantik.<cite>
: Menunjukkan sumber fakta atau angka. ("Sumber: Trik CSS")<address>
: Digunakan untuk menandai informasi kontak, tidak hanya alamat fisik, tetapi juga hal-hal seperti alamat email dan nomor telepon. (
)
Ini akan dia hal yang sama dengan <strong>
. Daripada menggunakannya untuk menata teks yang ingin terlihat lebih berat, lebih baik gunakan yang klasik <b>
tag untuk huruf tebal guna menghindari pemberian makna tambahan pada konten yang tidak membutuhkannya. Dan ingat, beberapa elemen seperti judul sudah dicetak tebal, berkat gaya default browser. Tidak perlu menambahkan penekanan yang lebih kuat lagi.
Menggunakan huruf miring dalam konten yang ditekankan (dan sebaliknya)
Ada kasus yang sah di mana Anda mungkin perlu membuat miring bagian dari baris yang sudah ditekankan. Atau mungkin menambahkan penekanan pada sedikit teks yang sudah dicetak miring.
Blockquote mungkin bisa menjadi contoh yang bagus. Saya telah melihat banyak kali di mana mereka dicetak miring untuk gaya, meskipun gaya browser default tidak melakukannya:
blockquote { font-style: italic;
}
Bagaimana jika kita perlu menyebutkan judul film dalam blockquote itu? Itu harus dicetak miring. Tidak diperlukan penekanan stres, jadi an <i>
tag akan dilakukan. Tapi masih aneh untuk memiringkan sesuatu ketika sudah dirender seperti itu:
<blockquote> This movie’s opening weekend performance offers some insight in to its box office momentum as it fights to justify its enormous budget. In its first weekend, <i>Avatar: The Way of Water</i> made $134 million in North America alone and $435 million globally.
</blockquote>
Dalam situasi di mana kami membuat miring sesuatu di dalam konten yang dicetak miring seperti ini, kami seharusnya melakukannya hilangkan huruf miring dari elemen bersarang… <i>
pada kasus ini.
blockquote i { font-style: normal;
}
Kueri gaya penampung akan sangat berguna untuk menangkap semua contoh ini jika kita mendapatkannya:
blockquote { container-name: quote; font-style: italic;
} @container quote (font-style: italic) { em, i, cite, address { font-style: normal; }
}
Cuplikan kecil ini mengevaluasi blockquote untuk melihat apakah itu benar font-style
diatur ke italic
. Jika ya, maka itu akan memastikan <em>
, <i>
, <cite>
, dan <address>
elemen dirender sebagai teks normal, dengan tetap mempertahankan makna semantik jika ada.
Tapi kembali ke penekanan dalam penekanan
Saya tidak akan bersarang <strong>
dalam <em>
seperti ini:
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>
... atau sarang <em>
dalam <strong>
sebagai gantinya:
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>
Rendernya bagus! Dan apa pun urutannya… setidaknya di browser modern. Jennifer Kyrnin menyebutkan itu beberapa browser hanya merender tag yang paling dekat dengan teks, tetapi saya tidak menemukannya di mana pun dalam pengujian terbatas saya. Tapi sesuatu yang harus diperhatikan!
Alasan saya tidak akan membuat satu bentuk penekanan pada yang lain adalah karena itu tidak diperlukan. Tidak ada aturan tata bahasa yang membutuhkannya. Seperti tanda seru, satu bentuk penekanan sudah cukup, dan Anda harus menggunakan salah satu yang cocok dengan yang Anda cari apakah itu penekanan visual, berat, atau yang diumumkan.
Dan meskipun beberapa pembaca layar dapat mengumumkan konten yang ditekankan, mereka tidak akan membaca markup dengan kepentingan atau penekanan tambahan. Jadi, tidak ada fasilitas aksesibilitas tambahan, sejauh yang saya tahu.
Tapi saya sangat ingin semua penekanan!
Jika Anda berada di posisi di mana atasan Anda seperti saya dan menginginkannya SEMUA itu tekanan, saya akan menggunakan tag HTML yang tepat untuk jenis penekanan, lalu menerapkan gaya lainnya dengan campuran tag yang tidak memengaruhi semantik dengan CSS untuk membantu memperhitungkan apa pun yang tidak dapat ditangani oleh gaya browser.
<style> /* If `em` contains `b` or `u` tags */ em:has(b, u) { color: #f8a100; }
</style> <p> I used to have this boss who <em>loved</em>, <strong>loved</strong>, <strong><em>loved</em></strong>, <strong><em><u>loved</u></em></strong> to emphasize words.
</p>
Saya bahkan mungkin melakukannya dengan <strong>
tag juga sebagai tindakan defensif:
/* If `em` contains `b` or `u` tags */
em:has(b, u),
/* If `strong` contains `em` or `u` tags */
strong:has(i, u) { color: #f8a100;
}
Selama kami memainkan pertahanan, kami dapat mengidentifikasi kesalahan di mana penekanan bersarang di dalam penekanan dengan menyorotnya dengan warna merah atau sesuatu:
/* Highlight semantic emphases within semantic emphases */
em:has(strong),
strong:has(em) { background: hsl(0deg 50% 50% / .25); border: 1px dashed hsl(0deg 50% 50% / .25);
}
Maka saya mungkin akan menggunakan cuplikan dari bagian terakhir yang menghapus gaya miring default dari suatu elemen saat bersarang di elemen miring lainnya.
Ada yang lain?
Mungkin:
- Konten Bertenaga SEO & Distribusi PR. Dapatkan Amplifikasi Hari Ini.
- Platoblockchain. Intelijen Metaverse Web3. Pengetahuan Diperkuat. Akses Di Sini.
- Sumber: https://css-tricks.com/the-double-emphasis-thing/
- 1
- 11
- 7
- 9
- 98
- a
- aksesibilitas
- Akun
- Tambahan
- alamat
- alamat
- mempengaruhi
- mempengaruhi
- Setelah
- Semua
- sendirian
- sudah
- Amerika
- dan
- mengumumkan
- Mengumumkan
- Lain
- di manapun
- Mendaftar
- avatar
- kembali
- latar belakang
- karena
- sebelum
- makhluk
- Lebih baik
- Bit
- pin
- batas
- BOS
- Kotak
- Film laris
- Browser
- browser
- anggaran belanja
- Panggilan
- mampu
- kasus
- kasus
- Perubahan
- mengubah
- klasik
- warna
- kontak
- mengandung
- Konten
- CSS
- Default
- Pertahanan
- defensif
- dirancang
- berbeda
- Tidak
- Dont
- dua kali lipat
- usaha
- antara
- elemen
- tekanan
- menekankan
- menekankan
- besar sekali
- cukup
- Seluruh
- kesalahan
- Bahkan
- contoh
- contoh
- ekspres
- tambahan
- perkelahian
- Angka
- Pertama
- ditandai
- berikut
- bentuk
- dari
- mendapatkan
- memberikan
- Pemberian
- Secara global
- Go
- akan
- baik
- besar
- menangani
- membantu
- di sini
- Menyoroti
- menyoroti
- HTML
- HTTPS
- ide
- mengenali
- pentingnya
- penting
- in
- informasi
- wawasan
- sebagai gantinya
- IT
- Jennifer
- Terakhir
- Terbatas
- baris
- sedikit
- lokasi
- Panjang
- melihat
- terbuat
- membuat
- MEMBUAT
- tanda
- hal
- makna
- mengukur
- sebutan
- mungkin
- juta
- modern
- Momentum
- lebih
- film
- bioskop
- NAB
- Perlu
- Nest
- normal
- utara
- Amerika Utara
- nomor
- Penawaran
- Office
- ONE
- pembukaan
- urutan
- Lainnya
- bagian
- prestasi
- tunjangan
- telepon
- fisik
- Tempat
- plato
- Kecerdasan Data Plato
- Data Plato
- bermain
- Cukup
- poin
- posisi
- mungkin
- terlindung
- murni
- mencapai
- Baca
- pembaca
- alasan
- Merah
- ingat
- render
- ISTIRAHAT
- penahan
- Aturan
- sama
- Layar
- pembaca layar
- Bagian
- semantik
- rasa
- putusan pengadilan
- set
- harus
- hanya
- situasi
- So
- beberapa
- sesuatu
- Suara
- sumber
- Masih
- tekanan
- kuat
- gaya
- Menyarankan
- besar
- Seharusnya
- MENANDAI
- tes
- Grafik
- Sumber
- hal
- hal
- kali
- Judul
- untuk
- NADA
- terlalu
- benar
- mendesak
- menggunakan
- peringatan
- Menonton
- akhir pekan
- Menimbang
- berat
- Apa
- apakah
- sementara
- SIAPA
- akan
- dalam
- tanpa
- kata
- akan
- penulisan
- Kamu
- Anda
- zephyrnet.dll