HTML(5) Tarz Rehberi ve Kod Anlaşmaları

HTML 代码约定

web 开发者常常不确定在 HTML 中使用的代码样式和语法。

在 2000 年至 2010 年之间，许多 web 开发者从 HTML 转换为 XHTML。

通过 XHTML，开发者不得不编写有效的“格式良好的”代码。

HTML5 在代码验证时会更宽松一点。

通过 HTML5，您必须创建属于自己的最佳实践、样式指南和代码约定.

智能且有未来保证

对样式的合乎逻辑的使用，可以令其他人更容易理解和使用您的 HTML。

在未来，诸如 XML 阅读器之类的程序，也许需要阅读您的 HTML。

使用格式良好的“近似 XHTML 的”语法，能够更智能。

Açıklama:请始终保持您的样式智能、整洁、纯净、格式良好。

请使用正确的文档类型

请始终在文档的首行声明文档类型：

<!DOCTYPE html>

如果您一贯坚持小写标签，那么可以使用：

<!doctype html>

请使用小写元素名

HTML5 允许在元素名中使用混合大小写字母。

我们推荐使用小写元素名：

  • 混合大小写名称并不好
  • 开发者习惯使用小写名（比如在 XHTML 中）
  • 小写更起来更纯净
  • 小写更易书写

不太好：

<SECTION> 
  <p>Bu bir paragraf.</p>
</SECTION>

很糟糕：

<Section> 
  <p>Bu bir paragraf.</p>
</SECTION>

还不错：

<section> 
  <p>Bu bir paragraf.</p>
</section>

关闭所有 HTML 元素

在 HTML5 中，您不必关闭所有元素（例如 <p> 元素）。

我们建议关闭所有 HTML 元素：

Görünümü kötü:

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

Görünümü iyi:

<section>
  <p>Bu bir paragraf.</p>
  <p>Bu bir paragraf.</p>
</section>

Boş HTML elementlerini kapatma

HTML5'te, boş HTML elementlerini kapatmak seçeneklidir.

Bu şekilde de izin verilir:

<meta charset="utf-8">

Bu şekilde de izin verilir:

<meta charset="utf-8" />

XHTML ve XML'de tırnak (/) zorunludur.

Eğer XML yazılımının sayfanıza erişmesini bekliyorsanız, bu alışkanlığı sürdürmek iyi bir fikirdir.

Küçük harf özellik adlarını kullanın

HTML5, büyük-küçük harf karışık özellik adlarına izin verir.

