HTML , herhangi bir web sitesinin bel kemiğidir. İnsanların gördüğü ilk şey bu. Onsuz, web sitesi olması mümkün değil.

Bu nedenle, iyi kodlama uygulamalarına bağlı kalmanız önemlidir. En iyi uygulamaları takip etmezseniz, web kullanıcısı için kötü bir kullanıcı deneyimi yaşayabilirsiniz.

İster kodlamaya yeni başlayan biri olun ister deneyimli bir profesyonel olun, HTML'de her zaman öğrenecek yeni bir şeyler vardır.

HTML En İyi Uygulamaları

HTML en iyi uygulamaları , bakımı ve okunması kolay web siteleri oluşturmanıza yardımcı olan kurallardır.

HTML tabanlı bir web sitesi oluştururken akılda tutulması gereken bazı yönergeler şunlardır:

Bir kod sayfası için yalnızca bir <h1> öğesi kullanın

HTML'de altı farklı başlık etiketi vardır   <h1>, <h6>. Etiket <h1>ana başlıktır (web sayfasının konusu), <h6>etiket ise en az önemli başlıktır.

Etiket <h1>etiketten daha büyüktür, <h2>etiket <h2>etiketten daha büyüktür, <h3>etikete kadar <h6>. Başlıkların her biri önemine göre boyut olarak küçülür.

<h1>Bir kod sayfası için birden fazla eleman kullanmaktan kaçınmak önemlidir .

Bunu yapma ⬇️:

<main>
<div>
<h1>Can Coding be fun?</h1>
<p>The more you code the better you become</p>
</div>

<div>
<h1>Coding is fun</h1>
<p>It is always better when you have fun coding</p>
</div>
</main>

Yukarıdaki örnekte, <h1>birinci ve ikinci üzerindeki etiketi kullandık <div>. Bu şekilde kodlama işe yarayacaktır, ancak aynı hedefe ulaşacak olsanız da, bu en iyi uygulama değildir.

Bunun yerine bunu yapın ⬇️:

<main>

<div>
<h1>Can coding be fun?</h1>
<p>The more you code the better you become</p>
</div>

<div>
<h2>Coding is fun</h2>
<p>It is always better when you have fun coding</p>
</div>

</main>

<h1>Bir web sayfasında yalnızca bir öğeye sahip olmak, Arama Motoru Optimizasyonu (SEO) için hayati önem taşır. Arama motorlarının bir web sayfasının neyle ilgili olduğunu anlamasına yardımcı olur (bir web sayfasının ana fikri).  

HTML'de başlık seviyelerini atlamayın

<h1>Başlık etiketlerini kullanırken <h2>, şuradan şuraya vb. arasında ilerlemek hayati önem <h3>taşır <h4>...

Başlık etiketlerini kullanırken kullanmayın <h1>ve ardından atlayın . <h3>Başlık düzeylerini atladığınızda, ekran okuyucu kullanan web ziyaretçilerinin web sayfanızın içeriğini anlaması zordur.

Ekran okuyucu, web siteleri veya uygulamalar gibi dijital içeriğe ses veya dokunma yoluyla erişme ve bunlarla etkileşim kurma konusunda zorluk yaşayan kişilere yardımcı olan bir teknolojidir. Ekran okuyucuların ana kullanıcıları, kör veya çok sınırlı görüşe sahip kişilerdir.  

Ekran okuyuculara yönelik küçük bir tanıtımı buradan okuyabilirsiniz .

Bunu yapma ⬇️:

<h1>Coding is fun</h1>
<h3>It is always better when you have fun coding</h3>
</h5>

Bunun yerine bunu yapın ⬇️:

<h1>Can coding be fun?</h1>
<h2>The more you code the better you become</h2>
<h3>Coding is fun</h3>

HTML'deki resimlerinize resim yazısı eklemek için şekil öğesini kullanın

<figure>Resimlerinize altyazı eklerken öğeyi kullanmanız önerilir . <figcaption>Öğenin çalışması için öğeyle birlikte kullanılması önemlidir <figure>.

Bunu yapma ⬇️:

<div>
<img src=“a-man-coding.jpg” alt=“A man working on his computer”>
<p>This is a picture of a man working on his computer</p>
</div>

Yukarıdaki örnek beklendiği gibi çalışacaktır, ancak bunun için en iyi yol değildir. Resmin yüklenemediği bir durumda , ekranda gösterilen altmetin ve öğe üzerindeki metin olacaktır. Ekran okuyucu kullanan bir web ziyaretçisinin ve metin <p>arasındaki farkı anlaması zor olacaktır .<p>alt

Kodunuzun çalışıyor olmasının en iyi uygulamaları takip ettiğiniz anlamına gelmediğini her zaman aklınızda bulundurun.

Bunun yerine bunu yapın ⬇️:

<figure>
<img src=“a-man-coding.jpg” alt=“A man working on his computer”>
<figcaption> This is a picture of a man working on his computer</figcaption>
</figure>

Yukarıdaki örnek, resimlerinize resim yazısı eklemenin en iyi yoludur.

Resimlerinize şu şekilde altyazı eklemek önemlidir:

  • Arama motoru optimizasyonu: Görsellerinizi arama motorlarında bulmak daha kolaydır.
  • Ekran okuyucu kullanan web ziyaretçilerinin web sayfanızın içeriğini anlaması daha kolay olacaktır.

Üstbilgi ve altbilgi oluşturmak için div'leri kullanmayın - bunun yerine anlamsal öğeler kullanın

