<head> içindeki öğeleri sıralamak için en iyi uygulamalar nelerdir?


91

herhangi bir sırayla herhangi bir şey kullanabilir mi? <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">daha önce yerleştirmek önemli mi<title>

Bu en çok kullanılan, en iyi yol mu?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Title Goes Here</title>
    <link rel="stylesheet" href="http://sstatic.net/so/all.css?v=5912">
    <link rel="shortcut icon" href="http://sstatic.net/so/favicon.ico">
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {

        $("#wmd-input").focus();
        $("#title").focus();
        $("#revisions-list").change(function() { window.location = '/posts/1987065/edit/' + $(this).val(); });

    });        
</script>


</head>

<body>
<p>This is my web page</p>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools.js"></script>
</body>

</html>

http://stackoverflow.com sitesinde herhangi bir kodlama yoktur ve<meta>

<meta>Tüm js ve css'den sonra SEO için her şeyi ekleyen SEO bileşenine sahip bir CMS kullanıyorum . Dosyalar. Herhangi bir öğenin herhangi bir sıraya yerleştirilmesi, <head>belge uyumluluğunu ve kodlamayı etkileyebilir mi?


Tüm yorumlar nereye gitti?
Pekka

Bu sitenin (stackoverflow.com) kendi kodlama seti (UTF-8'e) var, sadece ait olduğu HTTP başlıklarında. Karakter kümesini bir meta etikette tanımlamak, biraz karmaşık bir çözümdür.
jpsimons

2
Sağ. Karakter kümesini HTTP üstbilgilerinde tanımlamak tercih edilir, ancak bazı durumlarda bunları ayarlayamazsınız (yerel diskinizden dosyaları yüklemek gibi), bu nedenle <meta>etiket bu durumlar için bir geçici çözümdür, ancak gerekli değildir.
Brian Campbell

Burada bir sürü yorum vardı, en az dokuz veya on. Özel bir şey değillerdi ama içlerinde de saldırgan hiçbir şey yoktu. Hepsi nereye gitti? Yorumları silme yetkisi kimde ve neden var?
Pekka

Hepimiz kendi yorumlarımızı silme yetkimiz var; Bazıları kendilerininkini mi sildi? Cevabımı yazmakla meşgul olduğum için bu soruya ilişkin yorumları hiç görmedim. Başka bir soru düşünmediğinden emin misin?
Brian Campbell

Yanıtlar:


111

HTML'de, DOCTYPEönce gelmeli, ardından <html>bir <head>öğe içeren bir <title>öğe ve ardından bir öğe içermesi gereken tek bir öğe gelmelidir <body>. HTML 4.01 ve HTML5 taslağındaki bir HTML belgesinin genel yapısının açıklamasına bakın ; gerçek gereksinimler çoğunlukla dışında aynıdır DOCTYPE, ancak farklı şekilde tanımlanmıştır.

Gerçek etiketler ( <html>, </html>, <head>, vs.) isteğe bağlı; etiketler yoksa, öğeler otomatik olarak oluşturulacaktır. <title>HTML'de gerekli olan tek etikettir. En kısa geçerli HTML 4.01 belgesi (en azından oluşturabildiğim) şudur (a'ya ihtiyaç duyar <p>çünkü <body>geçerli olması için içinde bir şey olması gerekir):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><title></title><p>

Ve en kısa geçerli HTML5 belgesi:

<!DOCTYPE html><title></title>

XHTML'de tüm etiketlerin açıkça belirtilmesi gerektiğini unutmayın; hiçbir öğe örtük olarak eklenmeyecektir.

Tarayıcılar, bazı durumlarda bir Content-TypeHTTP başlığı kullanılarak belirtilmemiş bir kaynağın türünü belirlemek için içerik türü koklama gerçekleştirir ve ayrıca Content-Typebaşlık sağlanmadıysa veya içermiyorsa karakter kodlama koklama charset(genellikle bu üstbilgileri dahil etmek ve doğru olduklarından emin olmak için, ancak HTTP üzerinden aktarılmayan yerel dosyalar gibi, yapamayacağınız bazı durumlar vardır). Bu amaçlar için belgenin başında yalnızca sınırlı sayıda bayt koklarlar, bu nedenle içerik koklamayı veya karakter kodlamayı etkilemeyi amaçlayan herhangi bir şey belgenin başlangıcına yakın olmalıdır.

