- Konu sahibi
- #1
HTML section etiketi nedir?
<section>, bir HTML belgesindeki belirli ve anlamlı bir içerik bölümünü tanımlayan anlamsal etikettir. İçeriği daha özel bir etiketle ifade edilemiyorsa kullanılır. Genellikle kendi başlığıyla birlikte yazılır; örneğin bir makaledeki “Kurulum”, “Özellikler” veya “Sık yapılan hatalar” bölümleri ayrı birer <section> olabilir. Yalnızca CSS ile biçimlendirme veya JavaScript işlemi için kapsayıcı gerekiyorsa <div> tercih edilmelidir.section nasıl düşünülmelidir?
<section> görsel olarak otomatik bir kutu, çizgi veya boşluk oluşturmaz. Asıl görevi, belgenin konusunu anlamlı parçalara ayırmaktır. Bu nedenle bölümün amacını açıklayan bir başlık eklemek doğru yaklaşımdır.Başlık seviyesini belgenin hiyerarşisine göre seçin. Sayfanın ana başlığı
<h1> ise, onun altındaki bağımsız ana bölümler genellikle <h2>, bu bölümlerin alt bölümleri ise <h3> ile başlar. Başlığı yalnızca yazı boyutunu değiştirmek için seçmeyin; başlık seviyesi içerik ilişkisini göstermelidir.Anlamlı bir section örneği
Aşağıdaki örnekte
<article> bağımsız bir yazıyı, içindeki <section> etiketleri ise yazının konu bakımından bölümlerini temsil eder:
Kod:
<article>
<h1>HTML Formları</h1>
<section aria-labelledby="form-amaci">
<h2 id="form-amaci">Formun amacı</h2>
<p>Formlar, kullanıcıdan bilgi almak için kullanılır.</p>
</section>
<section>
<h2>Gönderim yöntemi</h2>
<p>Form verileri uygun bir HTTP yöntemiyle sunucuya gönderilebilir.</p>
</section>
</article>Bu kodda beklenen sonuç, tarayıcıda başlıkları ve paragrafları normal biçimde gösteren bir yazıdır.
<section> tek başına özel bir görünüm oluşturmaz; anlamlı yapı, başlık ve içerik ilişkisiyle ortaya çıkar. Bir bölümün ne anlattığını başlığından çıkaramıyorsanız, o bölümün gerçekten <section> olup olmadığını yeniden değerlendirin.section, article ve div farkı
Karar verirken “Bu içerik kendi başına anlamlı bir birim mi, yoksa yalnızca mevcut içeriğin bir bölümü mü?” sorusunu sorun.
| Etiket | Ne zaman kullanılır? | Örnek |
|---|---|---|
| section | Belgenin anlamlı, konuya ayrılmış bir bölümü için | Ürün özellikleri bölümü |
| article | Tek başına paylaşılabilir veya yeniden kullanılabilir içerik için | Blog yazısı, forum gönderisi, haber |
| div | Yalnızca stil, yerleşim veya komut dosyası kapsayıcısı gerektiğinde | CSS ızgara hücresi veya dekoratif sarmalayıcı |
Örneğin bir blog sayfasında her yazı
<article> olabilir. Yazının içindeki “Giriş”, “Kullanım” ve “Sonuç” bölümleri ise <section> ile işaretlenebilir. Buna karşılık yalnızca aynı arka plan rengini vermek için oluşturulan kapsayıcı semantik bir bölüm değildir; burada <div> daha uygundur.Uygularken izlenecek kararlar
- İçeriğin amacını belirleyin. Daha özel bir anlamsal etiket uygunsa
<nav>,<aside>veya<article>gibi uygun etiketi seçin. - İçerik yalnızca bir konunun alt bölümü ise
<section>kullanın ve bölüme açıklayıcı bir<h2>veya uygun seviyede başlık ekleyin. - Sadece CSS yerleşimi, görsel stil veya JavaScript seçicisi için kapsayıcı gerekiyorsa
<div>kullanın. - İç içe bölümlerde başlık seviyelerini içerik hiyerarşisine göre ilerletin; sırf görünüşü değiştirmek için başlık seviyesini atlamayın.
- Tarayıcıda sonucu kontrol edin. Başlıklar belgeyi mantıklı bir sırada anlatıyor, içerik de başlıktan bağımsız olarak anlaşılabiliyorsa yapı amacına uygundur.
Sık yapılan hatalar
Her
<div> etiketini otomatik olarak <section> ile değiştirmek doğru değildir. Anlamsal bir konu bölümü yoksa bu değişiklik belgeye anlam katmaz. Benzer şekilde, yalnızca görsel olarak kutu oluşturmak için <section> kullanmak da etiketin amacını zayıflatır.Başlıksız
<section> kullanımı bazı arayüz parçalarında mümkün olsa da, makale ve belge yapılarında bölüm başlığı eklemek daha anlaşılırdır. Başlık bulunmuyorsa bölümün konusu hem kullanıcı hem de yardımcı teknolojiler açısından belirsizleşebilir. Ayrıca <section> kullanmak otomatik olarak SEO sıralaması veya özel bir görünüm garantisi vermez; değer, doğru içerik yapısından gelir.Sık sorulan sorular
Section ekleyince başlık seviyesi otomatik düşer mi?
Hayır. İç içe section kullanmak h1 başlığını otomatik olarak h2 veya h3 yapmaz. Başlık seviyelerini belge içindeki gerçek sıraya göre açıkça yazın; örnekte makalenin h1 başlığını bölümün h2 başlığı izler.
Her section ekran okuyucuda region olarak görünür mü?
Hayır. Section erişilebilir bir ada sahip olduğunda region işaretçisi olabilir; adı yoksa genel bir grup olarak değerlendirilir. Örnekte aria-labelledby, mevcut görünür başlığın id değerine bağlanır. Her küçük parçayı ayrı region yapmak yerine gezinmeye katkı sağlayan anlamlı bölümleri adlandırın.
Bir section içinde birden fazla article bulunabilir mi?
Evet. Örneğin başlığı “Son haberler” olan bir bölüm, her biri tek başına anlamlı haberlerden oluşan article öğelerini içerebilir. Tersine bağımsız bir article içinde onun alt konuları section olabilir; etiket seçimi yalnız iç içe geçme sırasına bağlı değildir.
