Neden HTML ile üstü çizili oluşturmak isteyebilirsiniz? Sayfanızın bir fiyatlandırma bölümünü düzenliyor olabilirsiniz ve indirimli fiyatı görüntülerken eski fiyatın üstünü çizmek isteyebilirsiniz. Veya belgenizdeki bir metnin yakın zamanda güncellendiğini belirtmek isteyebilirsiniz.
Nedeniniz ne olursa olsun, HTML ile üstü çizili yazılar eklemek kolaydır. Hatta biraz CSS bilmeniz koşuluyla, bunu yapmak için birkaç yönteminiz bile var. Bu gönderide, size HTML ile üstü çizili oluşturmanın üç yolunu ve kaçınmanız gereken bir yöntemi göstereceğiz. Başlayalım.
Üstü çizili nedir?
Üstü çizili, bir satırın bir metin satırının ortasından yerleştirilmesidir, bu nedenle metin “üstü çizili” görünür. İşte bir örnek:
üstü çizili metnin görsel bir örneği
Önerilen makale: sosyal medya siteleri hakkında bilgi almak ve güncel sosyal medya haberlerine ulaşmak için ilgili sayfayı ziyaret edebilirsiniz.
Üstü çizili, genellikle üstü çizili metnin kaldırıldığını, değiştirildiğini veya revize edildiğini gösterir. Daha genel olarak, okuyucuya bu metnin geçerli olmadığını ve genel olarak göz ardı edilebileceğini söyler.
Örneğin, bir promosyon sayfasında satışı belirtmek için üzeri çizili bir çizgi görebilirsiniz; normal fiyatın üstü çizilmiştir ve yeni, daha ucuz fiyatın üstü çizilmemiştir. Ya da bir ürün özellikleri listesinde hangi özelliklerin dahil olup hangilerinin olmadığını gösterebilir.
Gerçekten, üstü çizili bir metin efektinin durumunuza uygun olup olmadığına karar vermek size kalmış. Ardından, bunu nasıl yapacağınızı göstereceğiz.
HTML’de Üstü Çizili Nasıl Yapılır?
HTML ile üstü çizili oluşturmak için önerilen üç yöntem vardır. Bunlar:
<s> etiketini kullanma
<del> etiketini kullanma
CSS metin süsleme özelliğini kullanma
<s> Etiketi
<s> etiketi, HTML’de üstü çizili bir metin oluşturmanın en basit yoludur. Geliştiriciler, yanlış veya önemsiz olan metni ortasından geçen bir çizgiyle işaretlemek için bunu kullanacak. <s> etiketi çalışırken şöyle görünür:
<s> etiketi yalnızca yanlış veya alakasız metinlerde kullanılmalıdır. Ancak, belgeden kaldırılan metni belirtmek için kullanılmamalıdır. Başka bir deyişle, değişiklikleri izlemek için kullanılmamalıdır. Bu amaçla, daha sonra ele alacağımız <del> etiketini kullanmalısınız.
Kullanışlı olmasına rağmen <s> etiketinin bir erişilebilirlik sorunu sunduğunu da belirtmekte fayda var. Ekran okuyucular genellikle bu etiketi yüksek sesle okumaz, dolayısıyla kullanıcılara bu bilgi verilmez. Bu nedenle, eğer web sitenizin erişilebilir olmasını istiyorsanız, idareli kullanılmalıdır.
<del> Etiketi
<del>, üstü çizili efekti oluşturmak için başka bir yöntemdir. Bu öğe, belgede yapılan değişiklikleri izlemek amacıyla, içerilen metnin bir belgeden silindiğini belirtmek için kullanılır.
<del>, <s> ile aynı görsel efekti yaratır. Aşağıdaki örneğe bakın:
<del> etiketinin <s> ile aynı erişilebilirlik sorununu gösterdiğini unutmayın, bu nedenle dikkatli kullanılmalıdır.
<del> etiketi, bir metin parçasının kaldırıldığını ve başka bir metin parçasıyla değiştirildiğini göstermek için kardeş etiketi olan <ins> ile de eşleştirilebilir:
CSS Metin Dekorasyonu
Tamam, CSS HTML değildir, ancak birini biliyorsanız muhtemelen diğerini de bilmelisiniz. Üstü çizili efekti eklemenin son yolu, text-decoration CSS özelliğini kullanmaktır.
Bunu kullanmak için, text-decoration: line-through kuralını metnin hedef bölümüne uygulayın, bunun gibi
HTML <grev> Etiketi
Ek bir HTML etiketi olan <strike>’dan bahsetmeye değer. Bu etiket aynı zamanda metnin ortasına <s> ve <del> gibi bir çizgi ekler. Ancak, bu etiket HTML5’ten itibaren kullanımdan kaldırılmıştır ve artık çoğu tarayıcı tarafından desteklenmemektedir. Bu nedenle, kendi kodunuzda kullanmaktan kaçınmalısınız.
HTML ile Üstü Çizili Oluşturma
Bazı metinlerin üstünü çizmek kadar basit bir şey için bile, HTML ve CSS size işi tamamlamanız için birçok yöntem sunar. Bu nedenle, durumunuz için en uygun seçeneği seçin: Belge değişikliklerini izliyorsanız, <del> kullanın. Aksi takdirde, <s> kullanın. Ya da herhangi bir metin parçasının üzerini çizmek için CSS yöntemini kullanın.