DÜZENLEME
GELENEKSEL HTML DÜZENLEMESİ
Çok uzun bir süre,web sayfası geliştiricileri <div> elemanlarını kullanarak bir sayfadaki birbiriyle alakalı olan (başlık oluşturacak elemanlar,bir makale,bir dipnot veya kenar çubuğu oluşturmak üzere kullanılan elemenlar gibi) elemanları grupladılar. Geliştiriciler class(sınıf) veya id özelliklerini (ögelerini) kullanarak <div> elemanının bir sayfadaki rolünü belirlediler.
GELENEKSEL HTML DÜZENLEMESİ
Yukarıdaki örnekte çok yaygın kullanılan (özellikle blog sitelerinde) düzenlemeyi görmektesiniz.
Sayfanın en üst kısmında,bir logo ve asıl navigasyonu barındıran bir başlık bulunmaktadır.
Bu alanın altında bir veya daha fazla makale veya yayın mevcuttur. Bazen bunlar ayrı yayınlara bağlantı veren özetler olabilmektedir.
Bu yayınların sağ tarafında bir yan çubuk görünmektedir(Belki de bir arama opisyonu,daha önce yayınlanmamış makalelerin bağlantısı veya reklamlar olabilir. )
Bu tür bir sayfayı kodlarken geliştiriciler,genellikle sayfanın bu ana kısımlarını <div> elemanlarının içine koyar ve class veya id özelliklerini kullanarak ilgili kısmın kullanım amacını belirler.
YENİ HTML5 DÜZENLEME ELEMANLARI
HTML5, bir sayfayı parçalara bölmenize olanak sağlayacak yeni bir dizi eleman tanıtmaktadır. Bu elemanların isimleri aynı zamanda ne tür içeriklere sahip olduklarını ifade eder. Bunların da hala değişme ihtimali var ancak bu durum,çok sayıda web geliştiricisinin bunları halihazırda kullanmasına mani olmadı :=)
YENİ HTML5 DÜZENLEME ELEMANLARI
Bu örneğin yapısı,bir önceki örnekte gördüğünüz ile birebir aynı. Fakat çok sayıda <div> elemanı yeni HTML5 düzenleme elemanı ile yer değiştirdi.
Örneğin, başlık yeni bir <header> ögesinin içinde bulunmakta,navigasyon yeni bir <nav> elemanın içinde barınmakta ve makaleler <article> ögelerinin içinde bulunmaktadır.
Bu yeni elemanları oluşturmanın önemi, geliştiricilerin bunları kullanarak sayfanın yapısını tanımlayabilmesidir. Örneğin,ekran okuyucu yazılımı kullanıcıların başlık ve dipnot kısımlarını göz ardı ederek doğruca içeriğe girmelerine izin verebilir. Benzer şekilde,arama motorları <header> veya <footer> elemanları yerine bir <article> içeriğini daha fazla önem verebilir. Kodları izlemenin daha kolay olucağı konusunda hemfikiriz :))
BAŞLIKLAR & ALT BİLGİLER
<header>
<footer>
HTML5'in <header> ve <footer> elemanları aşağıdaki durumlar için sıklıkla kullanılmaktadır.
→ Bir web sitesinde her sayfanın başında bulunan ana başlıkta veya her sayfanın dibinde bulunan alt bilgilerde.
→ Bir sayfa içinde tekil bir <article> veya <section> içerisinde başlık veya alt bilgi olarak.
<header>
Yukarıdaki örnekte , <header> elemanı sitenin adını ve ana navigasyonu barındırmak üzere kullanılmıştır.
<footer>
<footer> elemanı telif hakkı (©copyright) ve gizlilik koşul ve kurallarını içermektedir. Her bir tekil <article> veya <section> elemanının kendi <header> ve <footer> elemanları olabilir ve sayfa içerisinde başlık ve alt bilgilerini barındırabilir.
NAVİGASYON
<nav>
HTML5'in yeni elemanı <nav>, bir web sitesinde asıl navigasyonu barındıran ana navigasyon bloklarını içermek üzere kullanılmaktadır.
Blok örneğimize geri gidersek bir blogu başka ilgili bloglara bağlantı vererek bitirmek isterseniz bu asıl navigasyon blokları olarak sayılmayacaktır ve bu nedenle <nav> elemanı içerisinde konulmamalıdır.
<nav>
MAKALELER
<articles>
HTML5'in yeni elemanı <article>,bir sayfada tek başına duran bir kısım için kapsayıcı olarak davranmaktadır.
Bu,tekil bir makale,bir blog veya yorum ya da bağımsız bir içerik parçası olabilir.
<article>
KENARLAR
<aside>
HTML5'in yeni elemanı <aside> elemanının, bir <article> elemanının içinde olup olmamasına bağlı olarak iki amacı vardır.
<aside> elemanı bir <article> elemanı içinde kullanıldığında bu makalenin içeriğine ait bilgiler içermelidir ama bütün olarak anlamını değil.
<aside> elemanı <article> elemanının dışında kullanıldığında bütün sayfanın içeriği ile alakalı bilgiyi barındıran bir kapsayıcı olarak davranır.
<aside>
KISIMLAR
<section>
HTML5'in diğer yeni bir elemanı <section> ilgili içerikleri gruplar ve tipik olarak her bir kısmı kendi başlığı olur.
Örneğin, en son haberleri, en güncel ürünleri veya haber gruplarını barındıran bir sayfada sayfanın farklı kısımlarını içeren çok sayıda <section> elemanı bulunabilir.
<section>
BAŞLIK GRUPLARI
<hgroup>
<hgroup> elemanının amacı, <h1> ögesinden <h6> ögesine kadar bir veya daha fazla elemanı gruplayarak tek bir başlık elemanı olarak ele alınmasını sağlar.
<hgroup>
İMAJLAR
<figure>
<figcaption>
Resim konusunda <figure> elemanı ile tanışmıştık :) Bir makalenin ( yalnızca resim değil ) ana akışı içerisinde atıfta bulunulan herhangi bir içeriği barındırmak için kullanılır.
<figure> & <figcaption>
KISIMLANDIRMA ELEMANLARI
<div>
Bu yeni elemanlarla çalışırken <div> elemanını tekrar ziyaret etmemiz biraz garip görünebilir. ( Ne de olsa bu yeni elemanlar <div> elemanı yerine kullanılacaktır.)
Fakat <div> elemanı birbiriyle alakalı elemanları gruplamada önemli yer tutar.
<div>
ESKİ TARAYICILARIN TANIMASINA YARDIMCI OLMAK
HTML5'i tanımayan eski tarayıcılar onları otomatik olarak satır içi seviyesinde eleman olarak ele almaya çalışıcaktır. Bu nedenle, eski tarayıcılara yardımcı olmak amacıyla CSS içerisinde aşağıdaki satırı eklemelisiniz.
→ Yeni HTML5 elemanları bir web sayfasının farklı kısımlarının amaçlarını belirtir ve yapının tanımlanmasına yardımcı olur.
→ Yeni elemanlar daha temiz koda sahiptir. (çok sayıda <div> elemanı kullanmamıza engel olur.)
→ HTML5 elemanlarını anlamayan eski tarayıcılara hangi elemanın blok seviyesi elemanı olduğu anlatılmalıdır.
→ HTML5 elemanlarının IE8 veya daha eski versiyonlarda çalışması için ekstra Javascript kodları gerekmektedi ki bu da Google’da mevcuttur :)
ZİYARET İÇİN TEŞEKKÜRLER ❤
© NISANCI SOFTWARE 2022.