Çeviriler: English (en) · 日本語 (ja) · 한국어 (ko) · Türkçe (tr)
HTML'de Örnek Yöntemler
Bakım yapılabilir ve ölçeklenebilir HTML belgeleri yazmak için
- Genel
- DOCTYPE ile başla
- Eskimiş yada geçersiz DOCTYPE kullanmayın
- XML etiketi kullanmayın
- Karakter referanslarını mümkün olduğunca kullanmayın
&
,<
,>
,"
, ve'
karakter referanslarını olduğu gibi kullanmaktan kaçının- Kontrol veya görünmeyen karakterler için sayısal karakter referanslarını kullanın.
- Yorum içeriğinin etrafına boşluk karakteri yerleştirin
- Kapanış etiketini unutmayın
- Boş eleman formatını karıştırmayın
- Etiketlerin ve özelliklerin değerlerinin etrafına boşluk karakteri koymayın
- Büyük küçük karakterleri aynı anda kullanmayın
- Tırnak işaretlerini karıştırmayın
- Özellikleri iki veya daha fazla boşluk ile ayırmayın
- Boolean özellik değerini yazmayın
- Ad alanlarını kullanmayın
- XML özelliklerini kullanmayın
data-*
, Microdata ve RDFa Lite özelliklerini ile ortak özellikleri karıştırmayın- Varsayılan örtülü ARIA gramerini tercih edin
- Kök elemanı
- Metadata'yı belgeleyin
title
elemanı ekleyinbase
elemanı kullanmayın- Bağlantılı kaynakların MIME türünü belirtin
favicon.ico
'ya link vermeyinapple-touch-icon
ekleyin- Alternatif stil sayfalarına
title
ekleyin - URL için
link
kullanın - Belge karakter kodunu belirtin
- Eski karakter kodlama formatını kullanmayın
- İlk önce karakter kodlamasını belirtin
- UTF-8'i kullanın
- CSS için
type
kullanmayın style
etiketinin içeriğini yorum içine almayın- CSS ve JavaScript etiketlerini karıştırmayın
- Bölümler
- İçeriği gruplama
pre
elemandaki satır başı ile başlamayınblockquote
içinde uygun etiket kullanın- Özniteliği doğrudan
blockquote
öğesinin içine dahil etme - Satır başına bir liste öğesi yaz
ol
etiketi içintype
özelliğini kullanın- Diyalog için
dl
kullanmayın figcaption
etiketini,figure
etiketinin ilk veya son çocuğu olarak yerleştirinmain
etiketini kullanındiv
etiketini mümkün olduğu kadar kullanmayın
- Metin düzeyinde anlambilim
- Gruplandırılabilen aynı bağlantıyı bölmeyin
- İndirilebilir kaynağı belirtmek için
download
özelliğini kullanın - Gerekirse
rel
,hreflang
vetype
özelliklerini kullanın - Bağlantı metinlerini amacına uygun yapın
- Uyarı vermek için
em
etiketi kullanmayın s
,i
,b
veu
etiketlerinden mümkün olduğunca kaçınınq
öğesine tırnak koymayınabbr
etiketinetitle
özelliğini ekleyinruby
etiketini detaylandırın- Makine tarafından okunamayacak
time
etiketinedatetime
özelliği ekleyin language-
öneki ile kod diliniclass
etiketi le belirtinkbd
etiketini mümkün olduğu kadar basit tutunspan
etiketinden mümkün olduğunca kaçınınbr
etiketinden sonra satır sonu yapınbr
öğesini yalnızca sunum amacıyla kullanmayın
- Düzenlemeler
- Gömülü içerik
- Tablo verileri
- Formlar
label
etiketini ile form kontrolünü sağlayın- Mümkünse
for
özelliğini kullanmayın input
etiketi için uyguntype
özelliğini kullanıninput type="submit"
elemanınavalue
özelliği ekleyinpattern
özelliği olduğundainput
etiketinetitle
özelliği ekleyin- Etiketleme için
placeholder
özelliğini kullanmayın - Her satıra bir
option
etiketi yazın progress
etiketinemax
özelliği ekleyinmeter
etiketinemin
vemax
özelliği ekleyinlegend
etiketinifieldset
etiketinin ilk çocuğu olarak elemanı olarak oluşturun
- Script ekleme
- Diğer
- Katkıda bulunanlar
- Çeviri Yapanlar
- Lisans
Genel
DOCTYPE ile başla
DOCTYPE standart modu etkinleştirmek için gereklidir.
Yanlış:
<html>
...
</html>
Doğru:
<!DOCTYPE html>
<html>
...
</html>
Eskimiş yada geçersiz DOCTYPE kullanmayın
DOCTYPE artık DTD için değil, basit olsun.
Yanlış:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Doğru:
<!DOCTYPE html>
XML etiketi kullanmayın
XHTML yazmak istediğinize emin misiniz?
Yanlış:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<!DOCTYPE html>
Doğru:
<!DOCTYPE html>
Karakter referanslarını mümkün olduğunca kullanmayın
UTF-8 ile bir HTML belgesi yazarsanız, hemen hemen tüm karakterler (Emoji dahil) doğrudan yazılabilir.
Yanlış:
<p><small>Copyright © 2014 W3C<sup>®</sup></small></p>
Doğru:
<p><small>Copyright © 2014 W3C<sup>®</sup></small></p>
&
, <
, >
, "
, ve '
karakter referanslarını olduğu gibi kullanmaktan kaçının
Bu karakterlerden hatasız bir HTML belgesi için her zaman kaçınılmalıdır.
Yanlış:
<h1>The "&" character</h1>
Doğru:
<h1>The "&" character</h1>
Kontrol veya görünmeyen karakterler için sayısal karakter referanslarını kullanın.
Bu karakterler başka bir karakter için kolayca karıştırılabilir. Ayrıca spec bu karakterler için okunabilir bir isim tanımlamayı da garanti etmez.
Yanlış:
<p>This book can read in 1 hour.</p>
This book can read in 1 hour.
<p>This book can read in 1 hour.</p>
Yorum içeriğinin etrafına boşluk karakteri yerleştirin
Bazı karakterler yorum açıldıktan hemen sonra veya yorum kapatmadan önce kullanılamaz.
Yanlış:
<!--This section is non-normative-->
Doğru:
<!-- This section is non-normative -->
Kapanış etiketini unutmayın
Kapanış etiketini atlamak için bir kural yok.
Yanlış:
<html>
<body>
...
Doğru:
<html>
<body>
...
</body>
</html>
Boş eleman formatını karıştırmayın
Tutarlılık, okunabilirliğin anahtarıdır.
Yanlış:
<img alt="HTML Best Practices" src="/img/logo.png">
<hr />
Doğru:
<img alt="HTML Best Practices" src="/img/logo.png">
<hr>
Etiketlerin ve özelliklerin değerlerinin etrafına boşluk karakteri koymayın
Bunu yapmak için hiçbir sebep yoktur.
Yanlış:
<h1 class=" title " >HTML Best Practices</h1>
Doğru:
<h1 class="title">HTML Best Practices</h1>
Büyük küçük karakterleri aynı anda kullanmayın
Aynı zamanda bir tutarlılık da oluşturur.
Yanlış:
<a HREF="#general">General</A>
Doğru:
<a href="#general">General</a>
Bu da doğru:
<A HREF="#general">General</A>
Tırnak işaretlerini karıştırmayın
Yukarıdaki ile aynı sebepten ötürü.
Yanlış:
<img alt="HTML Best Practices" src='/img/logo.jpg'>
Doğru:
<img alt="HTML Best Practices" src="/img/logo.jpg">
Özellikleri iki veya daha fazla boşluk ile ayırmayın
Garip biçimlendirme kuralınız insanları şaşırtır.
Yanlış:
<input name="q" type="search">
Doğru:
<input name="q" type="search">
Boolean özellik değerini yazmayın
Yazması kolay, değil mi?
Yanlış:
<audio autoplay="autoplay" src="/audio/theme.mp3">
Doğru:
<audio autoplay src="/audio/theme.mp3">
Ad alanlarını kullanmayın
SVG ve MathML bir HTML belgesinde doğrudan kullanılabilir.
Yanlış:
<svg xmlns="http://www.w3.org/2000/svg">
...
</svg>
Doğru:
<svg>
...
</svg>
XML özelliklerini kullanmayın
Sadece HTML belgesi yazıyoruz.
Yanlış:
<span lang="ja" xml:lang="ja">...</span>
Doğru:
<span lang="ja">...</span>
data-*
, Microdata ve RDFa Lite özelliklerini ile ortak özellikleri karıştırmayın
Bir etiket dizesi çok karmaşık olabilir. Bu basit kural, böyle bir etiket dizesini okumak için yardımcı olur.
Yanlış:
<img alt="HTML Best Practices" data-height="31" data-width="88" itemprop="image" src="/img/logo.png">
Doğru:
<img alt="HTML Best Practices" src="/img/logo.png" data-width="88" data-height="31" itemprop="image">
Varsayılan örtülü ARIA gramerini tercih edin
Bazı öğelerin bir HTML belgesinde örtük olarak bir ARIA role
değeri vardır, belirtmenize gerek yoktur.
Yanlış:
<nav role="navigation">
...
</nav>
<hr role="separator">
Doğru:
<nav>
...
</nav>
<hr>
Kök elemanı
lang
özelliği ekleyin
lang
özelliği HTML belgesinin çeviriminin yapılmasına yardımcı olacaktır.
Yanlış:
<html>
Doğru:
<html lang="en-US">
lang
değerini mümkün olduğunca kısa tutun
Japonca yalnızca Japonya'da kullanılır. Yani ülke kodu gerekli değildir.
Yanlış:
<html lang="ja-JP">
Doğru:
<html lang="ja">
data-*
kullanmayın
Mümkün olduğunca Uygun bir özellik de tarayıcılar tarafından doğru bir şekilde ele alınabilir.
Yanlış:
<span data-language="french">chemises</span>
...
<strong data-type="warning">Do not wash!</strong>
Doğru:
<span title="French"><span lang="fr-FR">chemises</span></span>
...
<strong class="warning">Do not wash!</strong>
Metadata'yı belgeleyin
title
elemanı ekleyin
title
değeri, yalnızca tarayıcı tarafından değil, çeşitli uygulamalar tarafından da kullanılır.
Yanlış:
<head>
<meta charset="UTF-8">
</head>
Doğru:
<head>
<meta charset="UTF-8">
<title>HTML Best Practices</title>
</head>
base
elemanı kullanmayın
Mutlak bir yol veya URL, hem geliştiriciler hem de kullanıcılar için daha güvenlidir.
Yanlış:
<head>
...
<base href="/blog/">
<link href="hello-world" rel="canonical">
...
</head>
Doğru:
<head>
...
<link href="/blog/hello-world" rel="canonical">
...
</head>
Bağlantılı kaynakların MIME türünü belirtin
Bu, uygulamanın bu kaynağı nasıl kullandığı hakkında bir ipucudur.
Yanlış:
<link href="/pdf" rel="alternate">
<link href="/feed" rel="alternate">
<link href="/css/screen.css" rel="stylesheet">
Doğru:
<link href="/pdf" rel="alternate" type="application/pdf">
<link href="/feed" rel="alternate" type="application/rss+xml">
<link href="/css/screen.css" rel="stylesheet">
favicon.ico
'ya link vermeyin
Hemen hemen tüm tarayıcılar /favicon.ico
'yu otomatik ve asenkron olarak alır.
Yanlış:
<link href="/favicon.ico" rel="icon" type="image/vnd.microsoft.icon">
Doğru:
<!-- Place `favicon.ico` in the root directory. -->
apple-touch-icon
ekleyin
Dokunma simgesi için varsayılan istek yolu değiştirildi.
Yanlış:
<!-- Hey Apple! Please download `/apple-touch-icon.png`! -->
Doğru:
<link href="/apple-touch-icon.png" rel="apple-touch-icon">
title
ekleyin
Alternatif stil sayfalarına İnsan tarafından okunabilen bir değer, insanların uygun stil sayfasını seçmelerine yardımcı olur.
Yanlış:
<link href="/css/screen.css" rel="stylesheet">
<link href="/css/high-contrast.css" rel="alternate stylesheet">
Doğru:
<link href="/css/screen.css" rel="stylesheet">
<link href="/css/high-contrast.css" rel="alternate stylesheet" title="High contrast">
link
kullanın
URL için Bir href
değeri URL olarak çözülebilir.
Yanlış:
<section itemscope itemtype="http://schema.org/BlogPosting">
<meta content="https://example.com/blog/hello" itemprop="url">
...
</section>
Doğru:
<section itemscope itemtype="http://schema.org/BlogPosting">
<link href="/blog/hello" itemprop="url">
...
</section>
Belge karakter kodunu belirtin
UTF-8 henüz tüm tarayıcılarda varsayılan değil.
Yanlış:
<head>
<title>HTML Best Practices</title>
</head>
Doğru:
<head>
<meta charset="UTF-8">
<title>HTML Best Practices</title>
</head>
Eski karakter kodlama formatını kullanmayın
HTTP başlıkları bir sunucu tarafından belirtilmelidir, basit olmalıdır.
Yanlış:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
Doğru:
<meta charset="UTF-8">
İlk önce karakter kodlamasını belirtin
Spec, karakter kodlamasının dökümanın ilk 1024 bayt içinde belirtilmesini gerektirir.
Yanlış:
<head>
<meta content="width=device-width" name="viewport">
<meta charset="UTF-8">
...
</head>
Doğru:
<head>
<meta charset="UTF-8">
<meta content="width=device-width" name="viewport">
...
</head>
UTF-8'i kullanın
UTF-8 ile Emoji'yi kullanmakta özgürsünüz.
Yanlış:
<meta charset="Shift_JIS">
Doğru:
<meta charset="UTF-8">
type
kullanmayın
CSS için HTML'de, style
etiketinin type
özelliğinin ön tanımlı değeri text/css
'tir.
Yanlış:
<style type="text/css">
...
</style>
Doğru:
<style>
...
</style>
style
etiketinin içeriğini yorum içine almayın
Bu ritüel eski tarayıcı içindir.
Yanlış:
<style>
<!--
...
-->
</style>
Doğru:
<style>
...
</style>
CSS ve JavaScript etiketlerini karıştırmayın
Bazen script
elemanı DOM inşasını engeller.
Yanlış:
<script src="/js/jquery.min.js"></script>
<link href="/css/screen.css" rel="stylesheet">
<script src="/js/main.js"></script>
Doğru:
<link href="/css/screen.css" rel="stylesheet">
<script src="/js/jquery.min.js"></script>
<script src="/js/main.js"></script>
Bu da doğru:
<script src="/js/jquery.min.js"></script>
<script src="/js/main.js"></script>
<link href="/css/screen.css" rel="stylesheet">
Bölümler
body
etiketi ekleyin
Bazen body
etiketi beklenmedik bir pozisyonda bir tarayıcı tarafından tamamlanmaktadır.
Yanlış:
<html>
<head>
...
</head>
...
</html>
Doğru:
<html>
<head>
...
</head>
<body>
...
</body>
</html>
hgroup
etiketini unutun
Bu etiket çok fazla kullanılmıyor.
Yanlış:
<hgroup>
<h1>HTML Best Practices</h1>
<h2>For writing maintainable and scalable HTML documents.</h2>
</hgroup>
Doğru:
<h1>HTML Best Practices</h1>
<p>For writing maintainable and scalable HTML documents.</p>
address
etiketini yalnızca iletişim bilgileri için kullanın
address
sadece e-posta adresi, sosyal ağ hesabı, sokak adresi, telefon numarası veya iletişim kurabileceğiniz bir şey içindir.
Yanlış:
<address>No rights reserved.</address>
Doğru:
<address>Contact: <a href="https://twitter.com/hail2u_">Kyo Nagashima</a></address>
İçeriği gruplama
pre
elemandaki satır başı ile başlamayın
Tarayıcılarda ilk yeni satır yok sayılır, ancak ikinci ve sonraki satırlar oluşturulur.
Yanlış:
<pre>
<!DOCTYPE html>
</pre>
Doğru:
<pre><!DOCTYPE html>
</pre>
blockquote
içinde uygun etiket kullanın
blockquote
bir alıntıdır, yani içeriği bir karakter kümesi değildir.
Yanlış:
<blockquote>For writing maintainable and scalable HTML documents.</blockquote>
Doğru:
<blockquote>
<p>For writing maintainable and scalable HTML documents.</p>
</blockquote>
blockquote
öğesinin içine dahil etme
Özniteliği doğrudan blockquote
içeriği bir alıntıdır.
Yanlış:
<blockquote>
<p>For writing maintainable and scalable HTML documents.</p>
<p>— HTML Best Practices</p>
</blockquote>
Doğru:
<blockquote>
<p>For writing maintainable and scalable HTML documents.</p>
</blockquote>
<p>— HTML Best Practices</p>
Bu da doğru:
<figure>
<blockquote>
<p>For writing maintainable and scalable HTML documents.</p>
</blockquote>
<figcaption>— HTML Best Practices</figcaption>
</figure>
Satır başına bir liste öğesi yaz
Uzuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuun bir satırı okuması çooooooooooooooooooooooooooooooooooooooooooooooooook zordur
Yanlış:
<ul>
<li>General</li><li>The root Element</li><li>Sections</li>...
</ul>
Doğru:
<ul>
<li>General</li>
<li>The root Element</li>
<li>Sections</li>
...
</ul>
ol
etiketi için type
özelliğini kullanın
Bazen yakınlardaki içerikler referans verilir. İşaretçiyi değiştirirseniz
type
özelliği ile kullanırsanız güvende olacaksınız.
Yanlış:
<head>
<style>
.toc {
list-style-type: upper-roman;
}
</style>
</head>
<body>
<ol class="toc">
<li>General</li>
<li>The root Element</li>
<li>Sections</li>
...
</ol>
</body>
Doğru:
<body>
<ol type="I">
<li>General</li>
<li>The root Element</li>
<li>Sections</li>
...
</ol>
</body>
dl
kullanmayın
Diyalog için dl
etiketi, HTML'deki bir ilişkilendirme listesi ile sınırlandırılmıştır.
Yanlış:
<dl>
<dt>Costello</dt>
<dd>Look, you gotta first baseman?</dd>
<dt>Abbott</dt>
<dd>Certainly.</dd>
<dt>Costello</dt>
<dd>Who’s playing first?</dd>
<dt>Abbott</dt>
<dd>That’s right.</dd>
<dt>Costello becomes exasperated.</dd>
<dt>Costello</dt>
<dd>When you pay off the first baseman every month, who gets the money?</dd>
<dt>Abbott</dt>
<dd>Every dollar of it.</dd>
</dl>
Doğru:
<p>Costello: Look, you gotta first baseman?</p>
<p>Abbott: Certainly.</p>
<p>Costello: Who’s playing first?</p>
<p>Abbott: That’s right.</p>
<p>Costello becomes exasperated.</p>
<p>Costello: When you pay off the first baseman every month, who gets the money?</p>
<p>Abbott: Every dollar of it.</p>
figcaption
etiketini, figure
etiketinin ilk veya son çocuğu olarak yerleştirin
Spec, figure
etiketinin ortasındaki figcaption
etiketine izin vermez.
Yanlış:
<figure>
<img alt="Front cover of the “HTML Best Practices” book" src="/img/front-cover.png">
<figcaption>“HTML Best Practices” Cover Art</figcaption>
<img alt="Back cover of the “HTML Best Practices” book" src="/img/back-cover.png">
</figure>
Doğru:
<figure>
<img alt="Front cover of the “HTML Best Practices” book" src="/img/front-cover.png">
<img alt="Back cover of the “HTML Best Practices” book" src="/img/back-cover.png">
<figcaption>“HTML Best Practices” Cover Art</figcaption>
</figure>
main
etiketini kullanın
main
içerikleri kapsamak için kullanılabilir.
Yanlış:
<div id="content">
...
</div>
Doğru:
<main>
...
</main>
div
etiketini mümkün olduğu kadar kullanmayın
div
son çaredir
Yanlış:
<div class="chapter">
...
</div>
Doğru:
<section>
...
</section>
Metin düzeyinde anlambilim
Gruplandırılabilen aynı bağlantıyı bölmeyin
a
etiketi hemen hemen tüm etiketleri sarabilir (form gibi etkileşimli elemanlar hariç)
kontroller ve a
elemanın kendisi).
Yanlış:
<h1><a href="https://whatwg.org/">WHATWG</a></h1>
<p><a href="https://whatwg.org/">A community maintaining and evolving HTML since 2004.</a></p>
Doğru:
<a href="https://whatwg.org/">
<h1>WHATWG</h1>
<p>A community maintaining and evolving HTML since 2004.</p>
</a>
download
özelliğini kullanın
İndirilebilir kaynağı belirtmek için Tarayıcıları bağlı kaynakları depoya indirmeye zorlar.
Yanlış:
<a href="/downloads/offline.zip">offline version</a>
Doğru:
<a download href="/downloads/offline.zip">offline version</a>
rel
, hreflang
ve type
özelliklerini kullanın
Gerekirse Bu ipuçları bağlantılı kaynakların nasıl işleneceğini belirterek uygulamalara yardımcı olur.
Yanlış:
<a href="/ja/pdf">Japanese PDF version</a>
Doğru:
<a href="/ja/pdf" hreflang="ja" rel="alternate" type="application/pdf">Japanese PDF version</a>
Bağlantı metinlerini amacına uygun yapın
Link metni, linklenen kaynağın etiketi olmalıdır.
Yanlış:
<p><a href="/pdf" rel="alternate" type="application/pdf">Click here</a> to view PDF version.</p>
Doğru:
<p><a href="/pdf" rel="alternate" type="application/pdf">PDF version</a> is also available.</p>
em
etiketi kullanmayın
Uyarı vermek için Bu ciddiyettir. Yani, strong
eleman daha uygundur.
Yanlış:
<em>Caution!</em>
Doğru:
<strong>Caution!</strong>
s
, i
, b
ve u
etiketlerinden mümkün olduğunca kaçının
Bu etiketlerin anlambilimi insanlar için çok zordur.
Yanlış:
<i class="icon-search"></i>
Doğru:
<span class="icon-search" aria-hidden="true"></span>
q
öğesine tırnak koymayın
Tırnaklar tarayıcı tarafından sağlanır.
Yanlış:
<q>“For writing maintainable and scalable HTML documents”</q>
Doğru:
<q>For writing maintainable and scalable HTML documents</q>
Bu da doğru:
“For writing maintainable and scalable HTML documents”
abbr
etiketine title
özelliğini ekleyin
Açıklamasını temsil etmenin başka bir yolu yoktur.
Yanlış:
<abbr>HBP</abbr>
Doğru:
<abbr title="HTML Best Practices">HBP</abbr>
ruby
etiketini detaylandırın
Modern tarayıcılarda ruby
etiketi desteği henğz tamamlanmadı.
Yanlış:
<ruby>HTML<rt>えいちてぃーえむえる</ruby>
Doğru:
<ruby>HTML<rp> (</rp><rt>えいちてぃーえむえる</rt><rp>) </rp></ruby>
time
etiketine datetime
özelliği ekleyin
Makine tarafından okunamayacak datetime
özelliği bulunmadığında, time
öğesinin içeriğinin biçimi kısıtlıdır.
Yanlış:
<time>Dec 19, 2014</time>
Doğru:
<time datetime="2014-12-19">Dec 19, 2014</time>
language-
öneki ile kod dilini class
etiketi le belirtin
Bu kesin bir yol değil, ancak spec bundan bahseder.
Yanlış:
<code><!DOCTYPE html></code>
Doğru:
<code class="language-html"><!DOCTYPE html></code>
kbd
etiketini mümkün olduğu kadar basit tutun
kbd
etiketini iç içe kullanmak insanlar için çok zor.
Yanlış:
<kbd><kbd>Ctrl</kbd>+<kbd>F5</kbd></kbd>
Doğru:
<kbd>Ctrl+F5</kbd>
span
etiketinden mümkün olduğunca kaçının
span
element son çaredir.
Yanlış:
HTML <span class="best">Best</span> Practices
Doğru:
HTML <em>Best</em> Practices
br
etiketinden sonra satır sonu yapın
br
etiketi kullanıldığında satır sonu gereklidir.
Yanlış:
<p>HTML<br>Best<br>Practices</p>
Doğru:
<p>HTML<br>
Best<br>
Practices</p>
br
öğesini yalnızca sunum amacıyla kullanmayın
br
elemanı satır kesmek için değil, içerikteki satır kesmeler içindir.
Yanlış:
<p><label>Rule name: <input name="rule-name" type="text"></label><br>
<label>Rule description:<br>
<textarea name="rule-description"></textarea></label></p>
Doğru:
<p><label>Rule name: <input name="rule-name" type="text"></label></p>
<p><label>Rule description:<br>
<textarea name="rule-description"></textarea></label></p>
Düzenlemeler
ins
ve del
etiketlerini diğer öğelerin arasında kullanmayın
Etiketler diğer etidektlere taşamaz.
Yanlış:
<p>For writing maintainable and scalable HTML documents.<del> And for mental stability.</p>
<p>Don’t trust!</p></del>
Doğru:
<p>For writing maintainable and scalable HTML documents.<del> And for mental stability.</del></p>
<del><p>Don’t trust!</p></del>
Gömülü içerik
picture
elemanı için yedek img
elemanı kullanın
picture
etiketinin desteği henüz iyi değil.
Yanlış:
<picture>
<source srcset="/img/logo.webp" type="image/webp">
<source srcset="/img/logo.hdp" type="image/vnd.ms-photo">
<source srcset="/img/logo.jp2" type="image/jp2">
<source srcset="/img/logo.jpg" type="image/jpg">
</picture>
Doğru:
<picture>
<source srcset="/img/logo.webp" type="image/webp">
<source srcset="/img/logo.hdp" type="image/vnd.ms-photo">
<source srcset="/img/logo.jp2" type="image/jp2">
<img src="/img/logo.jpg">
</picture>
img
öğesine alt
özelliği ekleyin
Gerekirse alt
niteliği, görüntüleri işleyemeyen veya görüntü yüklemesi engelli olanlara yardımcı olur.
Yanlış:
<img src="/img/logo.png">
Doğru:
<img alt="HTML Best Practices" src="/img/logo.png">
alt
özelliğini boş olarak kullanın
Mümkünse Resim tamamlayıcı ise, yakınlarda bir yerde eşdeğer içerik vardır.
Yanlış:
<img alt="Question mark icon" src="/img/icon/help.png"> Help
Doğru:
<img alt="" src="/img/icon/help.png"> Help
alt
özelliğini atlayın
Mümkünse Bazen hangi metnin alt
özellik için uygun olduğunu bilemezsiniz.
Yanlış:
<img alt="CAPTCHA" src="captcha.cgi?id=82174">
Doğru:
<img src="captcha.cgi?id=82174" title="CAPTCHA">
(If you cannot see the image, you can use an <a href="?audio">audio</a> test instead.)
iframe
öğesi kullanın
Boş İçeriği için bazı kısıtlamalar vardır. Boş olması her zaman güvenlidir.
Yanlış:
<iframe src="/ads/default.html">
<p>If your browser support inline frame, ads are displayed here.</p>
</iframe>
Doğru:
<iframe src="/ads/default.html"></iframe>
map
etiketinin içeriğini işaretleyin
Bu içerik bir ekran okuyucu sunar.
Yanlış:
<map name="toc">
<a href="#general">General</a>
<area alt="General" coords="0, 0, 40, 40" href="#General"> |
<a href="#the_root_element">The root element</a>
<area alt="The root element" coords="50, 0, 90, 40" href="#the_root_element"> |
<a href="#sections">Sections</a>
<area alt="Sections" coords="100, 0, 140, 40" href="#sections">
</map>
Doğru:
<map name="toc">
<p>
<a href="#general">General</a>
<area alt="General" coords="0, 0, 40, 40" href="#General"> |
<a href="#the_root_element">The root element</a>
<area alt="The root element" coords="50, 0, 90, 40" href="#the_root_element"> |
<a href="#sections">Sections</a>
<area alt="Sections" coords="100, 0, 140, 40" href="#sections">
</p>
</map>
audio
veya video
öğesi için yedek içerik sağlayın
HTML’de yeni tanıtılan öğeler için yedek içerik gereklidir.
Yanlış:
<video>
<source src="/mov/theme.mp4" type="video/mp4">
<source src="/mov/theme.ogv" type="video/ogg">
...
</video>
Doğru:
<video>
<source src="/mov/theme.mp4" type="video/mp4">
<source src="/mov/theme.ogv" type="video/ogg">
...
<iframe src="//www.youtube.com/embed/..." allowfullscreen></iframe>
</video>
Tablo verileri
Her satıra bir hücre yazın
Uzun satırların taranması zordur.
Yanlış:
<tr>
<td>General</td><td>The root Element</td><td>Sections</td>
</tr>
Doğru:
<tr>
<td>General</td>
<td>The root Element</td>
<td>Sections</td>
</tr>
th
etiketini kullanın
Başlık hücresi için Bundan kaçınmak için hiçbir sebep yoktur.
Yanlış:
<table>
<thead>
<tr>
<td><strong>Element</strong></td>
<td><strong>Empty</strong></td>
<td><strong>Tag omission</strong></td>
</tr>
</thead>
<tbody>
<tr>
<td><strong><code>pre</code></strong></td>
<td>No</td>
<td>Neither tag is omissible</td>
</tr>
<tr>
<td><strong><code>img</code></strong></td>
<td>Yes</td>
<td>No end tag</td>
</tr>
</tbody>
</table>
Doğru:
<table>
<thead>
<tr>
<th>Element</th>
<th>Empty</th>
<th>Tag omission</th>
</tr>
</thead>
<tbody>
<tr>
<th><code>pre</code></th>
<td>No</td>
<td>Neither tag is omissible</td>
</tr>
<tr>
<th><code>img</code></th>
<td>Yes</td>
<td>No end tag</td>
</tr>
</tbody>
</table>
Formlar
label
etiketini ile form kontrolünü sağlayın
label
etiketi form öğesinin odaklanmasına yardımcı olur.
Yanlış:
<p>Query: <input name="q" type="text"></p>
Doğru:
<p><label>Query: <input name="q" type="text"></label></p>
for
özelliğini kullanmayın
Mümkünse label
etiketi bazı form etiketlerini içerebilir.
Yanlış:
<label for="q">Query: </label><input id="q" name="q" type="text">
Doğru:
<label>Query: <input name="q" type="text"></label>
input
etiketi için uygun type
özelliğini kullanın
Uygun type
özelliği ile, tarayıcılar input
elemanına küçük özellikler kazandırır.
Yanlış:
<label>Search keyword: <input name="q" type="text"></label>
Doğru:
<label>Search keyword: <input name="q" type="search"></label>
input type="submit"
elemanına value
özelliği ekleyin
Gönderme düğmesi için varsayılan etiket tarayıcılarda ve dillerde standardize edilmemiştir.
Yanlış:
<input type="submit">
Doğru:
<input type="submit" value="Search">
pattern
özelliği olduğunda input
etiketine title
özelliği ekleyin
Girilen metni pattern
niteliğiyle eşleşmiyorsa, title
özelliğinin değeri ipucu olarak görüntülenecektir.
Yanlış:
<input name="security-code" pattern="[0-9] type="text">
Doğru:
<input name="security-code" pattern="[0-9]{3}" title="A security code is a number in three figures." type="text">
placeholder
özelliğini kullanmayın
Etiketleme için label
öğesi bir etiket içindir, placeholder
özelliği kısa bir ipucu içindir.
Yanlış:
<input name="email" placeholder="Email" type="text">
Doğru:
<label>Email: <input name="email" placeholder="john.doe@example.com" type="text"></label>
option
etiketi yazın
Her satıra bir Uzun satırların taranması zordur.
Yanlış:
<datalist id="toc"> <option label="General"><option label="The root element"><option label="Sections"></datalist>
Doğru:
<datalist id="toc"> <option label="General"> <option label="The root element"> <option label="Sections"></datalist>
progress
etiketine max
özelliği ekleyin
max
özelliği ile, value
özelliği kolay bir biçimde yazılabilir.
Yanlış:
<progress value="0.5"> 50%</progress>
Doğru:
<progress max="100" value="50"> 50%</progress>
meter
etiketine min
ve max
özelliği ekleyin
min
ve max
özelliği ile value
özelliği kolay bir şekilde yazılabilir.
Yanlış:
<meter value="0.5"> 512GB used (1024GB total</meter>
Doğru:
<meter min="0" max="1024" value="512"> 512GB used (1024GB total</meter>
legend
etiketini fieldset
etiketinin ilk çocuğu olarak elemanı olarak oluşturun
Spec bunu gerektirir.
Yanlış:
<fieldset>
<p><label>Is this section is useful?: <input name="usefulness-general" type="checkbox"></label></p>
...
<legend>About "General"</legend>
</fieldset>
Doğru:
<fieldset>
<legend>About "General"</legend>
<p><label>Is this section is useful?: <input name="usefulness-general" type="checkbox"></label></p>
...
</fieldset>
Script ekleme
type
özelliğini kullanmayın
JavaScript için HTML’de,type
özelliğinin script
etiketi için varsayılan değeri text/javascript
tir.
Yanlış:
<script type="text/javascript"> ...</script>
Doğru:
<script> ...</script>
script
etiketinin içeriğini yorumla kapatmayın
Bu ritüel eski tarayıcılar içindir.
Yanlış:
<script>/*<![CDATA[*/ .../*]]>*/</script>
Bu da kötü:
<script><!-- ...// --></script>
Doğru:
<script> ...</script>
script
öğesini kullanmayın
Komut dosyası eklenmiş async
özelliği hem sadelik hem de performans için en iyisidir.
Yanlış:
<script>
var script = document.createElement("script";
script.async = true;
script.src = "//example.com/widget.js";
document.getElementsByTagName("head"[0].appendChild(script);
</script>
Doğru:
<script async defer src="https://example.com/widget.js"></script>
Diğer
Tutarlı girintiler kullanın
Girinti okunabilirlik için önemlidir.
Yanlış:
<html>
<head>
...
</head>
<body>
...
</body>
</html>
Doğru:
<html>
<head>
...
</head>
<body>
...
</body>
</html>
Dahili bağlantılar için mutlak yol kullanın
Mutlak bir yol, internet bağlantınız olmadan localhost'ta daha iyi çalışır.
Yanlış:
<link rel="apple-touch-icon" href="http://you.example.com/apple-touch-icon-precomposed.png">...<p>You can find more at <a href="//you.example.com/contact.html">contact page</a>.</p>
Doğru:
<link rel="apple-touch-icon" href="/apple-touch-icon-precomposed.png">...<p>You can find more at <a href="/contact.html">contact page</a>.</p>
Harici kaynaklar için protokole bağlı URL kullanmayın
Protokol ile dış kaynakları güvenilir ve güvenli bir şekilde yükleyebilirsiniz.
Yanlış:
<script src="//example.com/js/library.js">
Doğru:
<script src="https://example.com/js/library.js">