Salah satu tag yang akan Anda pelajari di awal pendidikan desain web Anda adalah sepasang tag yang dikenal sebagai "tag penekanan". Mari kita lihat apa tag ini dan bagaimana mereka digunakan dalam desain web hari ini.
Kembali ke XHTML
Jika Anda belajar HTML tahun lalu, jauh sebelum munculnya HTML5, Anda mungkin menggunakan tag tebal dan cetak miring. Seperti yang Anda harapkan, tag ini mengubah elemen menjadi teks tebal atau teks miring masing-masing. Masalah dengan tag ini, dan mengapa mereka disingkirkan demi elemen baru (yang akan kita lihat sebentar lagi), adalah bahwa mereka bukan elemen semantik. Ini karena mereka menentukan bagaimana teks seharusnya terlihat daripada informasi tentang teks. Ingat, HTML (yang mana tag ini akan ditulis) adalah semua tentang struktur, bukan gaya visual! Visual ditangani oleh CSS dan praktik terbaik desain web telah lama dipegang bahwa Anda harus memiliki pemisahan gaya dan struktur yang jelas di halaman web Anda. Ini berarti tidak menggunakan elemen yang non-semantik dan yang lebih detail daripada struktur. Inilah sebabnya mengapa tag tebal dan cetak miring umumnya telah digantikan oleh yang kuat (untuk tebal) dan penekanan (untuk cetak miring).
& lt; strong & gt; dan & lt; em & gt;
Elemen yang kuat dan menekankan menambahkan informasi ke teks Anda, merinci konten yang harus diperlakukan berbeda dan ditekankan ketika konten tersebut diucapkan. Anda menggunakan elemen-elemen ini cukup banyak dengan cara yang sama seperti sebelumnya Anda akan menggunakan huruf tebal dan cetak miring. Cukup letakkan teks Anda dengan tag pembuka dan penutup ( dan untuk penekanan dan dan untuk penekanan kuat) dan teks terlampir akan ditekankan.
Anda dapat menumpuk tag ini dan tidak masalah yang merupakan tag eksternal. Inilah beberapa contoh.
Teks ini ditekankan dan sebagian besar browser akan menampilkannya sebagai huruf miring. Teks ini sangat ditekankan dan sebagian besar browser akan menampilkannya sebagai jenis tebal.Dalam kedua contoh ini, kami tidak mendikte tampilan visual dengan HTML. Ya, tampilan default dari tag akan dicetak miring dan akan dicetak tebal, tetapi tampilannya bisa diubah dengan mudah dalam CSS. Ini adalah yang terbaik dari kedua dunia. Anda dapat memanfaatkan gaya browser default untuk mendapatkan teks miring atau tebal dalam dokumen Anda tanpa benar-benar melintasi garis dan mencampur struktur dan gaya. Katakanlah Anda ingin agar teks tidak hanya tebal, tetapi juga merah, Anda bisa menambahkan ini ke CSS
kuat {
warna merah;
}
Dalam contoh ini, Anda tidak perlu menambahkan properti untuk huruf tebal karena itu adalah default. Jika Anda tidak ingin meninggalkan itu untuk kebetulan, bagaimanapun, Anda selalu dapat menambahkannya di:
kuat {
font-weight: bold;
warna merah;
}
Sekarang Anda akan tetapi dijamin memiliki halaman dengan teks tebal (dan merah) di mana pun tag digunakan.
Gandakan Emphasis
Satu hal yang saya perhatikan sepanjang tahun adalah apa yang terjadi jika Anda mencoba untuk menggandakan penekanan. Sebagai contoh:
Teks ini harus memiliki teks tebal dan dicetak miring di dalamnya.Anda akan berpikir bahwa garis ini akan menghasilkan area yang memiliki teks tebal dan miring. Kadang-kadang ini memang terjadi, tetapi saya telah melihat beberapa browser hanya menghormati kedua dari dua gaya penekanan, yang paling dekat dengan teks yang sebenarnya, dan hanya menampilkan ini sebagai cetak miring. Ini adalah salah satu alasan mengapa saya tidak menggandakan tag penekanan.
Alasan lain untuk menghindari ini "menggandakan" adalah untuk tujuan gaya. Satu bentuk penekanan jika biasanya cukup untuk menyampaikan nada yang ingin Anda atur. Anda tidak perlu tebal, miring, warna, memperbesar, dan garis bawahi teks agar menonjol. Teks itu, akan semua jenis penekanan yang berbeda itu, akan menjadi norak. Jadi hati-hati saat menggunakan tag penekanan atau gaya CSS untuk memberikan penekanan dan jangan berlebihan.
Catatan tentang Bold dan Miring
Satu pemikiran terakhir - sementara tag tebal () dan miring () tidak lagi direkomendasikan untuk digunakan sebagai elemen penekanan, ada beberapa desainer web yang menggunakan tag ini untuk menata area teks sebaris. Pada dasarnya, mereka menggunakannya seperti elemen . Ini bagus karena tag sangat pendek, tetapi menggunakan elemen ini dengan cara ini umumnya tidak disarankan. Saya menyebutkan jika Anda melihatnya di beberapa situs yang digunakan untuk tidak membuat teks tebal atau dicetak miring, tetapi untuk membuat kait CSS untuk beberapa jenis gaya visual lainnya.
Artikel asli oleh Jennifer Krynin. Diedit oleh Jeremy Girard pada 12/2/16.