HTML5 Kodlama Kuralları ve Stil Kılavuzu!
HTML5 Kodlama Kuralları ve Stil Kılavuzu!

HTML5 Kodlama Kuralları

HTML5 Kodlama Kuralları. Web geliştiricileri genellikle HTML’de kullanılacak kodlama stili ve sözdizimi konusunda kararsızdır.

2000 ve 2010 arasında, birçok web geliştiricisi HTML’den XHTML’ye dönüştü.

XHTML ile, geliştiriciler geçerli ve “iyi biçimlendirilmiş” kod yazmaya zorlandı.

Kod doğrulaması söz konusu olduğunda HTML5 biraz daha özensizdir.

Stilin tutarlı kullanımı, başkalarının HTML’nizi anlamasını kolaylaştırır.

Gelecekte, XML okuyucular gibi programlar HTML’nizi okumak isteyebilir.

İyi biçimlendirilmiş bir “XHTML’ye yakın” sözdizimi kullanmak akıllı olabilir.

Kodunuzu her zaman düzenli, temiz ve iyi biçimlendirilmiş halde tutun.

HTML5 Kodlama Kuralları için Doğru Belge Türünü Kullanın

Belge türünü her zaman belgenizdeki ilk satır olarak bildirin:

<!DOCTYPE html>

Küçük harfli etiketlerle tutarlılık istiyorsanız şunları kullanabilirsiniz:

<!doctype html>

HTML5 Kodlama Kuralları için Küçük Harf Eleman Adları Kullan

HTML5, öğe adlarında büyük ve küçük harflerin karıştırılmasını sağlar.

Küçük harf öğe adlarını kullanmanızı öneririz, çünkü:

  • Büyük ve küçük harf adlarını karıştırmak çok sıkıntı oluşturabiliyor.
  • Geliştiriciler normalde küçük harfli adlar kullanır (XHTML’deki gibi)
  • Küçük harf yazmak daha kolaydır

Kötü Kullanım:

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

Çok Kötü Kullanım:

<Section>
  <p>This is a paragraph.</p>
</SECTION>

İyi ve Tutarlı Kullanım:

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

Tüm HTML Öğelerini Kapat

HTML5’te tüm öğeleri (örneğin <p>öğe) kapatmak zorunda değilsiniz .

Tüm HTML öğelerini kapatmanızı öneririz.

Kötü Kullanım:

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

İyi Kullanım:

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

Boş HTML Öğelerini Kapat

HTML5’te boş öğeleri kapatmak isteğe bağlıdır.

Normal Kullanım:

<meta charset="utf-8">

Tavsiye Edilen Kullanım:

<meta charset="utf-8" />

Normal kullanımda boş etiketi kapatmamak size sorun oluşturmaz ancak, XHTML ve XML’de eğik çizgi (/) GEREKLİDİR.

XML yazılımının sayfanıza erişmesini bekliyorsanız, eğik çizgiyi korumak iyi bir fikirdir! ZORUNLUDUR!

Özellik Adlarında Küçük Harf Kullan

HTML5, özellik adlarında büyük ve küçük harflerin karıştırılmasına izin verir.

Küçük harf özellik adlarını kullanmanızı öneririz, çünkü:

  • Büyük ve küçük harf adlarını karıştırmak sorun oluşturur.
  • Geliştiriciler normalde küçük harfli adlar kullanır (XHTML’deki gibi)
  • Küçük harf yazmak daha kolaydır

Kötü Kullanım:

<div CLASS="menu">

İyi Kullanım:

<div class="menu">

Alıntı Özellik Değerleri

HTML5, tırnak işaretleri olmadan özellik değerlerine izin verir.

Özellik değerlerini alıntılamanızı öneririz, çünkü:

  • Geliştiriciler normalde özellik değerlerini (XHTML’de olduğu gibi) alıntılar
  • Alıntılanan değerlerin okunması daha kolaydır
  • Değer boşluk içeriyorsa tırnak işareti KULLANMALISINIZ

Çok Kötü Kullanım:

Değer boşluk içerdiğinden bu çalışmaz:

<table class=table striped>

Kötü Kullanım:

<table class=striped>

İyi Kullanım:

<table class="striped">

Görüntü Nitelikleri

altÖzniteliğini her zaman görüntülere ekleyin. Bu özellik, bir nedenden dolayı görüntü gösterilemediğinde önemlidir.

Ayrıca, her zaman resim genişliğini ve yüksekliğini tanımlayın.

Tarayıcı yüklemeden önce görüntü için yer ayırabildiğinden sitenizin açılma hızını arttırır.

Kötü Kullanım:

<img src="html5.gif">

İyi Kullanım:

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

Boşluklar ve Eşittir İşareti

HTML5 eşittir işareti etrafındaki boşluklara izin verir. Ancak, boş alanın okunması zaman kaybıdır ve varlıkları birlikte daha iyi gruplandırır.

