Original article: Basic HTML5 Template: Use This HTML Boilerplate as a Starter for Any Web Dev Project

Cuando estás construyendo un nuevo sitio web, es importante tener una buena base para comenzar. En este artículo, te explicaré qué es el boilerplate en HTML5 y cómo crear una plantilla básica para usar en tus proyectos.

¿Qué significa boilerplate (plantilla) en HTML5?

De acuerdo a Wikipedia,

Se conoce como Boilerplate code o código boilerplate a secciones de código que se repiten en varios lugares con poca o ninguna variación.

El boilerplate en HTML es una plantilla que agregarás al inicio de tu proyecto. Debes añadir esté código a todas tus páginas de HTML.

Ejemplo de plantilla en HTML5

Veamos un ejemplo 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>

¿Qué es el doctype en HTML?

La primera línea en tu código de HTML debe ser la declaración del doctype. El doctype le dice al navegador en qué versión de HTML está escrita la página.

<!DOCTYPE html>

Si olvidas incluir esta línea de código en tu  archivo, algunas de las etiquetas de HTML5 como <article>, < footer > y <header> podrían no ser soportadas por el navegador.

¿Qué es el elemento root?

La etiqueta <html> es el elemento superior en el archivo HTML. Las etiquetas <head> y <body> van anidadas dentro de <html>.

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body></body>
</html>

El atributo lang dentro de la etiqueta de apertura <html> configura el idioma de la página. También es bueno incluirlo por razones de accesibilidad, ya que los lectores de pantalla sabrán cómo pronunciar correctamente el texto.

¿Qué son las etiquetas head?

Las etiquetas <head> contienen información que es procesada por máquinas. Dentro de las etiquetas <head> anidarás metadatos, los cuales son datos que describen el documento a la 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>

¿Qué es la codificación de caracteres de UTF-88?

UTF-8 es la codificación de caracteres estándar que deberías usar en tus páginas web. Esto usualmente será la primera etiqueta <meta> mostrada dentro del elemento <head>.

 <meta charset="UTF-8">

De acuerdo al Consorcio World Wide Web,

Una codificación basada en Unicode como UTF-8 puede soportar muchos idiomas y puede acomodar páginas y formularios en cualquier mezcla de esos idiomas. Su uso también elimina la necesidad de que la lógica del server-side determine individualmente la codificación de caracteres para cada página servida o cada envío de formulario entrante.

¿Qué es la etiqueta meta viewport en HTML?

Esta etiqueta ajusta el ancho de la página al ancho del tamaño de la pantalla del dispositivo. Si tienes un dispositivo móvil que tiene 600 px de ancho, entonces la ventana del navegador también será de 600 px de ancho.

initial-scale controla el nivel de zoom. El valor de 1 para la initial-scale previene el zoom por defecto de los navegadores.

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

¿Qué significa X-UA-Compatible?

Esta etiqueta <meta> especifica el modo de documento para Internet Explorer. IE=edge es el modo admitido más alto.

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

¿Qué son las etiquetas title de HTML?

La etiqueta <title> es el título para la página web. Este texto se muestra en la barra de título del navegador.

    <title>HTML 5 Boilerplate</title>
Screen-Shot-2021-07-30-at-4.15.25-AM

Hojas de estilo CSS

Este código enlazará tu CSS personalizado a la página HTML. rel="stylesheet" define la relación entre el archivo HTML y la hoja de estilos externa.

    <link rel="stylesheet" href="style.css">

Etiquetas script en HTML

Las etiquetas script externas serán colocadas justo antes de la etiqueta de cierre <body>. Aquí es donde puedes enlazar tu código externo de JavaScript.

	<script src="index.js"></script>

Conclusión

Debes agregar una plantilla HTML5 a cada una de tus páginas HTML. Este código inicial contiene información importante como el doctype, metadatos, hojas de estilos y etiquetas script.