HEAD, BODY ve HTML etiketleri yazmak gerekli mi?

194

Yazmak için gerekli mi <html>, <head>ve <body>etiketleri?

Örneğin, böyle bir sayfa yapabilirim:

<!DOCTYPE html>     
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Page Title</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <script src="js/head_script.js"></script><!-- this script will be in head //-->


<div>Some html</div> <!-- here body starts //-->

    <script src="js/body_script.js"></script>

Ve Firebug kafa ve vücudu doğru bir şekilde ayırır: resim açıklamasını buraya girin

W3C Doğrulaması geçerli olduğunu söylüyor.

Ancak bu uygulamayı web'de nadiren görüyorum.

Bu etiketleri yazmak için herhangi bir neden var mı?

html tags

— Larry Cinnabar
kaynak

5

Html5.validator.nu konumundaki HTML5 doğrulayıcısı titleetiketi gerektirir . Bu geçerli olduğunu düşündüğü en küçük belgedir:<!DOCTYPE html> <title>A</title>

— bonh

142

Atlanması html, headve body etiketleri kesinlikle HTML özellikleri tarafından izin verilir. Bunun temel nedeni, tarayıcıların her zaman mevcut web sayfalarıyla tutarlı olmaya çalıştığı ve HTML'nin ilk sürümlerinin bu öğeleri tanımlamamasıdır. HTML ne zaman~~2.0~~ ilk olarak, etiketlerin eksik olduğunda çıkartılacağı şekilde yapıldı.

Prototip oluştururken ve özellikle test senaryoları yazarken etiketleri atlamayı uygun buluyorum çünkü işaretlemenin söz konusu teste odaklanmasını sağlamaya yardımcı oluyor. Çıkarsama süreci olmalıdır Eğer kundakçı gördüğünüz tam olarak tarzda öğeleri oluşturmak ve tarayıcılar bunu yaparken de oldukça tutarlıdır.

Fakat...

IE bu alanda bilinen en az bir hataya sahiptir. IE9 bile bunu sergiliyor. İşaretlemenin şu olduğunu varsayalım:

<!DOCTYPE html>
<title>Test case</title>
<form action='#'>
   <input name="var1">
</form>

Şöyle bir DOM almalısınız (ve diğer tarayıcılarda da yapmalısınız):

HTML
    HEAD
        TITLE
    BODY
        FORM action="#"
            INPUT name="var1"

Ama IE'de bunu elde edersiniz:

HTML
    HEAD
       TITLE
       FORM action="#"
           BODY
               INPUT name="var1"
    BODY

Kendiniz görün.

Bu hata, formherhangi bir metin içeriğinden ve herhangi bir başlangıç etiketinden önceki başlangıç etiketi ile sınırlı görünüyor body.

— Alohci
kaynak

5

HTML 1.0, HTML, HEAD ve BODY'yi tanımladı

— Liza Daly

6

@Liza - Bu belgenin HTML 1.0'ı tanımlayıp tanımlamaması tartışılabilir, ancak düzeltilmiş duruyorum, öğelerin HTML 2.0'dan önceki olduğu. Teşekkürler. Ancak, 1992'den w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/… adresine bakın. Öyleyse öğeler mevcut değildir.

— Alohci

1

Bu hata Internet Explorer 11'i etkilemiyor gibi görünüyor (Ben de etkilendiğini onaylamak IE8 test yaptım)

— jornane

2

@Justin - Bu kısıtlamalar büyük ölçüde tekniktir ve sizi normalde etkilemez. Bu nedenle evet, sayfanız için başlık öğesinden hemen önce veya hemen içinde bir yorum düğümü veya beyaz boşluk görünmesi önemliyse (sayfanın JS'si buna bağlı olabilir ), bu ilişkiyi doğru hale getirmek için açık başlangıç etiketini açıkça tanımlamanız gerekir . Ama eğer yapmazsa, (ve henüz yaptığı bir HTML sayfasını hiç yazmadım), o zaman kafa etiketi mantıklı bir yere çıkarılacak ve güvenle atlayabilirsiniz. Aynı şekilde diğer html, baş ve gövde etiketleri için.

— Alohci

3

@Justin Bu cevabın "HEAD, BODY ve HTML etiketleri yazmak gerekli mi?" iyi bir uygulama olup olmadığı değil. Sözleşmeler değişme eğilimindedir ... sadece google stil kılavuzuna bir göz atın ... bu, bu etiketleri atlamanız gerektiğini belirten bir kongre ... :-)

