- Konu sahibi
- #1
HTML
Bir içeriği başka bir sayfaya, akışa veya içerik listesine taşıdığınızda temel anlamı bozulmuyorsa
Aşağıdaki örnek, bağımsız bir blog gönderisini temsil eden çalıştırılabilir bir HTML parçasıdır:
Bu dosyayı
Bu üç etiketi görünüşlerine göre değil, içeriklerinin anlamına göre seçin. Karar vermeyi kolaylaştıran temel ayrım şöyledir:
Örneğin bir haber sayfasında her haber
Her kutuyu otomatik olarak
Ayrıca
<article> etiketi, sayfanın geri kalanından ayrıldığında da anlamını koruyan, bağımsız ve yeniden kullanılabilir bir içerik birimini belirtir. Blog yazısı, forum gönderisi, haber, ürün kartı, kullanıcı yorumu veya bağımsız bir içerik bileşeni için kullanılır. Tarayıcıya tek başına özel bir görünüm kazandırmaz; asıl amacı içeriğin yapısal anlamını belirtmektir.Bir içeriği başka bir sayfaya, akışa veya içerik listesine taşıdığınızda temel anlamı bozulmuyorsa
<article> uygun bir seçimdir. Her <article> içinde genellikle içeriği tanımlayan bir başlık bulunmalıdır.En küçük doğru kullanım
Aşağıdaki örnek, bağımsız bir blog gönderisini temsil eden çalıştırılabilir bir HTML parçasıdır:
Kod:
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<title>HTML article örneği</title>
</head>
<body>
<main>
<article>
<h1>HTML article etiketi nedir?</h1>
<p>Bu içerik, sayfadan bağımsız olarak okunabilecek bir makaledir.</p>
</article>
</main>
</body>
</html>Bu dosyayı
.html uzantısıyla kaydedip tarayıcıda açtığınızda başlık ve paragraf görünür. Başarılı sonuç, içeriğin normal şekilde görüntülenmesidir; <article> etiketi tek başına kart, kenarlık veya özel renk oluşturmaz. Görsel tasarım gerekiyorsa CSS, davranış gerekiyorsa JavaScript ayrıca eklenir.article, section ve div farkı
Bu üç etiketi görünüşlerine göre değil, içeriklerinin anlamına göre seçin. Karar vermeyi kolaylaştıran temel ayrım şöyledir:
| Etiket | Ne zaman kullanılır? | Temel soru |
|---|---|---|
<article> | Bağımsız olarak okunabilen veya yeniden kullanılabilen içerik | Bu parça tek başına anlamlı mı? |
<section> | Aynı belge içindeki tematik bir bölüm | Bu bölümün kendi konusu ve başlığı var mı? |
<div> | Yalnızca gruplama, stil veya betik amacı | Burada özel bir anlamsal etiket gerekli mi? |
<article> olabilir. Haber metninin “Giriş”, “Ayrıntılar” ve “Sonuç” bölümleri ise haberin içinde <section> olarak gruplanabilir. Sadece CSS ile iki kutuyu yan yana getirmek için kullanılan kapsayıcı ise <div> olmalıdır.Uygun etiketi seçme adımları
- İçeriği sayfadan ayırıp tek başına paylaşmayı veya başka bir akışta göstermeyi düşünün. Cevap evetse
<article>kullanın. - İçerik bağımsız değil, daha büyük bir konunun başlıklı alt bölümü ise
<section>seçin. - Kapsayıcı yalnızca CSS düzeni, sınıf gruplaması veya JavaScript seçimi için gerekiyorsa
<div>kullanın. - Seçtiğiniz
<article>veya<section>içine içeriği açıklayan uygun seviyede bir başlık ekleyin. - Bir
<article>içinde yorumlar gibi ayrı ayrı okunabilen alt içerikler varsa bunları iç içe<article>öğeleriyle ifade edin.
Sık yapılan hatalar
Her kutuyu otomatik olarak
<article> yapmak doğru değildir. Sadece tasarım amacıyla kullanılan bir kutu bağımsız içerik sayılmaz. Böyle bir durumda <div> daha uygundur.<section> etiketi de genel amaçlı bir stil kapsayıcısı değildir; belirgin bir konusu ve çoğunlukla başlığı olan tematik bölüm için kullanılmalıdır. Bir <article> içine yalnızca görsel düzen sağlamak amacıyla çok sayıda anlamsal bölüm eklemek, belge yapısını gereksiz yere karmaşıklaştırabilir.Ayrıca
<article> kullanmak içeriği otomatik olarak arama sonuçlarında öne çıkarmaz veya bir içeriğin bağımsızlığını teknik olarak zorlamaz. Etiket, geliştiricinin içerik ilişkisini doğru ifade etmesini sağlar; metnin kalitesi, erişilebilirliği ve sayfanın geri kalan yapısı ayrıca ele alınmalıdır.