HTML Stil Kılavuzu
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şturmak için bazı yönergeler ve ipuçları.
Her Zaman Belge Türünü Bildirin
Belge türünü her zaman belgenizdeki ilk satır olarak belirtin.
HTML için doğru belge türü:
<!DOCTYPE html>
Küçük Harfli Öğe Adlarını Kullan
HTML, öğe adlarında büyük ve küçük harflerin karıştırılmasına izin verir.
Ancak, küçük harfli öğe adlarını kullanmanızı öneririz, çünkü:
- Büyük harf ve küçük harf adlarını karıştırmak kötü görünüyor
- Geliştiriciler normalde küçük harf adları kullanır
- Küçük harf daha temiz görünüyor
- Küçük harf yazmak daha kolaydır
İyi:
<body>
<p>This is a paragraph.</p>
</body>Kötü:
<BODY>
<P>This is a paragraph.</P>
</BODY>Tüm HTML Öğelerini Kapat
<p>HTML'de tüm öğeleri (örneğin öğeyi) kapatmanız gerekmez .
Ancak, aşağıdaki gibi tüm HTML öğelerini kapatmanızı şiddetle öneririz:
İyi:
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>Kötü:
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>Küçük Harfli Özellik Adlarını Kullan
HTML, öznitelik adlarında büyük ve küçük harflerin karıştırılmasına izin verir.
Ancak, küçük harfli öznitelik adlarını kullanmanızı öneririz, çünkü:
- Büyük harf ve küçük harf adlarını karıştırmak kötü görünüyor
- Geliştiriciler normalde küçük harf adları kullanır
- Küçük harf daha temiz görünüyor
- Küçük harf yazmak daha kolaydır
İyi:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>Kötü:
<a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a>Nitelik Değerlerini Daima Alıntı Yap
HTML, tırnak işaretleri olmadan nitelik değerlerine izin verir.
Ancak, öznitelik değerlerinden alıntı yapmanızı öneririz, çünkü:
- Geliştiriciler normalde özellik değerlerini alıntılar
- Alıntılanan değerlerin okunması daha kolaydır
- Değer boşluk içeriyorsa tırnak işaretleri kullanmanız ZORUNLUDUR
İyi:
<table
class="striped">Kötü:
<table class=striped>Çok kötü:
Değer boşluk içerdiğinden bu işe yaramaz:
<table class=table striped>Görseller için her zaman alt, genişlik ve yükseklik belirtin
altHer zaman resimler için özniteliği belirtin . Bu özellik, herhangi bir nedenle görüntü görüntülenemiyorsa önemlidir.
widthAyrıca, her zaman görüntülerin ve'yi tanımlayın
height. Bu, titremeyi azaltır, çünkü tarayıcı yüklemeden önce görüntü için yer ayırabilir.
İyi:
<img
src="html5.gif" alt="HTML5" style="width:128px;height:128px">Kötü:
<img
src="html5.gif">Boşluklar ve Eşit İşaretler
HTML, eşittir işaretleri etrafındaki boşluklara izin verir. Ancak boşluksuz okumak daha kolaydır ve varlıkları birlikte daha iyi gruplandırır.
İyi:
<link rel="stylesheet" href="styles.css">Kötü:
<link
rel = "stylesheet" href = "styles.css">Uzun Kod Satırlarından Kaçını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ş Çizgiler ve Girinti
Nedensiz boş satırlar, boşluklar veya girintiler eklemeyin.
Okunabilirlik için büyük veya mantıksal kod bloklarını ayırmak için boş satırlar ekleyin.
Okunabilirlik için iki boşluk girin. Sekme tuşunu kullanmayın.
İyi:
<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>
Kötü:
<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>
İyi 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>
İyi Liste Örneği:
<ul>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>
<title> Öğesini Asla Atlama
<title>Öğe HTML'de gereklidir .
Bir sayfa başlığının içeriği, arama motoru optimizasyonu (SEO) için çok önemlidir! Sayfa başlığı, arama sonuçlarında sayfaları listelerken sıraya karar vermek için arama motoru algoritmaları tarafından kullanılır.
<title>öğe :
- tarayıcı araç çubuğunda bir başlık tanımlar
- Sık kullanılanlara eklendiğinde sayfa için bir başlık sağlar
- arama motoru sonuçlarında sayfa için bir başlık görüntüler
Bu nedenle, başlığı mümkün olduğunca doğru ve anlamlı hale getirmeye çalışın:
<title>HTML
Style Guide and Coding Conventions</title>
<html> ve <body> atlanıyor mu?
<html>Bir HTML sayfası ve
<body>etiketleri olmadan doğrulanır :
Örnek
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<html>Ancak, her zaman ve
<body>etiketlerini eklemenizi şiddetle tavsiye ederiz !
Atlamak <body>, eski tarayıcılarda hatalara neden olabilir.
Atlamak <html>ve <body>
ayrıca DOM ve XML yazılımlarını çökertebilir.
<head> atlanıyor mu?
HTML <head> etiketi de atlanabilir.
Tarayıcılar, öncesindeki tüm öğeleri <body>varsayılan bir <head>
öğeye ekler.
Örnek
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
<head>Ancak, etiketi kullanmanızı öneririz .
Boş HTML Öğeleri Kapatılsın mı?
HTML'de boş öğeleri kapatmak isteğe bağlıdır.
İzin verilmiş:
<meta
charset="utf-8">
Ayrıca İzin Verilir:
<meta charset="utf-8" />
XML/XHTML yazılımının sayfanıza erişmesini bekliyorsanız, XML ve XHTML'de gerekli olduğundan, kapanış eğik çizgisini (/) tutun.
lang Özniteliğini ekleyin
Web sayfasının dilini belirtmek için her zaman etiketin langiçine özniteliği eklemelisiniz. <html>Bu, arama motorlarına ve tarayıcılara yardımcı olmak içindir.
Örnek
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a
heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Meta Veri
Doğru yorumlamayı ve doğru arama motoru indekslemeyi sağlamak için , bir HTML belgesinde hem dil hem de karakter kodlaması mümkün olduğunca erken tanımlanmalıdır:<meta charset="charset">
<!DOCTYPE html>
<html
lang="en-us">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
Görünüm Alanını Ayarlama
Görünüm alanı, kullanıcının bir web sayfasının görünür alanıdır. Cihaza göre değişir - cep telefonunda bilgisayar ekranından daha küçük olacaktır.
<meta>Tüm web sayfalarınıza aşağıdaki öğeyi eklemelisiniz :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Bu, tarayıcıya sayfanın boyutlarını ve ölçeklendirmesini nasıl kontrol edeceğine dair talimatlar verir.
Parça width=device-width, cihazın ekran genişliğini takip etmek için sayfanın genişliğini ayarlar (cihaza göre değişir).
Parça initial-scale=1.0, sayfa tarayıcı tarafından ilk yüklendiğinde ilk yakınlaştırma seviyesini ayarlar.
Görünüm alanı meta etiketi olmayan bir web sayfası ve görünüm alanı meta etiketine sahip aynı web sayfası örneği :
İpucu: Bu sayfayı bir telefon veya tablet ile geziyorsanız, farkı görmek için aşağıdaki iki bağlantıya tıklayabilirsiniz.
HTML Yorumları
Kısa yorumlar şöyle 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.
-->
Uzun yorumları, iki boşlukla girintili olduklarında gözlemlemek daha kolaydır.
Stil Sayfalarını Kullanma
Use simple syntax for linking to style sheets (the
type attribute is not necessary):
<link rel="stylesheet" href="styles.css">
Short CSS rules can be written compressed, like this:
p.intro {font-family:Verdana;font-size:16em;}
Long CSS rules should be written over multiple lines:
body {
background-color: lightgrey;
font-family: "Arial
Black", Helvetica, sans-serif;
font-size: 16em;
color:
black;
}
- Place the opening bracket on the same line as the selector
- Use one space before the opening bracket
- Use two spaces of indentation
- Use semicolon after each property-value pair, including the last
- Only use quotes around values if the value contains spaces
- Place the closing bracket on a new line, without leading spaces
Loading JavaScript in HTML
Use simple syntax for loading external scripts (the
type attribute is not necessary):
<script src="myscript.js">
Accessing HTML Elements with JavaScript
Using "untidy" HTML code can result in JavaScript errors.
These two JavaScript statements will produce different results:
Example
getElementById("Demo").innerHTML = "Hello";
getElementById("demo").innerHTML
= "Hello";
Visit the JavaScript Style Guide.
Use Lower Case File Names
Some web servers (Apache, Unix) are case sensitive about file names: "london.jpg" cannot be accessed as "London.jpg".
Other web servers (Microsoft, IIS) are not case sensitive: "london.jpg" can be accessed as "London.jpg".
If you use a mix of uppercase and lowercase, you have to be aware of this.
If you move from a case-insensitive to a case-sensitive server, even small errors will break your web!
To avoid these problems, always use lowercase file names!
File Extensions
HTML files should have a .html extension (.htm is allowed).
CSS files should have a .css extension.
JavaScript files should have a .js extension.
Differences Between .htm and .html?
There is no difference between the .htm and .html file extensions!
Both will be treated as HTML by any web browser and web server.
Default Filenames
When a URL does not specify a filename at the end (like "https://www.w3schools.com/"), the server just adds a default filename, such as "index.html", "index.htm", "default.html", or "default.htm".
If your server is configured only with "index.html" as the default filename, your file must be named "index.html", and not "default.html".
However, servers can be configured with more than one default filename; usually you can set up as many default filenames as you want.