banner
htmldersleri
Ana SayfaANA SAYFA Dersler | Örnekler | Forum | Sıkça Sorulan Sorular |Hakkında
HTML Temel
HTML Giriş
HTML Elementler
HTML Etiketler
HTML Parametreler
HTML Biçimlendirme
HTML Özeller
HTML Bağlantılar
HTML Çerçeveler
HTML Tablolar
HTML Listeleme
HTML Formlar
HTML Resimler
HTML Arka Plan
HTML Renkler
HTML Renk Değerleri
HTML Renk İsimleri
HTML Hızlı Liste

HTML5 Ana Menü
HTML5 Giriş
HTML5 Anlamlandırma
HTML5 Giriş Tipleri
HTML5 Form Elementleri
HTML5 Form Özellikleri
HTML5 Canvas
HTML5 SVG
HTML5 Video
HTML5 Audio
HTML5 Konum
HTML5 Sürükle/Bırak
HTML5 Web Depolama
HTML5 Uygulama Bellekleme
HTML5 Web Çalışanı
HTML5 SSE

HTML Gelişmiş
HTML Tasarım
HTML Fontlar
HTML Stiller
HTML Başlık
HTML Meta
HTML URL
HTML Scriptler
HTML Std. Nitelikler
HTML Olaylar
HTML ASCII
HTML Web Sunucu

HTML Örnekler/Test
HTML Örnekler
HTML Örnek Site
HTML Test

HTML5 Semantik Elementler

Önceki Sonraki

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

Internet Explorer Firefox Opera Google Chrome Safari



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 Semantic Elements

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>

Kendin Dene »


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>

Kendin Dene »


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>

Kendin Dene »


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>

Kendin Dene »


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>

Kendin Dene »


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>

Kendin Dene »

Önceki Sonraki

Dersler | Örnekler | Forum | Sıkça Sorulan Sorular |Hakkında
Copyright © 2008 | Tüm Hakları Saklıdır. | Webmaster: destek@htmldersleri.org

55 kişi şuan sayfamızda geziniyor.

English Deutsch Français Español Dutch Italiano Português Български
html dersleri
Dersler Örnekler Online Test