Html5 Nedir? Html5 Etiketleri (Tagları) ve Sayfa Yapısı

Bu yazımızda Html’in son versiyonu olan Html5 nedir? Yeni gelen Html5 etiketleri (tagları) nelerdir? ve Html5 sayfa yapısı konularını öğreneceğiz.

Genel olarak Html’in detaylarına girmeyeceğim. Burada Html5 odaklı bir yazı yazmayı düşünüyorum. Html ile ilgili daha detaylı bilgi almak isterseniz Html Nedir? Ne İşe Yarar? Html Sayfası Oluşturma yazımı okuyabilirsiniz. 

Html5, web sitelerini oluştururken kullandığımız metin işaretleme dilinin son versiyonudur. Html5 ile birlikte birçok yeni etiket, etiketler ile kullandığımız yeni parametreler ve bu parametrelere verdiğimiz yeni değerler gelmiştir.

Html5’in genel özellikleri ile başlayalım.

HTML5 SAYFA YAPISI 

Html5 sayfa yapısı, en temelde şu şekildedir.

Buradaki etiketlerin ne işe yaradığından bahsedecek olursak;

 <!DOCTYPE html>  : Dökümanın türünü belirtir. Burada sayfanın bir Html5 dökümanı olduğunu belirtiyor. Sayfanın en üstünde yazılmalıdır. Tarayıcıların sayfayı doğru görüntülemesini sağlar.

Html5 den önce dökümanın türünü şu şekilde belirtiyorduk.

 <html>  : Tüm Html etiketlerini kapsar. Yani diğer etiketler bunun içerisine yazılır. 

 <head>  : Sayfa ile ilgili bazı bilgilerin ( meta bilgileri, sayfa başlığı vb.. ) tanımlandığı etikettir.

 <meta>  : Sayfa açıklaması, sitenin yazarı, kullanılan karakter seti vb.. gibi bilgilerin tanımlandığı etikettir.

Html5 de kullanılan karakter seti şu şekilde tanımlanır.

Html5 den önce kullanılan karakter setini şu şekilde belirtiyorduk.

Meta etiketleri ile ilgili daha detaylı anlatım için Meta Etiketleri (Tagları) Nedir? Meta Etiketi Kullanımı yazımı okuyabilirsiniz.

 <title>  : Sayfa başlığının verildiği etikettir.

 <body>  : Sayfa içeriklerinin yazıldığı etikettir. Tarayıcılar sadece buradaki içeriği bize gösterirler.

 Önemli  Html5 ile gelen anlamsal etiketler tüm modern tarayıcılar tarafından destekleniyor. Ancak, IE8 ve önceki sürümlerinde bu etiketlerin stillendirilmelerinde bazı problemler yaşayabiliyoruz.

Bu problemler için bir Javascript çözümü olan HTML5Shiv‘i kullanabiliriz. Yapmamız gereken tek şey aşağıdaki kodu Html5 sayfamızın <head> </head> etiketleri arasına yerleştirmek.

HTML5Shiv Kodu

Kaynak kodlarını görmek için linke tıklayın

HTML5Shiv’in güncel versiyonu için Github adresini ziyaret edebilirsiniz.

HTML5 DE KALDIRILAN ETİKETLER

Aşağıdaki tabloda bulunan Html4 etiketleri Html5 de kaldırıldı. Bu kaldırılan etiketlerin bir kısmının yerine aynı işlevi gerçekleştiren yeni etiketler geldi. Bir kısmı için de aynı işlevi Css kodları yazarak yerine getiriyoruz.

Kaldırılan EtiketYerine Kullanılan Etiket veya Yöntem
<acronym><abbr>
<applet><object>
<basefont>Bu etiket yerine aynı işlevi yerine getirecek Css özellikleri kullanılıyor
<big>Bu etiket yerine aynı işlevi yerine getirecek Css özellikleri kullanılıyor
<center>Bu etiket yerine aynı işlevi yerine getirecek Css özellikleri kullanılıyor
<dir><ul>
<font>Bu etiket yerine aynı işlevi yerine getirecek Css özellikleri kullanılıyor
<frame>
<frameset>
<noframes>
<strike><s> veya <del> etiketleri veya aynı işlevi yerine getirecek Css özellikleri kullanılıyor
<tt>Bu etiket yerine aynı işlevi yerine getirecek Css özellikleri kullanılıyor

ANLAMSAL HTML5 ETİKETLERİ (TAGLARI)

Html5 ile anlamsal etiketler dediğimiz yeni etiketler geldi. Öncelikle biraz anlamsal kavramından bahsedelim. 

html5-nedir

Html4 ile sayfa tasarımlarımızı yaparken resimde sol tarafta gördüğünüz gibi yapardık.

Örneğin menü oluştururken id’si menu olan bir div içerisine kodlarımızı yazardık. Yada header, footer kısımları için div ler oluşturup içerisine kodlarımızı yazardık. Bu kullandığımız div ve span ların arama motorları için hiçbir anlamı yoktu.

Html5 ile birlikte artık resmin sağındaki anlamsal etiketler ile kodlarımızı yazıyoruz. Yani div ve span kullanmak yerine anlamsal etiketleri tercih ediyoruz. Bu şekilde yazılan kodlar arama motorları için de bir anlam ifade edeceği için SEO açısından bize artısı olacaktır.

Arama motorları,  <div id=”menu”>  koduna bakarak bunun içerisinde menü kodlarının yazılı olduğunu anlayamaz. Ama  <nav>  etiketini gördüğü zaman içerisinde menü kodları olduğunu anlayacaktır.

Html5 ile gelen anlamsal etiketler şunlardır:

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

Div ve span kullanımının daha detaylı anlatımı için Html Div Nedir? Span Nedir? Div ve Span Kullanımı yazımı okuyabilirsiniz. 

HTML5 İLE GELEN İNPUT TYPE DEĞERLERİ

Daha önceleri input etiketinin type parametresine genelde text değeri verirdik.

Html5 ile birlikte şu değerleri de kullanabiliyoruz.

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

Bu değerlerin detaylı anlatımları için Tüm Detaylarıyla Html Form Oluşturma yazımı okuyabilirsiniz.

HTML5 İLE GELEN İNPUT PARAMETRELERİ

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

SES VE VİDEO OYNATMAK İÇİN HTML5 ETİKETLERİ (TAGLARI)

  • <audio>
  • <embed>
  • <source>
  • <track>
  • <video>

GRAFİKLER İÇİN HTML5 ETİKETLERİ (TAGLARI)

  • <canvas>
  • <svg>

FORM OLUŞTURMAK İÇİN KULLANDIĞIMIZ HTML5 ETİKETLERİ (TAGLARI)

  • <datalist>
  • <output> 

DİĞER HTML5 ETİKETLERİ (TAGLARI)

  • <bdi>
  • <dialog>
  • <meter>
  • <progress>
  • <rp>
  • <rt>
  • <ruby>
  • <wbr>

Genel hatlarıyla Html5 nedir? Yeni gelen Html5 etiketleri (tagları) nelerdir?  bu şekilde özetleyebiliriz.

Tüm Html etiketleri için TÜM HTML KODLARI VE ANLAMLARI yazımı okuyabilirsiniz.

Şu yazılar da ilginizi çekebilir.

Css Nedir? Ne İşe Yarar? Css Kullanımı

BOOTSTRAP NEDİR? BOOTSTRAP NASIL KULLANILIR?

Jquery Nedir? Ne İşe Yarar? Jquery Kullanımı

Umarım sizin için faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.

Leave a Reply