Mira la lección en vídeo

Accede al vídeo completo de esta lección y a más contenido exclusivo con el Plan Plus.

Declaración DOCTYPE y su propósito

La declaración DOCTYPE (Document Type Declaration) es la primera línea que debe aparecer en todo documento HTML. Esta declaración no es una etiqueta HTML en sí misma, sino una instrucción especial que indica al navegador qué versión de HTML se está utilizando en el documento.

En HTML5, la declaración DOCTYPE se ha simplificado considerablemente respecto a versiones anteriores, quedando de la siguiente manera:

<!DOCTYPE html>

Esta declaración, aunque breve, cumple funciones esenciales para el correcto funcionamiento de las páginas web:

Propósito principal del DOCTYPE

El propósito fundamental del DOCTYPE es activar el modo estándar en los navegadores web. Cuando un navegador recibe un documento HTML, puede interpretarlo en diferentes modos:

Modo estándar: El navegador interpreta el documento siguiendo estrictamente las especificaciones de HTML y CSS.
Modo quirks (o modo de compatibilidad): El navegador emula el comportamiento de navegadores antiguos, lo que puede causar inconsistencias en la visualización.

Sin una declaración DOCTYPE válida, los navegadores entran automáticamente en modo quirks, lo que puede provocar que la página se muestre de forma diferente en distintos navegadores.

Características de la declaración DOCTYPE

La declaración DOCTYPE en HTML5 tiene varias características importantes:

Es insensible a mayúsculas y minúsculas, por lo que <!DOCTYPE html>, <!DOCTYPE HTML> o <!doctype html> funcionan igualmente.
No requiere una referencia a un DTD (Document Type Definition) como en versiones anteriores de HTML.
Debe aparecer antes de cualquier otro contenido o espacio en blanco en el documento.

Comparación con versiones anteriores

Para entender la simplificación que supone HTML5, veamos cómo era la declaración DOCTYPE en HTML 4.01:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Como podemos observar, la declaración en HTML5 es mucho más concisa y fácil de recordar, eliminando la necesidad de memorizar o copiar largas cadenas de texto.

Implementación correcta

Para implementar correctamente el DOCTYPE en un documento HTML5:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Mi primera página</title>
    </head>
    <body>
        <h1>Hola mundo</h1>
    </body>
</html>

Errores comunes a evitar

Existen algunos errores frecuentes al trabajar con la declaración DOCTYPE:

Omitir la declaración: Aunque el documento puede funcionar sin DOCTYPE, los navegadores entrarán en modo quirks, causando inconsistencias.
Añadir espacios antes del DOCTYPE: Cualquier carácter (incluso espacios en blanco) antes de la declaración puede hacer que los navegadores entren en modo quirks.
Escribirlo incorrectamente: Errores como <!DOCYPE html> o <DOCTYPE html> invalidarán la declaración.

Herramientas de validación

