XHTML1, HTML4 ve HTML5 Farklılıkları
Öncelikle sayfa tanımlamasındaki farklılıklar
HTML'in zamanla yetersiz kalmasından dolayı yeni versiyonları çıkmaktadır.
1. DOCTYPE Tanımlaması
HTML5'ten önce sayfayı kodlamaya DOCTYPE tanımlaması ile başlardık, çünkü bu tanımlama sayesinde browserlar "garip" moddan çıkıp standart modda sayfa kodlarını değerlendirirlerdi.
HTML4
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
veya
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML5
Bu kadar kısa işte... Bu 15 karakter tarayıcınızın "quirks" yani "garip" mod ile sayfanıza bakışını kaldırıp standart modda sayfanıza bakmasını sağlayacaktır.
2. Sayfanın Dili
HTML4
HTML5
3.Karakter Kodlamasının Tanımlanması
HTML4
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
HTML5
Basit Bir Web Sayfa Kodları
XHTML 1.0
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="content-language" content="tr" />
<title>Hello World! XHTML 1 Strict</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
HTML4
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv=content-type content="text/html; charset=UTF-8">
<meta name="content-language" content="tr" />
<title>Hello World! HTML 4 Strict</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
HTML5
<html lang="tr">
<head>
<meta charset="UTF-8" />
<title>Hello World! HTML 4 Strict</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
3. Yeni Gelen Tagları Eski Tarayıcınız Kabullenmiyorsa
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Styling Unknown Elements - 4</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Böyle bir google yaması işinize yarayabilir. “the shiv” ile tanışmış oldunuz.
Kodlamayı yaparken HTML5 kodlarınızı test etmek için şu adresleri öneririm.
Tarayıcınızın ne kadar HTML5 dekteklediğini anlamak için www.html5test.com/ adresini tavsiye ederim.
4. HTML5 deki Semantic Elemanlar
Yeni HTML5 semantic elemarı aşağıdadır. Semantic derken daha çok anlamlı Tagler demek istiyoruz. Eskiden bir tag grubuna baktığınızda nereye ait olduğunu anlamak zorken şimdi anlamlı kelimeler kullanarak buna son verebiliyoruz.
| Tag | Description |
|---|---|
| <article> | Bir yazı veya makale tanımlar ve içerisinde genellikle <section> tagları kullanılır. |
| <aside> | Defines content aside from the page content |
| <details> | Defines additional details that the user can view or hide |
| <figcaption> | <figure> Tagı içerisinde yer alan resim Tagına ait resim açıklamasının yazıldığı bölümdür. |
| <figure> | Resim, diagram gibi göresel bir öğenin yer aldığı bölüm. |
| <footer> | Bir Web safyasının en alt bölümünü veya bir bölümün <section> içerisindeki en alt bölümü ifade eder. |
| <header> | Bir Web safyasının en üst bölümünü veya bir bölümün <section> içerisindeki en üst bölümü ifade eder. |
| <main> | İçerisinde sırasıyla <article> ve <section> taglarını barındıran sitenin ana bölümü |
| <mark> | Defines marked/highlighted text |
| <nav> | Linklerin tanımlandığı bölüm |
| <section> | Genellikle <article> tagı içerisinde yer alan bölüm anlamındaki bölüm |
| <summary> | Defines a visible heading for a <details> element |
| <time> | Defines a date/time |
HTML5 <article> Tagı:
<article> elemanının kullanıldığı yerlere örnekler
- Forum postları
- Blog postları
- Haber veya Duyurular
- Yorumlar
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
the public on March 14, 2011 at 21:00 PDT.....</p>
</article>
HTML5 <nav> Tagı:
Büyük link bölümlerini tanımlamak için kullanılır. Örneğin sitenin ana menülerini.
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
HTML5 <aside> Tagı:
Sidebar gibi asıl içeriğin kenarında yer alan içerikleri tanımlamak için kullanıyor.
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
5. Yapısal Yapı Taşları: <div>, <section> ve <article>
<div>
Genel bloklayıcı veya Kontainer. Hepimiz biliyoruz ve kullanmayı seviyoruz. DIV bir akışkan içerik elemandır ancak özel anlam (semantic) içermeyen bir tagdır.
<section>
Genel bir doküman bölümü için kullanılır. Genellikle bir başlıkla (<header>) ve bazende bir altlıkla (<footer>) kullanılır. Örneðin ilgili içeriðin bir parçası, uzun bir yazının alt bölümleri, sayfanın önemli bir bölümü veya bir web uygulamasının içindeki tab menüdeki sayfa gibi olabilir.
<article>
Bir dökümanın veya sitenin bagımsız bölümleri için kullanılır. Yani yalnız başına bir bölüm olmalı ve tabiki site içerisinde mantıklı bir karşılıðı olmalı. Örneðin Bir weblog yazısı, bir forum postu, bir yorum gibi...
Peki bunlar arasındaki farklar neler? <div>, <section>, and <article>
<div> Tagı:
Biz divi genellikle içeriði düzgünce katagorize etmek için kullanırız. Aslında böyle bir kullanımda DIV herhangi bir anlamlı (semantic) durum belirtmez. Biz DIV'i daha uygun bir eleman bulamadıðımız için kullanmaktayız. DIVler bir birinden bagımsızdır.
<section>Tagı:
Aslında bu yeni tag DIV tagına çok benzer. Buda genel bir blok elemanıdır, fakat bunun bazı ek anlam içeriği (semantic) vardır. Mesela içeriğin içinde bir mantıksal grup barındırır.
<article> Tagı:
ARTICLE elemanını daha özel anlamlı bir SECTION elemanı gibi düşünebilirsiniz. Daha bagımsızdır ve daha fazla anlamı olan bir tagdır. ARTICLE yerne SECTION kullanabiliriz, fakat ARTICLE daha fazla anlamlı (semantic) bir sonuç verir.
Bu unsurların kullanım temelleri:
Yukarda anlatılanları bir örnekle kıyaslayalım. Şöyle bir yapı ile çalışalım mesela:
- Weblog article
- Başlık
- İçerik...
HTML4 ile kodlarsak:
<h1>Başlık</h1>
<p>İçerik...</p>
</div>
HTML5 ile kodlarsak:
<h1>Başlık</h1>
<p>İçerik...</p>
</article>
Alt bölümleri olan daha uzun bir örnek
<figure> Tagı:
Herhangi bir resim ve o resme ait resim yazısı için kullandığımız HTML5 tagı.
<img src="/macaque.jpg" alt="Macaque in the trees">
<figcaption>A cheeky macaque, Lower Kintaganban River, Borneo. Original by <a href="http://www.flickr.com/photos/rclark/">Richard Clark</a></figcaption>
</figure>
Örnek HTML5 Sayfa Yapısı:
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<header></header>
<nav> <!--Menulerin oldugu bolum-->
<a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href="/jquery/">jQuery</a> </nav>
<main>
<article> <!--bagımsız paragrafları belirtir-->
<h1>Google Chrome</h1>
<p>Google Chrome is a free, open-source web browser developed by Google, released in 2008.</p>
</article>
<article>
<header>
<h1>Most important heading here</h1>
<h3>Less important heading here</h3>
<p>Some additional information here</p>
</header>
<p>Lorem Ipsum dolor set amet....</p>
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
</article>
<aside> <!--Sol yada sag taraftaki menuyu belirtir-->
<dl>
<dt>CSS</dt>
<dd>A set of standards for styling documents presented on the
World Wide Web.</dd>
<dt>PHP</dt>
<dd>A server-side scripting language suited to dynamic HTML document
generation for the web.</dd>
<dt>JavaScript</dt>
<dd>A client-side scripting language used for manipulating HTML documents
within a browser.</dd>
</dl>
</aside>
<details><!--Detay içerikleri belirtir-->
<summary>Copyright 1999-2014.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>
<figure> <!-- Resimlerin bu şekilde kullanılması gerekir-->
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
</figure>
<footer><!-- sayfa altı bilgileri bur div içinde yer alır -->
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:someone@example.com"> someone@example.com</a>.</p>
</footer>
</main>
</body>
</html>
Kaynaklar:
- http://www.w3schools.com/html/html5_semantic_elements.asp
- http://www.serkanbektas.com/html5-tercih-nedenleri.html