Modelo de inicio ou HTML boilerplate

  • Publicado en Deseño web
  • Actualizado
  • 4 minutos de lectura
  • Etiquetado como ,

Modelo de inicio ou HTML boilerplate

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 atributo lang posto que é un aspecto importante da accesibilidade web e da internacionalización. Este atributo lang 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 atributo lang 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 valor width=device-width define o ancho de mostra ao ancho do dispositivo, e initial-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:

Deixa unha resposta

Este sitio emprega Akismet para reducir o spam. Aprende como se procesan os datos dos teus comentarios.