Guía básica HTML 5

esenciales

Etiquetas indispensables para el despliegue correcto de una página HTML en un navegador Web, en esta categoría se encuentran las etiquetas que conforman la estructura básica de un documento HTML apegado a buenas prácticas.

!doctype html

Descripción

Declara el tipo de documento y define que está bajo el estándar de HTML 5.

Sintaxis

<!doctype html>

html

Descripción

Es el contenedor de todos los elementos, visuales y no visuales, que componen la página. Es la etiqueta raíz o padre de todas las demás etiquetas, por lo tanto, todos demás elementos deben ser descendientes de esta etiqueta.

Atributos destacados

lang: Señala el idioma del contenido del documento, en este caso (español) se emplea "es" o "es-MX", según la norma ISO 639-1.

Sintaxis

<html lang="es-MX">
  <!-- Contenido del documento HTML -->
</html>

head

Descripción

Contiene información básica y de referencia para la página, como el título y la meta información (descripción, charset, autor, etc.), además de links, estilos y/o scripts necesarios para el despliegue y funcionamiento de la misma. Por defecto es un elemento no visible y no debe confundirse con la etiqueta semántica header.

Etiquetas secundarias

  • title: Su función es definir el título de la página, que será visible en el marco de la ventana o en la pestaña del navegador.
  • link: Usada para enlazar elementos externos con el documento HTML actual. Por ejemplo, favicons y hojas de estilo CSS.
  • meta: Se utiliza para definir metadatos del documento o sitio completo. El tipo, valores y contenido de los meta se define como atributo de la etiqueta.

Sintaxis

<head>
    <meta charset="UTF-8">
    <title> Título de la página </title>
    <link rel="stylesheet" href="hoja-de-estilos.css">
</head>

body

Descripción

Constituye el cuerpo de la página. Al interior de esta etiqueta se cargará todo el contenido visible del documento, como textos, imágenes, tablas, videos, etc.

Sintaxis

<body>
    <!-- Contenido visible de la página -->
</body>