È necessario scrivere tag HEAD, BODY e HTML?

194

E 'necessario scrivere <html>, <head>e <body>tag?

Ad esempio, posso creare una tale pagina:

<!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>

E Firebug separa correttamente testa e corpo: inserisci qui la descrizione dell'immagine

La convalida del W3C dice che è valida.

Ma raramente vedo questa pratica sul web.

C'è qualche motivo per scrivere questi tag?

html tags

— Larry Cinnabar
fonte

5

Il validatore HTML5 su html5.validator.nu richiede il titletag. Questo è il documento più piccolo che considera valido:<!DOCTYPE html> <title>A</title>

— bonh,

142

Tralasciando i html, heade body tag è certamente consentito dalle specifiche HTML. Il motivo di fondo è che i browser hanno sempre cercato di essere coerenti con le pagine Web esistenti e le primissime versioni di HTML non definivano quegli elementi. Quando HTML~~2.0~~ per prima cosa, è stato fatto in modo che i tag sarebbero stati inferiti quando mancavano.

Trovo spesso conveniente omettere i tag durante la prototipazione e soprattutto quando si scrivono casi di test in quanto aiuta a mantenere il markup focalizzato sul test in questione. Il processo di inferenza dovrebbe creare gli elementi esattamente come si vede in Firebug e i browser sono abbastanza coerenti nel farlo.

Ma...

IE ha almeno un bug noto in quest'area. Anche IE9 mostra questo. Supponiamo che il markup sia questo:

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

Dovresti (e farlo in altri browser) ottenere un DOM simile al seguente:

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

Ma in IE ottieni questo:

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

Guardalo da solo.

Questo errore sembra limitato al formtag iniziale che precede qualsiasi contenuto di testo e qualsiasi bodytag iniziale.

— Alohci
fonte

5

HTML 1.0 definito HTML, HEAD e BODY: w3.org/MarkUp/draft-ietf-iiir-html-01.txt

— Liza Daly

6

@Liza - Beh, è discutibile se quel documento definisce HTML 1.0, ma io sono corretto, che gli elementi risalgono a HTML 2.0. Grazie. Tuttavia, vedi w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/… dal 1992. Gli elementi non esistono allora.

— Alohci,

1

Questo bug sembra non influire su Internet Explorer 11 (ho testato anche IE8, che confermo è interessato)

— jornane,

2

@Justin - Queste restrizioni sono in gran parte tecniche e normalmente non ti influenzeranno. Quindi sì, se è importante per la tua pagina se appare un nodo di commento o uno spazio bianco appena prima dell'elemento head o appena all'interno di esso (il JS della pagina potrebbe dipendere da esso), devi identificare esplicitamente il tag di inizio head per rendere corretta quella relazione . Ma se non lo fa, (e non ho ancora scritto una pagina HTML dove lo fa), il tag head verrà dedotto in qualche modo ragionevole e puoi tranquillamente ometterlo. Allo stesso modo per gli altri tag html, head e body.

— Alohci,

3

@Justin Questa risposta sembra avere un buon indizio in quanto la domanda è "È necessario scrivere i tag HEAD, BODY e HTML?" non è una buona pratica. Le convenzioni tendono a cambiare ... basta dare un'occhiata alla google styleguide ... questa è una convenzione che afferma che dovresti omettere questi tag ... :-)

— Potherca,

77

La Guida di stile di Google per HTML consiglia di omettere tutti i tag opzionali.
Che comprende <html>, <head>, <body>, <p>e <li>.

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

Ai fini dell'ottimizzazione delle dimensioni dei file e della scansionabilità, prendere in considerazione l'omissione di tag opzionali. La specifica HTML5 definisce quali tag possono essere omessi.

(Questo approccio può richiedere che un periodo di tolleranza sia definito come una linea guida più ampia in quanto è significativamente diverso da ciò che gli sviluppatori Web in genere vengono insegnati. Per motivi di coerenza e semplicità è meglio omettere tutti i tag opzionali, non solo una selezione.)

<!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
fonte

2

Esempio di incompatibilità: lo strumento live-reload che utilizzo per lo sviluppo web (puer) inserisce automaticamente uno script in testa. Senza finalmente il tag <head>, non funziona.

— Offirmo,

@Offirmo Che diavolo è quello?

— Ken Sharp,

@KenSharp livereload strumenti di web dev solito lavoro con l'inserimento di un codice nelle pagine servite, così: <script src="http://localhost:35729/livereload.js"></script>. Per i modelli esotici, non capiscono dove dovrebbero inserire il loro codice.

— Offirmo,

1

