Quali sono le migliori pratiche per ordinare gli elementi in <head>?


90

può usare qualsiasi cosa in qualsiasi ordine? il posizionamento di <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">è importante prima<title>

questo è il più usato, è il modo migliore?

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

questo sito http://stackoverflow.com non ha alcuna codifica e<meta>

Uso un CMS che ha una componente SEO che aggiunge ogni <meta>per SEO dopo tutto js e css. File. il posizionamento di elementi in qualsiasi ordine consentito <head>influisce sulla compatibilità e sulla codifica dei documenti?


Dove sono finiti tutti i commenti?
Pekka

Questo sito (stackoverflow.com) ha il suo set di codifica (su UTF-8), è solo nelle intestazioni HTTP a cui appartiene. La definizione del set di caratteri in un meta tag è una sorta di soluzione alternativa.
jpsimons

2
Destra. È preferibile definire il set di caratteri nelle intestazioni HTTP, ma in alcune situazioni non è possibile impostarle (come caricare file dal disco locale), quindi il <meta>tag è una soluzione alternativa per questi casi, ma non essenziale.
Brian Campbell

C'erano un sacco di commenti proprio qui, almeno nove o dieci. Non erano niente di speciale ma non c'era nemmeno nulla di offensivo in loro. Dove sono andati tutti? Chi ha il potere di eliminare i commenti e perché?
Pekka

Abbiamo tutti il ​​potere di cancellare i nostri commenti; alcune persone hanno cancellato il proprio? Non ho mai visto i commenti su questa domanda, poiché ero impegnato a comporre la mia risposta. Sei sicuro di non pensare a un'altra domanda?
Brian Campbell

Risposte:


111

In HTML, il DOCTYPEdeve venire prima, seguito da un singolo <html>elemento, che deve contenere un <head>elemento contenente un <title>elemento, seguito da un <body>elemento. Vedi la descrizione della struttura globale di un documento HTML in HTML 4.01 e la bozza HTML5 ; i requisiti effettivi sono per lo più gli stessi tranne il DOCTYPE, ma sono descritti in modo diverso.

I tag reali ( <html>, </html>, <head>, ecc) sono opzionali; gli elementi verranno creati automaticamente se i tag non esistono. <title>è l'unico tag obbligatorio in HTML. Il documento HTML 4.01 valido più breve (almeno, che potrei generare) è (ha bisogno di un <p>perché ci deve essere qualcosa <body>per essere valido):

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

E il documento HTML5 valido più breve:

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

Notare che in XHTML, tutti i tag devono essere specificati esplicitamente; nessun elemento verrà inserito implicitamente.

I browser eseguono lo sniffing del tipo di contenuto in alcune circostanze per determinare il tipo di una risorsa che non è stata specificata utilizzando Content-Typeun'intestazione HTTP e anche lo sniffing della codifica dei caratteri se l' Content-Typeintestazione non è stata fornita o non include un charset(in genere dovresti provare per includere queste intestazioni e assicurarsi che siano corrette, ma in alcune circostanze non è possibile, ad esempio i file locali non trasferiti tramite HTTP). Tuttavia, per questi scopi, annusano solo un numero limitato di byte all'inizio del documento, quindi tutto ciò che intende influenzare lo sniffing del contenuto o lo sniffing della codifica dei caratteri dovrebbe essere vicino all'inizio del documento.

Per questo motivo, HTML5 specifica che qualsiasi metatag utilizzato per specificare il set di caratteri ( <meta http-equiv="Content-type" content="text/html; charset=...">o semplicemente <meta charset=...>) deve essere entro i primi 1024 byte del file per avere effetto. Quindi, se hai intenzione di includere informazioni sulla codifica dei caratteri nel tuo documento, dovresti inserire il tag all'inizio del file, possibilmente anche prima <title>dell'elemento. Ma ricorda che questo tag non è necessario se specifichi correttamente Content-typeun'intestazione.

In CSS, le dichiarazioni di stile successive hanno la precedenza su quelle precedenti , a parità di tutte le altre. Quindi, in genere dovresti inserire i fogli di stile più generici che possono essere sovrascritti in precedenza e i fogli di stile più specifici in seguito.

Per motivi di prestazioni, può essere una buona idea mettere gli script in fondo alla pagina, subito prima del </body>, perché il caricamento degli script blocca il rendering della pagina.

Ovviamente, i <script>tag dovrebbero essere ordinati in modo che gli script che dipendono da ciascun ordine abbiano le dipendenze caricate per primi.

Nel complesso, a parte i vincoli che ho già specificato, l'ordine dei tag all'interno <head>non dovrebbe importare troppo, a parte la leggibilità. Tendo a vedere il <title>verso l'alto e mettere gli altri <meta>tag in una sorta di ordine logico.

La maggior parte delle volte, l'ordine in cui inserire le cose nel corpo di un documento HTML dovrebbe essere l'ordine in cui dovrebbero essere visualizzate o l'ordine in cui dovrebbero essere visualizzate. Puoi usare i CSS per riorganizzare le cose, ma gli screen reader generalmente leggono le cose in ordine di origine, gli indici di ricerca estraggono le cose in ordine di origine e così via.


