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.