— Potherca

77

HTML için Google Stil Kılavuzu, tüm isteğe bağlı etiketlerin çıkarılmasını önerir.
İçerdiğini <html>, <head>, <body>, <p>ve <li>.

https://google.github.io/styleguide/htmlcssguide.html#Optional_Tags

Dosya boyutu optimizasyonu ve taranabilirlik amacıyla, isteğe bağlı etiketleri atlamayı düşünün. HTML5 özelliği hangi etiketlerin çıkarılabileceğini tanımlar.

(Bu yaklaşım, web geliştiricilerine tipik olarak öğretilenlerden önemli ölçüde farklı olduğu için daha geniş bir kılavuz olarak oluşturulmasını gerektirebilir. Tutarlılık ve basitlik nedenleriyle, en iyi şekilde, yalnızca bir seçimi değil tüm isteğe bağlı etiketleri atlamak için sunulur.)

<!DOCTYPE html>
<html>
  <head>
    <title>Spending money, spending bytes</title>
  </head>
  <body>
    <p>Sic.</p>
  </body>
</html>


<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.

— Rima
kaynak

2

Uyumsuzluk örneği: Web geliştirme (puer) için kullandığım canlı yeniden yükleme aracı otomatik olarak başlığa bir komut dosyası ekler. Sonunda <head> etiketi olmadan, işe yaramaz.

— Offirmo

@Offirmo Dünyada bu nedir?

— Ken Sharp

Sayfalarında bazı kod ekleyerek genellikle işleri @KenSharp livereload web dev araçları böyle servis: <script src="http://localhost:35729/livereload.js"></script>. Egzotik şablonlar için, kodlarını nereye eklemeleri gerektiğini anlamıyorlar.

— Offirmo

1

@Offirmo Livereload belgeleri bu komut dosyasını müşteri sayfalarınıza kendiniz eklemeniz gerektiğini belirtir. Belki de bunu sizin için yapan sihirli bir kütüphane kullanıyorsunuzdur. Yaşadığınız zorluğun kaynağı bu olmalı.

— kequc

7

Mümkün olan tüm etiketleri atlamak kuruş ve pound-aptalca. Bant genişliği tasarrufu küçük bir% (özellikle çoğu bağlantı otomatik sıkıştırdığı için), kenar durumlarda insan hatası olasılığı yüksektir (yazarları, editörleri ve hatta HTML ayrıştırıcı yazarlarını düşünün). Hataları bulmak da daha zordur (entropi değişikliği nedeniyle).

— TextGeek

48

@Liza Daly'nin HTML5 hakkındaki notunun aksine, bu özellik aslında hangi etiketlerin atlanabileceği ve ne zaman (ve kurallar HTML 4.01'den biraz farklıdır, çoğunlukla yorumlar ve boşluk gibi belirsiz öğelerin nereye ait olduğunu açıklığa kavuşturmak için)

İlgili referans http://www.w3.org/TR/2011/WD-html5-20110525/syntax.html#optional-tags ve diyor ki:

Html öğesinin içindeki ilk şey bir yorum değilse, bir html öğesinin başlangıç etiketi atlanabilir.
Html öğesinin hemen ardından bir yorum gelmiyorsa, html öğesinin bitiş etiketi atlanabilir.
Eleman boşsa veya ana elemanın içindeki ilk şey bir elemansa, bir kafa elemanının başlangıç etiketi atlanabilir.
Başlık elemanının hemen ardından boşluk karakteri veya yorum gelmezse başlık elemanının bitiş etiketi atlanabilir.
Gövde öğesinin içindeki ilk şey bir komut dosyası veya stil öğesi değilse, öğe boşsa veya gövde öğesinin içindeki ilk şey boşluk karakteri veya yorum değilse, gövde öğesinin başlangıç etiketi atlanabilir.
Gövde öğesinin hemen ardından bir yorum gelmezse, gövde öğesinin bitiş etiketi atlanabilir.

Dolayısıyla örneğiniz geçerli HTML5'tir ve html, head ve body etiketleri ima edilen konumlarında olduğu gibi ayrıştırılır:

<!DOCTYPE html><HTML><HEAD>     
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Page Title</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <script src="js/head_script.js"></script></HEAD><BODY><!-- this script will be in head //-->


<div>Some html</div> <!-- here body starts //-->

    <script src="js/body_script.js"></script></BODY></HTML>

