HTML Stil Kılavuzu

0 151

HTML Stil Kılavuzu; Tutarlı, temiz ve düzenli bir biçimde HTML kodları yazmamızı sağlar. HTML Stil Kılavuzuna uygun yazılan her kod daha anlamlı ve daha anlaşılır bir biçimde olur. İyi bir HTML kodu oluşturmak için belli başlı kurallar bulunmaktadır altta bu kurallara yönelik yönerge ve ipuçları hakkında bilgi paylaşacağız.

HTML Stil Kılavuzu İpuçları

HTML Stil Kılavuzu İpuçları başlığı altında kodlamada sıklıkla yapılan yapıldığında hem görüntü olarak hem de işlevsel olarak kötü bir izlenim bırakan bazı hataları ve bu hataların doğuracağı sonuçları paylaşacağız.


1-Her Zaman Belge Türünü Belirtin

Bir belgede çok gereksiz görülen anca çok önemli bir detay olan belge türünü kesinlikle belirtmenizi tavsiye ediyoruz. Belge türünü doğru bir şekilde ve ilk satırda belirtiniz.

<!DOCTYPE html>

2-Etiketlerde Küçük Harf Kullanın

HTML, etiket adlarında büyük veya küçük harfleri ayırt etmez. Küçük yazıldığında da Büyük yazıldığında da çalışır ancak, küçük harf kullanmanızı tavsiye ederiz. Çünkü Büyük harf ve küçük harfleri birlikte kullanmak kodları karıştırmnıza neden olur. Küçük harfle yazılan etiketler daha temiz ve güzel görünmektedir.

<BODY>
<P>This is a paragraph.</P>
</BODY>
<body>
<p>This is a paragraph.</p>
</body>

3-Tüm HTML Öğelerini Kapatın

HTML, etiketler kullanılırken bir açılış bir de kapanış etiketi bulunmaktadır. Ancak bazı etiketlerde kapatılmasa dahi içindeki kod olduğu gibi çalışır. Tabi bu görüntüde pek sorun yaratmasa da HTML Stil Klavuzuna ters bir durumdur yani sizlere tavsiyemiz bütün HTML öğelerini kapatmayı unutmayınız.

<section>
  <p>This is a paragraph.
  <p>This is a paragraph.
</section>
<section>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
</section>

4-Özellik Adlarında Küçük Harf Kullanın

Etiketlerde bahsettiğimiz durum özellik adlarında da mevcut çalışmasına engel değildir ancak hiçbir yazılımcı böyle düzensiz çalışmamaktadır. Bu yüzden kesinlikle tavsiye etmiyoruz.

<a HREF="https://legalyazilim.com/">Siteyi Ziyaret Et</a>
<a href="https://legalyazilim.com/">Siteyi Ziyaret Et</a>

5-Nitelik Değerlerini Daima Alıntı Yapın

Özellikle de CSS kullandığımız vakitlerde pek sıklıkla belirlediğimiz class ve id isimlerini kesinlikle ama kesinlikle alıntılı bir biçimde belirtiniz.

<table class=legalyazilim>
<table class="legalyazilim">

6-Görseller İçin Alt, Genişlik ve Yükseklik Belirtin

Bir sayfanın olmazsa olmazlarından biri olan görseller hem SEO açısından hem de görüntü açısından sayfaya güzel estetik katmaktadır. Ancak görsellerde de önemli olan noktalar bulunmakta bunların başında Alt özelliği gelmektedir. Görsel gösterilmediğinde gözüken yazı olarak bilinse de SEO açısından çok önemlidir. Bunun yanı başında da görselin yüksekliği ve genişliği gelmektedir.

<img src="html5.gif">
<img src="html5.jpeg" alt="HTML5" style="width:128px;height:128px">

7-Boşlukları Düzenli ve Gerektiği Kadar Kullanın

HTML bazı durumlarda boşluklara yer vermese de bazı durumlarda boşluk bırakmak etkisiz kalmakta. Özellikle eşittir(=) işareti etrafında sıklıkla gereksiz boşluk bırakılmaktadır. Kodların çalışmasında bir etkisi olmasa da kullanmamanızı tavsiye ederiz.

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

HTML Stil Kılavuzuna Uygun Bazı Örnekler

Yukarda HTML Stil Kılavuzu için bazı dikkat edilmesi gereken noktaları gösterdik. Bu kısımda ise bazı örneklerle kullanıma uygun kullanılar kodları sizlerle paylaşacağız.

İyi İskelet Örneği

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Legal Yazılım</title>

    <meta name="description" content="Yazılım Dünyası"/>
</head>
<body>
    
</body>
</html>

İyi Tablo Örneği

<table>
  <tr>
    <th>Adı</th>
    <th>Açıklaması</th>
  </tr>
  <tr>
    <td>HTML</td>
    <td>HTML Açıklaması</td>
  </tr>
  <tr>
    <td>CSS</td>
    <td>CSS AÇıklaması</td>
  </tr>

  <tr>
    <td>JAVASCRIPT</td>
    <td>JAVASCRIPT AÇıklaması</td>
  </tr>
</table>

İyi Liste Örneği

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JAVASCRIPT</li>

  <li>PHP</li>
  <li>C</li>
  <li>C#</li>
</ul>

Cevap bırakın

E-posta hesabınız yayımlanmayacak.