Html kodlarınız düzenli mi?

Güzel bir web sitesi, tasarımcısı için her zaman övünç kaynağıdır. Ziyaretçiler sitenize girdiğinde, tasarımınızın ne kadar güzel olduğu ile ilgili konuşurlar. Peki kod yapısının (Html ve CSS) güzelliği hakkında konuştuklarını hiç duydunuz mu?

Normal kullanıcılar html kodlarınızı görmezler çünkü önemsemezler. Onları daha çok dış görünüşü ilgilendirir. Tasarımcılar da bunu bildiğinden kodlarının düzgün görünüp görünmemesinin çok da önemli olmadığını düşünürler. Hal böyle olunca internette düzenli görünen html kodlarına sahip sitelerle karşılaşmak neredeyse imkansız oldu.  Ama aslında düzenli bir kod yapısı sanıldığından daha önemlidir.  Bir web sitesi, dizaynı kadar kod yapısı ile de güzel bir görünüme sahip olmalıdır. Aksi takdirde dışarıdan çok  güzel görünen ama arka tarafında mutfağı dağınık ve pis olan lüks bir restoran benzetmesi yapmak mümkündür.

Kodların görünümü neden bu kadar önemli?

Karmakarışık kod yapısı, düzgün görünen kod yapısı ile aynı şekilde iş görür aslında. O halde kod yapısının görünümünü neden önemsemeliyiz? Maddeler halinde görelim:

Daha kolay güncelleme imkanı verir

Düzenli bir kod yapısı, gelecekte değişiklik yapacağınız zaman elementleri ararken size kolaylık sağlar ve zaman kaybının önüne geçer.

Daha az yer kaplar

Bu her tasarımcı tarafından bilinen ama nedense çok da önemsenmeyen bir gerçek. Düzenli kodlar, karışık kodlara göre daha az yer kaplar ve böylece yükleme işi daha hızlı gerçekleşir.

Daha profesyonel görünmenizi sağlar

Kendinizi web sitesi yaptırmak isteyen büyük bir şirketin, site işlerinden az çok anlayan reklam ve pazarlama müdürünün yerine koyun. Web sitelerini karmakarışık bir kodlama ile hazırlayan bir web tasarımcıya mı para ödersiniz, yoksa sayfaların kodlarına da en az tasarım kadar önem veren bir web tasarımcıya mı? Hangisi sizin gözünüzde daha profesyonel görünür? Düzenli bir kod yapısına sahip olarak web tasarımcı rakiplerinizin bir adım önüne geçebilirsiniz. Hem de oldukça büyük bir adım…

Hataları en aza indirir

Kodlarınızı düzenli bir görünümle yazdığınızda, açtığınız tagleri kapatmayı unutma ya da yanlış tag ile kapatma ihtimaliniz çok azdır. Hata yapsanız dahi yaptığınız hataları çok kolay görebilirsiniz.

CSS’in Düzenlenmesi

Web sitenizin CSS’ini düzenlemenin bir çok yolu var. Tabiki güzellik göreceli kavramdır ve benim için daha düzgün görünen bir yapı sizin için öyle olmayabilir. Bir kaç farklı deneme ile gözünüze en düzgün görünen halini bulabilirsiniz.

Tek satır halinde yazın

CSS özelliklerini tek satır halinde yazmak hem CSS dosyanızın daha az yer kaplamasını sağlar hem de aradığınız classları ve değerleri daha kolay bulabilirsiniz.

Örnek olarak;

div {
background: #FFF;
font-style: italic;
font-size: 18px;
margin: 20px;
padding: 10px;
font-weight: bold;
}

şeklinde yazmak yerine,

div {background: #FFF; font-style: italic; font-size: 18px; margin: 20px;}

şeklinde yazın.

Elementleri gruplandırın

Elementleri ve çocuk elementleri aşağıdaki gibi gruplandırarak yazarsanız, daha sonra aradığınızı bulmakta zorlanmazsınız. Hem de düzgün bir görünüm sağlamış olursunuz.

div.element {}
div.element a {}
div.element ul {}
div.element .class p {}
div.other {}
div.other a {}
div.other p.class {}

Bölümlere ayırın

CSS’inizi Header, Footer, Main Page gibi uyarı başlıkları ile bölümlere ayırdığınızda hangi class’ın hangi bölümde kullanıldığını bulmanız açısından kolaylık sağlamış olursunuz.

<!– HEADER –>

div {background: #FFF; font-style: italic; font-size: 18px; margin: 20px;}

<!– HEADER BİTTİ–>

Anlamlı isimler verin

CSS class’larına ve elementlere isim tanımlarken anlamlı isimler vermeye çalışın. Html yapısında background resminizin adını bg.jpg yaptığınız gibi logonuzun class ismini de .logo koyabilirsiniz. h2.altbaslik, div.header, p.aciklama şeklinde örnekler çoğaltılabilir.

Kısaltma kullanın

Background, font, padding, margin ve border gibi özellikleri yazarken bütün değerlerini ayrı ayrı atamak yerine aşağıdaki örnek gibi kısaltarak yazın. Böylelikle CSS yapınız hem daha düzgün görünür hem de daha az yer kaplar.

div { padding-left: 20px; padding-right: 30px;  padding-top: 50px; padding-bottom: 10px; }

yerine,

div { padding: 50px 30px 10px 20px; }

şeklinde yazın.

Html’in Düzenlenmesi

Sitenizin htmlini düzenlemek gerçekten çok kolay ve hızlıdır. İşte bir kaç püf noktası:

Hiyerarşik dizilim

Resimdeki örnekten ne demek istediğimi anladınız sanırım. Div’leri ve diğer bütün elementleri, içinde ve dışında yer alan elementlere göre merdiven basamakları şeklinde dizerseniz bir bakışta hangi element hangisinin içinde, hangisinin dışında olduğunu kolayca anlayabilirsiniz.

Satır Boşluğu

Kapsayıcı esas elementlerden oluşan bölümler arasına birer satır boşluk bırakarak ana bölümleri birbirlerinden ayırarak html yapısını daha anlaşılabilir yapabilirsiniz. Tabi boşlukları abartmamakta fayda var. Sadece header, main page ve footer gibi ana bölümleri ayırsak yeterli olur.

Anlamlı İsimler

Aynı CSS’te olduğu gibi Html’de de elementlere anlamlı isimler vermeniz, ileriki zamanlarda aradığınızı bulmanız için size kolaylık sağlayacaktır. Örnek olarak; background resminin adını image1234.jpg yerine bg.jpg yapmak, e-mail satırı olarak eklediğimiz input’un adını  “e-mail” yapmak vs…

Yanılıyor muyum?

Tabi ki kodlarınızı düzenlemek zorunda değilsiniz. Ne de olsa ziyaretçileriniz kod yapınıza bakmıyorlar değil mi? Yanılıyorsunuz… Portfolyonuzdaki sitelerin kodları iyi düzenlenmediği için potansiyel müşterilerinizi kaybediyor olabilirsiniz. Bence bir an önce sitelerinizin kodlarını düzenleseniz iyi olur.

Konu ile ilgili yorumlarınızı bekliyorum.