Komut dosyasının kendisi kafanın bir parçası olmasına rağmen, "bu komut dosyası kafasından olacak" yorumunun aslında gövdenin bir parçası olarak ayrıştırıldığını unutmayın. Spesifikasyona göre, bunun farklı olmasını istiyorsanız, </HEAD>ve <BODY>etiketleri atlanmayabilir. (Her ne kadar karşılık gelen <HEAD>ve </BODY>etiketler hala olabilir)

— Ian Clelland
kaynak

15

Bunları HTML4'te atlamak geçerlidir:

7.3 The HTML element
start tag: optional, End tag: optional

7.4.1 The HEAD element
start tag: optional, End tag: optional

http://www.w3.org/TR/html401/struct/global.html

HTML5 sözdizimi daha gevşek tanımlandığından, HTML5'te tam olarak "gerekli" veya "isteğe bağlı" öğe yoktur. Örneğin title:

Başlık öğesi çoğu durumda gerekli bir alt öğedir, ancak daha yüksek düzeyli bir protokol başlık bilgileri sağladığında, örneğin HTML bir e-posta yazma biçimi olarak kullanıldığında bir e-postanın Konu satırında, başlık öğesi atlanabilir .

http://www.w3.org/TR/html5/semantics.html#the-title-element-0

Onları gerçek XHTML5'te atlamak geçerli değildir, ancak neredeyse hiç kullanılmaz (XHTML gibi davranan-HTML5'e karşı).

Bununla birlikte, pratik bir bakış açısından, HTML ve CSS oluşturmada öngörülebilirlik için tarayıcıların genellikle "standartlar modunda" çalışmasını istersiniz. Bir DOCTYPE ve daha yapılandırılmış bir HTML ağacı sağlamak, daha öngörülebilir çapraz tarayıcı sonuçlarını garanti eder.

— Liza Daly
kaynak

13

Etiketleri olan öğeleri karıştırmayın. CHao'nun bu sayfada başka yerlere yaptığı yorumları görün. İçin html, headve body, elementler zorunludur, fakat etiketleri isteğe bağlıdır.

— Alohci

Aslında son kısımda yanılıyorsunuz. Etiket atlama bir SGML DTD özelliğidir, SGML ayrıştırmayı destekleyen tüm tarayıcılar (yani tüm tarayıcılar) etiket atlamayı da destekler. XHTML5'te yapamamanızın nedeni SGML değil XML olması. XML, öğeleri çıkarmak için çok aptal.

— OdraEncoded

@OdraEncoded İfadeniz için doğrulama yapabilir misiniz, lütfen? Durum böyle değil (bkz . HTML Standardı ).

— Diş fırçası

@OdraEncoded - yakın, ancak tam olarak doğru değil. Etiket atlaması, ISO 8879'da tanımlandığı gibi SGML ayrıştırıcıları için isteğe bağlı bir özelliktir (çoğu destekliyor olsa da). Python'un 'html.parse' öğesinin görünmediği halde neredeyse tüm HTML ayrıştırıcılar destekliyor (bkz. Stackoverflow.com/questions/29954170/… ).

— TextGeek

14

HTML spesifikasyonlarının belirli durumlarda belirli etiketlerin atlanmasına izin verdiği doğrudur, ancak genellikle bunu yapmak mantıksızdır.

