Quais são as práticas recomendadas para solicitar elementos em <head>?

91

pode usar qualquer coisa em qualquer ordem? a colocação <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">é importante antes<title>

esse é o mais usado, é o melhor jeito?

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

este site http://stackoverflow.com não tem nenhuma codificação e<meta>

Eu uso um CMS que tem componente de SEO que adiciona tudo <meta>para SEO depois de tudo js e css. arquivos. A colocação de qualquer elemento em qualquer ordem permitida pode <head>afetar a compatibilidade e a codificação do documento?

html css xhtml w3c Jitendra Vyas
fonte
Para onde foram todos os comentários?
Pekka
Este site (stackoverflow.com) tem sua codificação definida (para UTF-8), está apenas nos cabeçalhos HTTP a que pertence. Definir o conjunto de caracteres em uma metatag é uma espécie de solução alternativa.
jpsimons
2
Direito. É preferível definir o conjunto de caracteres nos cabeçalhos HTTP, mas em algumas situações você não pode defini-los (como carregar arquivos de seu disco local), então a <meta>tag é uma solução alternativa para esses casos, mas não essencial.
Brian Campbell
Houve um monte de comentários aqui, pelo menos nove ou dez. Eles não eram nada de especial, mas não havia nada de ofensivo neles também. Onde foram todos? Quem tem o poder de excluir comentários e por quê?
Pekka
Todos nós temos o poder de excluir nossos próprios comentários; algumas pessoas apagaram os seus próprios? Nunca vi os comentários sobre essa questão, pois estava ocupado redigindo minha resposta. Tem certeza de que não está pensando em outra pergunta?
Brian Campbell

Respostas:

111

Em HTML, o DOCTYPEdeve vir primeiro, seguido por um único <html>elemento, que deve conter um <head>elemento contendo um <title>elemento, seguido por um <body>elemento. Veja a descrição da estrutura global de um documento HTML no HTML 4.01 e o rascunho do HTML5 ; os requisitos reais são basicamente os mesmos, exceto os DOCTYPE, mas são descritos de forma diferente.

As marcas reais ( <html>, </html>, <head>, etc) são opcionais; os elementos serão criados automaticamente se as tags não existirem. <title>é a única tag necessária em HTML. O menor documento HTML 4.01 válido (pelo menos, que eu poderia gerar) é (precisa de um <p>porque precisa haver algo no <body>para ser válido):

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

E o menor documento HTML5 válido:

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

Observe que em XHTML, todas as tags devem ser especificadas explicitamente; nenhum elemento será inserido implicitamente.

Os navegadores realizam a detecção de tipo de conteúdo em algumas circunstâncias para determinar o tipo de um recurso que não foi especificado usando um Content-Typecabeçalho HTTP, e também a detecção de codificação de caracteres se o Content-Typecabeçalho não tiver sido fornecido ou não incluir um charset(você geralmente deve tentar para incluir esses cabeçalhos e verifique se eles estão corretos, mas há algumas circunstâncias em que você não pode, como arquivos locais não transferidos por HTTP). Eles apenas detectam um número limitado de bytes no início do documento para esses propósitos, portanto, qualquer coisa que tenha a intenção de afetar a detecção de conteúdo ou codificação de caracteres deve estar perto do início do documento.

Por esse motivo, o HTML5 especifica que qualquer metatag que é usada para especificar o conjunto de caracteres ( <meta http-equiv="Content-type" content="text/html; charset=...">ou simplesmente <meta charset=...>) deve estar dentro dos primeiros 1024 bytes do arquivo para ter efeito. Portanto, se você pretende incluir informações de codificação de caracteres em seu documento, deve colocar a tag no início do arquivo, possivelmente antes do <title>elemento. Mas lembre-se de que essa tag é desnecessária se você especificar um Content-typecabeçalho corretamente .

Em CSS, as declarações de estilo posteriores têm precedência sobre as anteriores , todo o resto sendo igual. Portanto, você geralmente deve colocar as folhas de estilo mais genéricas que podem ser substituídas anteriormente, e as folhas de estilo mais específicas posteriormente.

Por motivos de desempenho, pode ser uma boa ideia colocar scripts na parte inferior da página, logo antes de </body>, porque o carregamento de scripts bloqueia a renderização da página.

Obviamente, as <script>tags devem ser ordenadas de forma que os scripts que dependem de cada pedido tenham as dependências carregadas primeiro.

No geral, além das restrições que já especifiquei, a ordem das tags dentro <head>não deve importar muito, a não ser pela legibilidade. Tenho tendência a gostar de ver a <title>parte superior e colocar as outras <meta>tags em algum tipo de ordem lógica.

Na maioria das vezes, a ordem em que você deve colocar as coisas no corpo de um documento HTML deve ser a ordem em que devem ser exibidos ou a ordem em que devem ser acessados. Você pode usar CSS para reorganizar as coisas, mas os leitores de tela geralmente lerão as coisas na ordem da fonte, os índices de pesquisa extrairão as coisas na ordem da fonte e assim por diante.

