HTML5 Kodlama Kuralları

Paylaş

Daha düzenli ve okunaklı kodlama yapmak için dikkat edilmesi gereken HTML kodlama kuralları ile ilgili bilgiler ve örnekler yer alıyor.

HTML5 kodlama kuralları

Çoğu web geliştirici, HTML sözdizimi ve kodlama kuralları hakkında tam bir bilgiye sahip değil.

HTML kodlama kurallarına uyarak kodların daha iyi anlaşılması ve okunması sağlanır.

HTML5 kodlamasını XHTML kodlamasına benzer “iyi biçimlendirilmiş” yazmak her zaman için daha avantajlıdır.

Her zaman düzenli, temiz ve iyi biçimlendirilmiş kodlama yapın! 🙂

Doğru DOCTYPE bildirimi

Her zaman HTML sayfasının ilk satırında belge türünü bildirin.

<!DOCTYPE html>

Bildirimi küçük harflerle de yazabilirsiniz.

<!doctype html>

Etiketleri küçük yazın

HTML5 etiketleri büyük, küçük veya büyük-küçük karışık yazmaya izin verir.

Fakat etiketleri küçük yazmanızı öneririm.

Çünkü

Büyük veya büyük-küçük karışık yazmak kodları anlaşılmaz yapar.
Türkçe i harfinin büyük karşılığı İ’dir ve HTML kodları büyük İ harfini tanımadığından çalışmayabilir.
Küçük harflerle yazmak kodların daha anlaşılır olmasını sağlar.
Küçük harf yazmak daha kolaydır.

<SECTION>
  <p>Bu bir paragraf</p>
</SECTION>

<Section>
  <p>Bu bir paragraf</p>
</SECTION>

<section>
  <p>Bu bir paragraf</p>
</section>

Etiketleri kapatın

HTML5 bazı etiketleri kapatma zorunluluğu yoktur. (Örneğin <p> etiketi)

Etiketleri kapatmayı unutmayın!

<section>
  <p>Bu bir paragraf
  <p>Bu bir paragraf
</section>

<section>
  <p>Bu bir paragraf</p>
  <p>Bu bir paragraf</p>
</section>

Boş etiketleri de kapatın

HTML5 boş veya içeriği olmayan etiketleri kapatmak isteğe bağlıdır.

<meta charset="utf-8">

<meta charset="utf-8" />

Kapatma çizgisi(/) XHTML ve XML yapısı için gerekli ve zorunludur.

Özellikleri küçük yazın

HTML5 özellikleri büyük, küçük veya büyük-küçük karışık yazmaya izin verir.

Fakat özellikleri küçük yazmanızı öneririm.

Çünkü,

Büyük veya büyük-küçük karışık yazmak kodları anlaşılmaz yapar.
Türkçe i harfinin büyük karşılığı İ’dir ve HTML kodları büyük İ harfini tanımadığından çalışmayabilir.
Küçük harflerle yazmak kodların daha anlaşılır olmasını sağlar.
Küçük harf yazmak daha kolaydır.

<div CLASS="menu">...</div>

<div class="menu">...</div>

Özellik değerlerine tırnak ekleyin

HTML5 özellik değerini tırnak eklemeden de verebiliriz.

Fakat özellik değerlerini tırnak içinde yazmanızı öneririm.

Çünkü,

Tırnak içindeki değerler daha kolay okunur.
Özellik değeri boşluk içeriyorsa tırnak kullanımı ZORUNLUDUR.

<p title=Örnek paragraf>Bu bir paragraf</p>

Tırnak kullanılmadığından paragrafın üzerine gelindiğinde “Örnek” yazacaktır.

<p title=Örnek>Bu bir paragraf</p>

<p title="Örnek paragraf">Bu bir paragraf</p>

Tırnak kullanıldığından paragrafın üzerine gelindiğinde “Örnek paragraf” yazacaktır.

Resim özelliklerini kullanın

Her zaman sayfaya eklenmiş olan resimlere alt özelliği ekleyin.

Resim çeşitli sebeplerden görüntülenmediğinde alt özelliğine ait değer gözükecektir.

Her zaman yükseklik ve genişlik değerlerini belirleyin.

Resimler yüklerken boyutları bilinmediğinden çok geniş veya küçük görüntülenebilir.

<img src="elma.jpg" />

<img src="elma.jpg" alt="Elma" style="width:250px;height:250px" />

Özellik ve değer arası fazla boşluk kullanmayın

HTML5 özellik ve değer arasındaki fazla boşlukları dikkate almaz.

Fakat özellik ve değer arası fazla boşluk kullanmak kodların okunabilirliğini azaltır.

<link rel = "stylesheet" href = "stil.css">

<link rel="stylesheet" href="styles.css">

Satıra fazla kod yazmayın

Her satıra uzun kod yazmak kodların okunmasını zorlaştırır.

Her satıra 80-90 karakter kod yazın!

Fazla boşluk ve girinti kullanmayın

Gereksiz HTML kodları arası boşluk kullanmayın.

Gereksiz boş satır ve girinti kullanmayın. Her etiket için girinti gerekli değildir.

