XHTML1, HTML4 ve HTML5 Farklılıkları

Yayınlandı: 28 Ağustos 2015 / HTML
Etiketler:, , , ,

HTML’in zamanla yetersiz kalmasından dolayı yeni versiyonları çıkmaktadır.

XHTML1, HTML4 ve HTML5 Farklılıkları

XHTML 1, HTML4 ve HTML5 Farklılıkları

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

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;

veya

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
http://www.w3.org/TR/html4/strict.dtd”&gt;

HTML5

<!DOCTYPE html>

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

<meta name=”content-language” content=”tr” />

HTML5

<html lang=”tr”>

3.Karakter Kodlamasının Tanımlanması

HTML4

<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1254″ />
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-9″ />

HTML5

<meta charset=”UTF-8″ />

Basit Bir Web Sayfa Kodları

XHTML 1.0

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<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

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
http://www.w3.org/TR/html4/strict.dtd”&gt;
<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

<!DOCTYPE html>
<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

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title>Styling Unknown Elements – 4</title>
<!–[if lt IE 9]>
http://html5shiv.googlecode.com/svn/trunk/html5.js
<![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

XHTML1, HTML4 ve HTML5 Farklılıkları

HTML5 <article> Tagı:

<article> elemanının kullanıldığı yerlere örnekler

  • Forum postları
  • Blog postları
  • Haber veya Duyurular
  • Yorumlar
<article>
<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.

<nav>
<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.

<p>My family and I visited The Epcot center this summer.</p>

<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ı:

,

ve

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.

Genel bir doküman bölümü için kullanılır. Genellikle bir başlıkla (

)   ve bazende bir altlıkla (

) 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.

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?

,

, and

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.

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.

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:

Başlık

İçerik…

 HTML5 ile kodlarsak:

<article>
<h1>Başlık</h1>
<p>İçerik…</p>
</article>

Alt bölümleri olan daha uzun bir örnek

XHTML 1, HTML4 ve HTML5 Farklılıkları

<figure> Tagı:

Herhangi bir resim ve o resme ait resim yazısı için kullandığımız HTML5 tagı.

<figure>
<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>

Kaynaklar:

Reklamlar

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Connecting to %s