Tutarlı, temiz ve düzenli bir HTML kodu, başkalarının kodunuzu okumasını ve anlamasını kolaylaştırır.
İyi HTML kodu oluşturmaya yönelik bazı yönergeleri ve ipuçlarını açıklamaya çalışacağız.
Her Zaman Belge Türü Tanımlanmalıdır
Belge türünü her zaman belgenizin ilk satırında yazın.
HTML için doğru belge türü:
<!DOCTYPE html>Etiketleri Küçük Harfle Yazın
HTML, etiket isimlerinde büyük ve küçük harflere izin verir. Ancak etiketleri küçük harfle yazmanız tavsiye edilir. Bunun bir kaç nedeni vardır;
- Büyük ve küçük harflerin karıştırılması kod satırında kötü görünür
- Geliştiriciler genel olarak ingilizce dili kullandığı için küçük harflerle adlandırma yapar
- Küçük harfler yazıldıktan sonra daha okunaklı görünür
- Küçük harf yazmak daha kolaydır
İyi bir kod;
<body>
<p>Paragraf.</p>
</body>Kötü bir kod;
<BODY>
<P>Paragraf.</P>
</BODY>Bütün HTML Etiketleri Kapatılmalıdır
Örneğin <p> etiketini kapatmanız gerekmez. Ancak sayfa büyüdükçe önüne geçilmeyen ve bulunması zor hatalar olabileceği için etiketleri kapatmanız gereklidir.
İyi bir kod;
<section>
<p>Paragraf.</p>
<p>Paragraf.</p>
</section>Kötü bir kod;
<section>
<p>Paragraf.
<p>Paragraf.
</section>Etiket Özelliklerini Küçük Harfle Yazın
Daha önce dediğimiz gibi HTML büyük ve küçük harf destekler ancak yukarıda belirttiğimiz nedenlerden dolayı küçük harf kullanınız.
İyi bir kod;
<a href="https://www.turkyazilimci.com/">Siteye Git</a>Kötü bir kod;
<a HREF="https://www.turkyazilimci.com/">Siteye Git</a>Her Zaman Tırnak İşareti Kullanın
HTML tırnak işareti olmadan özellik atamaya izin verir. Ancak tırnak işareti içerisine almanızı öneririz;
- Geliştiriciler diğer dillerle HTML dilini birleştirebileceğinden sürekli tırnak işareti kullanır
- Tırnak içine alan değerlerin okunması daha kolaydır.
- Değer boşluk içeriyorsa tek parça okunması için tırnak kullanmak gereklidir.
İyi bir kod;
<table class="striped">Kötü bir kod;
<table class=striped>Çok kötü bir kod;
Aşağıdaki kod arada boşluk olduğundan çalışmayacaktır.
<table class=table striped>Görseller İçin Her Zaman alt, Genişlik ve Yükseklik Belirtin
Resimler için her zaman alt özelliği belirtmek gerekir. Bu özellik, görüntünün herhangi bir nedenle görüntülenememesi durumunda tarayıcıda görünecektir.
Ayrıca görseller için her zaman genişlik ve yükseklik belirtmekte fayda vardır. Bu sayfa yüklenirken titremeyi azaltır. Çünkü görsel yüklenmeden önce tarayıcı görsel için yer ayırmaktadır.
İyi bir kod;
<img src="htmllogo.gif" alt="HTML5" style="width:128px;height:128px">Kötü bir kod;
<img src="htmllogo.gif">Boşluklar ve Eşittir İşaretleri
HTML eşittir işaretinin etrafındaki boşluklara izin verir. Ancak alan az olduğunda okunması daha kolaydır ve yazıları daha iyi gruplandırır. Ancak bu da kişiden kişiye değişmektedir.
İyi bir kod;
<link rel="stylesheet" href="styles.css">Kötü bir kod;
<link rel = "stylesheet" href = "styles.css">Uzun Kod Satırlarından Kaçınmaya Çalışın
Bir HTML düzenleyici kullanırken, HTML kodunu okumak için sağa ve sola kaydırmak uygun DEĞİLDİR.
Çok uzun kod satırlarından kaçınmaya çalışın.
Boş Satırlar ve Girintiler
Sebepsiz yere boş satır, boşluk veya girinti eklemeyin.
Okunabilirlik için büyük veya mantıksal kod bloklarını ayırmak üzere boş satırlar ekleyin.
Okunabilirlik için iki girinti boşluğu ekleyin. Tab tuşunu kullanmayın.
Burada paylaştığımız kodlarda bu ayırımı göremeyebilirsiniz. Kod eklentisinde tam olarak görüntülenmez.
<!DOCTYPE html>
<html>
<body>
<h1>Türkiye'deki Şehirler</h1>
<h2>Hatay</h2>
<p>Bir Şehir.</p>
<h2>Ankara</h2>
<p>Bir Şehir.</p>
<h2>İstanbul</h2>
<p>Bir Şehir.</p>
</body>
</html>Kötü bir kod;
<!DOCTYPE html>
<html>
<body>
<h1>Türkiye'deki Şehirler</h1>
<h2>Hatay</h2>
<p>Bir Şehir.</p>
<h2>Ankara</h2>
<p>Bir Şehir.</p>
<h2>İstanbul</h2>
<p>Bir Şehir.</p>
</body>
</html>İyi yazılmış bir tablo kodu;
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<th>Şehir</th>
<th>Açıklama</th>
</tr>
<tr>
<td>Ankara</td>
<td>Bir Şehir</td>
</tr>
<tr>
<td>İstanbul</td>
<td>Bir Şehir</td>
</tr>
</table>
</body>
</html>İyi yazılmış bir liste kodu
<!DOCTYPE html>
<html>
<body>
<ul>
<li>Hatay</li>
<li>Adana</li>
<li>İstanbul</li>
</ul>
</body>
</html><title> Etiketini Atlamayın
HTML <title> etiketi her sayfada gereklidir. Sayfa içeriği başlık sayesinde arama motoru tarafından algılanır. Listeleme sayfa başlığına göre yapılır.
- tarayıcı araç çubuğundaki bir başlığı tanımlar
- favorilere eklendiğinde sayfaya bir başlık sağlar
- arama motoru sonuçlarında sayfanın başlığını görüntüler
<title>HTML Sayfasının Başlığı Nasıl Olmalıdır?</title><html> ve <body> Etiketleri Unutulmamalı!
Bir HTML sayfası ve etiketleri olmadan çalışır:
<!DOCTYPE html>
<head>
<title>Sayfa Başlığı</title>
</head>
<h1>Başlık</h1>
<p>Paragraf.</p>Sayfa etiketler olmadan çalışsa bile her zaman <html> ve <body> etiketlerini sayfa doğrulaması açısından eklemelisiniz. <body> etiketinin unutulmasıyla yeni tarayıcılarda sayfa açılsa da eski tarayıcılarda açılmayacak ve hata verecektir. <html> ve <body> etiketlerinin atlanması DOM ve XML içeriğinin çökmesine ve çalışmamasına neden olur.
<head> Etiketinin Unutulması
HTML <head> etiketi de unutulabilir.
Tarayıcılar <body> etiketinden önceki tüm öğeleri varsayılan olarak <head> etiketine ekleyecektir.
<!DOCTYPE html>
<html>
<title>Sayfa Başlığı</title>
<body>
<h1>Başlık</h1>
<p>Paragraf.</p>
</body>
</html>Yine de sayfa doğrulaması için <head> etiketini mutlaka kullanınız.
Boş HTML Etiketleri Kapatılmalı Mı?
HTML’de boş etiketleri kapatmak isteğe bağlıdır.
<meta charset="utf-8"><meta charset="utf-8" />XML/XHTML yazılımının sayfanıza erişimi olacaksa, XML ve XHTML’de gerekli olduğundan kapanış eğik çizgisini (/) mutlaka ekleyin.
lang Özelliğini Mutlaka Ekleyin
Web sayfasının dilini belirtmek için her zaman <html> etiketinin içine lang özelliğini eklemelisiniz. Bunun amacı arama motorlarına ve tarayıcılara yardımcı olmaktır.
<!DOCTYPE html>
<html lang="tr">
<title>Sayfa Başlığı</title>
<body>
<h1>Başlık</h1>
<p>Paragraf.</p>
</body>
</html>Meta Data
Doğru yorumlamayı ve doğru arama motoru indekslemesini sağlamak için, hem dil hem de karakter kodlaması <meta charset=”charset”> bir HTML belgesinde mümkün olduğu kadar erken tanımlanmalıdır:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>sayfa başlığı</title>
</head>Viewport Tanımlamasını Mutlaka Yapın
Viewport yani görünüm alanı, kullanıcının bir web sayfasında görünen alanıdır. Cihaza ve çözünürlüğe göre değişir.
Tüm web sayfalarınıza aşağıdaki <meta> etiketini eklemelisiniz. Önceki bölümlerde viewport ile ilgili detaylı bilgiler vermiştik.
<meta name="viewport" content="width=device-width, initial-scale=1.0">HTML Yorum Alanları
Kısa yorumlar tek satıra şu şekilde yazılmalıdır:
<!-- Bu Bir Yorumdur -->Birden fazla satırı kaplayan yorumlar şu şekilde yazılmalıdır:
<!--
Bu Bir Yorumdur. Bu Yorum uzun olduğundan alt satıra geçecektir.
Bu yorumun devamıdır. Yorum uzun olduğu için alt satırda devam etti.
-->Yorum simgesinden sonra çok satırlı yorumların paragraf başı bırakarak girintili yazılması, okunmasını kolaylaştırır.
Style Sheet Kullanma
Stil sayfalarına (CSS) bağlanmak için basit söz dizimini kullanılır. type niteliğinin yazılması gerekli değildir.
<link rel="stylesheet" href="styles.css">Kısa CSS özellikleri şu şekilde tek satır olarak yazılabilir:
p.intro {font-family:Verdana;font-size:16em;}Uzun CSS özellikleri şu şekilde yazılmalıdır:
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}- Süslü parantezi seçiciyle aynı satırda yazın
- Özellik ve süslü parantez arasında boşluk kullanın
- İki girintilik boşluk kullanın
- Sonuncu özellik de dahil olmak üzere her özellik sonuna mutlaka noktalı virgül kullanın
- Değer boşluk içeriyorsa mutlaka tırnak işareti kullanın
- Kapanan süslü parantezi mutlaka en alt satıra boşluksuz yazın.
HTML’ye JavaScript Ekleme
Harici javascript dosyalarını yüklemek için aşağıdaki söz dizimini kullanın (type özelliğini yazmak gerekli değildir):
<script src="myscript.js">HTML Öğelerine JavaScript ile Erişim
Daha önceki yazılarda bu konuya da değinmiştik. Aşağıda Demo id’sine sahip alana erişim sağlamak için örnek kod verilmiştir. İki kod satırı birbirinden farklıdır.
getElementById("Demo").innerHTML = "Merhaba";
getElementById("demo").innerHTML = "Merhaba";Dosya İsimlerinde Küçük Harf Kullanın
Bazı web sunucuları (Apache, Unix) dosya adları konusunda büyük/küçük harfe duyarlıdır: “deneme.jpg”ye “Deneme.jpg” olarak erişilemez.
Diğer web sunucuları (Microsoft, IIS) büyük/küçük harfe duyarlı değildir: “deneme.jpg”ye “Deneme.jpg” olarak erişilebilir.
Büyük-küçük harf karışımı kullanıyorsanız buna dikkat etmelisiniz.
Büyük/küçük harfe duyarlı olmayan bir sunucudan büyük/küçük harfe duyarlı bir sunucuya geçerseniz, küçük hatalar bile web’inizi bozar.
Bu sorunları önlemek için her zaman küçük harfli dosya adları kullanın!
HTML Dosya Uzantıları
HTML dosyalarının .html uzantısı olmalıdır (.htm’ye izin verilir).
CSS dosyaları .css uzantısına sahip olmalıdır.
JavaScript dosyaları .js uzantısına sahip olmalıdır.
html ve htm Arasındaki Farklar
.htm ve .html dosya uzantıları arasında hiçbir fark yoktur.
Her ikisi de herhangi bir web tarayıcısı ve web sunucusu tarafından HTML sayfası olarak okunacaktır.
Varsayılan Dosya İsimleri
Bir URL sonunda herhangi bir dosya adı belirtilmediğinde sunucu otomatik olarak index.html, index.htm, default.html veya default.htm dosya isimleri ekler.
Bazı sunucular varsayılan dosya adı olarak index.html olarak yapılandırılmıştır. Bu durumda varsayılan dosya adınız index.html olmalıdır.
Sunucularda birden fazla varsayılan isim belirtilebilir.
