Pendahuluan
Tag <s>
adalah cara yang mudah untuk membuat teks tercoret di HTML. Anda dapat menggunakan tag ini untuk menunjukkan teks yang dihapus, direvisi, atau tidak relevan.
Tag <s>
digunakan untuk membuat teks tercoret di HTML. Garis coret ini biasanya digunakan untuk menunjukkan teks yang dihapus, direvisi, atau tidak lagi relevan.
Anda juga dapat menggunakan tag <del>
untuk membuat teks tercoret. Tag <del>
memiliki arti semantik yang sama dengan tag <s>
, tetapi secara visual dapat berbeda. Namun, tag <s>
dan <del>
tidak didukung oleh semua browser lama.
Format Umum
Format umum penggunaan jenis ini adalah:
Tag Pembuka:
<s>
Tag Penutup:
</s>
Cara Penggunaan Dasar:
<s>Ini adalah teks yang tercoret.</s>
Dalam contoh di atas, teks di antara tag <s>
dan </s>
akan ditampilkan dengan garis coretan melaluinya saat dirender di browser.
Catatan Penting:
Semantik: Gunakan tag
<s>
dengan bijak, pastikan bahwa penggunaan strikethrough pada teks memang sesuai dengan konteksnya dan tidak menyesatkan.Aksesibilitas: Strikethrough bisa mempengaruhi aksesibilitas. Pastikan bahwa pengguna masih bisa dengan mudah membaca teks yang tercoret, terutama bagi pengguna yang menggunakan pembaca layar.
Pemformatan: Jika Anda ingin menyorot teks sebagai hasil revisi atau pembaruan, pertimbangkan untuk menggunakan CSS untuk menambahkan warna atau gaya tambahan selain strikethrough.
Tag
<s>
bersifat inline, sehingga hanya teks di dalam tag yang akan tercoret.Anda dapat menggunakan tag
<s>
di dalam tag lain, seperti<h1>
,<h2>
,<h3>
,<h4>
,<h5>
,<h6>
,<p>
,<div>
, dan lain-lain.Tag
<s>
dapat digunakan bersama dengan tag<strong>
dan<em>
untuk membuat teks yang tercoret dan tebal atau miring.
Beberapa Format Penggunaan Khusus
Dalam HTML, tag <s>
digunakan untuk menandai teks yang ingin ditampilkan tercoret atau disebut juga sebagai strikethrough. Strikethrough biasanya digunakan untuk menunjukkan bahwa teks tersebut tidak relevan atau telah dihapus, tetapi tetap ingin dibiarkan terlihat.
Tag <s>
dapat digunakan untuk mewakili hal-hal yang tidak lagi relevan atau tidak lagi akurat. Namun, <s>
tidak sesuai ketika menunjukkan pengeditan dokumen. Untuk itu, gunakan elemen <del>
dan <ins>
jika diperlukan.
Menandai Teks yang Tidak Disarankan:
<p>Produk <s>lama</s> telah diperbarui dengan yang terbaru.</p>
Dalam contoh ini, kata "lama" akan ditampilkan dengan garis coretan, menunjukkan bahwa kata tersebut tidak lagi relevan.
Tag <s>
juga bisa digunakan untuk menandai teks yang sebaiknya tidak digunakan atau dihindari, tetapi masih tetap dibiarkan dalam dokumen untuk alasan tertentu, seperti keterbacaan sejarah atau dokumentasi.
Menandai Teks yang Sementara Dihapus:
<p>Pembaruan pada fitur <s>dihapus sementara</s> akan segera dilakukan.</p>
Dalam contoh ini, teks "dihapus sementara" menandakan bahwa fitur tersebut sementara dihapus, tetapi kemungkinan akan dikembalikan.
Tag <s>
dapat digunakan untuk menandai teks yang sementara dihapus, tetapi mungkin akan dikembalikan ke dokumen di masa depan.
Menyatukan tag <s>
dengan <strong>
atau <em>
:
<p><s><strong>Ini adalah teks tebal dan tercoret.</strong></s></p>
Menggunakan atribut style:
<p><s style="text-decoration: overline;"><s>Ini adalah teks dengan overline dan strikethrough.</s></s></p>
Efek Visual Tambahan:
<p><s style="text-shadow: 2px 2px 4px #000;">Teks dengan bayangan</s></p>
Dalam contoh diatas, teks yang ditandai akan memiliki bayangan.
Penggunaan Gaya CSS Tambahan:
<style> s { color: red; text-decoration: line-through; } </style> <p>Item 1 <s>tidak tersedia</s>.</p>
Kesimpulan
Tag <s>
digunakan dalam HTML untuk menunjukkan teks yang telah dihapus atau tidak relevan. Penggunaannya harus dipertimbangkan dengan cermat untuk memastikan keterbacaan dan kejelasan konten.
Orang lain juga bertanya (FAQ)
- Menggunakan text-align: Cara sederhana dengan properti
text-align: center;
. - Menggunakan margin: Memanfaatkan
margin: 0 auto;
untuk pusat horizontal. - Menggunakan Flexbox: Menerapkan display flex untuk pengaturan yang lebih fleksibel.
- Menggunakan Grid: Menggunakan CSS Grid untuk penataan tombol di tengah.
Bagaimana cara mengubah warna tombol menggunakan CSS?
Anda dapat mengubah warna tombol dengan properti background-color
di CSS.
Apa perbedaan antara Flexbox dan Grid dalam menengahkan tombol?
Flexbox digunakan untuk penataan elemen dalam satu dimensi, sementara Grid mengatur elemen dalam dua dimensi.
Apakah metode ini berfungsi untuk semua jenis tombol?
Ya, metode ini dapat digunakan untuk menengahkan tombol apapun, termasuk tombol HTML biasa dan tombol yang dihasilkan melalui CSS.
Apakah metode ini membuat tombol menjadi responsif?
Responsifitas tombol dapat dicapai dengan teknik tambahan, seperti media queries.
Bagaimana cara mengatur tombol di tengah secara vertikal?
Anda dapat mengatur tombol di tengah vertikal dengan menggunakan teknik Flexbox atau Grid dan properti seperti align-items
.