HTML5’de Semantik Elementler

Semantik elementlere geçmeden önce ufak bir bilgilendirme yapalım. HTML5 kullanmayı düşünüyorsanız tarayıcınızın bunu desteklediğinden emin olun.

Bunu nasıl bileceğiz diyorsanız. Modernizr tarayıcımızın HTML5 ve CSS3‘ün hangi özelliklerini desteklediğini öğrenmek için mükemmel bir site.

HTML5 ile birlikte bazı özellikler native (doğuştan) gelmekte. Örnek vermek gerekirse HTML5 bir video izlemek için eklenti gereksinimini ortadan kaldırıyor.

Video elementini kullanarak videomuzun oynatabilmesini sağlıyoruz.

Başlamadan önce div elementini halen kullanabilirsiniz. Eğer yeni elementlerin kullanımını tam olarak anlayamazsanız, yanlış yapmak yerine kullanmayın. Çünkü div’lere hala destek verilmekte ve uzun bir zaman daha verilecek.

HTML 4 Eski Yapıda Anlamlandırma

HTML 4’de anlamsal bakımdan bazı yetersizlikler vardı. Bu yetersizlikleri id ve class özelliklerini kullanarak aşmaya çalışsakta, kompeks tasarımlarda isim bulmak ve geliştiricinin kodu daha sonradan okuyabilmesi zorlanıyordu. Bu yüzden HTML5 ile daha anlamlı elementlere kavuştuk.

Semantik Elementler Nelerdir?

HTML‘de semantik elementler hem tarayıcıya, hem de geliştiriciye kendi anlamını açıkça belirten elementlerdir.

HTML 5’de bir bölümü tanımlamak için <section>, başlık alanını tanımlamak için <header>, makaleyi tanımlamak için <article>, sayfa altını tanımlamak için <footer> kullanılır.

HTML 4’ten gelen semantik elementlere örnek olarak <img>, <table> verilebilir. Bunun aksine <div>, <span> ise semantik değillerdir.

HTML5’deki Yeni Semantik Elementler

Günümüzde çoğu websitesi yukarıdaki örnekteki gibi Div’ler kullanarak kodlanmıştır. HTML5 buna daha anlamlı bir çözüm buluyor. Bu hem Tarayıcı, hemde sitenizi indexleyen botlar için daha anlamlı bir yapı demek oluyor.

• <header>
• <nav>
• <section>
• <article>
• <aside>
• <footer>
• <figure>
• <figcaption>
• <details>
• <summary>
• <mark>
• <time>
• <video>
• <audio>

HTML5 <header> Elementi

<header> elementi bir sayfa veya bir kısmın (section) başlık alanını belirtir. Sadece başlık yazılacaksa <h1> den <h6> ya kadar olan başlıklardan biri yeterlidir. Başlığı temsil eden başka öğelerde varsa <header> etiketi kullanılmalıdır. Bu etiket bir sayfada birden fazla kullanılabilir.

<header>
 <h1>Başlık alanı</h1>
 <h2>Sitemizin tanımı</h2>
</header>
<article>
  <header>
    <h1>Tarayıcılar</h1>
  </header>
  <p>Chrome, Internet Explorer, Firefox vb.</p>
</article>

HTML5 <nav> Elementi

<nav> elementi navigasyon bağlantıları olan sayfalar için kullanılır ama sayfadaki tüm linkler bu element içinde olmak zorunda değildir. Gezinti bağlantıları veya içerik listesi (Kısacası üst sayfa Kategorileri) için kullanılabilir.

<nav>
<a href="/html/html-5-baslangic-orta-ve-ileri-seviye-dersleri/">HTML Dersleri</a><br>
<a href="https://www.example.com/">Example</a><br>
</nav>

HTML5 <section> Elementi

<section> elementi bir HTML sayfası içinde bir kısmı belli eder. Genel bölümleme öğesidir. <section> elementi içinde içinde başlığı ve bir yazısı olan bir makale olabilir. Eğer section elementi bir başlık ile başlamamışsa yanlış kullanılmış demektir. İstisnası aside veya nav yerine kullanılan section lardır.

<section>
  <h1>Bölümün biri</h1>
  <p>Bu HTML sayfasında herhangi bir bölümdür</p>
</section>

HTML5 <article> (Yazı/Makale) Elementi

HTML 5’de kulllanılan article elementi diğer alanlardan bağımsız olarak kullanılabilir. Bir makale ya da yazı alanını temsil eder. Kullanılabileceği örnekler; Blog Sayfalarındaki yazılar, Haber’in özeti, yorumlar gibi.