HTML semantik öğeleri, bir web sayfasında bir belgenin yapısını daha anlamlı bir şekilde işaretler. Web sayfanızın düzgün bir şekilde birleştirilmesi için HTML anlamsal öğelerini kullanmak en iyi uygulamadır.

<divs>HTML semantiği yerine kullanmaktan kaçının . <div>Web sayfanızda üstbilgileri ve altbilgileri göstermek için öğeler kullanmayın . Bunun yerine semantik <header>ve <footer>öğeleri kullanın.

<header>Öğe, gezinmeyi veya web sayfasının açılış bölümünü gösterir .

<footer>Öğe, web sayfasıyla ilgili telif hakkı bilgilerini veya gezinme bağlantılarını gösterir .

Bunu yapma ⬇️:

<div class="header">
<a href="index.html">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>

<div class="footer">
<a href="index.html">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>

Yukarıdaki örnekte, <div>etiketi ve için kapsayıcı olarak <header>kullandık <footer>. Bu şekilde kodlama işe yarayacaktır, ancak aynı hedefe ulaşacak olsanız da, bu en iyi uygulama değildir.

Bunun yerine bunu yapın ⬇️:

<header>
<h1></h1>
</header>

<footer>
<a href="index.html">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</footer>

Yukarıdaki örnek, web sayfanıza ekleme yapmanın en iyi <footers>yoludur <headers>.

HTML anlamsal öğeleri eklemek <footer>ve kullanmak önemlidir çünkü:<header>

  • Sizin için anlamsal öğelerin kullanılması headerve footerkodunuzun okunmasını kolaylaştırır.

  • Web ziyaretçileri için daha iyi bir kullanıcı deneyimi sağlar. Ekran okuyucu kullanan web ziyaretçilerinin web sayfanızın içeriğini anlaması daha kolay olacaktır.

Bir web sayfasındaki metinleri kalın ve italik kullanmaktan <b>ve kullanmaktan kaçının<i>

ve etiketleri aynı zamanda kalın ve italik etiket olarak da bilinir <b>. <i>Her ikisi de bir web sayfasındaki bir metindeki kelimeleri vurgulamak için kullanılır.

Kalın ve italikler için ve kullanmamalısınız çünkü anlamsal anlamları <b>yoktur . CSS özelliğini <i>kullanın veya bunun yerine ve etiketlerini kullanın.font-weight<strong><em>

<strong>Bir web sayfasındaki bir metni önemli kılmak için etiketi kullanırsınız . Bir web sayfasındaki bir metni vurgular veya kalınlaştırır. etiketi , <em>bir web sayfasındaki metni vurgular. Ayrıca metni <i>etiket gibi italik olarak görüntüler.

Bunu yapma ⬇️:

<p><i>Code at your own pace</i><p>

<p><b>code at your own pace</b><p>

Görüntülenen metinler, yukarıdaki örnekte kalın ve italik yazılacaktır. Bir ekran okuyucu kullanan web kullanıcısı için hiçbir önemi olmayacaktır. Semantik bir anlamı yoktur.

HTML5 spesifikasyonu, <b>ve <i>etiketlerinin yalnızca başka bir etiket yoksa son çare olarak kullanılması gerektiğini söyler .

Bunun yerine bunu yapın ⬇️:

 <p><strong>Code at your own pace</strong><p>

<p><em>code at your own pace</em><p>

Blok düzeyinde öğeyi satır içi öğelerin içine yerleştirmeyin

Blok düzeyindeki öğeler, bir web sayfasında yeni bir satırda başlar. Varsayılan olarak, bir web sayfasında satırın başından sonuna kadar uzanırlar. CSS kullanmadan bir blok öğesine daha fazla satır içi içerik ekleyemezsiniz.

, ve öğeleri <p>, blok düzeyinde bir öğenin örneklerinden bazılarıdır.<h1>-<h6><div>

Satır içi öğe, bir web sayfasındaki en küçük alanı kapsar. Bir web sayfasında yeni bir satırda başlamazlar.

, ve öğeleri <span>, satır içi öğelerin örneklerinden bazılarıdır.<em><a>

Blok öğelerini satır içi öğelerin içine yerleştiremezsiniz.

Bunu yapma ⬇️:

<a href="#" >
    
    <p> Visit freecodecamp </p>
    
</a>

Blok düzeyinde bir öğe olduğu ve satır içi bir öğe olduğu için bir öğenin <p>içine saramazsınız .<a><p><a>

Bunun yerine bunu yapın ⬇️:

<p>
Visit <a href="www.freecodecamp. org" target="_blank">FreecodeCamp</a> 
to learn Javascript
</p>

Yukarıdaki örnek, satır içi öğeleri blok düzeyinde bir öğenin içine yerleştirmenin en iyi yoludur.

Şunu vurgulamakta yarar var:

  • Blok düzeyindeki öğe, bir satır içi öğenin içine yerleştirilemez.
  • Satır içi öğe, blok düzeyinde bir öğenin içine yerleştirilebilir.
  • Satır içi ve blok düzeyindeki öğe, blok düzeyindeki öğenin içine yerleştirilebilir.

Sadece kısa bir not: yukarıdaki örnekte iç içe, içeri yerleştirmek anlamına gelir. Yani iç içe olamaz derken, içine yerleştirilemeyeceği gerçeğinden bahsediyorum.

Öğeleri yerleştirmek için kullanılan bu üç basit kuralı anladığınızı umuyorum.

CSS kullanarak blok düzeyindeki öğeleri satır içi öğelere dönüştürmek ve bunun tersi de mümkündür. Blok düzeyinden satır içi öğeye dönüştürmek için display: inline-blockve kullanın .display: inline.