Çoğu zaman kendimi tutamıyor ve güzel görünen her sitenin kaynak kodlarını görüntüleyip inceliyorum. Tıpkı sokakta gördüğünüz her insanın temel kemik yapısını ve iç çamaşırlarını gösteren X-Ray gözlükler gibi doğrusu. Nasıl kendinize karşı koyup kodlara bakmazsınız ki?

Güzel bir sitenin güzel kodlarla yaratılışını görmek oldukça etkileyici doğrusu. Bazen de güzellik sadece dış görünüşte kalıyor. SEO'ya dikkat etmeyen arkadaşlarımız yüzünden olsa gerek. Ancak güzel kod nasıl olur? Şunun şurasında "Code is Poetry" ("Kod şiirdir") diyen wordpress'i hepimiz bir şekilde kullanmışızdır. Sadece HTML'den ne olabilir ki? Topu topu sabit bir dil işte sadece ve dinamik özellikleri de hiç yok. Ancak gene de kodu yaratanın temel özelliklerini gösterir.

Bu konu da beni düşüncelere itiyor. Bir kodu ne güzel yapar? Konu HTML olunca, ustalığa bakar! Hadi güzel bir iskeletin, yazılması gerektiği şekilde yazıldığında nasıl göründüğüne bir bakalım.



Resim, isterseniz bir kağıda çıktısını alıp, duvarınıza asabileceğiniz kadar büyük tıkLayın !

HTML5 - HTML5 hem yeni, hem de html'yi şu ana kadarki en güzel haline getirdi.
DOCTYPE - HTML5 ile beraber, doctype da inanılmaz sade ve güzel bir hale geldi.
Sekmeler - Kodlar, ana/çocuk ilişkisini açıkça gösterecek şekilde ayrılmalı ve sekmelenmeli.



Karakter Seti - head tag'i içinde, her şeyden önce belirtilmeli.
Başlık - Sayfanın başlığı basit ve sade olmalı. Sayfanın amacını belirtmeli, arada ayıraç olmalı ve sitenin başlığı ile bitmeli.
CSS - Tek bir stil dosyası kullanılmalı ve tarayıcılara iyi bir şekilde tanıtılmalı.
Gövde - body tag'ine de id eklenmeli ve ek bir isimlendirme gerekmeksizin bütün sayfa stillendirilebilmeli.
JavaScript - JQuery, google üzerinden alınmalı. Sadece bir javascript dosyası yüklenmeli. Ve referanslar sayfanın sonunda verilmeli.
Dosya Yolu - Site kaynakları göreceli dosya yolu kullanırken, içerik içerisinde kesin ve tam dosya yolları kullanılmalı. İçeriğin başka kaynaklarca da sekronize edilebileceği unutulmamalı.
Resim Özellikleri - Resimlerin görünmemesi durumunda çıkacak olan alternatif yazı mutlaka olmalı. Ve tarayıcının işleme hızını arttırmak için genişlik ve yükseklik değerleri de resimlerde verilmeli.
Önce Ana İçerik - Sayfanın ana içeriği her şeyden önce gelmeli. Yan bar veya menü gibi bölümler, ana içeriğin arkasından yaratılmalı.
Bloklama Kullanılmalı - Başlık, menü, içerik ve yan bar gibi bölümler, bloklanarak kullanılmalı, her bloğa da gerekli id ve class'lar verilmeli. Bu yapı kesinlikle "div" ile ayrılmış bölümlerden daha iyidir
Hiyerarşi - HTML etiket tag'leri düzgün bir şekilde biçimlendirilmeli, gerçek içerikler almalı ve kesin bir hiyerarşiyi takip etmeli.
uygun liste elemanları kullanılmalı - başlık, navigasyon, bölümleme vb numaralandırma ve şekillendirmeler için uygun liste elemanları kullanılmalı.
Ortak İçerik Barındırılmalı - HTML'i yaratmak için hangi dil kullanılıyor olursa olsun, ortak içerik server tarafında sayfa içinde barındırılmalı (include edilmeli), her sayfada tekrar edilmemelidir.
Mantıklı Class'lar - Uygun tag'lerin kullanılması dışında, isimlendirilmelerinde ve id verilmesinde de uygun bir mantık kullanılmalıdır. "Sol-Kolon" ismi, "Sol" isminden çok daha iyidir.
Class Kullanılımı - Class'lar, benzer biçimlendirmeye gerek duyan tag'lerin kullanıldığı her zaman kullanılmalıdır.
id Kullanımı - id'ler, bir element sayfa içerisinde sadece bir kez geçiyor ve başka bir türlü stil biçimlendirilmesi yapılamıyorsa kullanılmalıdır.
Dinamik Elementler - Dinamik olması gereken şeylerin dinamik olmasına dikkat edin. Örneğin tarih.
Özel Karakterler - Eğer sayfanın herhangi bir yerinde özel karakter kullanıyorsanız, onu kod şekilde yazmaya özen gösterin.
Sayfada Stil Olmamalı - Sayfa içerisinde, inşa kodları, içerik ve açıklayıcı içerik dışında hiçbir stil ve biçimlendirme verisi olmamalıdır. Biçimlendirme CSS ile yapılmalıdır.
Açıklayıcı Notlar - Koda bakıldığında direk olarak anlaşılmayan veya kodu yazdıktan 3-5 ay sonra hatırlanmayacak olan şeyler için hemen bir açıklayıcı not yazın, inanın pişman olamayacak hatta minnettar kalacaksınız.
Geçerli Kod Kullanın - Yazdığınız kodlar, W3C standartlarına uygun olsun. Etiketler kapatılmış, gerekli özellikler yazılmış ve etiketler kesişmesin.