HTML5’de Semantik Elemanlar

Merhaba, bu yazımızda HTML5 de semantik elemanlardan bahsedeceğiz. İlk olarak semantik nedir bunu anlamaya çalışalım.

Semantik’den kasıt dilde karşılığı olan bir anlam ifade eden kelime ya da cümleciklerdir. HTML5 ile kodlama yaparken bu semantik taglar sayesinde yazdığımız kodun ne ifade ettiğini tarayıcıya anlatmış oluyoruz. Hem bizim için hem de tarayıcı için kodlar anlamlı parçalardan oluşmuş oluyor.

Örnek vermek gerekirse <form></form> tagları ile tarayıcıya bu taglar arasında form elemanlarının olduğu ifade edilmektedir. Bunun haricinde HTML5 ile gelen bir çok semantik eleman mevcuttur. Şimdi sırayla bunlara göz atalım.

html5_semantic

HTML5 <section> Elemanı

<section> genel bir bölümleme elemanıdır. Bir başlık ve alt alanı olan bölümü kapsar. Bir web sitesinde giriş sayfası, tanıtım,içerik ve iletişim olarak bu tag ile bölümlere ayrılabilir.

<section>
   <h1>Başlık</h1>
   <p>Lorem ipsum dolor sit amet</p>
</section>

HTML5 <article> Elemanı

<article> web sayfasındaki diğer öğelerden bağımsız bir elemandır. Bu eleman diğer öğelerden bağımsız olmalı ve kendi içinde anlamlı bir bütün olmalıdır. Başlık ve içerikten oluşan bir makale olarak düşünebilirsiniz.

<article>
   <h1>CryptoLocker 2 Kabus Kaldığı Yerden Devam Ediyor</h1>
   <p>Spam mailler ve virüslü dosyalar hayatımızın resmen birer parçası oldu. Bu gün mail adresime gelen bir postadan sonra düşmem dediğim duruma az kalsın bende düşüyordum ki; şükürler olsun Google var…</p>
</article>

HTML5 <header> Elemanı

<header> elemanı bir bölüm ya da içerik için başlığı ifade eder.

<article>
   <header>
     <h1>CryptoLocker 2 Kabus Kaldığı Yerden Devam Ediyor</h1>
     <p>CryptoLocker 2:</p>
   </header>
   <p>Spam mailler ve virüslü dosyalar hayatımızın resmen birer parçası oldu. Bu gün mail adresime gelen bir postadan sonra düşmem dediğim duruma az kalsın bende düşüyordum ki; şükürler olsun Google var…</p>
</article>

HTML5 <footer> Elemanı

<footer> elemanı bir belgenin ya da bölümün alt bilgisini ifade eder.  Bir altbilgide telif hakkı bilgisi, iletişim vb alanlar mevcuttur.

<footer>
   <p>Tasarım: sistemciyiz.net ekibi</p>
   <p>İletişim Bilgileri: <a href="mailto:[email protected]">[email protected]</a></p>
</footer>

HTML5 <nav> Elemanı

<nav> elemanı sayesinde web sitenizin diğer sayfalarına bağlantılar içeren bir navigasyon oluşturabilirsiniz. Bunun bildiğiniz menüden bir farkı yoktur.

<nav>
   <a href="/genel/">Genel</a> |
   <a href="/haber/">Haber</a> |
   <a href="/yazılım/">Yazılım</a> |
   <a href="/iletişim/">İletişim</a>
</nav>

HTML5 <aside> Elemanı

<aside> elemanı ile içeriğin kenarına yine içerikle bağlantılı bir kenar çubuğu eklenir. Buraya içerikle bağlantılı ekstra bilgiler yazılabilir.

<article>
   <p>The Disney movie <em>The Little Mermaid</em> was first released to theatres in 1989.
   </p>
   
   <aside>
      The movie earned $87 million during its initial release.
   </aside>
  
   <p>More info about the movie...</p>
</article>

HTML5 <figure> ve <figcaption> Elemanları

Bu elemanlar, görsellere açıklama eklemek için kulllanılır. Elemanlar <figure> tagı içerisinde yer almalıdır. Açıklama kısmı <figcaption> tagları arasına eklenir.

<figure>
   <img src="pic_istanbul.jpg" alt="İstanbul Boğazı" width="300" height="200">
   <figcaption>Görsel-1: İstanbul Boğazı.</figcaption>
</figure>

Coder

Selam. Herşey yolunda mı?

View all posts by Coder →

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Artık Sistemciyiz.net'ten ayrılıyorsunuz

Sistemciyiz.net, ziyaretçilere belirli bilgileri sağlamak için diğer kuruluşların web sitelerine bağlantılar sağlar. Bir bağlantı, o web sitesinin içeriğinin, bakış açısının, politikalarının, ürünlerinin veya hizmetlerinin onaylandığı anlamına gelmez. Sistemciyiz.net tarafından sağlanmayan başka bir web sitesine bağlantı oluşturduğunuzda, gizlilik politikası dahil ancak bununla sınırlı olmamak üzere bu web sitesinin hüküm ve koşullarına tabi olursunuz.

You will be redirected to
in 3 seconds...

Click the link above to continue or CANCEL