Kötü Kullanım:

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

İyi Kullanım:

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

HTML5 Kodlama Kurallarıiçin Uzun Kod Satırlarından Kaçının!

Bir HTML düzenleyicisi kullanırken, HTML kodunu okumak için sağa ve sola kaydırmak uygun değildir.

80 karakterden uzun kod satırlarından kaçının.

Boş Satırlar ve Girinti

Sebepsiz boş satır eklemeyin.

Okunabilirlik için büyük veya mantıksal kod bloklarını ayırmak üzere boş satırlar ekleyin.

Okunabilirlik için iki boşluk girinti ekleyin. Sekme tuşunu kullanmayın.

Gereksiz boş çizgiler ve girinti kullanmayın. Her öğeye girinti eklemek gerekli değildir:

Gereksiz Kullanım:

<body>

  <h1>Famous Cities</h1>

  <h2>Tokyo</h2>

  <p>
    Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.
    It is the seat of the Japanese government and the Imperial Palace,
    and the home of the Japanese Imperial Family.
  </p>

</body>

Daha İyi Kullanım;

<body>

<h1>Famous Cities</h1>

<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.</p>

</body>

Tablo Örneği:

<table>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>A</td>
    <td>Description of A</td>
  </tr>
  <tr>
    <td>B</td>
    <td>Description of B</td>
  </tr>
</table>

Liste Örneği:

<ul>
  <li>London</li>
  <li>Paris</li>
  <li>Tokyo</li>
</ul>

<html> ve <body> etiketlerini atlıyor musunuz?

HTML5’te <html>etiket ve <body>etiket atlanabilir.

Aşağıdaki kod HTML5 olarak doğrulanacaktır:

Örneğin:

<!DOCTYPE html>
<head>
  <title>Page Title</title>
</head>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

Ancak <html>ve <body>etiketinin atlanmasını önermiyoruz .

<html>Elemanı, belge köküdür. Sayfa dilini belirlemek için önerilen yer:

<!DOCTYPE html>
<html lang="en-US">

Bir dil bildirimi erişilebilirlik uygulamaları (ekran okuyucular) ve arama motorları için önemlidir.

<html> ve <body> etiketlerini atlamak eski tarayıcılarda (IE9) hatalara neden olabilir.

<head> etiketini atlıyor musunuz?

HTML5’te <head> etiketini de atlayabilirsiniz.

Varsayılan olarak, tarayıcılar <body> öğesinden önce tüm öğeleri varsayılan <head> etiketine ekler.

<head>Etiketi atlayarak HTML’nin karmaşıklığını azaltabilirsiniz :

<!DOCTYPE html>
<html>
<title>Page Title</title>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>

</html>

Ancak, <head>etiketi atlamayı önermiyoruz .

Etiketleri atlamak web geliştiricilerine aşina değildir. Bir kılavuz olarak oluşturulması için zamana ihtiyaç vardır.

HTML5 Kodlama Kuralları için Meta Veriler

<title>Elemanı HTML5’te gereklidir. Başlığı olabildiğince anlamlı hale getirin:

<title>HTML5 Syntax and Coding Style</title>

Doğru yorumu ve doğru arama motoru indekslemesini sağlamak için, dil ve karakter kodlaması bir belgede mümkün olduğunca erken tanımlanmalıdır:

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Syntax and Coding Style</title>
</head>

HTML5 Kodlama Kuralları için Viewport’u Ayarlama

HTML5, web tasarımcılarının <meta>etiket üzerinden görünüm alanı üzerinde kontrol sahibi olmalarını sağlayan bir yöntem sundu .

Görünüm, kullanıcının bir web sayfasının görünür alanıdır. Cihaza göre değişir ve cep telefonunda bilgisayar ekranından daha küçük olacaktır.

<meta>Tüm web sayfalarınıza aşağıdaki görünüm alanı öğesini eklemelisiniz :

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Bir <meta>görünüm alanı öğesi, tarayıcıya sayfanın boyutlarını ve ölçeklendirmesini nasıl kontrol edeceğiniz konusunda talimatlar verir.

Width = aygıt genişliği bölümü, aygıtın ekran genişliğini takip etmek için sayfanın genişliğini ayarlar (aygıta bağlı olarak değişir).

İlk ölçek = 1.0 bölümü, sayfa tarayıcı tarafından ilk yüklendiğinde başlangıç ​​zoom seviyesini ayarlar.

HTML5 Kodlama Kuralları ve Stil Kılavuzu!

HTML Yorumları

Kısa yorumlar aşağıdaki gibi bir satıra yazılmalıdır:

<!-- This is a comment -->

Birden fazla satıra yayılan yorumlar şu şekilde yazılmalıdır:

<!--
  This is a long comment example. This is a long comment example.
  This is a long comment example. This is a long comment example.
-->

İki boşluğa girintilendiyse uzun yorumların gözlemlenmesi daha kolaydır.