İki etkisi vardır - spesifikasyonu daha karmaşık hale getirir, bu da tarayıcı yazarlarının doğru uygulamaları yazmasını zorlaştırır (IE'nin yanlış anlamasıyla gösterildiği gibi).

Bu, spesifikasyonun bu kısımlarındaki tarayıcı hatalarının olasılığını yüksek kılar. Bir web sitesi yazarı olarak, bu etiketleri ekleyerek sorunu önleyebilirsiniz - bu nedenle spesifikasyon zorunda olmanızı söylemese de, yanlış yapma şansını azaltır, bu da iyi bir mühendislik uygulamasıdır.

Dahası, en son HTML 5.1 WG spesifikasyonu şu anda diyor (devam eden bir çalışma olduğunu ve henüz değişebileceğini unutmayın).

Gövde öğesinin başlangıç etiketi, öğe boşsa veya gövde öğesinin içindeki ilk şey bir boşluk karakteri veya yorum değilse, gövde öğesinin içindeki ilk şeyin meta, bağlantı, komut dosyası, stil olmaması dışında çıkarılabilir veya şablon öğesi.

http://www.w3.org/html/wg/drafts/html/master/sections.html#the-body-element

Bu biraz ince. Gövde ve kafayı atlayabilirsiniz, ardından tarayıcı bu öğelerin nereye yerleştirileceğini belirler. Bu, karışıklığa yol açabilecek açık olmama riskini taşır.

Yani bu

<html>
  <h1>hello</h1>
  <script ... >
  ...

kod öğesinin gövde öğesinin alt öğesi olmasına neden olur, ancak bu

<html>
  <script ... >
  <h1>hello</h1>

komut dosyası etiketinin head öğesinin alt öğesi olmasına neden olur.

Bunu yaparak açık olabilirsiniz

<html>
    <body>
      <script ... >
      <h1>hello</h1>

ve sonra hangisine ilk sahip olursanız olun, komut dosyası veya h1, her ikisi de, tahmin edilebilir şekilde gövde öğesinde görünecektir. Bunlar yeniden düzenleme ve kod hata ayıklama sırasında göz ardı kolay şeylerdir. (örneğin, vücuttaki 1. komut dosyası öğesini arayan JS'niz var - ikinci snippet'te çalışmayı durdurur).

Genel bir kural olarak, her şey hakkında açık olmak her şeyi yorumlamaya açık bırakmaktan daha iyidir. Bu bakımdan XHTML daha iyidir, çünkü kodunuzdaki eleman yapınız hakkında tamamen açık olmanızı zorlar, bu da onu daha basit ve dolayısıyla yanlış yorumlamaya daha az eğilimli kılar.

Yani evet, onları atlayabilir ve teknik olarak geçerli olabilirsiniz, ancak genellikle bunu yapmak mantıksızdır.

— Peter Bagnall
kaynak

1

IE işler yanlış gidiyor çünkü yazarlar standartlara daha az önem veremiyorlardı. Düzgün çalışmazsa bu onların hatasıdır. Standartlar, IE'nin onlarla çalıştığından emin olmaları için tanımlanır.

— Ken Sharp

3

@KenSharp Katılmıyorum, ama siz tüm müşterilerinizi kullanmaya zorlayana kadar onunla sıkışıp kaldık. Çalışması gereken her şeye güvenmektense tamamen açık olan bir kod yazmak daha iyidir.

— Peter Bagnall

1

Kullanıcılar yıllardır uyumlu olmadığı için IE'yi boşaltmaya zorlandı. Kullanıcılar hala Windows XP yüklese bile, hiç kimse kullanıcıların IE6'yı kullanmaya devam etmesini beklemez. Windows 3.1'i sonsuza kadar desteklemeyi de bekleyemeyiz. OSI Seviye 8 hatası.

— Ken Sharp

1

Tam olarak hangi etiketler atlanabilir ve tam olarak nerede, HTML sürümüne göre de değişir. Bu da onlardan kaçınmak için iyi bir neden gibi görünüyor (en açık ve yaygın ve tutarlı durumlar hariç).

— TextGeek

@TextGeek <!DOCTYPE html>.

— Det

-3

Firebug bunu doğru gösteriyor çünkü Tarayıcınız sizin için kötü işaretlemeyi otomatik olarak düzeltir. Bu davranış hiçbir yerde belirtilmez ve tarayıcıdan tarayıcıya değişebilir (değişecektir). Bu etiketler kullandığınız DOCTYPE için gereklidir ve atlanmamalıdır.

Html elemanı her html sayfası kök unsurudur. Diğer tüm öğelerin açıklamasına bakarsanız, bir öğenin nerede kullanılabileceğini söyler (ve neredeyse tüm elemanlar kafa veya gövde gerektirir).

— Halfdan
kaynak

Peki, tarayıcılar arası olmayabilir?

— Larry Cinnabar

5

diğer bir deyişle - tanımlanmamış sonuçlar veren kötü uygulama.

— Randy

3

@Innuendo Bir şey büyük olduğu için iyi bir araya getirildiği anlamına gelmez.

— Demian Brecht

2

Otoriteye bir itiraz olarak bunu ikna edici bulmuyorum. google.com da geçersiz HTML'dir. Sizinki olması gerektiği anlamına gelmez.

— Rein Henrichs

17

Elemanlar mevcut olmalıdır. Etiketlerin hiçbir şey söylemediğini söylemiyor . Aslında, html / head / body etiketleri olmayan HTML, olması gereken yerde hiçbir öğe görünmediği sürece geçerlidir . ( örneğin, <title><p></p>

— a'dan