HTML details Etiketi Nedir ve Nasıl Kullanılır?
HTML details etiketi web sayfalarında belli alanlara açılır kapanır açıklama veya menüler eklemek için kullanılan bir yapıdır. Örneğin herhangi bir web sayfasında makalelerin ilk paragrafı gösterilir diğer paragrafları gizlenir. İşte böyle işlemler details elementi ile kolayca gerçekleştirilebilir.
<details> … </details> elementinin kullanımı aşağıdaki gibidir.
<details>
<!– burasi bir acilir / kapanir alandir. –>
</details>
HTML details elementi yalnız başına kullanıldığında; açılır / kapanır alanın başlığı Details olur. Fakat summary elementi ile bu açılır / kapanır alana bir isim verilebilir. O yüzden summary elementi ile kullanmaya özen gösterelim. summary elementi ile details elementinin kullanımı aşağıdaki gibidir.
<details>
<!– details icin, summary ile bir baslik ekleyelim. –>
<summary>Burasi details icin bir baslik alani</summary>
</details>
details elementi ile basit bir örnek yapalım. Örneğimiz aşağıdaki gibi olacaktır.
<!DOCTYPE html> <head> <title>Details Örnek</title> <meta charset="utf-8"> </head> <body> <details> <summary>Lorem ipsum...</summary> <article> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,<br> quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo <br> consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse <br> cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non <br> proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br> </article> </details> </body> </html>
HTML 5’ten önce bu tip açılır kapanır menüler JavaScript ile gerçekleştiriliyordu. Fakat artık JavaScript’e gerek kalmadan kolayca oluşturabiliyoruz.
details etiketi konusunu bu yazımızda gördük. Konu ile ilgili soru, görüş ya da fikirlerinizi aşağıda bulunan yorumlar kısmı ile bizlere ulaştırabilirsiniz. Aşağıdaki linke tıklayarak HTML ile ilgili diğer yazılarımıza da ulaşabilirsiniz. Ayrıca Instagram ve Twitter linklerine de tıklayarak bizi Instagram ve Twitter üzerinden takip ederek destek olabilirsiniz.
https://yazilimdelisi.com/category/web-gelistirme/html/
Sosyal Medya Hesaplarımız