@Offirmo La documentazione di livereload afferma che dovresti aggiungere tu stesso quello script alle pagine dei tuoi clienti. Forse stai usando una libreria magica che lo fa per te. Questa dovrebbe essere la fonte della difficoltà che stai riscontrando.

— kequc,

7

Omettere tutti i tag possibili è penny-saggio e pound-sciocco. Il risparmio di larghezza di banda è un piccolo% (soprattutto perché la maggior parte delle connessioni si comprime automaticamente), mentre le probabilità di errore umano sui casi limite sono elevate (si consideri autori, editori e persino scrittori di parser HTML). È anche più difficile trovare errori (a causa del cambiamento nell'entropia).

— TextGeek

48

Contrariamente alla nota di @Liza Daly sull'HTML5, quella specifica è in realtà abbastanza specifica su quali tag possono essere omessi e quando (e le regole sono un po 'diverse dall'HTML 4.01, principalmente per chiarire dove appartengono elementi ambigui come commenti e spazi bianchi)

Il riferimento pertinente è http://www.w3.org/TR/2011/WD-html5-20110525/syntax.html#optional-tags e dice:

Il tag iniziale di un elemento html può essere omesso se la prima cosa all'interno dell'elemento html non è un commento.
Il tag finale di un elemento html può essere omesso se l'elemento html non è immediatamente seguito da un commento.
Il tag iniziale di un elemento head può essere omesso se l'elemento è vuoto o se la prima cosa all'interno dell'elemento head è un elemento.
Il tag di fine di un elemento head può essere omesso se l'elemento head non è immediatamente seguito da un carattere spazio o da un commento.
Il tag iniziale di un elemento body può essere omesso se l'elemento è vuoto o se la prima cosa all'interno dell'elemento body non è un carattere spazio o un commento, tranne se la prima cosa all'interno dell'elemento body è uno script o un elemento di stile.
Il tag di fine di un elemento body può essere omesso se l'elemento body non è immediatamente seguito da un commento.

Quindi il tuo esempio è HTML5 valido e verrebbe analizzato in questo modo, con i tag html, head e body nelle loro posizioni implicite:

<!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>

Si noti che il commento "questo script sarà in testa" viene effettivamente analizzato come parte del corpo, sebbene lo script stesso faccia parte della testa. Secondo le specifiche, se si desidera che sia diverso, i tag </HEAD>e <BODY>potrebbero non essere omessi. (Anche se i tag corrispondenti <HEAD>e </BODY>possono ancora essere)

— Ian Clelland
fonte

15

È valido per ometterli in HTML4:

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

In HTML5 non ci sono elementi "obbligatori" o "opzionali" esattamente, poiché la sintassi HTML5 è definita più liberamente. Ad esempio title:

L'elemento title è un elemento obbligatorio nella maggior parte dei casi, ma quando un protocollo di livello superiore fornisce informazioni sul titolo, ad esempio nella riga dell'oggetto di un'e-mail quando HTML viene utilizzato come formato di creazione e-mail, l'elemento title può essere omesso .

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

Non è valido ometterli nel vero XHTML5, anche se non viene quasi mai usato (contro XHTML-act-like-HTML5).

Tuttavia, dal punto di vista pratico, spesso si desidera che i browser vengano eseguiti in "modalità standard", per prevedibilità nel rendering di HTML e CSS. Fornire un DOCTYPE e un albero HTML più strutturato garantirà risultati più prevedibili tra browser.

— Liza Daly
fonte

13

Non confondere gli elementi con i tag. Vedi i commenti di cHao altrove in questa pagina. Per html, heade body, gli elementi sono obbligatori, ma i tag sono opzionali.

— Alohci,

In realtà ti sbagli nell'ultimo bit. L'omissione dei tag è una funzione DTD SGML, tutti i browser che supportano l'analisi SGML (ovvero tutti i browser) supportano anche l'omissione dei tag. Il motivo per cui non puoi farlo in XHTML5 è perché è XML, non SGML. XML è troppo stupido per dedurre elementi.

— OdraEncoded

@OdraEncoded Puoi fornire una verifica per la tua dichiarazione, per favore? Non trovo che sia così (vedi lo standard HTML ).

— Spazzolino da denti

@OdraEncoded - vicino, ma non del tutto vero. L'omissione dei tag è una funzione opzionale per i parser SGML (sebbene la maggior parte lo supporti), come definito nella norma ISO 8879. Quasi tutti i parser HTML lo supportano, anche se 'html.parse' di Python sembra non farlo (vedere stackoverflow.com/questions/29954170/… ).

— TextGeek

14

È vero che le specifiche HTML consentono di omettere determinati tag in determinati casi, ma in generale farlo non è saggio.

Ha due effetti: rende le specifiche più complesse, il che a sua volta rende più difficile per gli autori di browser la scrittura di implementazioni corrette (come dimostrato da IE che sbagliano).

Ciò aumenta la probabilità di errori del browser in queste parti delle specifiche. Come autore di siti Web puoi evitare il problema includendo questi tag, quindi mentre le specifiche non dicono che devi farlo, ridurre le possibilità che qualcosa vada storto, il che è una buona pratica ingegneristica.

Inoltre, le ultime specifiche HTML 5.1 WG attualmente dicono (tenere presente che è un work in progress e potrebbe ancora cambiare).

Il tag iniziale di un elemento body può essere omesso se l'elemento è vuoto o se la prima cosa all'interno dell'elemento body non è un carattere spazio o un commento, tranne se la prima cosa all'interno dell'elemento body è un meta, link, script, stile o elemento modello.

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

Questo è un po 'sottile. Puoi omettere body e head e il browser dedurrà quindi dove dovrebbero essere inseriti quegli elementi. Ciò comporta il rischio di non essere espliciti, il che potrebbe causare confusione.

Così questo

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

fa sì che l'elemento script sia figlio dell'elemento body, ma questo

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

risulterebbe che il tag script sia figlio dell'elemento head.

Potresti essere esplicito facendo questo

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

e poi qualunque sia la tua prima, lo script o l'h1, entrambi appariranno prevedibilmente nell'elemento body. Queste sono cose che sono facili da trascurare durante il refactoring e il debugging del codice. (ad esempio, hai JS che sta cercando il primo elemento di script nel corpo - nel secondo snippet smetterebbe di funzionare).

Come regola generale, essere espliciti sulle cose è sempre meglio che lasciare le cose aperte all'interpretazione. A questo proposito XHTML è migliore perché ti costringe a essere completamente esplicito sulla struttura degli elementi nel tuo codice, il che lo rende più semplice e quindi meno soggetto a interpretazioni errate.

Quindi sì, puoi ometterli ed essere tecnicamente valido, ma generalmente non è saggio farlo.

— Peter Bagnall
fonte

1

IE sbaglia le cose perché agli autori non potrebbe importare di meno degli standard. È colpa loro se non funziona correttamente. Gli standard sono definiti, quindi dovrebbero assicurarsi che IE lavori con loro.

— Ken Sharp,

3

@KenSharp Non sono in disaccordo, ma fino a quando non riuscirai a costringere tutti i tuoi clienti a non usarlo, resteremo in qualche modo bloccati. Quindi è meglio scrivere codice che sia completamente inequivocabile piuttosto che fare affidamento su tutto ciò che funziona come dovrebbe.

— Peter Bagnall,

1

Gli utenti sono stati costretti a scaricare IE per anni per non essere conformi. Nessuno si aspetta che gli utenti continuino a utilizzare IE6, anche se le persone stanno ancora installando Windows XP. Non possiamo nemmeno aspettarci di supportare Windows 3.1 per sempre. Errore OSI livello 8.

— Ken Sharp,

1

Esattamente quali tag possono essere omessi e esattamente dove, varia anche in base alla versione HTML. Anche questo sembra un buon motivo per evitarli (ad eccezione dei casi più ovvi, comuni e coerenti).

— TextGeek

@TextGeek <!DOCTYPE html>.

— Det

-2

Firebug lo mostra correttamente perché il tuo browser corregge automaticamente il markup errato per te. Questo comportamento non è specificato da nessuna parte e può (varierà) da browser a browser. Tali tag sono richiesti dal DOCTYPE in uso e non devono essere omessi.

L' elemento html è l'elemento radice di ogni pagina html. Se guardi la descrizione di tutti gli altri elementi, indica dove può essere usato un elemento (e quasi tutti gli elementi richiedono testa o corpo).

— Halfdan
fonte

Quindi, potrebbe essere non cross-browser?

— Larry Cinnabar,

5

in altre parole: cattiva pratica che produce risultati indefiniti.

— Randy,

3

@Innuendo Solo perché qualcosa di grande non significa che sia ben messo insieme.

— Demian Brecht,

2

Come appello all'autorità, lo trovo poco convincente. google.com è anche HTML non valido. Non significa che il tuo dovrebbe essere.

— Rein Henrichs,

17

Gli elementi devono esistere. Niente dice che i tag facciano. L'HTML senza tag html / head / body è, infatti, valido fino a quando non appare alcun elemento dove non dovrebbe. ( <title>dopo un <p></p>, per esempio.)

— cHao,