HTML5 Semantik Elementler
Semantik = Anlamlandırma / Anlam.
Semantik Elementler = Anlamı olan elementler.
Semantik elementler nelerdir?
Semantik bir element hem tarayıcıya hem de geliştiriciye kendisinin anlamını açıkça belirtir.
Semantik olmayan elementlere örnekler: <div> ve <span> - İçerik hakkında bir şey söylemez.
Semantic elementlere örnekler: <form>, <table>, ve <img> - İçeriği açıkça belirtir.
Tarayıcı Desteği
HTML5'teki Yeni Semantik Elementler
Günümüzde bir çok HTML sayfası şu şekilde kodlanmıştır:
<div id="nav">, <div class="header">, or <div id="footer">,
HTML5'in bu tip bildirimler için daha iyi çözümleri vardır:
- <header>
- <nav>
- <section>
- <article>
- <aside>
- <figure>
- <figcaption>
- <footer>
- <details>
- <summary>
- <mark>
- <time>
HTML5 <section> Elementi
<section> elementi bir döküman içindeki bir kısımı belirtir.
Örnek
<section>
<h1>WWF</h1>
<p>World Wide Fund for Nature (WWF) doğanın...</p>
</section>
HTML5 <article> (Makale) Elementi
Bir makale web sayfasının geri kalanından bağımsız olarak dağıtılabilmelidir.
Nerelerde kullanılabileceğine dair örnekler:
- Forum mesajları
- Blog gönderileri
- Haber Hikayesi
- Yorumlar
Örnek
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9 (kısaca ....</p>
</article>
HTML5 <nav> Elementi
<nav> elementi navigasyon bağlantıları büyük sayfalar için tasarlanmıştır.
Ancak, belgedeki tüm linkler bu element içinde olmak zorunda değildir.
HTML5 <aside> Elementi
<aside> elementi içindeki içerikten farklı olarak başka bazı içerikler tanımlar.
Aside içeriği, üst içerik hakkında olmalıdır.
Örnek
<p>Bu yaz ailemle beraber E...</p>
<aside>
<h4>Epcot Center</h4>
<p>Epcot Center, Florida'daki Disney World'da...</p>
</aside>
HTML5 <header> Elementi
<header> elementi bir döküman ya da bir kısım (section) için bir başlık belirtir.
<header> elementi içerdiği içeriği kapsayıcı olmalıdır.
Bir dökümanda bir kereden fazla kullanabilirsiniz.
Aşağıdaki örnek bir makale (article) için bir başlık içerir:
Örnek
<article>
<header>
<h1>Internet Explorer 9</h1>
<p><time pubdate datetime="2011-03-15"></time></p>
</header>
<p>Windows Internet Explorer 9 (kısaca IE9) 14.....</p>
</article>
HTML5 <footer> Elementi
<footer> elementi bir döküman ya da bir kısım için alt bilgi belirtir.
Bir footer (alt bilgi) genelde dökümanın yazarını, telif haklarını, kullanım gizliliği, iletişim vs. gibi bilgileri içerir.
Bir dökümanda bir kereden fazla kullanabilirsiniz.
Örnek
<footer>
<p>Gönderen: Steve Jobs</p>
<p><time pubdate datetime="2012-03-01"></time></p>
</footer>
HTML5 <figure> ve <figcaption> Elementleri
<figure> etiketi, içerisinde bir resim, gösterim, diyagram, kod listeleri vs. gibi şeylerin olduğunu belirtir.
<figure> elementi ana akış ile ilgili olsa da, konumu ana akıştan bağımsızdır ve çıkarılırsa dökümanın akışını engellemez.
<figcaption> etiketi, <figure> elementinin belirttiği resime başlık koymaya yarar..
Örnek
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. -
The Pulpit Pock, Norway.</figcaption>
</figure>
| 
ANA SAYFA