Brian Campbell
fonte
5
O fato de TITLE ser obrigatório era novidade para mim e parece um pouco estranho. Mas, ao verificar as especificações oficiais, você está absolutamente correto, é claro. Viva e aprenda!
Carl Smotricz
O que me surpreendeu é que é a única tag obrigatória ... Na verdade, argumentei que deveria ser opcional também em HTML5 (já que não é realmente necessário para coisas como gadgets que sempre estarão em um iframee nunca terão um título visível ), mas decidiram não mudar isso desta vez.
Brian Campbell
@Brian - obrigado Brian por esta bela explicação. ASSIM, nunca me decepcionou. este site tem mentores. e mais uma coisa vc entende a pergunta muito bem então vc responde bem Ótimo trabalho.
Jitendra Vyas
1
@Jitendra Ha ha! Eu respondi um monte de suas perguntas recentes, não respondi? Estou um pouco bêbado da festa de ano novo. Mas posso tentar ... Só não garanto que minha resposta será tão boa quanto a das últimas.
Brian Campbell
3
A abordagem moderna é colocar <script>tags com um atributo asyncou deferem <head>. Consulte stackoverflow.com/questions/436411/…
joshreesjones
32

Este é o modelo que utilizo, basta excluir o que você não precisa para um novo projeto.

<!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>
Matej Janovčík
fonte
6
Compatível com X-UA deve ser a primeira tag no cabeçalho devido a stackoverflow.com/questions/3449286/…
Denis,
@Denis você sabe o que <html class="default"> significa?
Shaiju T
3
@stom você quer dizer por que existem atributos de classe? Requer código JavaScript adicional para remover essa classe assim que a página carrega. Fazendo isso, você saberá se o JavaScript está habilitado no navegador. Se este atributo ainda existir - isso significa que JavaScrips está desabilitado para que você possa mostrar alguma mensagem ao usuário usando CSS, se necessário
Denis
1
@Denis usa <noscript> </noscript> para verificar se há javascript ativado
TheCrazyProfessor
1
Você poderia comentar, por favor, o seu raciocínio para este pedido?
2540625
7

Adicionando algumas sugestões de desempenho à resposta de Brian, a prioridade mais alta deve logicamente ser coisas que precisarão ser baixadas, para que o navegador possa começar a baixá-las o mais rápido possível, e coisas que afetarão como a página é apresentada. Então, eu sugiro:

  • Metas afetando a aparência, como conjunto de caracteres (exigido no início das especificações também), janela de visualização, apple-mobile-web-app-capaz
  • Título próximo ao topo para que o navegador possa renderizá-lo o mais rápido possível e o usuário tenha a sensação de que algo está acontecendo
  • Favicon e ícones de toque
  • CSS (pelo menos CSS para acima da dobra; outro CSS pode ser carregado no rodapé se você quiser criar detalhes). Essa etapa normalmente impede que todo o resto prossiga, e é por isso que coloquei os itens anteriores acima dela, pois eles fornecem algum feedback durante o atraso do CSS.
  • Scripts críticos (como detecção de agente de usuário que pode afetar o layout) que não podem ser carregados no rodapé
  • Todo o resto (por exemplo, metadados necessários na forma de links e metatags)

Você também pode considerar embutir qualquer CSS e JS carregado no head, especialmente se for pequeno e o script / planilha externa provavelmente não for armazenado em cache de acordo com o perfil de seu visitante típico. E se você fizer isso embutido, o ideal é compactá-lo.

Última coisa: o usuário tem que esperar pela cabeça - e quaisquer recursos de bloqueio carregados - então é melhor colocar o máximo possível no corpo ou rodapé.

mahemoff
fonte
7

De acordo com W3 deve ser:

  • Meta charset
  • Título
  • Meta nome = "descrição"
  • Meta name = "palavras-chave"
  • Folha de estilo
  • Arquivos JavaScript
André Bravo Ferreira
fonte
O artigo vinculado está redirecionando e não parece dizer nada sobre a ordem.
2540625
As folhas de estilo bloqueiam a renderização, em vez de carregar js async antes do CSS.
Nulo
6

A maioria dos navegadores não se importa como você ordena seus elementos, mas você deve sempre especificar charsetprimeiro.

Melhores práticas para IE7 + exigem que os charset, X-UA-Compatiblee basedeclarações ocorrer antes de qualquer outra coisa no head, caso contrário o navegador é iniciado mais e re-parses tudo que veio antes.

Jayrobinson
fonte
5

Você quer seu tipo de conteúdo primeiro, pois isso denota a codificação de caracteres, caso contrário, se vier mais tarde, alguns navegadores tentam adivinhar a codificação. (Não me lembro dos detalhes, mas acho que o IE vai adivinhar se não encontrar uma codificação nos primeiros 75 caracteres do documento?)

A maioria dos servidores da web envia a codificação nos cabeçalhos HTTP, mas se um usuário salvar sua página, os cabeçalhos não serão salvos com ela.

Eu colocaria as referências CSS em segundo lugar para que o navegador as baixe o mais rápido possível.

JavaScript eu não colocaria na cabeça, ele deve ir para o final de suas páginas, pois o download bloqueia a renderização das páginas.

Ryan Doherty
fonte
0

IIRC, alguns navegadores irão recarregar o documento ao encontrar um content-typeelemento. Portanto, esse elemento provavelmente deve vir primeiro dentro do headelemento do documento.

David R Tribble
fonte