section etiketi ne işe yarar
<section> tek bir temaya ait içeriği gruplar ve o temayı adlandıran bir başlıkla başlar. "Features", "Pricing" ve "FAQ" bölümlerine ayrılmış bir açılış sayfası ders kitabı örneğidir:
Her section sayfanın bir bölümüdür ve her başlık sayfanın içindekiler tablosunda bir satırdır. Diğer semantik etiketler gibi <section> elementinin de varsayılan bir stili yoktur; kenarlıklar CSS'ten gelir.
section, article ve div farkı
Üçü ekranda aynı görünür. Farklı olan, içerik hakkında ne söyledikleridir:
| Element | Anlamı | Test |
|---|---|---|
<article> | Eksiksiz, kendi başına anlamlı bir parça | Tek başına, başka bir sitede ya da bir akışta yayımlansa anlamlı olur mu? |
<section> | Daha büyük bir bütünün temaya ait bir parçası | Bir başlığı var mı (ya da gerekiyor mu) ve bir şeyin bir bölümü mü? |
<div> | Hiçbir şey: bir stil ya da yerleşim kutusu | Yalnızca CSS ya da JavaScript için mi orada? |
Blog yazıları, forum yorumları, haberler ve ürün kartları article'dır. "Features", "Chapter 2" ve "Related products" section'dır. Üç kartı yan yana dizen bir flex satırı div'dir.
Bir section içinde article'lar
İkisi iki yönde de iç içe yazılır. Burada bir "Latest posts" section'ı birkaç bağımsız article barındırıyor:
<div class="grid"> elementine dikkat et: yalnızca kartları yan yana dizmek için var, bu yüzden onun için doğru etiket div'dir. Her yazı kendi başına durduğu için her kart bir article'dır.
Bir article içinde section'lar
Uzun bir makale, tıpkı bir kitaptaki bölümler gibi section'lara ayrılabilir. Başlık seviyeleri makalenin kendi başlığından devam eder:
Mavi kutu article'dır (rehberin tamamı), yeşil çubuklar da onun section'larıdır. Bir section'a kendi başlık seviyesini ver: bir h2 article'ı h3 section'lar barındırır.
Adlandırılmış section'lar landmark olur
Ekran okuyucular bazı elementleri, kullanıcıların arasında atlayabildiği landmark'lar olarak listeler. Bir <section> yalnızca erişilebilir bir adı olduğunda bir region landmark'ı olur. aria-labelledby değerini başlığına yönlendir:
<section aria-labelledby="pricing-title">
<h2 id="pricing-title">Pricing</h2>
...
</section>
Bunu her section için değil, bir kullanıcının doğrudan atlamak isteyeceği birkaç section için yap: yirmi landmark'ı olan bir sayfayı taramak, hiç olmayan bir sayfa kadar zordur. Adsız section'lar da yine işe yarar, çünkü başlıkları ekran okuyucunun başlık listesinde görünür.
Section'lar sayfa içi linkler için de iyi hedeflerdir. Birine bir id ver, href="#id" olan bir link ona atlar:
Sık yapılan hatalar
<section>elementini bir stil sarmalayıcısı olarak kullanmak. Başlık ve tema yoksa<div>kullan. Her yerleşim etiketinin nereye uyduğunu semantik HTML sayfası gösteriyor.- Tek bir blog yazısını
<section>ile sarmak. Kendi başına duran bir yazı bir<article>olur. - Başlıksız section'lar. Görsel olarak gizli bile olsa bir başlık ekle ya da bunun bir section olup olmadığını yeniden düşün.
<main>yerine<section>kullanmak. Sayfanın ana içeriği<main>içine girer; section'lar onun içine girer.- Her section'ı adlandırmak. Landmark listesi kısa kalsın diye
aria-labelledbydeğerini yalnızca önemli olanlara ekle.
Sıkça Sorulan Sorular
HTML'de section etiketi nedir?
<section>, bir belgenin bir bölümü ya da bir açılış sayfasının "Pricing" kısmı gibi tek bir temaya ait içeriği gruplar. Normalde bölümün ne hakkında olduğunu söyleyen bir başlıkla başlamalıdır.
section ile div arasındaki fark nedir?
<section>, içeriğin belgenin kendi başlığı olan, bir temaya ait bir parçası olduğunu söyler. <div> hiçbir şey söylemez; stil ya da yerleşim için bir kutudur. Yalnızca CSS için bir sarmalayıcıya ihtiyacın varsa <div> kullan.
section ile article arasındaki fark nedir?
<article>, sayfanın dışında kendi başına anlamlı olan içeriktir: bir blog yazısı, bir yorum, bir ürün kartı. <section> ise yalnızca kendi bağlamında anlamlı olan, daha büyük bir şeyin parçasıdır. Parçayı tek başına yayımlayıp yayımlayamayacağını sor: evetse, o bir article'dır.
Bir article section içerebilir mi, bir section da article içerebilir mi?
Evet, ikisi de. Uzun bir makale section'lara bölünebilir, "Latest posts" gibi bir section da bir article listesi barındırabilir.
Bir section'ın başlığı olmalı mı?
Neredeyse her durumda bir tane olmalı, çünkü temayı adlandıran şey başlıktır. Onun için bir başlık bulamıyorsan, içerik muhtemelen bir section değildir ve <div> daha uygun olur.