Bu nedenle HTML5meta , karakter kümesini (ya <meta http-equiv="Content-type" content="text/html; charset=...">da basitçe <meta charset=...>) belirtmek için kullanılan herhangi bir etiketin etkili olabilmesi için dosyanın ilk 1024 baytı içinde olması gerektiğini belirtir . Bu nedenle, belgenize karakter kodlama bilgisini dahil edecekseniz, etiketi dosyanın başlarına, muhtemelen <title>öğeden önce bile koymalısınız . Ancak, bir Content-typebaşlığı doğru şekilde belirtirseniz bu etiketin gereksiz olduğunu unutmayın .

CSS'de, sonraki stil bildirimleri daha öncekilere göre önceliklidir , diğerleri eşittir. Bu nedenle, genellikle daha önce geçersiz kılınabilecek en genel stil sayfalarını ve daha özel stil sayfalarını daha sonra koymalısınız.

Performans nedenlerinden dolayı, komut dosyalarını sayfanın altına, sayfasının hemen önüne koymak iyi bir fikir olabilir </body>, çünkü komut dosyalarını yüklemek sayfanın oluşturulmasını engeller.

Açıkçası, <script>etiketlerin sıralanması gerekir , böylece her bir sıraya bağlı komut dosyaları önce bağımlılıklara sahip olur.

Genel olarak, daha önce belirttiğim kısıtlamalar dışında, etiketlerin sıralanması <head>okunabilirlik dışında çok fazla önemli olmamalıdır. Yukarı <title>doğru görmeyi ve diğer <meta>etiketleri bir tür mantıksal sıraya koymayı sevme eğilimindeyim .

Çoğu zaman, bir HTML belgesinin gövdesine bir şeyler koymanız gereken sıra, görüntülenmeleri gereken sıra veya erişilmesi gereken sıra olmalıdır. Bir şeyleri yeniden düzenlemek için CSS'yi kullanabilirsiniz, ancak ekran okuyucular genellikle şeyleri kaynak sırasına göre okur, arama dizinleri bir şeyleri kaynak sırasına göre çıkarır, vb.


5
TITLE zorunludur benim için haberdi ve biraz garip görünüyor. Ancak resmi şartnameye baktığınızda kesinlikle haklısınız. Yaşa ve öğren!
Carl Smotricz

Beni şaşırtan şey, bunun tek zorunlu etiket olması ... Aslında HTML5'te de isteğe bağlı yapılması gerektiğini savundum (çünkü gadget'lar gibi her zaman iframebir başlıkta olacak ve hiçbir zaman görünür bir başlığa sahip olmayacaklar ), ancak bu sefer bunu değiştirmemeye karar verdiler.
Brian Campbell

@Brian - bu güzel açıklama için teşekkürler Brian. O yüzden beni asla hayal kırıklığına uğratmadı. bu sitenin beyinleri var. ve bir şey daha U soruyu çok iyi anlar ve sonra çok iyi cevap verirsiniz. harika iş.
Jitendra Vyas

1
@Jitendra Ha ha! Son sorularınızın bir kısmını cevapladım, değil mi? Yeni yıl partisinden biraz sarhoşum. Ama deneyebilirim ... Yine de cevabımın son çift kadar iyi olacağını garanti edemem.
Brian Campbell

3
Modern yaklaşım, <script>bir asyncveya deferniteliği olan etiketleri yerleştirmektir <head>. Stackoverflow.com/questions/436411/… sayfasına
joshreesjones

32

Kullandığım şablon bu, yeni bir proje için ihtiyacınız olmayan her şeyi silin.

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title></title>

    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">

    <meta name="robots" content="index, follow">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">

    <link rel="stylesheet" href="scss/style.css" />

    <!-- http://realfavicongenerator.net/ -->

    <meta property="fb:page_id" content="">
    <meta property="og:title" content="">
    <meta property="og:image" content="">
    <meta property="og:description" content="">
    <meta property="og:url" content="">
    <meta property="og:site_name" content="">
    <meta property="og:type" content="website">

    <meta name="twitter:card" content="summary">
    <meta name="twitter:url" content="">
    <meta name="twitter:title" content="">
    <meta name="twitter:description" content="">
    <meta name="twitter:image" content="">
    <meta name="twitter:site" content="">

    <script src="js/vendor/modernizr.js"></script>
  </head>
  <body>
  </body>
</html>


@Denis ne <html class="default"> demek olduğunu biliyor musun ?
Shaiju T

