HTML5 Anlamsal Unsurları
[ Okuma süresi tahmini 3 dakikadır ]
HTML5, yeni unsurları ile daha iyi daha iyi doküman yapısı sunmaktadır. Konu yeni değil. 2014 yılının son aylarında HTML5 yayınlanmıştı. Unsurları da yavaş yavaş kullanılmaya başladı ve yaygınlaştı. Bunları hatırlatma olarak yeniden gözden geçirelim. Mümkün olan azami şekilde de kullanalım.
HTML5 Anlamsal Unsurlarının Alfebetik Listesi
| ETİKET | Açıklama |
|---|---|
| <article> | Bir makaleyi tanımlar |
| <aside> | İçeriği sayfa içeriğinden ayırır |
| <details> | Kullanıcının görüntüleyebileceği veya gizleyebileceği ek ayrıntıları tanımlar |
| <figcaption> | <figure> unsuru için altyazı |
| <figure> | Görseller, resimler, şema, fotoğraflar, kod listeleri vb. gibi içeriği belirtir. |
| <footer> | Bir belge veya bölüm için altbilgiyi tanımlar |
| <header> | Bir belgenin veya bölümün başlık ve üstbilgisini belirtir |
| <main> | Belgenin ana içeriğini belirtir |
| <nav> | Gezinme bağlantılarını tanımlar |
| <section> | Belgedeki bir bölümü tanımlar |
| <summary> | <details> öğesi için görünür bir başlığı tanımlar |
| <time> | Tarih / saat tanımlar |
Semantic Elements
Tüm unsur/ öğelerin listesini kaynağımız w3schools sayfasında bulabilirsiniz.
Anlamlı Öğeler
HTML5 anlamsal öğeleri sayesinde web sitelerimizi daha anlamlı kodlayabiliyoruz. Görsel kısmının yanında Anlamsal kodlama ile anlamlı siteler yapmamız arama motoru optimizasyonuna yardımcı olur. Verilerin işlenmesi çok daha hızlı olur.
Bazı Örnekler
Bir çok div yerine doğrudan anlamlı öğeleri kullanıyoruz.
- Artık site menüleri için menu kullanmıyoruz. Nav öğesi kullanıyoruz.
- Yazılarımızı, içeriğimizi article içinde gösteriyoruz.
- Görsellerimizi figure içinde belirtiyoruz.
- Section ile makale bölümlerimizi ayırıp, düzenliyoruz.
- Sayfada, içerik dışında belirtmek istediklerimizi aside ile belirtiyoruz.
- Footer öğesini hem sayfanın en alt bölümü için, hem de içeriklerin altbilgi bölümü için kullanabiliyoruz.
- Aynı şekilde header unsuru da site, sayfa üst bölümü ve üstbilgi bölümü belirtmek için kullanılır.
Bunlar bazı en temel sayılabilecek örnekler. Tüm öğeleri CSS class ile isteğiniz gibi kişileştirebilirsiniz. Tabii unsurların varsayılan CSS özelliklerine de mutlaka bakın. Fazladan ve gereksiz olarak CSS dosyanıza kod eklemenize gerek kalmasın.