HTML dilinde sayfa kodlamasında kullanılan etiketler ve görevlerini bu makale ile yazmaya başlıyoruz. İlk olarak aşağıdaki temel html etiketlerimiz ve görevlerinden bahsedeceğiz.

HTML DOCTYPE Etiketi

Bu etiket bazı sayfalarda kullanılması gerekmese bile, sitemizin w3c dil yapısına uygun olup olmadığını, gerekli bilgileri tarayıcıya göndererek belirler. Sayfada en üst bölüme yazılır. Yani tarayıcı buradaki bilgileri görerek gerekli detayları w3c den almaktadır. Temel yazım şekli aşağıdaki gibidir.

<!DOCTYPE .... bilgiler buraya .... >

Genellikle döküman türleri HTML ve XHTML versiyon bilgilerine göre sayfayı ayarlamaktadır. Örnek olarak web sayfamız XHTML 1.0 diline uygun olarak yazılmış ise aşağıdaki kodu html satırlarımızın en üst bölgesine yazmalıyız.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Bu kod ile sayfamız tarayıcıya kendisinin XHTML 1.0 kurallarına göre yazıldığını ve buna göre w3c den doğrulama yönergelerini alması gerektiğini belirler.

HTML - HTML Etiketi

Bu etiket ise sayfamızın HTML dilinde yazıldığını belirlemektedir. Hem tarayıcılar hem de web sunucuları bu etiketlere göre sayfaları yorumladığı için, bu bilgileri vermeden web sayfası oluşturamayız. DOCTYPE komutundan sonra yazılmaya başlamaktadır. Tüm html kodları bu etiket - tag ile başlayan bölgenin içine yazılmakta ve bu etiket ile kapanan yerde bitmektedir.

<html>
.
Tüm html kodları buraya yazılmaktadır.
.
</html>

Diğer programlama dillerinde de uygulamalar benzerdir. Hangi programlama diline uygun komutu yazacaksak ilk olarak o programlama dilinin çalışması için gerekli olan bölgeyi belirlemeliyiz. Mesela html kod içinde php bölüm çalıştırmak isteseydik;

<html>
<?php
php kodları burada çalıştırılır.
?>
.
Tüm html kodları buraya yazılmaktadır.
.
</html>

HTML Head Etiketi

Sayfa üst bilgileri bu etiket içinde yazılmaktadır. Örnek olarak sayfa içinde kullandığımız javascript fonksiyonları bu bölge arasında yazılmaktadır veya bu bölge içinde sayfaya include edilmektedir. Temel olarak görevlerine bakacak olursak;
» Javascript fonksiyon bilgileri bu kısımda include edilir veya javascript fonksiyonları buraya yazılır.
» CSS bilgileri bu bölümde include edilir.
» Web sayfası ico bilgileri burada belirlenir. Favori icon yani tarayıcıda adres çubuğunun sol tarafında gözüken web sitesinin küçük simgesi.
» Sayfaların önemli bilgilendirme etiketleri olan Meta Tag lar bu bölüm içine yazılmaktadır.
» Sayfada kullanılan Title etiketi bu bölüm içine yazılmaktadır.
» Bunların dışında sayfaya ait ön bilgi olan ve sayfaya tarayıcı ile bakarken göremediğimiz sadece kaynak dosyası içinde görülebilen kodlardır.
Örnek bir head etiketine bakacak olursak;

<head>

<title>HTML Dersleri</title>
<meta name="description" content="Temel açıklamalar" />
<meta name="keywords" content="Temel kelimeler" />
<link rel="stylesheet" type="text/css" media="screen" href="http://www.gblg.com/tema.css" />
<script src="http://www.genelblog.com/deneme.js" type="text/javascript">

</head>

Yukarıdaki örnekte sırasıyla, title bilgisi verildi, meta description ve meta keywords bilgileri eklendi, sayfanın css bilgileri eklendi, sayfaya javascript fonksiyon eklendi.

HTML Body Etiketi

Bu etiket ise head etiketinin bitişinden itibaren başlar ve sayfanın en son etiketi olan </html> etiketinden önce biter. Sayfaya tarayıcı ile bakıldığı zaman gözle görebildiğimiz tasarım ve yazılar bu etiket içinde yazılmaktadır. Title etiketi hiçbir şekilde bu etiket içine yazılmaz. Bundan sonra göstereceğimiz etiketler büyük çoğunluğu body etiketi içine yazılmaktadır. Genel yazım kuralı;

<body> .... html kodları .....</body>

HTML Title Etiketi

Bu etiket head etiketi içine yazılmaktadır. Çünkü sayfa üstbilgisiyle uğrşmaktadır. Title etiketi o sayfanın arama motorlarında sonuç sayfalarında veya tarayıcılarımızda en üst kısımda gözüken başlık bölümünü belirlemektedir. Aşağıdaki resimde tarayıcı görünümündeki örnek bir başlık gözükmektedir.

HTML Title Etiketi

Yukarıdaki resimde gözüken başlık yazısının çıkmasını sağlayan etiket title dır. Bu resmin title koduna bakacak olursak;

<title>HTML Etiketleri</title>

Şeklinde olduğunu görürüz. Title tag yani etiketinin arama motorları için son derece önemli olduğunu bilmelisiniz. Yani sayfanızda bu etiketi düzgün kullanmadığınız taktirde veya yanlış yazdığınız durumlarda gerekli pozisyonlara ulaşamayabilirsiniz. Bu etiketin içine hiçbir şekilde başka html etiketler eklenmemektedir. b, strong, em gibi diğer html etiketleri bu etiketin altına eklemeye çalışırsak hiçbir şey elde etmemiş oluruz çünkü title içine eklediğiniz bu etiketler, html etiketi olarak değil normal yazı karakteri olarak gözükecek ve tarayıcılarımızda bunları normal yazı olarak gösterecektir.