3
@stom, neden sınıf özniteliği olduğunu mu kastediyorsunuz? Sayfa yüklendikten sonra bu sınıfı kaldırmak için ek JavaScript kodu gerektirir. Bunu yapmak - tarayıcıda JavaScript'in etkin olduğunu bileceksiniz. Bu öznitelik hala mevcutsa - bu, JavaScrip'lerin devre dışı bırakıldığı anlamına gelir, böylece ihtiyacınız olursa CSS kullanarak kullanıcıya bazı mesajlar gösterebilirsiniz
Denis

1
@Denis, javascript'in etkin olup olmadığını kontrol etmek için <noscript> </noscript> kullanın
TheCrazyProfessor

1
Lütfen bu emir için gerekçeniz hakkında yorum yapar mısınız?
2540625

7

Brian'ın cevabına birkaç performans önerisi ekleyerek, mantıksal olarak en yüksek öncelik, indirilmesi gereken şeyler olmalıdır, böylece tarayıcı bunları en kısa sürede indirmeye başlayabilir ve sayfanın sunulma şeklini etkileyecek şeyler. Bu yüzden şunu öneririm:

  • Karakter kümesi (spesifikasyonun başında da gereklidir), görüntü alanı, apple-mobile-web-app-özellikli gibi görünümü etkileyen metalar
  • Tarayıcının en kısa sürede görüntüleyebilmesi ve kullanıcının bir şeyler olduğunu hissetmesi için üst tarafa yakın başlık
  • Favicon ve dokunmatik simgeler
  • CSS (en azından ekranın üst kısmı için CSS; süslü olmak istiyorsanız altbilgiye diğer CSS yüklenebilir). Bu adım tipik olarak diğer her şeyin ilerlemesini engeller, bu yüzden CSS gecikmesi sırasında bazı geri bildirimler sağladıkları için önceki öğeleri onun üstüne koyuyorum.
  • Altbilgiye yüklenemeyen kritik komut dosyaları (düzeni etkileyebilecek kullanıcı aracısı koklama gibi)
  • Diğer her şey (örneğin, bağlantılar ve meta etiketler biçiminde gerekli meta veriler)

Ayrıca, özellikle küçük ve harici komut dosyası / sayfası tipik ziyaretçinizin profiline göre önbelleğe alınmayacaksa, kafaya yüklenen CSS ve JS'yi satır içine almayı da düşünebilirsiniz. Ve bunu satır içi yaparsanız, ideal olarak sıkıştırmak isteyeceksiniz.

Son şey: Kullanıcının başını ve yüklediği engelleyici kaynakları beklemesi gerekir, bu nedenle gövdeye veya alt bilgiye mümkün olduğunca çok şey koymak en iyisidir.


7

W3'e göre şöyle olmalıdır:

  • Meta karakter kümesi
  • Başlık
  • Meta adı = "açıklama"
  • Meta adı = "anahtar kelimeler"
  • Stil sayfası
  • JavaScript Dosyaları

Bağlantılı makale yeniden yönlendiriliyor ve düzen hakkında hiçbir şey söylemiyor gibi görünüyor.
2540625

Stil sayfaları oluşturmayı engelliyor, bunun yerine js'yi CSS'den önce eşzamansız olarak yükler.
Null


5

Önce içerik türünüzü istersiniz, çünkü bu karakter kodlamasını belirtir, aksi takdirde daha sonra gelirse, bazı tarayıcılar kodlamayı tahmin etmeye çalışır. (Ayrıntıları hatırlayamıyorum, ancak sanırım IE belgenin ilk 75 karakterinde bir kodlama bulamazsa tahmin edecek?)

Çoğu web sunucusu, kodlamayı HTTP üstbilgilerinde gönderir, ancak bir kullanıcı sayfanızı kaydederse üstbilgiler onunla birlikte kaydedilmez.

CSS referanslarını ikinci sıraya koyardım, böylece tarayıcı onları mümkün olan en kısa sürede indirir.

JavaScript'i kafaya koymazdım, indirirken sayfaların oluşturulmasını engellediği için sayfalarınızın altına gitmeli.


0

IIRC, bazı tarayıcılar bir content-typeöğe ile karşılaştığında belgeyi yeniden yükleyecektir . Dolayısıyla, bu öğe muhtemelen headbelgenin öğesi içinde ilk sırada yer almalıdır .

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.