Kullandığımız gibi küçük harf özellik adlarını öneririz:

  • Karışık özellik adları iyi değildir
  • Geliştiriciler küçük harf özellik adlarını kullanma alışkanlığına sahiptir (örneğin, XHTML'de)
  • Küçük harf özellik adları durumuna göre daha saf görünüyor
  • Küçük harf özellik adları daha kolay yazılır

Görünümü kötü:

<div CLASS="menu">

Görünümü iyi:

<div class="menu">

Özellik değerlerine tırnak ekleyin

HTML5, tırnak kullanmadan özellik değerlerine izin verir.

Önerdiğimiz gibi, özellik değerlerine tırnak ekleyin:

  • Eğer özellik değeri değer içeriyorsa, gerekli olanları kullanın:
  • Karışık stiller kesinlikle kötüdür
  • Cümlenin içindeki değerler daha kolay okunur

Bu özellik değeri geçersizdir, çünkü değerde boşluk içerir:

<table class=table striped>

Bu şekilde geçerlidir:

<table class="table striped">

Gerekli özellikler

Her zaman resimlere alt Özellikler. Resim görüntülenemezse bu özellik önemlidir.

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

Her zaman resim boyutunu tanımlayın. Bunu yaparsanız, tarayıcı resmin yüklenmeden önce alan ayırır, bu da parlamayı azaltır.

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

Boşluklar ve eşittir

Eşittir işaretinin her iki tarafındaki boşluk yasaldır:

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

Ama boşluklarsız daha kolay okunabilir Ama space-less daha kolay okunabilir ve grupları daha iyi bir araya getirir:

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

Uzun kod satırlarından kaçının

HTML düzenleyici kullanırken, HTML kodunu okumak için sol-sağ kaydırmak oldukça zor.

Lütfen kod satırlarını 80 karakterden fazla olmamak üzere en azından kullanmayın.

Boş satırlar ve indent

Boş satırları gereksiz yere artırmayın.

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

Okunabilirliği artırmak için iki boşluk indent kullanın. TAB kullanmayın.

Lütfen gereksiz boş satırlar ve indirmeler kullanmayın. Kısa ve ilgili projeler arasında boş satır kullanmak gerekli değildir, aynı zamanda her bir unsuru indent etmek de gerekli değildir:

Gerekli değil:

<body>
  <h1>Ünlü Şehirler</h1>
  <h2>Tokyo</h2>
  <p>
    Tokyo, Japonya'nın başkenti, Büyük Tokyo Bölgesi'nin merkezi.
    dünyanın nüfusu en yoğun metropol bölgesidir.
    Japon hükümetinin ve İmparator Sarayı'nın oturduğu yer.
    ve Japon İmparator Ailesinin evi.
  </p>
</body>

Daha iyi:

<body>
<h1>Ünlü Şehirler</h1>
<h2>Tokyo</h2>
<p>
Tokyo, Japonya'nın başkenti, Büyük Tokyo Bölgesi'nin merkezi.
dünyanın nüfusu en yoğun metropol bölgesidir.
Japon hükümetinin ve İmparator Sarayı'nın oturduğu yer.
ve Japon İmparator Ailesinin evi.
</p>
</body>

Tablo örneği:

<table>
  <tr>
    <th>Ad</th>
    <th>Açıklama</th>
  <tr>
  <tr>
    <td>B</td>
    <td>A</td>
  <tr>
  <tr>
    <td>A</td>
    <td>B</td>
  <tr>
</table>

Liste örneği:

<ol>
  <li>LondonA</li>
  <li>Paris</li>
  <li>Tokyo</li>
</ol>

<html> ve <body> atlanabilir mi?

HTML5 standartlarında, <html> ve <body> etiketleri atlanabilir.

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

Örnek

<!DOCTYPE html>
<head>
  <title> Sayfa Başlığı </title>
</head>
<h1>Bu bir başlık.</h1>
<p>Bu bir paragraf.</p>

Kişisel olarak deneyin

<html> ve <body> etiketlerini atlamamızı tavsiye etmiyoruz.

<html> etiketi metnin kök etiketidir. Sayfa dilini belirlemek için ideal bir konumdadır.

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

Erişilebilir uygulama (ekran okuyucu) ve arama motorları için dil beyanı önemlidir.

<html> veya <body> atlamak DOM ve XML yazılımlarının çökmesine neden olabilir.

<body> atlamak eski tarayıcılar (IE9)de hatalara neden olabilir.

<head> atlanabilir mi?

HTML5 standartlarında, <head> etiketi de atlanabilir.

Varsayılan olarak, tarayıcı <body> öncesi tüm unsurları varsayılan <head> unsuru olarak ekler.

<head> etiketini atlamak, HTML'nin karmaşıklığını azaltmanıza olanak tanır:

Örnek

<!DOCTYPE html>
<html>
<title> Sayfa Başlığı </title>
<body>
  <h1>Bu bir başlık.</h1>
  <p>Bu bir paragraf.</p>
</body>
</html>

Kişisel olarak deneyin

Açıklama:Web geliştiricileri için etiketleri atlamak bir yabancıdır. Kurallar oluşturmak zaman alır.

Meta Veri

<title> elementi HTML5'te zorunludur. Mümkün olduğunca anlamlı başlıklar oluşturun.

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

Düzenli bir açıklamaya ve doğru arama motoru indekslenmesine sağlamak için, belgede dil ve karakter kodlaması tanımlaması en erken zamanda yapılmalıdır:

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

HTML Açıklamaları

Kısa açıklamalar tek bir satırda yazılmalıdır ve <!-- ardından bir boşluk, --> öncesinde bir boşluk eklenmelidir:

<!-- This is a comment -->

Uzun açıklamalar birden fazla satıra yayılmışsa,独立的行中的 <!-- ve --> ile 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. This is a long comment example. This is a long comment example.
-->

Uzun açıklamalar iki boşlukla içe alınarak daha kolay gözlemlenebilir.

Stil Tablosu

Stil tablosunu bağlamak için basit dil kullanın (type özelliği zorunlu değildir):

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

Kısa kurallar bir satıra sıkıştırılabilir, örneğin:

p.into {font-family:"Verdana"; font-size:16em;}

Uzun kurallar birden fazla satıra bölünmelidir:

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}
  • Açılış parantezi ve seçici aynı satırda yer almalıdır
  • Açılış parantezi öncesinde bir boşluk kullanın
  • İki karakterlik daraltma kullanın
  • Her özellik ve değeri iki boşlukla ayırın
  • Her virgül veya noktalı virgülün ardından boşluk kullanın
  • Her özellik değer çifti (sonuncusu da dahil) ardından noktalı virgül kullanın
  • Değerler arasında boşluk içeriyorsa yalnızca çift tırnak kullanarak değerleri sarmalayın
  • Kapanış paranteziyi yeni bir satıra yerleştirin, önceki satırda boşluk kullanmayın
  • Her satırın 80 karakterden fazla olmamasına dikkat edin

Açıklama:Virgül veya noktalı virgülün ardından boşluk eklemek, tüm yazım kurallarının ortak kuralıdır.

HTML'de JavaScript Yükleme

Dışarıdan scriptleri yüklerken basit dil kullanın (type özelliği gereksizdir):

<script src="myscript.js">

HTML Elemanlarına JavaScript ile Erişim

“Düzensiz” HTML stillerinin sonuçları, JavaScript hatalarına neden olabilecektir.

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

var obj = getElementById("Demo")
var obj = getElementById("demo")

Kişisel olarak deneyin

Mümkünse, HTML'de (JavaScript ile) aynı adlandırma anlaşmasını kullanın

JavaScript Stili Kılavuzuna bakın

Küçük harf dosya adları kullanın

Çoğu web sunucusu (Apache, Unix) dosya adlarının büyük/küçük harfe duyarlıdır:

london.jpg olarak London.jpg'ye erişilemez.

Diğer web sunucuları (Microsoft, IIS) büyük/küçük harfe duyarlı değil:

london.jpg veya London.jpg olarak London.jpg'ye erişebilirsiniz.

Karışık büyük/küçük harf kullanıyorsanız, yüksek bir tutarlılık sağlamanız gerekir.

Büyük/küçük harfe duyarlı olmayan bir sunucudan büyük/küçük harfe duyarlı bir sunucuya geçtiğinizde, bu küçük hatalar web sitenizi bozabilir.

Bu sorunları önlemek için her zaman küçük harf dosya adlarını kullanın (mümkünse).

Dosya Genişletimleri

HTML dosya adları, genişletim adı .html kullanmalıdır .htmldeğil .htm)

CSS dosyaları, genişletim adı .css kullanmalıdır .css.

JavaScript dosyaları, genişletim adı .js kullanmalıdır .js.