HTML 5 ile normal klasik HTML kodlamasıda artık değişti. Değişen bu kodlama stiliyle beraber birde yeni bazı tag’ler yaşantımıza girip bazılarıda kalktı. Burada basit olarak HTML 5 dökümanı yapısından ve kalkan bazı tag’lerden bahsedip sonrasında da temel bir HTML 5 örnek sayfa kodu verip konuyu sonlandıracağım.HTML 5 ile birlikte artık hayatımıza şöyle bir web site yapısı girmeye başladı aslında hep vardı sadece bu yapıya uygun olarak ek tagler geldi demek daha doğru olur. Aşağıda bu yapıya uygun olarak küçük bir örnek resim paylaştım;
Bu yapıyı daha çok div tag etiketleriyle şuanda günümüzde sağlıyoruz. Table etiket kullanımı giderek azalmakta. Bu yapıya göre HTML 5 ile gelen etiketlerde şöyledir;
- <header>…..</header> Etiketi : Bu etiket sayfanın üst kısmını tanımlar. Menü, logo gibi tanımlamalar burada yapılır. Bu kısımda siteye ait menünün barındırılması zorunlu değildir.
- <footer>…..</footer> Etiketi : Web sitesinin en son kısmını kapsar. Genellikle bu kısımda copyright, site map gibi bilgiler yer alır.
- <nav>…..</nav> Etiketi : Navigasyon anlamının kısaltmasıdır. Menü içeriğini kapsar.
- <selection>…..</selection> Etiketi : Web sayfasının her hangi bir bölümünü oluşturan html etiketidir. Web sayfasındaki ana blok kısmı bu etiket içine genelde yerleştirilir. <nav> v.b. etiketleri kapsayabilir.
- <article>…..</article> Etiketi : Web sayfasında yer alan haber, makale gibi metin içeriği oluşturan alanları temsil eder.
- <aside>…..</aside> Etiketi : Sayfanın sidebar olarak tanımlanan alanını temsil eder. Sayfaya ait kategori bilgileri, etiket bilgileri, anket, reklam alanı gibi bilgilerin barındırıldığı yeri temsil eder.
Gelen bu yapı etiketleriyle birlikte hayatımızdan da şu etiketler kalkmıştır;
- <acronym>
- <applet>
- <basefont>
- <big>
- <center>
- <dir>
- <font>
- <frame>
- <frameset>
- <noframes>
- <s>
- <strike>
- <tt>
- <u>
- <xmp>
Kalkan etiketlerin bir kısmını HTML 5 yapısında kullandığınızda işlemlerini yerine getirirken bazı etiketler yorumlanmamaktadır !!! Bu etiketlerin yerini CSS tanımlamaları almaktadır. CSS üzerinden ilgili stil adı yaratılarak yada etikete stil verilerek aynı görünümler elde edilmektedir. Bununla birlikte basit anlamda bir HTML 5 belgesi aşağıdaki gibi oluşmaktadır;
<!DOCTYPE HTML>
<html>
<head>
<title>Örnek HTML 5 içeriği</title>
</head>
<body>
<header>
<h1>Örnek</h1>
<nav>
<ul>
<li href="index.html">Anasayfa</li>
<li href="hakkimda.html">Hakkımda</li>
<li href="iletisim.html">İletişim</li>
</ul>
</nav>
</header>
<section>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
</section>
</body>
</html>