Bazı bölümlerin okunabilirliği arttırmak için tek satır ekleyebilirsiniz.

<article>

    <h2>Elma</h2>

    <p>Gülgillerden, humusça zengin ve nemli topraklarda, bol güneş alan yerlerde 
    yetişen,kenarları dişli oval yaprakları olan, açık pembe ya da ak çiçekler açan, dayanıklı bir meyve ağacı.</p>

</article>

<article>
    <h2>Elma</h2>
    <p>Gülgillerden, humusça zengin ve nemli topraklarda, bol güneş alan yerlerde 
    yetişen,kenarları dişli oval yaprakları olan, açık pembe ya da ak çiçekler açan, dayanıklı bir meyve ağacı.</p>
</article>

<ol>
    <li>Elma</li>
    <li>Armut</li>
    <li>Portakal</li>
</ol>

<html>, <head> ve <body> kullanmayı unutmayın

HTML5 <html>, <head> ve <body> etiketleri kullanımı zorunlu değildir.

Aşağıdaki örnek tarayıcıda çalışacaktır.

<!DOCTYPE html>
  <title>Sayfa başlığı</title>

<h1>Bu bir başlık</h1>
<p>Bu bir paragraf</p>

Fakat hatalıdır.

<html> etiketi sayfanın kök etiketidir ve sayfa dili burada belirtilir.

<!DOCTYPE html>
<html lang="tr">

Sayfa dilini belirtmek ekran okuyucular, arama motorları vb. siteyi okuyan yazılımlar için önemlidir.

<html>, <head> ve <body> etiketi kullanılmazsa çeşitli yazılımlarda hata verebilir.

<title> etiketi

HTML5 <title> etiketi kullanımı zorunludur.

Sayfa ile ilgili anlamlı bir başlık kullanmanızı öneririm.

<title>HTML5 Kodlama Kuralları</title>

Sayfanızın arama motorları ve ziyaretçiler tarafından doğru görünmesi için dil ve karakter kodlamasını kullanmayı unutmayın!

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Dersleri</title>
</head>

HTML yorumlar

Kısa yorumlar tek satırda yazılır.

<!-- HTML Yorum Satırı -->

Uzun yorum ve açıklamalar birden fazla satırda yazılabilir.

<!-- 
Açıklama başladı.
Açıklama devam ediyor.
Açıklama bitti.
-->

CSS kullanım kuralları

CSS dosyalarını sayfaya bağlamak için <link> etiketini kullanabilirsiniz. (type özelliği gerekli değildir.)

<link rel="stylesheet" href="stil.css">

Kısa CSS kurallarını tek satırda yazalabilirsiniz.

<script src="myscript.js">

HTML etiketleri id özellik değerinin hatalı kullanımı JavaScript hatalarına neden olabilir.

var obj = getElementById("Demo")

var obj = getElementById("demo")

Birinde d harfi büyük yazılmış birinde ise küçük yazılmıştır.

Dosya adlarını küçük harflerle yazın

Bazı web sunucuları (Apache, Unix) dosya adlarında küçük harfe duyarlıdır.

Örneğin; elma.jpg dosyasına Elma.jpg yazıldığında erişilmeyecektir.

Bazı web sunucuları ise (Microsoft ISS) dosya adlarında küçük harfe duyarsızdır.

Örneğin; elma.jpg dosyasına Elma.jpg yazıldığında erişilecektir.

Eğer dosya adlarını büyük veya küçük olarak kullanıyorsanız bu duruma dikkat etmeniz gerekir.

Sayfanızı küçük harfe duyarlı sunucudan, küçük harfe duyarsız sunucuya taşıdığınızda hatalar çıkabilir.

Bu gibi sorunları önlemek için, her zaman dosya adlarını küçük harf olarak kullanın!

Dosya uzantıları

HTML dosya uzantısı .html veya .htm olmalıdır.

CSS dosya uzantısı .css olmalıdır.

JavaScript dosya uzantısı .js olmalıdır.

.htm ve .html arasındaki fark

HTML sayfaları .htm ve .html uzantısı arasında hiçbir fark yoktur.

Her ikisi de web sunucu tarafından HTML dosyası olarak tanınacaktır.

Tek fark şudur.

.htm dosya uzantısı, DOS sistemlerdeki dosya uzantısının 3 karakter sınırından dolayıdır.

.html dosya uzantısı, Unix işletim sistemlerinde dosya uzantısı 3 karakterden fazla olduğundan dolayıdır.

Her zaman .html dosya uzantısı kullanmaya özen gösterin. 🙂

Dosya erişimi

Bir URL (www.yusufsezer.com.tr) HTML dosyası belirtmez sunucu varsayılan dosyayı gösterir.

Varsayılan dosya isimleri genellikle index.html, index.htm, default.html, default.htm olarak tanımlıdır.

Sunucu varsayılan dosya olarak index.html tanımlanmışsa index.html dosyasını çağırır index.htm dosyanı çağırmaz.

Sunucular birden fazla varsayılan dosya adı ile yapılandırılabilir.

HTML5 Derslerine buradan ulaşabilirsiniz…

Hayırlı günler dilerim.

Facebook

E-Posta ile paylaş

Yazdır