Cuando comienzas cualquier proyecto web y no usas ningún framework, es habitual que agregues siempre las mismas líneas HTML tanto en la cabecera como en el pié del documento. En este tutorial vamos a ver qué es lo mínimo que debes incluir en el archivo index.html.
Elementos que Debes Incluir
Aquí tienes una lista con los elementos que deberías incluir:
- Declaración del Tipo de Documento: Es común olvidarse de esta declaración, ya que no es imprescindible para que la página que estás creando funcione. Sin embargo, siempre está bien incluir la etiqueta doctype para indicar el contenido del documento a los navegadores o a los diferentes motores que vaya a consumirlo.
<!doctype html>No se trata de una etiqueta HTML, sino que es simplemente algo que proporciona información al navegador acerca del tipo de documento que se encontrará. Esta declaración no es sensible a las mayúsculas, por lo que puedes escribirla como te plazca. Para más detalles, consulta qué es y cómo se utiliza la etiqueta doctype.
- Codificación de Caracteres: La codificación de caracteres se indica mediante una meta etiqueta HTML. La codificación más utilizada es la UTF-8, que cubre el 95% de los caracteres de los idiomas existentes:
<meta charset="utf-8">Aquí tienes más información acerca de la codificación UTF8.
- Definición del Viewport: El viewport no es ningún estándar y se suele utilizar para definir el comportamiento de los navegadores en dispositivos móviles. En general, al ancho máximo del documento debe ser equivalente al ancho máximo de la pantalla del dispositivo. Para definir este valor se se usa la siguiente meta etiqueta:
<meta name="viewport" content="width=device-width, initial-scale=1">Como ves, también se define la escala, que hace posible agregar un zoom si es necesario, aunque en este caso es la escala 1:1, que es la más común, ya que en general, se suelen utilizar media queries CSS para definir los estilos del documento. Puedes encontrar más información acerca del viewport aquí.
- Versiones Antiguas de Internet Explorer: La meta etiqueta X-UA-Compatible permite definir la versión de Internet Explorer en la cual se debe renderizar la página. Esta etiqueta ya no se usa del mismo modo ni en Internet Explorer 11 ni en el navegador Microsoft Edge. El navegador Internet Explorer siempre comenzará a renderizar la página usando la última versión, por lo que esta etiqueta debe situarse en la parte superior del documento. Cuando el navegador encuentre esta etiqueta, el renderizado volverá a comenzar desde cero. En general, recomiendo usar «IE=edge» como valor, puesto que las versiones antiguas de Internet Explorer incluyen bastantes bugs y no suelen respetar los estándares:
<meta http-equiv="x-ua-compatible" content="ie=edge"> - Enlaces a Archivos CSS: En general, los enlaces a los archivos CSS usan la etiqueta link, y deben colocarse en la cabecera o head del documento.
- Enlaces a Archivos JavaScript: Con respecto a lo scripts de JavaScript o archivos JS, existen diferentes lugares en dónde incluirlos. Podrías incluirlos directamente en la cabecera, pero si uno de los scripts modifica algún elemento HTML, seguramente salte algún error, ya que el código HTML al que hace referencia todavía no se habrá renderizado. Este es emotivo de que la librería jQuery incluya la famosa función
$( document ).ready(). Además, el rendimiento es bastante malo, ya que se bloqueará el análisis del código HTML. Para una explicación más detallada, consulta por qué no debes incluir scripts en la cabecera. Estas son las opciones que tienes:- Incluye los archivos JavaScript en el body: Debes incluirlos justo antes de la etiqueta
</body>, ya que de este modo, primero se ralizará el análisis del código HTML de la página y luego se cargarán los scripts. - Incluye los archivos JavaScript en el head: Con la diferencia de que es imprescindible que uses los atributos
asyncodefer, que son dos atributos que solucionan los problemas de carga y de rendimiento de los scripts en la cabecera. A día de hoy es el método más recomendable. Para más información, consulta cómo cargar scripts usando async y defer de forma eficiente.
- Incluye los archivos JavaScript en el body: Debes incluirlos justo antes de la etiqueta
- Estandarizando estilos: Por último, tampoco estaría mal que usases algún tipo de framework CSS que estandarize los estilos de diferentes navegadores. Por ejemplo, puedes usar Normalize.css, que es el que usa Bootstrap, entre otros frameworks. Puedes encontrarlo aquí.
El Resultado Final
Aquí tienes la plantilla del archivo index.html resultante, en la que se incluyen todos los elementos de la lista:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Titulos del Documento</title>
<link rel="stylesheet" href="css/archivo.css" />
<link rel="stylesheet" href="css/normalize.css" />
<link rel="icon" href="favicon.png" />
</head>
<body>
<script src="js/script.js"></script>
</body>
</html>
Edu Lázaro: Ingeniero técnico en informática, actualmente trabajo como desarrollador web y programador de videojuegos.