Para verificar que el DOCTYPE y el resto del documento HTML están correctamente implementados, podemos utilizar el Validador de Marcado W3C (https://validator.w3.org/), una herramienta oficial que comprueba la conformidad de los documentos HTML con los estándares.

La declaración DOCTYPE, aunque parezca un detalle técnico menor, es fundamental para garantizar que nuestras páginas web se muestren correctamente en todos los navegadores, siguiendo los estándares web actuales.

Elemento raíz HTML y atributos lang

El elemento <html> es el elemento raíz de cualquier documento HTML y actúa como contenedor principal para todos los demás elementos. Este elemento es fundamental en la estructura jerárquica de un documento HTML, ya que envuelve todo el contenido de la página web.

Después de la declaración DOCTYPE, el elemento <html> debe ser el primer elemento que aparece en el documento:

<!DOCTYPE html>
<html>
    <!-- Resto del contenido -->
</html>

Estructura básica del elemento HTML

El elemento <html> tiene una estructura simple pero esencial:

Es una etiqueta de apertura y cierre obligatoria
Contiene directamente dos elementos hijos principales: <head> y <body>
Puede incluir varios atributos, siendo lang uno de los más importantes

Un documento HTML correctamente estructurado siempre tendrá este elemento raíz envolviendo todo el contenido, estableciendo así el contexto principal para el navegador.

El atributo lang y su importancia

El atributo lang es uno de los atributos más importantes que debemos incluir en el elemento <html>. Este atributo especifica el idioma principal del contenido del documento:

<!DOCTYPE html>
<html lang="en">
    <!-- Contenido en inglés -->
</html>

Valores del atributo lang

El atributo lang utiliza códigos de idioma estandarizados según la norma ISO 639-1. Algunos ejemplos comunes son:

en - Inglés
es - Español
fr - Francés
de - Alemán
ja - Japonés
zh - Chino

También es posible especificar variantes regionales añadiendo un código de país después del código de idioma, separado por un guion:

<html lang="en-US"> <!-- Inglés de Estados Unidos -->
<html lang="es-ES"> <!-- Español de España -->
<html lang="es-MX"> <!-- Español de México -->

Beneficios de usar correctamente el atributo lang

Incluir el atributo lang en el elemento raíz HTML proporciona múltiples beneficios importantes:

Accesibilidad: Los lectores de pantalla utilizan esta información para determinar la pronunciación correcta al leer el contenido.
Motores de búsqueda: Ayuda a los buscadores a indexar correctamente el contenido y mostrarlo a usuarios que buscan en ese idioma.
Traducción automática: Los servicios de traducción pueden detectar más fácilmente el idioma original del documento.
Corrección ortográfica: Los navegadores pueden ofrecer sugerencias de corrección ortográfica adecuadas al idioma especificado.
Tipografía: Algunos navegadores ajustan detalles tipográficos (como espaciado o guiones) según el idioma.

Implementación correcta

Un ejemplo de implementación correcta del elemento raíz HTML con el atributo lang sería:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>My Website</title>
    </head>
    <body>
        <h1>Welcome to my website</h1>
        <p>This is a paragraph in English.</p>
    </body>
</html>

Contenido en múltiples idiomas

Si una página contiene secciones en diferentes idiomas, podemos mantener el idioma principal en el elemento <html> y especificar idiomas diferentes para secciones específicas usando el atributo lang en otros elementos:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Multilingual Page</title>
    </head>
    <body>
        <h1>Welcome to my website</h1>
        <p>This is a paragraph in English.</p>
        
        <div lang="es">
            <h2>Sección en español</h2>
            <p>Este párrafo está escrito en español.</p>
        </div>
        
        <div lang="fr">
            <h2>Section en français</h2>
            <p>Ce paragraphe est écrit en français.</p>
        </div>
    </body>
</html>

Errores comunes a evitar

Al trabajar con el elemento raíz HTML y el atributo lang, es importante evitar estos errores frecuentes:

Omitir el atributo lang: Aunque técnicamente el documento funcionará, se perderán todos los beneficios mencionados anteriormente.
Usar códigos incorrectos: Utilizar códigos no estándar como "sp" en lugar de "es" para español.
No actualizar el idioma: Cambiar el contenido de la página a otro idioma pero olvidar actualizar el atributo lang.
Confundir con el atributo hreflang: El atributo hreflang se usa en enlaces y no tiene el mismo propósito que lang.

Herramientas de validación

Para verificar que estamos utilizando correctamente el elemento HTML y el atributo lang, podemos usar:

El Validador de Marcado W3C (https://validator.w3.org/)
La extensión WAVE (Web Accessibility Evaluation Tool)
La herramienta de auditoría Lighthouse en las DevTools de Chrome

El elemento raíz HTML con su atributo lang constituye la base fundamental de cualquier documento HTML bien estructurado, estableciendo el contexto lingüístico y cultural para todo el contenido de la página.

Elementos head y body: propósito y diferencias

Guarda tu progreso

Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.

Progreso guardado

Asistente IA

Ejercicios

Iniciar sesión gratis

Más de 25.000 desarrolladores ya confían en CertiDevs

Los elementos <head> y <body> son dos componentes fundamentales dentro del elemento raíz <html> que cumplen funciones completamente diferentes pero complementarias en la estructura de un documento HTML.

El elemento head

El elemento <head> actúa como un contenedor de metadatos y no muestra contenido visible directamente en la página web. Funciona como el "cerebro" del documento, proporcionando información crucial sobre la página al navegador.

<head>
    <meta charset="UTF-8">
    <title>Mi página web</title>
    <meta name="description" content="Descripción de mi página web">
    <link rel="stylesheet" href="styles.css">
    <script src="script.js"></script>
</head>

Propósito principal del elemento head

El elemento <head> tiene varios propósitos esenciales:

Definir metadatos: Proporciona información sobre el documento como el conjunto de caracteres, descripción, palabras clave y autor.
Establecer el título: Contiene el elemento <title> que define el título de la página mostrado en la pestaña del navegador.
Vincular recursos externos: Permite enlazar hojas de estilo CSS, scripts JavaScript, fuentes y otros recursos.
Optimizar para motores de búsqueda: Incluye metaetiquetas que ayudan a los buscadores a indexar correctamente la página.
Controlar la visualización: Define cómo se mostrará la página en diferentes dispositivos mediante la etiqueta <meta name="viewport">.

Elementos comunes dentro de head

Dentro del elemento <head> podemos encontrar:

<title>: Define el título del documento (obligatorio).
<meta>: Proporciona metadatos como codificación de caracteres, descripción, autor, etc.
<link>: Establece relaciones con recursos externos como CSS.
<script>: Incluye o referencia código JavaScript.
<style>: Contiene reglas de estilo CSS internas.
<base>: Especifica la URL base para todas las URLs relativas.

El elemento body

El elemento <body> contiene todo el contenido visible de la página web. Es donde se coloca todo lo que el usuario verá y con lo que interactuará directamente.

<body>
    <header>
        <h1>Bienvenido a mi sitio web</h1>
        <nav>
            <ul>
                <li><a href="#inicio">Inicio</a></li>
                <li><a href="#acerca">Acerca de</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <p>Este es el contenido principal de mi página.</p>
        <img src="imagen.jpg" alt="Una imagen descriptiva">
    </main>
    
    <footer>
        <p>© 2024 Mi Sitio Web</p>
    </footer>
</body>

Propósito principal del elemento body

El elemento <body> cumple varios propósitos clave:

Mostrar contenido: Contiene todo el texto, imágenes, videos y otros elementos visibles.
Estructurar la información: Organiza el contenido mediante elementos semánticos como <header>, <main>, <footer>, etc.
Proporcionar interactividad: Incluye elementos interactivos como formularios, botones y enlaces.
Presentar datos: Muestra información mediante tablas, listas y otros elementos estructurales.
Crear la experiencia de usuario: Define la interfaz con la que interactuarán los visitantes.

Diferencias clave entre head y body

Las diferencias fundamentales entre estos dos elementos son:

| Característica | Elemento <head> | Elemento <body> | |----------------|-------------------|-------------------| | Visibilidad | Contenido no visible para el usuario | Contenido visible en la página | | Propósito | Metadatos y configuración | Contenido e interfaz de usuario | | Ubicación | Primer hijo del elemento <html> | Segundo hijo del elemento <html> | | Elementos típicos | <title>, <meta>, <link>, <script>, <style> | <h1>-<h6>, <p>, <div>, <img>, <a>, etc. | | Función | Informa al navegador sobre el documento | Muestra información al usuario |

Interacción entre head y body

Aunque son elementos separados, existe una estrecha relación entre ellos:

Los estilos definidos en <head> (mediante <style> o <link>) afectan a los elementos en <body>.
Los scripts en <head> pueden manipular el contenido de <body>.
Los metadatos en <head> pueden influir en cómo se muestra o comporta el contenido en <body>.

Implementación correcta

Un ejemplo de implementación correcta de ambos elementos:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Una página de ejemplo para mostrar head y body">
        <title>Head y Body en HTML</title>
        <link rel="stylesheet" href="styles.css">
        <script src="script.js" defer></script>
    </head>
    <body>
        <header>
            <h1>Elementos head y body</h1>
            <p>Esta es una página de demostración</p>
        </header>
        <main>
            <section>
                <h2>Sección principal</h2>
                <p>Aquí va el contenido principal de la página.</p>
                <img src="example.jpg" alt="Imagen de ejemplo">
            </section>
        </main>
        <footer>
            <p>© 2024 - Todos los derechos reservados</p>
        </footer>
    </body>
</html>

Errores comunes a evitar

Al trabajar con los elementos <head> y <body>, es importante evitar estos errores frecuentes:

Colocar elementos visibles en <head>: Elementos como <h1> o <p> no deben estar en el <head>.
Poner metadatos en <body>: Elementos como <meta> o <title> no funcionarán correctamente en el <body>.
Omitir el elemento <title>: Es el único elemento obligatorio dentro de <head>.
Duplicar elementos únicos: Solo debe haber un elemento <head> y un elemento <body> en cada documento.
Anidar incorrectamente: Ni <head> ni <body> deben anidarse dentro de otros elementos excepto <html>.

La correcta implementación y comprensión de los elementos <head> y <body> es fundamental para crear documentos HTML bien estructurados que funcionen correctamente en todos los navegadores y dispositivos.

Estructura básica obligatoria de un documento HTML

Todo documento HTML válido debe seguir una estructura fundamental que establece el esqueleto sobre el cual construiremos nuestra página web. Esta estructura no es opcional, sino que constituye el conjunto mínimo de elementos necesarios para que un documento HTML sea considerado correcto según los estándares web.

La estructura básica obligatoria de un documento HTML consta de los siguientes elementos organizados jerárquicamente:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Título de la página</title>
    </head>
    <body>
        <!-- Contenido de la página -->
    </body>
</html>

Vamos a analizar cada componente de esta estructura y entender por qué es obligatorio:

Elementos obligatorios y su propósito

Declaración DOCTYPE: Siempre debe ser la primera línea del documento, indicando al navegador que estamos usando HTML5.
Elemento <html>: Es el elemento raíz que envuelve todo el contenido del documento. El atributo lang no es técnicamente obligatorio, pero se considera una buena práctica esencial para la accesibilidad.
Elemento <head>: Contiene los metadatos del documento y debe incluir al menos el elemento <title>.
Elemento <meta charset>: Define la codificación de caracteres del documento. Aunque técnicamente no es obligatorio, es prácticamente imprescindible para garantizar que los caracteres especiales se muestren correctamente.
Elemento <title>: Es el único elemento realmente obligatorio dentro de <head>. Define el título del documento que se muestra en la pestaña del navegador y en los resultados de búsqueda.
Elemento <body>: Contiene todo el contenido visible de la página web.

Orden y anidación correcta

La jerarquía de estos elementos debe respetarse estrictamente:

La declaración DOCTYPE siempre va primero, sin ningún contenido antes.
El elemento <html> envuelve todo excepto el DOCTYPE.
Los elementos <head> y <body> son hijos directos de <html> y hermanos entre sí.
El elemento <head> siempre precede al elemento <body>.
El elemento <title> debe estar dentro de <head>.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Mi primera página web</title>
    </head>
    <body>
        <h1>Hola mundo</h1>
        <p>Este es un párrafo de ejemplo.</p>
    </body>
</html>

Elementos adicionales recomendados

Aunque no son estrictamente obligatorios, hay elementos adicionales que se consideran esenciales en la práctica moderna:

Meta viewport: Crucial para el diseño responsive en dispositivos móviles:

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

Meta description: Importante para SEO, proporciona una descripción de la página:

<meta name="description" content="Descripción breve de la página web">

Un documento HTML con estos elementos recomendados tendría esta estructura:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Una página web de ejemplo">
        <title>Título de la página</title>
    </head>
    <body>
        <h1>Encabezado principal</h1>
        <p>Contenido de ejemplo.</p>
    </body>
</html>

Validación de la estructura básica

Para verificar que nuestra estructura HTML es correcta, podemos utilizar el Validador de Marcado W3C. Un documento HTML que cumpla con la estructura básica obligatoria pasará esta validación sin errores relacionados con la estructura fundamental.

Errores comunes en la estructura básica

Algunos errores frecuentes que debemos evitar:

Omitir la declaración DOCTYPE:

<!-- Incorrecto: falta DOCTYPE -->
<html>
    <head>
        <title>Mi página</title>
    </head>
    <body>
        <p>Contenido</p>
    </body>
</html>

Olvidar el elemento <title>:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!-- Incorrecto: falta el título -->
    </head>
    <body>
        <p>Contenido</p>
    </body>
</html>

Invertir el orden de <head> y <body>:

<!DOCTYPE html>
<html>
    <!-- Incorrecto: body antes que head -->
    <body>
        <p>Contenido</p>
    </body>
    <head>
        <title>Mi página</title>
    </head>
</html>

Colocar elementos en el lugar equivocado:

<!DOCTYPE html>
<html>
    <head>
        <title>Mi página</title>
        <!-- Incorrecto: párrafo en head -->
        <p>Este texto no debería estar aquí</p>
    </head>
    <body>
        <!-- Incorrecto: meta en body -->
        <meta name="description" content="Descripción">
        <p>Contenido</p>
    </body>
</html>

Plantilla básica para iniciar cualquier proyecto HTML

Aquí tienes una plantilla completa que puedes usar como punto de partida para cualquier proyecto HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Descripción de la página">
        <title>Título de la página</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <header>
            <h1>Título principal</h1>
            <nav>
                <!-- Navegación principal -->
            </nav>
        </header>
        
        <main>
            <!-- Contenido principal -->
        </main>
        
        <footer>
            <!-- Pie de página -->
        </footer>
        
        <script src="script.js"></script>
    </body>
</html>

Esta estructura básica obligatoria es el fundamento sobre el cual se construye cualquier página web, independientemente de su complejidad. Dominar esta estructura es el primer paso para crear documentos HTML válidos y bien formados que funcionen correctamente en todos los navegadores y plataformas.

Aprendizajes de esta lección de HTML

Comprender la función y la importancia de la declaración DOCTYPE en HTML5.
Identificar la estructura y el propósito del elemento raíz y el atributo lang.
Diferenciar entre los elementos y y sus roles en un documento HTML.
Conocer la estructura básica obligatoria para un documento HTML válido.
Evitar errores comunes relacionados con la estructura y elementos fundamentales de HTML.

Completa este curso de HTML y certifícate

Únete a nuestra plataforma de cursos de programación y accede a miles de tutoriales, ejercicios prácticos, proyectos reales y nuestro asistente de IA personalizado para acelerar tu aprendizaje.

Asistente IA

Resuelve dudas al instante

Ejercicios

Practica con proyectos reales

Certificados

Valida tus conocimientos

Comenzar HTML gratis

Más de 25.000 desarrolladores ya se han certificado con CertiDevs

⭐⭐⭐⭐⭐

4.9/5 valoración