<article> Web sayfasında ki bir makaleyi tanımlar.
<aside> Web sayfanızın veya bir bölümün sağ tarafını gösteri.
<bdi> Metnin dışındaki diğer metinden farklı bir yönde biçimlendirilebilecek bir bölümünü izole eder.
<details>Kullanıcının görüntüleyebileceği veya gizleyebileceği ek ayrıntıları tanımlar.
<dialog> Bir iletişim kutusu veya pencere tanımlar
<figcaption> Bir <figure> öğesi için bir başlık tanımlar.
<figure> Kendi kendine yeten içeriği tanımlar.
<footer> Bir belge veya bölüm için altbilgi tanımlar.
<header> Bir belge veya bölüm için bir başlık tanımlar.
<main> Bir belgenin ana içeriğini tanımlar.
<mark> İşaretli / vurgulanan metni tanımlar.
<meter> Bilinen bir aralıktaki skaler ölçümünü tanımlar (bir ölçer)
<nav> Menü bağlantılarını tanımlar.
<progress> Bir görevin ilerlemesini temsil eder.
<rp> Ek açıklamalarını desteklemeyen tarayıcılarda ne gösterileceğini tanımlar.
<rt> Karakterlerin bir açıklaması / telaffuzunu tanımlar (Doğu Asya tipografisi için)
<ruby> Bir açıklama tanımlar (Doğu Asya tipografisi için)
<section> Belgedeki bir bölümü tanımlar.
<summary> Bir <details> öğesi için görünür bir başlık tanımlar.
<time> Bir tarih / saat tanımlar
<wbr> Olası bir satır sonu tanımlar.
Yapısal HTML5 Etiketleri
<section> Nedir Ne işe yarar?
Dilimizde kesim, kısım gibi bir anlama gelir. HTML5 ile gelen yeni bir etikettir. Bazen tasarımda o kadar çok <div> kullanırız ki bu div'lerin birbirleri ile karışmaması için <section> etiketi kurtarıcı niteliktedir.
<section>
<div>
<p>Birinci section birinci paragraf</p>
</div>
<div>
<p>Birinci section ikinci paragraf</p>
</div>
<div>
<p>Birinci section üçüncü paragraf</p>
</div>
</section>
<section>
<div>
<p>İkinci section birinci paragraf</p>
</div>
<div>
<p>İkinci section ikinci paragraf</p>
</div>
<div>
<p>İkinci section üçüncü paragraf</p>
</div>
</section>
<article> Nedir Ne işe yarar?
Bu etiket de HTML5 ile gelen yeni bir etikettir. Article dilimizde makale anlamına gelmektedir. Sitemizde yer alan metinsel içerik bu etiket içinde yer alır. <section> etiketi ile birlikte kullanılması tavsiye edilir.
<div>
<section>
<h3>Deneme Yazısı</h3>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida est sed
orci suscipit fringilla. Nulla hendrerit elementum nunc, non luctus justo
vehicula ac. Etiam ac imperdiet nisl. Ut tempor mi quis sagittis facilisis.
Donec nec ante vel elit fermentum dapibus. In hac habitasse platea dictumst.
Nulla facilisi. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Morbi id enim tortor.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida est sed
orci suscipit fringilla. Nulla hendrerit elementum nunc, non luctus justo
vehicula ac. Etiam ac imperdiet nisl. Ut tempor mi quis sagittis facilisis.
Donec nec ante vel elit fermentum dapibus. In hac habitasse platea dictumst.
Nulla facilisi. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Morbi id enim tortor.
</p>
</article>
</section>
</div>
<aside> Nedir Ne işe yarar?
HTML5 ile gelen yeni bir etikettir. Sayfanın sidebar olarak tanımlanan yan tarafını belirtir. Sayfanın ya sağındadır ya da solundadır. Genellikle blog sitelerinde kullanılır. İçeriğinde kategoriler bölümü, aram kutusu, anketler, sabit bağlantılar ve reklam alanı ( banner ) yer alır.
<aside>
<div>
<h3>Kategoriler</h3>
<ul>
<li>Kategori 1</li>
<li>Kategori 2</li>
<li>Kategori 3</li>
</ul>
</div>
</aside>
<header> Nedir Ne işe yarar?
Sitemizin logosu, sosyal medya düğmeleri, dahili arama motoru, ticari sitelerde "üye girişi", "sepetim" gibi bağlantıların yer aldığı etikettir. Bu etiket de HTML5 ile birlikte gelmiştir. Daha önceden header yerine div'lere id vermek zorundaydık. Artık tek yapmamız gereken <header> yazmak.
Şu örnekte ne demek istediğimi anlayacaksınız:
<div id="header">
<p>Eskiden böyle header oluştururduk.</p>
</div>
<header>
<p>Şimdi sadece <header>'ı kullanmamaız yeterli.</p>
</header>
<footer> Nedir Ne işe yarar?
Sitemizin yapım yılı, telif hakları gibi ayrıntılarının yer aldığı kısımdır. Sayfanın en altında yer alır. Ticari sitelerde referans adresleri, "hakkımızda", "iletişim" gibi bağlantılar ile diğer bazı önemli site içi bağlantılar bu kısımda kullanılır.
<footer>
<address>
<small>2013 | © Tüm hakları saklıdır. | <a href="#">deneme.com</a></small>
</address>
</footer>
Footer etiketinin içinde <small> ve <address> etiketlerinin kullanılması yerindedir.
Not:<header> ve footer etiketleri sadece alt ve üst gruplar için değil <section> , <article>, <aside> etiketinin içerisinde de kullanılabilir. Altta ki resimi incelerseniz bu yapı zihninizde canlanacaktır.
<hgroup> Nedir Ne işe yarar?
Başlık Etiketlerini gruplamak için kullanılır.
<h1>Başlık Etiketi 1</h1>
<h2>Başlık Etiketi 2</h2>
<h3>Başlık Etiketi 3</h3>
<h4>Başlık Etiketi 4</h4>
<h5>Başlık Etiketi 5</h5>
<h6>Başlık Etiketi 6</h6>
</hgroup>
<nav> Nedir Ne işe yarar?
Açılımı navigation'dır. Dilimizde navigasyon (yönlendirme) anlamına gelir. HTML5 ile gelen yeni bir etikettir. Sitemizdeki menü <nav> elementi içine yazılır.
Şu örnekte <nav>'i daha iyi kavrayabilirsiniz:
<nav>
<ul>
<li><a href="#">Ana Sayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">Çalışmalarımız</a></li>
<li><a href="#">Referanslar</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</nav>
Not: xhtml den html5 e geçince kod yapımız aşağıdaki gibi olmaktadır.
<figure> Nedir Ne işe yarar?
Dilimizde figür, şekil gibi bir anlama gelmektedir. HTML5 ile gelmiştir. Sitemizde yer alan görsellerin bu etiket içinde yer alması tavsiye edilmektedir.
Örnek kullanımı şu şekildedir:
<figure>
<img src="https://css3html5x.blogspot.com/img/gun_batimi.jpg" alt="gün batımı"/>
</figure>
<meter> Nedir Ne işe yarar?
<meter value="2" min="0" optimum="50" low="20" max="10">Disk seviyesi</meter><br>
<meter min="0" optimum="50" low="60" high="80" max="100" value="88">Disk seviyesi</meter><br>
<meter value="0.6">60%</meter><br>
<meter value="9" min="0" max="10">2 out of 10</meter><br>
Sonuc:
<progress> Nedir Ne işe yarar?
Yüklenme oranını gösterir. Javascript ile birlikde loading ekranı yapılabilir.
Downloading progress:
<progress value="22" max="100"></progress>
<time> Nedir Ne işe yarar?
Web sitemizdeki saat ve tarih alanlarını belirtmek için kullanılır. Google arama motorları için önemlidir. Görsel olarak bir farklılık olmaz.
<time>Bugün</time>
<time>Pazartesi</time>
<p>We open at <time>10:00</time> every morning.</p>
<p>I have a date on <time datetime="2008-02-14 20:00">Valentines day</time>.</p>
<details> ve <summary> Nedir Ne işe Yarar?
<details> Detay anlamına gelir. <summary> ise özet demek. Hide ve show özelliklerine denk gelmektedir. Javascript ile yapılan özellik html5 le beraber yapılabilir bir yapıya geldi.
<details>
<summary>Detay İçin Tıklayınız</summary>
<p>Tüm hakları saklıdır</p>
<p>2019 Htm5 ve Css3 yeni gelen özellikler.</p>
</details>
Detay İçin Tıklayınız
Tüm hakları saklıdır2019 Htm5 ve Css3 yeni gelen özellikler.
Detay 2 Open özelliği
Detay 2 açık olarak gelirOpen kullanımını öğreniyoruz.
<bdi> Nedir Ne işe Yarar?
<bdi> etiketi farklı yönde başlayan bir metni diğer metinlerden ayırır. (Örn: Arapça, ibranice)
Metin yönü farklı içerik oluştururken sayfa düzenin sağlanması için bu etiketi kullanmak fayda sağlar.
<ul>
<li>User <bdi>hrefs</bdi>: 60 points</li>
<li>User <bdi>jdoe</bdi>: 80 points</li>
<li>User <bdi>إيان</bdi>: 90 points</li>
<li>User 100 points إيان</li>
<li>User 100 إيان points </li>
</ul>
<main> Nedir Ne işe Yarar?
<div id="main"> ifadesinin yerine html5 te <main> etiketi kullanılır. Tek seferde kullanılması gerekir.
<main>
<h1>Web Browsers</h1>
<p>Google Chrome, Firefox, and Internet Explorer are the most used browsers today.</p>
<article>
<h1>Google Chrome</h1>
<p>Google Chrome is a free, open-source web browser developed by Google, released in 2008.</p>
</article>
<article>
<h1>Internet Explorer</h1>
<p>Internet Explorer is a free web browser from Microsoft, released in 1995.</p>
</article>
<article>
<h1>Mozilla Firefox</h1>
<p>Firefox is a free, open-source web browser from Mozilla, released in 2004.</p>
</article>
</main>
<wbr> Nedir Ne işe Yarar?
<wbr> etiketi kelime arası satır sonu eklemek için kullanılır.
İpucu: Bir kelime çok uzunsa ve tarayıcı kelimeyi yanlış yerde alt satıra geçirebilir. Bu etiket bu düzenlemeyi sağlar.
<p>This is a veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryvery<wbr>longwordthatwillbreakatspecific<wbr>placeswhenthebrowserwindowisresized.</p>
This is a veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryvery
0 on: "HTML5 Yeni Elementler"