HTML
Tutorial HTML: DOCTYPE
Descubre qué es DOCTYPE en HTML, por qué es crucial para la compatibilidad del navegador y cómo afecta la renderización de tu página.
DOCTYPE es una declaración que debe ser la primera línea en un documento HTML. No es una etiqueta HTML en sí, sino una instrucción para el navegador web que indica qué versión de HTML se utiliza en el documento. Es importante incluirlo en cada página HTML para garantizar que la página se renderiza correctamente en el navegador.
¿Por qué se necesita DOCTYPE?
DOCTYPE es necesario para activar el modo de estándares en los navegadores web. Sin un DOCTYPE, los navegadores podrían cambiar al modo de compatibilidad (también conocido como modo de cuasi-estándares o modo de quirks), lo que podría hacer que la página se muestre de manera incorrecta debido a las diferencias en cómo los navegadores interpretan el código.
El DOCTYPE no es una etiqueta HTML; no necesita una etiqueta de cierre y no es sensible a mayúsculas y minúsculas.
¿Cómo se ve DOCTYPE?
El DOCTYPE para HTML5 se ve así:
<!DOCTYPE html>
Este DOCTYPE es para HTML5, que es la versión actual de HTML. Es mucho más simple que los DOCTYPE de las versiones anteriores de HTML, que requerían una referencia a una DTD (Documento de Tipo de Definición) específica.
Ejemplos de DOCTYPEs
Aquí hay un ejemplo de un DOCTYPE para HTML 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Este DOCTYPE hace referencia a una DTD específica de HTML 4.01 en el sitio web de la W3C. Existen versiones similares para HTML 4.01 Transitional y Frameset.
Y aquí hay un ejemplo de un DOCTYPE para XHTML 1.0:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Al igual que el ejemplo anterior, este DOCTYPE hace referencia a una DTD específica de XHTML 1.0 en el sitio web de la W3C. También existen versiones similares para XHTML 1.0 Transitional y Frameset.
En resumen, DOCTYPE es una declaración importante que se debe incluir al comienzo de cada documento HTML para asegurar que el navegador interprete y muestre la página correctamente. Aunque su formato ha cambiado a lo largo de las versiones de HTML, su propósito sigue siendo el mismo. Para los documentos HTML modernos (HTML5), la declaración DOCTYPE es simple y sencilla: <!DOCTYPE html>.
Ejercicios de esta lección DOCTYPE
Evalúa tus conocimientos de esta lección DOCTYPE con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.
Audio
Tablas
Formularios (form, input, select, textarea, button)
Tablas (table, tr, td, th)
Enlace
Video
Imágenes
Contraste y legibilidad
DOCTYPE
Atributos de elementos
Introducción a HTML
Metadatos
Imágenes vectoriales
Anidación de etiquetas
Encabezados
Compatibilidad con navegadores
Validación de HTML
Optimización de la carga de la página (Lazy loading)
Atributos de ARIA
Listas
Página web completa con Bootstrap
Párrafos
Uso de DOCTYPE
Etiquetas semánticas (article, section, header, footer, nav, aside)
Navegación por teclado
Etiquetas semánticas
Listas (ul, ol, li)
Estilos
Divisiones
Uso de atributos
Atributos
Comentarios
Incrustación de contenido (iframe)
Uso de elementos y etiquetas
Elementos y etiquetas
Formularios
Todas las lecciones de HTML
Accede a todas las lecciones de HTML y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.
Introducción A Html
Introducción Y Entorno
Doctype
Sintaxis Y Estructura
Elementos Y Etiquetas
Sintaxis Y Estructura
Atributos
Sintaxis Y Estructura
Anidación De Etiquetas
Sintaxis Y Estructura
Comentarios
Sintaxis Y Estructura
Encabezados (H1-h6)
Textos Y Enlaces
Enlace (A)
Textos Y Enlaces
Párrafo (P)
Textos Y Enlaces
Listas (Ul, Ol, Li)
Textos Y Enlaces
Imagen (Img)
Textos Y Enlaces
División (Div)
Estructura De Página
Etiquetas Semánticas (Article, Section, Header, Footer, Nav, Aside)
Estructura De Página
Tablas (Table, Tr, Td, Th)
Estructura De Página
Formularios (Form, Input, Select, Textarea, Button)
Estructura De Página
Imágenes Vectoriales (Svg)
Elementos Multimedia
Incrustación De Contenido (Iframe)
Elementos Multimedia
Audio (Audio)
Elementos Multimedia
Video (Video)
Elementos Multimedia
Estilo Incorporado (Style)
Metadatos Y Estilización Incorporada
Metadatos (Meta, Title, Link)
Metadatos Y Estilización Incorporada
Atributos De Aria
Metadatos Y Estilización Incorporada
Navegación Por Teclado
Metadatos Y Estilización Incorporada
Contraste Y Legibilidad
Características Avanzadas Y Optimización
Validación De Html
Características Avanzadas Y Optimización
Compatibilidad Con Navegadores
Características Avanzadas Y Optimización
Optimización De La Carga De La Página (Lazy Loading)
Características Avanzadas Y Optimización
Certificados de superación de HTML
Supera todos los ejercicios de programación del curso de HTML y obtén certificados de superación para mejorar tu currículum y tu empleabilidad.
En esta lección
Objetivos de aprendizaje de esta lección
- Comprender la importancia del DOCTYPE en documentos HTML y su papel en activar el modo de estándares en los navegadores.
- Identificar la sintaxis y el formato del DOCTYPE para distintas versiones de HTML, como HTML5, HTML 4.01 y XHTML 1.0.
- Reconocer la diferencia entre el DOCTYPE para HTML5, que es simple y conciso, y los DOCTYPE para versiones anteriores de HTML que requerían referencias a DTD específicas.
- Apreciar cómo el DOCTYPE contribuye a la compatibilidad y el renderizado correcto de las páginas web en diferentes navegadores.