Artigo original: Basic HTML5 Template: Use This HTML Boilerplate as a Starter for Any Web Dev Project
Ao criar um novo site da web, é importante ter uma boa base de início. Neste artigo, explicarei o que é um boilerplate de HTML 5 e como criar um modelo (template) básico para usar em seus projetos.
O que é um boilerplate de HTML 5?
De acordo com a Wikipédia,
um código boilerplate ou simplesmente boilerplate são seções de código que são repetidas em vários lugares com pouca ou nenhuma variação.
Um boilerplate em HTML é um modelo que você adicionará ao início do seu projeto. Você deve adicionar esse boilerplate a todas as suas página de HTML.
Exemplo de boilerplate de HTML 5
Vamos examinar um exemplo básico.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="index.js"></script>
</body>
</html>O que é um doctype em HTML?
A primeira linha do seu código em HTML deve ser a declaração de doctype. Um doctype diz ao navegador em qual versão do HTML a página está escrita.
<!DOCTYPE html>Se você esquecer de incluir essa linha de código em seu arquivo, algumas das tags de HTML 5, como <article>, < footer > e <header> poderão não ter o suporte de seu navegador.
O que é um elemento raiz (root) HTML?
A tag <html> é o elemento de nível superior do arquivo HTML. Você aninhará as tags <head> e <body> dentro dela.
<!DOCTYPE html>
<html lang="en">
<head></head>
<body></body>
</html>O atributo lang dentro da tag <html> de abertura define o idioma da página. Também é bom incluir o idioma por questões de acessibilidade, pois os leitores de tela saberão como pronunciar adequadamente o texto.
O que são as tags head em HTML?
As tags <head> contêm as informações que são processadas pelas máquinas. Dentro das tags <head>, você aninhará os metadados, que são os dados que descrevem o documento para a máquina.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="style.css">
</head>O que é a codificação de caracteres UTF-8?
O UTF-8 é a codificação de caracteres padrão que você deve usar em suas páginas da web. Ela geralmente será a primeira tag <meta> exibida no elemento <head>.
<meta charset="UTF-8">De acordo com o World Wide Web Consortium (página em inglês),
Uma codificação baseada em Unicode, como o UTF-8, pode dar suporte a vários idiomas e acomodar as páginas e formulários com qualquer mistura desses idiomas. Seu uso também elimina a necessidade de lógica do lado do servidor para determinar de modo individual a codificação de caracteres para cada página servida ou para cada envio de formulário que é recebido.
O que é a tag meta viewport no HTML?
Essa tag renderiza a largura da página no tamanho da tela do dispositivo. Se você tem um dispositivo móvel de 600px de largura, a janela do navegador também terá 600px de largura.
O parâmetro initial-scale controla o nível de zoom. O valor de 1 para initial-scale evita o zoom padrão dos navegadores.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
O que significa X-UA-Compatible?
Essa tag <meta> especifica o modo de documento para o Internet Explorer. IE=edge é o maior modo suportado.
<meta http-equiv="X-UA-Compatible" content="ie=edge">
O que são as tags title em HTML?
A tag <title> é o título da página da web. Esse texto é mostrado na barra de título do navegador.
<title>HTML 5 Boilerplate</title>
Folha de estilo de CSS (stylesheet)
Este código vinculará seu CSS personalizado à página em HTML. rel="stylesheet" define a relação entre o arquivo HTML e a folha de estilo (stylesheet) externa.
<link rel="stylesheet" href="style.css">
Tags de script em HTML
Tags de script externo serão colocadas logo antes da tag de fechamento do elemento body. É aí que você deve vincular seu código em JavaScript externo.
<script src="index.js"></script>
Conclusão
Você deve adicionar um boilerplate de HTML 5 a cada uma de suas páginas de HTML. Esse código inicial contém informações importantes, como o doctype, metadados, folhas de estilo externas e tags de script.