Stil Sayfaları

Stil sayfalarına bağlantı oluşturmak için basit sözdizimi kullanın (type özelliği gerekli değildir):

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

Kısa kurallar aşağıdaki gibi sıkıştırılmış olarak yazılabilir:

p.intro {font-family: Verdana; font-size: 16em;}
Uzun kurallar birden çok satıra yazılmalıdır:
body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}
  • Parantez işaretini özellik ile aynı hatta yerleştirin
  • Parantez işaretinden önce bir boşluk kullanın
  • İki girinti boşluğu kullanın
  • Son özellik de dahil olmak üzere her özellik-değer çiftinden sonra noktalı virgül kullanın
  • Yalnızca değer boşluk içeriyorsa değerlerin etrafındaki tırnak işaretlerini kullanın.
  • Kapatma parantezini ön boşluk bırakmadan yeni bir satıra yerleştirin
  • 80 karakterden uzun satırlardan kaçının

HTML’ye JavaScript yükleme

Harici komut dosyalarını yüklemek için basit bir sözdizimi kullanın (type özelliği gerekli değildir):

<script src="myscript.js">

HTML Öğelerine JavaScript ile Erişme

“Düzensiz” HTML stilleri kullanmanın bir sonucu olarak JavaScript hataları oluşabilir.

Bu iki JavaScript ifadesi farklı sonuçlar üretecektir:

var obj = getElementById("Demo")

var obj = getElementById("demo")

Burdaki farklılığın nedeni “demo” ifadesi ile “Demo” ifadesinin ayrı değerleri içermesidir. Küçük ve büyük harfler farklı sonuçlar verebiliyor.

HTML5 Kodlama Kuralları için Küçük Harfli Dosya Adlarını Kullan

Bazı web sunucuları (Apache, Unix) dosya adları konusunda büyük / küçük harfe duyarlıdır: “london.jpg” dosyasına “London.jpg” olarak erişilemez.

Diğer web sunucularına (Microsoft, IIS) büyük / küçük harfe duyarlı değildir: “london.jpg” dosyasına “London.jpg” veya “london.jpg” olarak erişilebilir.

Büyük ve küçük harflerden oluşan bir karışım kullanıyorsanız, son derece tutarlı olmanız gerekir.

Büyük / küçük harfe duyarlı olmayan bir büyük / küçük harfe duyarlı sunucuya geçerseniz, küçük hatalar bile webinizi bozar!

Bu sorunları önlemek için her zaman küçük harfli dosya adları kullanın.

HTML5 Kodlama Kuralları için Dosya uzantıları

HTML dosyalarının .html veya .htm uzantısı olmalıdır.

CSS dosyalarının .css uzantısı olmalıdır .

JavaScript dosyalarının .js uzantısı olmalıdır .

.Htm ve .html Arasındaki Farklar

.Htm ve .html uzantıları arasında fark yoktur. Her ikisi de herhangi bir web tarayıcısı veya web sunucusu tarafından HTML olarak değerlendirilecektir.

Farklılıklar kültüreldir:

.htm, sistemin uzantıları 3 karakterle sınırladığı erken DOS sistemlerinin “kokusunu alır”.

.html bu sınırlamaya sahip olmayan Unix işletim sistemlerinin “kokusunu alır”.

Teknik Farklılıklar

URL bir dosya adı belirtmediğinde (https://www.ArmyYazilim.com/css/ gibi), sunucu varsayılan bir dosya adı döndürür. Sık kullanılan varsayılan dosya adları index.html, index.htm, default.html ve default.htm’dir.

Sunucunuz varsayılan dosya adı olarak yalnızca “index.html” ile yapılandırılmışsa, dosyanızın “index.htm” değil “index.html” olarak adlandırılması gerekir.

Ancak, sunucular birden fazla varsayılan dosya adıyla yapılandırılabilir ve normalde gerektiği kadar varsayılan dosya adı ayarlayabilirsiniz.

Her neyse, HTML dosyalarının tam uzantısı .html’dir ve kullanılmaması için hiçbir neden yoktur.

İlginizi çekebilir…

WordPress Kişisel Blog Temaları! (Ücretli – Ücretsiz)

Bu makaleyi beğendiyseniz, lütfen WordPress video eğiticileri için YouTube Kanalımıza abone olun . Bizi Twitter ve İnstagram‘da da bulabilirsiniz …

HTML

“HTML5 Kodlama Kuralları ve Stil Kılavuzu!” için 5 cevap

  1. Berk Gül dedi ki:

    Bu kuralların tümüne uymakta zor.

  2. cem acar dedi ki:

    Kaliteli kısa ve iyi makale. Web yazılım işine yeni başlayanlar için,kolay ve anlaşılır bir çalışma olmuş. Tebrikler

  3. Ziya Dökülmez dedi ki:

    Bu kurallar gerçekten çok öenmli seo açısından.👍

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir