O boilerplate code - código modelo- ou só boilerplate - modelo- son seccións de código que se repiten en distintos lugares con pouca ou ningunha variación.
Un modelo de inicio HTML alo menos debería incluír as seguintes compoñentes:
html
: A linguaxe de marcas utilizada para estruturar o contido dun sitio web.css
:A linguaxe utilizada para o estilo e o deseño dun sitio web. Opcional.javascript
:Unha linguaxe de programación utilizada para engadir interactividade e funcionalidade dinámica a un sitio web. Tamén opcional.
Os elementos HTML que se atopan habitualmente nun modelo HTML normalmente inclúen:
<!DOCTYPE html>
:A declaración do tipo de documento e a versión de HTML que se emprega, normalmente HTML5.<html lang="">
:A etiqueta <html> define a raíz dun documento HTML e contén todos os demais elementos HTML. Inclúese o atributolang
posto que é un aspecto importante da accesibilidade web e da internacionalización. Este atributolang
especifica o idioma dos contidos dunha páxina web, o que pode axudar ás tecnoloxías de asistencia, como os lectores de pantalla, a comprender e ler con precisión o texto da páxina. Ademais, o atributolang
tamén pode afectar á optimización dos motores de busca (SEO) e á forma en que se representa o texto en distintos idiomas.<head>
:Esta etiqueta contén información sobre o documento, como o título, os metadatos e as ligazóns a arquivos CSS e JavaScript, que aínda que non se mostran no corpo da páxina web inflúen en como se mostran e distribúen os contidos.<meta charset="UTF-8">
:Esta etiqueta define a codificación de caracteres para o documento. UTF-8 é unha codificación de caracteres, adoptada de xeito común, que admite unha ampla gama de caracteres de diferentes idiomas e linguaxes de código.<meta name="viewport" content="width=device-width, initial-scale=1.0">
:Esta etiqueta define o comportamento inicial da xanela gráfica ou área do navegador utilizada para mostrar a páxina web. O valorwidth=device-width
define o ancho de mostra ao ancho do dispositivo, einitial-scale=1
establece o nivel de zoom inicial ao 100%.<title>
: Esta etiqueta define o título da páxina web, que se mostra na pestana do navegador ou na barra de título.<body>
: Esta etiqueta contén o contido principal da páxina web, como títulos, texto, imaxes, vídeos, ligazóns e botóns.
Lembra que un modelo inicial ou boilerplate HTML tamén pode incluír outras tecnoloxías como bloque de estilo, meta etiquetas do protocolo Open Graph, ligazons a librarías ou arquivos Javascript,.... E que o modelo que segue será seguramente o mínimo recomendable á hora de iniciar un novo documento html.
<!DOCTYPE html>
<html lang="gl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="icon" href="./favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<main>
<h1>Benvidas a miña web!</h1>
</main>
<script src="index.js"></script>
</body>
</html>
Recursos
Podes atopar este modelo inicial entre os Gist de Github
Outros modelos, con outros recursos, podes atopalos en: