Semantic (anlamsal) taglar, kelime anlamı ile aynı işi yapan html elemanlarıdır. Mesela; <article> tagı semantik bir elemandır. Çünkü article, makale demektir ve <article> tagı da gerçekten, sayfamıza, bir makale elemanı eklemek için kullanılır.
Semantic (Anlamsal) Elemanlar Nelerdir?
Anlamsal elemanlar, tarayıcılara ve kod yazarlarına aynı anlamı ifade ederler.
Anlamsal olmayan (non-semantic) elemanlara örnek: <span> ve <div> gibi elemanlar, kelime anlamının dışında görevler yaparlar. Yani içerikleri ile anlamları arasında bir benzerlik yoktur.
Anlamsal (semantic) elemanlara örnek: <form>, form oluşturur. <table>, tablo oluşturur. <img> imaj elemanı (resim) oluşturur.
Tarayıcı Destekleri
Bütün modern tarayıcılar, html5 taglarını tanır. Eski bir tarayıcı versiyonu kullanıyorsanız önerimiz, öncelikle tarayıcınızı güncelleminizdir. Fakat şuraya bakarak da eski sürümlere de html5 öğretebilirsiniz: HTML5 tarayıcı desteği
HTML5 Anlamsal Elemanları
Bir çok internet sitesinde, sayfaların farklı özellikteki bölümleri için şöyle HTML kodları görmeniz mümkündür: <div id="header">, <div id="nav">, <div id="footer">
HTML5, sayfaların bu bölümlerini, div elemanı olarak değil de bağımsız birer html5 elemanları olarak tanımlamamıza olanak sağlar.
HTML5 bu iş için şu anlamsal elemanları barındırır:
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>
Bu elamanların sayfanın hangi kısmını temsil ettiğini aşağıdaki şekil ile görebiliriz:
HTML5 <section> Elemanı
Bir html sayfasına, birbiriyle bağlantılı içerikleri barındıran ayrı bir bölüm (section) oluşturmak için kullanılır. Bir html sayfasında, linkleri barındıran, sitenin tanıtımını yapan ve tasarımcının isteğine göre, daha da başka içerikleri barındıran, birden fazla <section> elemanı bulunabilir.
Aşağıda bu elemana ait bir kod örneği verilmiştir: <section> <h1>WWW</h1> <p>World Wide Web kelimelerinin kısatmasıdır...</p> </section> Bu kodlar, tarayıcımızda şöyle görünecektir:
WWW
World Wide Web kelimelerinin kısatmasıdır...
HTML5 <article> Elemanı
Bağımsız, kendine has bir içerik elemanı olşturmak için tercih edilir.
Genellikle, gazete yazıları, bolg veya forum yazıları gibi makale tarzı elemanları oluşturmak için tercih edilen bir html5 elemanıdır.
Aşağıda bu elemana ait bir kod örneği verilmiştir: <article> <h1>WWW</h1> <p>World Wide Web kelimelerinin kısatmasıdır...</p> </article> Bu kodlar, tarayıcımızda şöyle görünecektir:
WWW
World Wide Web kelimelerinin kısatmasıdır...
HTML5 Elemanlarını İç İçe Dizmek (Nesting)
Bir anlamsal elemanın içinde başka bir anlamsal elemanı yerleştirebilir. Örneğin bir <section> elemanına bir kaç tane <article> elemanı yerleştirebiliriz. Peki, hangi elemanları hangi elemanların içine yerleştirmemiz gerekiyor? Bu sorunun cevabı tamamen size ve sitenizin yapısına bağlıdır. Yani bu konuda özgürsünüz. Mesela; isterseniz, bir <article> ile bir makale yazar, bu makalenin içine farklı <section> bölümleri açarsınız, isterseniz de tam tersini yaparsınız.
HTML5 <header> Elemanı
Bu eleman, sayfamızın en tepesini (bir nevi baş köşesini), sayfamızın belki de en dikkat çeken kısmını oluşturmak için kullanılır. Bir dökümanda birden fazla <header> elemanı da kullanabilirsiniz.
Aşağıda bu elemana ait bir kod örneği verilmiştir: <header> <h1>WWW</h1> <p>World Wide Web kelimelerinin kısatmasıdır...</p> </header> Bu kodlar, tarayıcımızda şöyle görünecektir:
WWW
World Wide Web kelimelerinin kısatmasıdır...
HTML5 <footer> Elemanı
Sayfamızın en altına yerleştireceğimiz içerikleri tanımlamak için bu elemanı kullanırız. <footer> elamanı bir çok içeriğe sahip olabilir veya bir döküman içerisinde birden fazla <footer> elemanı da kullanabiliriz.
<footer> elemanı, genellikle, sayfanın yazarı hakkında bilgiler, copyright bilgisi, sitenin kullanım koşulları gibi içerikleri barındırır.
Aşağıda bu elemana ait bir kod örneği verilmiştir: <footer> <p>Hazırlayan: Muzaffer KAYA</p> <p>İletişim için: <ahref="mailto:koturkedi@gmail.com"> koturkedi@gmail.com</a>.</p></footer> Bu kodlar, tarayıcımızda şöyle görünecektir:
HTML5 <nav> Elemanı
Bir sitenin menü kısımları, bu elemanın içinde tanımlanır.
Aşağıda bu elemana ait bir kod örneği verilmiştir: <nav> <ahref="#">HTML</a> | <ahref="#">CSS</a> | <ahref="#">JavaScript</a> | <ahref="#">jQuery</a> </nav> Bu kodlar, tarayıcımızda şöyle görünecektir:
HTML5 <aside> Elemanı
Bu eleman, sayfamızın kenar kısmında bir içerik oluşturmak için kullanılır. Bir içerikle iligi detaylı bilgi vermek amacıyla da kullanılabilir. Aşağıda bu elemana ait bir kod örneği verilmiştir: <p>Ailemle birlikte bu yaz Antalya'ya tatile gittik.</p> <aside> <h4>Antalya Şehri</h4> <p>Türkiye'nin Akdeniz Bölgesinde bulunan bir tatil şehridir.</p> </aside> Bu kodlar, tarayıcımızda şöyle görünecektir:
Ailemle birlikte bu yaz Antalya'ya tatile gittik.
HTML5 <figure> ve <figcaption> Elemanları
Bir çok web sayfası içeriğinde, resimler ve bu resimlerin altında/üstünde başlıklar yer alır. İşte bu tür içerikler, bu iki html5 elemanı ile oluşturulur.
Aşağıda bu elemana ait bir kod örneği verilmiştir: <figure> <imgsrc="bir_resim.jpg"alt="HTML5 sayfa şablonu"width="304"height="228"> <figcaption>Resim1. - html5 sayfası şablonu görüyorsunuz</figcaption> </figure> Bu kodlar, tarayıcımızda şöyle görünecektir:
Resim1. - html5 sayfası şablonu görüyorsunuz
Bütün htlm5 anlamsal elemanlarını, aşağıdaki tabloda görülebilirsiniz:
Tag
Anlamı
<article>
Bir makale tanımlar
<aside>
Sayfanın kenarında bir içerik tanımlar. (Sayfa kenarında gördüğümüz dikine reklamlar gibi)
<details>
Kullanıcının görebileceği ya da gizleyebileceği ek detaylar tanımlar.
<figcaption>
<figure> elemanı için bir başlık tanımlar.
<figure>
Fotoğraf, diyagram, kod listesi gibi içerikler için özel bir içerik alanı oluşturur.
<footer>
Bir sayfa veya bölüm için en alt kısmı tanımlar.
<header>
Bir sayfa veya bölüm için başlık kısmı tanımlar.
<main>
Sayfanın ana içeriğini tanımlar.
<mark>
İşaretli/belirgin bir text tanımlar.
<nav>
Sayfada, yönledirme linkleri (menu) oluşturur.
<section>
Sayfada bir bölüm tanımlar.
<summary>
<details> elemanı için görünür bir başlık oluşturur.
Hiç yorum yok:
Yorum Gönder