- Konu sahibi
- #1
HTML details ve summary etiketleri nasıl kullanılır?
<details> ve <summary> etiketleri, JavaScript yazmadan açılıp kapanabilen içerik bölümleri oluşturur. <summary> görünen başlık ve tıklanabilir kontrol, <details> ise bu başlığın açacağı içerik alanıdır. Kullanıcı içeriği açtığında tarayıcı open niteliğini ekler; başlangıçta açık olmasını istiyorsanız bu niteliği kendiniz yazabilirsiniz.En küçük çalışan örnek
Aşağıdaki dosyayı
details-ornek.html adıyla kaydedip tarayıcıda açın:
HTML:
<style>input, select, textarea, button, details { border-radius: 4px; }</style>
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<title>details ve summary örneği</title>
</head>
<body>
<details>
<summary>Kurulum notunu göster</summary>
<p>Kurulum tamamlandıktan sonra uygulamayı yeniden başlatın.</p>
</details>
</body>
</html>Beklenen sonuç, sayfada “Kurulum notunu göster” metninin görünmesidir. Metne tıkladığınızda paragraf açılır; tekrar tıkladığınızda kapanır. Hiçbir şey açılmıyorsa önce dosyanın gerçekten
.html uzantısıyla kaydedildiğini ve içeriğin <details> ile </details> arasında bulunduğunu kontrol edin. <summary> eksikse tarayıcı varsayılan bir başlık gösterebilir; bu nedenle başlığı kendiniz tanımlamanız daha güvenlidir.Yapı nasıl çalışır?
summary öğesini details öğesinin ilk çocuk öğesi olarak yerleştirin. Kullanıcı bu alana tıklayarak içeriği açar veya kapatır. Açılış durumunu HTML ile belirlemek için
open niteliğini kullanın:
HTML:
<details open>
<summary>Sık kullanılan bilgiler</summary>
<p>Bu bölüm sayfa açıldığında görünür.</p>
</details>HTML bu durumu kalıcı bir uygulama tercihi olarak kaydetmez. Tarayıcının geçmiş/form durumu geri yüklemesi farklı davranabilir; kalıcılık iş gereksinimiyse bunu açıkça yönetin. Basit açıklama, SSS, yardım metni ve isteğe bağlı teknik ayrıntılar için JavaScript eklemeden
<details> kullanmak genellikle yeterlidir.İki etiketin görevini şu şekilde ayırabilirsiniz:
| Öğe | Görevi | Tipik içerik |
|---|---|---|
<details> | Açılıp kapanan kapsayıcı | Açıklama, adımlar, ayrıntılar |
<summary> | Kullanıcının tıkladığı başlık | Kısa ve anlaşılır soru veya konu adı |
Uygulamada doğru kullanım
- Kullanıcının açmak isteyip istemediği içeriği
<details>içine yerleştirin. Her zaman görünmesi gereken ana başlık, uyarı veya temel açıklamayı gizlemeyin. - İlk içerik öğesi olarak anlamlı bir
<summary>yazın. “Tıkla” yerine “Yedekleme adımlarını göster” gibi açılınca ne bulunacağını anlatan bir ifade kullanın. - Başlangıçta görünmesi gereken bölüme
openekleyin; isteğe bağlı veya ikincil bilgileri kapalı bırakın. - İçeriği açıp kapatmayı tarayıcıda klavye ile de deneyin. Özel CSS veya JavaScript eklediyseniz bu davranışı bozmamaya dikkat edin.
Birden fazla bağımsız bölüm için yapı şöyle olabilir:
HTML:
<details>
<summary>Belgeler</summary>
<p>Kurulum ve kullanım belgeleri.</p>
</details>
<details>
<summary>Destek</summary>
<p>Destek seçenekleri ve iletişim bilgileri.</p>
</details>Sık yapılan hatalar
- Uzun başlık kullanmak: Summary alanı bir bölüm başlığı gibi kısa olmalıdır; ayrıntılı açıklamayı açılan içeriğe taşıyın.
- Her şeyi gizlemek: Arama, temel yönerge veya kritik uyarı gibi kullanıcıların mutlaka görmesi gereken bilgileri kapalı bir alana koymayın.
- Summary yerine yalnızca stil kullanmak: Görsel bir kutu oluşturmak, açılıp kapanan yerel davranışın yerini tutmaz. Davranış gerekiyorsa semantik etiketleri kullanın.
- Özel JavaScript ile davranışı gereksizce değiştirmek: Basit açma-kapama için JavaScript eklemek, klavye ve tarayıcı davranışlarını bozma ihtimalini artırır.
Varsayılan ok işaretinin görünümü tarayıcıya ve CSS'e göre değişebilir. Tasarım gereği değiştirecekseniz başlığın hâlâ açıkça tıklanabilir ve klavye ile kullanılabilir kalmasını test edin. Ayrıca
<summary> içine karmaşık etkileşimli kontroller yerleştirmek yerine, bu kontrolleri açılan içeriğin içine koymak daha anlaşılır bir yapı sağlar.Sık sorulan sorular
details içeriği sayfa kaynağında bulunur mu?
Evet. İçerik HTML içinde yer alıyorsa başlangıçta kapalı olsa bile kaynakta bulunur; kapalı olması içeriği sunucudan gizlemez veya erişim kontrolü sağlamaz.details bölümlerini aynı anda yalnızca bir tane açık olacak şekilde kullanabilir miyim?
Bölümleriname niteliğiyle aynı gruba alarak bunu destekleyen tarayıcı davranışından yararlanabilirsiniz. Ancak bu davranışa güvenmeden önce hedef tarayıcılarınızda test edin; kesin kontrol gerekiyorsa ek JavaScript mantığı gerekir.