Sayfadaki İçeriği Kırmak için Yatay Çizgi Ekleme

Web dokümanı için HR etiketi nasıl kullanılır?

HR etiketi geleneksel olarak bir web belgesine yatay çizgi (bazen yatay kural olarak adlandırılır) eklemek için kullanılmıştır. Bir satır eklemek için şunu yazın:


, tarayıcıya, sayfanın tüm genişliğini veya varsayılan ayarları kullanarak ana öğe boyunca bir çizgi çizmesini istemek için yazın. Bu varsayılan satır basittir ve genellikle amacına hizmet eder, ancak satırın boyutunu, rengini ve konumunu diğer özellikler arasında değiştirmek için özellikler atanabilir. Bir yatay çizginin görünümünü değiştirmek için yöntem HTML4 ve HTML5 arasında değişti.

İK Etik Semantik midir?

HTML4'te HR etiketi semantik değildi. Anlamsal elemanlar anlamlarını tarayıcıda açıklar ve geliştirici kolayca anlayabilir. İK etiketi, istediğiniz yere bir dokümana basit bir çizgi eklemenin bir yoluydu. Çizginin görünmesini istediğiniz öğenin yalnızca üst veya alt kenarını çizme, öğenin üstünde veya altında yatay bir çizgi yerleştirilir, ancak genel olarak HR etiketi bu amaç için daha kolay kullanılır.

HTML5 ile başlayarak, İK etiketi semantik hale geldi ve şimdi, paragraf seviyesinde tematik bir kırılma tanımlar; bu, yeni bir sayfa veya başka bir daha güçlü sınırlayıcı gerektirmeyen içeriğin akışında bir kesintidir - bu bir konunun değişmesidir . Örneğin, bir öyküdeki bir sahne değişikliğinden sonra bir İK etiketi bulabilir veya referans dokümanda bir konu değişikliğini gösterebilir.

HTML4 ve HTML5'te İK Özellikleri

HTML4'te, HR etiketine "align", "width" ve "noshade" gibi basit özellikler atanabilir. Hizalama sola, merkeze, sağa veya doğruya ayarlanabilir. Genişlik, yatay çizginin genişliğini, çizgiyi sayfa boyunca genişleten varsayılan yüzde 100'den ayarladı. Noshade özniteliği gölgeli bir renk yerine düz bir renk çizgisi oluşturdu. Bu özellikler HTML5'te geçersizdir ve İK etiketlerinizi HTML5'te şekillendirmek için CSS kullanmalısınız. Örneğin, HTML 4'te:


10 piksel yüksekliğinde yatay bir çizgi oluşturur.

HTML5 ile CSS kullanarak, 10 piksel yüksekliğinde yatay bir çizgi stillenir:


Yatay çizginizi şekillendirmek için CSS'yi kullanmak , web sayfanızı tasarlarken size çok fazla özgürlük sağlar. Bu Tarz İK Etiketi makalesinde İK etiketleri için birçok stil örneğini görebilirsiniz. Tüm tarayıcılarda yalnızca genişlik ve yükseklik stilleri tutarlı olduğundan, diğer stilleri kullanırken bazı deneme ve hata gerekebilir. Varsayılan genişlik her zaman web sayfasının veya ana öğenin genişliğinin yüzde 100'dür. Kuralın varsayılan yüksekliği iki pikseldir.