5
Quel TITOLO è obbligatorio era una novità per me e sembra un po 'strano. Ma controllando le specifiche ufficiali ovviamente hai assolutamente ragione. Vivere e imparare!
Carl Smotricz

Ciò che mi ha sorpreso è che è l'unico tag obbligatorio ... In realtà ho sostenuto che dovrebbe essere reso opzionale anche in HTML5 (poiché non è realmente necessario per cose come i gadget che saranno sempre in un iframee non avranno mai un titolo visibile ), ma hanno deciso di non cambiarlo questa volta.
Brian Campbell

@Brian - grazie Brian per questa bella spiegazione. Quindi non mi ha mai deluso. questo sito ha delle menti. e un'altra cosa U capisce molto bene la domanda, quindi rispondi molto bene. ottimo lavoro.
Jitendra Vyas

1
@ Jitendra Ah ah! Ho risposto a molte delle tue domande recenti, vero? Sono un po 'ubriaco per una festa di capodanno. Ma posso provare ... ma non garantisco che la mia risposta sarà buona come l'ultima coppia, però.
Brian Campbell

3
L'approccio moderno consiste nell'inserire <script>tag con un attributo asynco deferin <head>. Vedere stackoverflow.com/questions/436411/...
joshreesjones

31

Questo è il modello che utilizzo, elimina tutto ciò che non ti serve per un nuovo progetto.

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

6
X-UA-Compatible deve essere il primo tag in testa a causa di stackoverflow.com/questions/3449286/…
Denis

@Denis sai cosa <html class="default"> significa?
shaijut

3
@stom, intendi perché ci sono attributi di classe? Richiede codice JavaScript aggiuntivo per rimuovere quella classe una volta caricata la pagina. In questo modo, saprai che JavaScript è abilitato nel browser. Se questo attributo esiste ancora, significa che JavaScrips è disabilitato in modo da poter mostrare un messaggio all'utente utilizzando CSS, se necessario
Denis

@Denis usa <noscript> </noscript> per verificare se javascript è abilitato
TheCrazyProfessor

1
Potresti commentare, per favore, il tuo ragionamento per questo ordine?
2540625

7

Aggiungendo alcuni suggerimenti sulle prestazioni alla risposta di Brian, la priorità più alta dovrebbe logicamente essere le cose che dovranno essere scaricate, in modo che il browser possa iniziare a scaricarle al più presto e le cose che influenzeranno il modo in cui la pagina viene presentata. Quindi suggerirei:

  • Metas che influenzano l'aspetto, come set di caratteri (richiesto anche in anticipo dalle specifiche), viewport, supporto per app web per dispositivi mobili
  • Titolo in alto in modo che il browser possa renderlo il prima possibile e l'utente abbia la sensazione che stia succedendo qualcosa
  • Favicon e icone touch
  • CSS (almeno CSS per above-the-fold; altri CSS possono essere caricati nel piè di pagina se vuoi essere fantasioso). Questo passaggio in genere impedisce a tutto il resto di procedere, motivo per cui ho inserito gli elementi precedenti sopra di esso, poiché forniscono un feedback durante il ritardo CSS.
  • Script critici (come lo sniffing dello user-agent che può influenzare il layout) che non possono essere caricati nel piè di pagina
  • Tutto il resto (ad es. Metadati necessari sotto forma di link e meta tag)

Potresti anche considerare di inserire in linea qualunque CSS e JS sia caricato in testa, specialmente se è piccolo ed è improbabile che lo script / foglio esterno venga memorizzato nella cache in base al profilo del tuo visitatore tipico. E se lo fai in linea, idealmente vorrai comprimerlo.

Ultima cosa: l'utente deve attendere la testa e le risorse di blocco che carica, quindi è meglio mettere il più possibile nel corpo o nel piè di pagina.


7

Secondo W3 dovrebbe essere:

  • Meta charset
  • Titolo
  • Meta name = "descrizione"
  • Meta name = "parole chiave"
  • Foglio di stile
  • File JavaScript

L'articolo collegato sta reindirizzando e non sembra dire nulla sull'ordine.
2540625

I fogli di stile bloccano il rendering, piuttosto caricano js in modo asincrono prima di CSS.
Null


5

Si desidera prima il tipo di contenuto in quanto indica la codifica dei caratteri, altrimenti se viene visualizzato in seguito, alcuni browser tentano di indovinare la codifica. (Non ricordo le specifiche, ma penso che IE indovinerà se non trova una codifica nei primi 75 caratteri del documento?)

La maggior parte dei server web invia la codifica nelle intestazioni HTTP, ma se un utente salva la tua pagina, le intestazioni non vengono salvate con essa.

Metterei i riferimenti CSS al secondo in modo che il browser li scarichi il prima possibile.

JavaScript non lo metterei in testa, dovrebbe andare in fondo alle tue pagine in quanto il download blocca il rendering delle pagine.


0

IIRC, alcuni browser ricaricheranno il documento quando incontrano un content-typeelemento. Quindi quell'elemento dovrebbe probabilmente essere il primo all'interno headdell'elemento del documento.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.