Os comentários destacados nesta versão do modelo de código HTML5 ensinarão você sobre cada item do documento.
Explicação do modelo HTML5 básico
Este modelo HTML5, na minha opinião, é o mínimo para um documento prático compatível com HTML5. Eu gostaria de elaborar algumas das decisões que tomei com este modelo.
Colocação de roteiros
É uma prática recomendada colocar seus scripts de bloqueio de renderização perto do final do seu documento HTML, logo antes da </body>tag de fechamento (ou optar por não usá-los em primeiro lugar). Isso permite que o conteúdo visual, o CSS e o modelo de objeto do documento sejam renderizados primeiro, melhorando a velocidade percebida e o desempenho de suas páginas da web.
Mas fazer referência a scripts no final nem sempre é possível, então mova suas referências de script para cima no documento HTML, se necessário. Além disso, como forma de aprimoramento progressivo, você deve usar preferencialmente o async atributo HTML5 com suas <script>referências para que elas possam carregar de forma assíncrona e paralela, pelo menos em navegadores da Web que sejam capazes de fazê-lo. Muito utilizado em sites de criação de sites São Paulo e de outros ramos de atividade.
Suporte do IE 9 e abaixo com o modelo HTML5
Apesar dos esforços louváveis da equipe do Internet Explorer para que seus usuários atualizem para a versão mais recente do navegador, a realidade é que ainda há muitas pessoas que usam o IE 9 e inferior.
Para poder renderizar novos elementos HTML5 e consultas de mídia, este modelo tem um comentário condicional para servir html5shiv de Alexander Farkas e Respond.js de Scott Jehl.
Eles serão servidos por meio de uma CDN pública confiável. O comentário condicional só carregará esses scripts para usuários no IE 9 e inferior.
Isso instrui explicitamente o Internet Explorer a usar o mecanismo de layout mais atual disponível na máquina do usuário. À medida que avançamos para o futuro e o uso de navegadores IE desatualizados não é mais um problema, eu adoraria poder remover esses itens específicos do navegador do modelo.
Muitos argumentarão comigo que a marcação específica do navegador não pertence a um clichê genérico, mas estou favorecendo a praticidade/pragmatismo sobre a semântica neste caso.
Um pouco de marcação extra e servir condicionalmente a dois pequenos scripts apenas aqueles que exigem isso é um compromisso razoável para poder usar elementos HTML5 e consultas de mídia.
Ícones da tela inicial do Android e iOS para o modelo de código HTML5
Cerca de 36% deste modelo HTML5 já é para oferecer suporte a uma família de navegadores específica, então decidi não incluir as referências do ícone da tela inicial por padrão. No entanto, é uma boa ideia adicionar ícones de tela inicial do Android e iOS para suas páginas da web, porque esses são dois sistemas operacionais móveis muito populares.
Estilo de recuo HTML
Minha preferência por documentos HTML é iniciar o recuo no primeiro elemento filho dentro do <body> elemento. Isso é mais prático e legível para um desenvolvedor porque depois que os itens padrão são definidos, eles raramente mudam enquanto estamos desenvolvendo a marcação frontal.
No entanto, o que muda com bastante frequência enquanto desenvolvemos o front-end são as coisas dentro do <body> elemento. Por exemplo, costumo atualizar hierarquias de elementos, tipos de elementos e estruturas aninhadas com bastante frequência enquanto estou construindo o layout e a estrutura de conteúdo.