Bir uzman gibi HTML yazmak ister miydiniz ?

Bir uzman gibi HTML yazmak ister miydiniz desem herkes evet diyecektir. Peki yazdığınız HTML kodunun ideal bir kod yapısında olmadığını bilerek yazdığınız oluyor mu hiç ?

HTML her zaman köşedeki hiç kimsenin konuşmadığı çocuk olmuştur, çünkü JavaScript ve CSS her zaman daha havalı daha dikkat çekici olmuştur.

Şimdi bu resmi aklınızda tutun çünkü, fark yaratan ve o çocuğu tekrar merkeze getirmeye yardımcı olan bazı basit ipuçlarını sizlerle paylaşacağım.

Bunlar, HTML5’in semantik biçimlendirme öğelerini iyi bir şekilde kullanacak ve desteklenen tarayıcılarda doğru şekilde işleyebilecek temiz, korunabilir ve ölçeklenebilir bir kod oluşturma perspektifinin bir parçasıdır.

DOCTYPE

İndex.html’inizin başından başlayarak, bir DOCTYPE ilan ettiğinizden emin olun. Bu, tüm tarayıcılarda standart modu etkinleştirir ve belgenin nasıl yorumlanması gerektiğini onlara bildirir. DOCTYPE’in bir HTML öğesi olmadığını unutmayın.

HTML5 için şöyle görünüyor:

<!DOCTYPE html>

Not: VS Kodunda bulunan Emmet gibi kod parçacıklarını kullanmanızı şiddetle tavsiye ederim.

Emmet örneği

İsteğe bağlı etiketler

Bazı etiketler HTML5’te isteğe bağlıdır, çünkü öğe dolaylı olarak mevcuttur. İster inanın ister inanmayın, <html> etiketini atlayabilirsiniz; sayfa tamamen iyi sonuç verir.

<!DOCTYPE HTML>

  <head>
    <title>Hello</title>
  </head>
  <body>
    <p>Welcome to this example.</p>
  </body>
</html>

Yukarıdaki, geçerli bir HTML’dir, ancak bunu yapamayacağınız bazı durumlar vardır:

<!DOCTYPE HTML>
<!-- dom daki yorum -->

  <head>
    <title>Merhaba</title>
  </head>
  <body>
    <p>örnek 1.</p>
  </body>
</html>

Yukarıdaki örnekte yorum satırı bulunduğundan dolayı hata alırsınız.

Kapanış etiketleri

Etiketlerinizi kapatmayı her zaman düşünmelisiniz, çünkü bazı tarayıcılar sayfanızı oluştururken sorun yaşayabilir.

<div id="example">
  <img src="example.jpg" alt="example" />
  <a href="#" title="test">example</a>
  <p>example</p>
</div>

Yukarıdakilerin tümü geçerli etiketlerdir. Ancak bu kuralın bazı istisnaları da vardır.

Kendiliğinden kapanan etiketlerde de geçerlidir, ancak zorunlu değildir. Bu etiketlerin bazıları şunlardır:

<br>, <hr>, <img>, <input>, <link>, <meta>,
<area>, <base>, <col>, <command>, <embed>, <keygen>, <param>, <source>, <track>, <wbr>

Not : normal bir etiket asla self-closing etiketine sahip olamaz. Aşağıdaki gibi :

<title />

Charset

Karakter setinizi önceden tanımlayın. <head> Elemanı içine yerleştirmek en iyisidir.

<head>
  <title>phpkursu.net</title>
  <meta charset="utf-8">
</head>

Not : Yukarıda başlık doğru şekilde oluşturulmadı. Örnekte olduğunun aksine meta etiketini en üste taşıyın.

<head>
  <meta charset="utf-8">
  <title>This is a super duper cool title, right 😃?</title>  
</head>

Dil

İsteğe bağlı etiketleri atlamamanın bir başka nedeni de attribute leri kullanmaktır. aşağıda web sayfanızın dilini <html> etiketi ile tanımlayabilirsiniz. Bu erişilebilirlik ve arama için gerçekten önemlidir.

<html lang="tr">
  ...
</html>