<article>
  <header>
   <h2>Yazı Başlık</h2>
   <p><time datetime="2014-12-30T14:29:26+00:00">30-12-2014</time></p>
  </header>
  <p>Yazının yada özetin bulunduğu bölüm</p>
</article>

HTML5 <aside> Elementi

<aside> elementi yan menü olarak kullanılır. Anlaşılması zor olan bir elementtir. O yüzden örneği güzel inceleyin. <aside> onu kapsayan içerikle yüzeysel bir bağlantısı olan içeriğe denir. Kullanımı biraz kafa karıştırabilir.

<article>
    <h2>HTML dersleri</h2>
    <p>HTMl dersleri konunun anlatımı</p>
      <aside>
        <!--Bu bölüm yazı ile doğrudan ilişkilidir ama yazının devamı değildir -->
        <h3>Benzer Yazılar</h3>
        <ul>
          <li>HTML'de Semantik Elementler</li>
          <li>HTML'de img etiketi</li>
        </ul>
      </aside>
  </article>
  <aside>
    <!--Bu bölüm yazı ile doğrudan ilişkili değildir. Sitenin kendisiyle ilişkisi vardır. -->
    <h2>Kategoriler</h2>
      <ul>
        <li><a href="/teknoloji/">teknoloji</a></li>
        <li><a href="/css/">CSS</a></li>
        <li><a href="/html/">HTML</a></li>
        <li><a href="/php/">PHP</a></li>
      </ul>
  </aside>

HTML5 <footer> Elementi

<footer> elementi bir sayfa veya bir kısım için alt bilgi belirten bölümdür. <footer> elementi genelde sitenin / yazının yazarını, telif hakkını, iletişim bilgileri vb. içerir. Bir sayfada bir kezden fazla kullanılabilir.

<footer>
  <p>Yazan: Degre</p>
  <p><time pubdate datetime="30-12-2014"></time></p>
</footer>

HTML5 <video>, <audio> Elementleri

Video elementiyle her türlü cihazda çalıştırılabilecek videoları sitemize yükleyebilir ve kullanıcılarımıza sunabiliriz. Bunun için Flash/Medya player gibi bir eklentiye de ihtiyacımız olmaz. Kısa ve Temiz bir kod yardımıyla istediğimiz videoyu sitemize koyabiliriz.

<video width="640"  height="480" src="video.mp4" controls autobuffer poster="videothumb.jpg">
  <p>Video oynatılamıyor. HTML5 uyumlu bir tarayıcı kullanmalısınız.</p>
</video>
// Eğer Video etiketimizin tarayıcılara optimum desteği vermesini istiyorsak
<video width="640px" height="480px" autobuffer="autobuffer" autoplay="autoplay">
  <source src='video.mpg' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  <source src='video.mp4' type='video/mp4; codecs="amp4v.20.8, mp4a.40.2"'>
  <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'>
</video>
// kodumuzu bu şekle çevirip, video formatlarını da ona göre ayarlamalıyız

Video Etiketinin Özellikleri

Desteklenen Video Formatları

• MP4 (MPEG 4 files with H264 video codec and AAC audio codec)
• WebM (WebM files with VP8 video codec and Vorbis audio codec)
• Ogg (Ogg files with Theora video codec and Vorbis audio codec)

Tarayıcıların desteklediği Video formatları aşağıdaki tabloda verilmiştir.

Audio elementinin kullanımıysa aşağıdaki gibidir.

<audio src="ses.oga" controls autobuffer></audio>

Tarayıcıların ses desteğiyse aşağıdaki gibidir.

Bu tabloyu öğrendikten sonra source özelliğini kullanarak bütün formatları ekliyoruz. Böylece ses dosyamız tüm modern tarayıcılarda oynatılabilir.

<audio>
  <source src="ses.oga" type="audio/ogg">
  <source src="ses.mp3" type="audio/mpeg">
</audio>

HTML5 <figure> ve <figcaption> Elementleri

<figure> etiketi içerisinde bir resim, gösterim, diyagram, kod listeleri vb. gibi şeylerin olduğunu belirten elementtir. figure, içeriğe kaynak gösterilen, genelde tek birimden oluşan, çıkarıldığı zaman içeriğin akışını bozmayan, isteğe bağlı olarak altyazı içeren bir elementtir.

<figcaption> ise <figure> elementinin belirttiği resme altyazı eklemeye yarar. Kullanımı aşağıdaki gibidir.

<figure>
  <img src="resim.jpg" alt="Sitenin Resmi" width="500" height="300">
  <figcaption>Sitenin resmi</figcaption>
</figure>