Saltar al contenido principal

Ejercicio práctico 1: Documento HTML Básico

En este ejercicio práctico de html, aprenderemos a crear un archivo HTML básico con la estructura mínima. Agregaremos el !DOCTYPE al inicio y las etiquetas html, head y body.

Objetivo​

Crear un Documento HTML Básico

Actividad​

Crea un archivo HTML básico con la estructura mínima <!DOCTYPE html>, <html>, <head>, <body>.

Solución interactiva​

Logo DivZone de ad link
Plataforma IAConvierte el código en clientes.Pruébalo gratis

Solución con el código HTML completo​

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Documento HTML Básico</title>
  </head>
  <!-- Este es un comentario HTML  -->
  <body>
    <h1>Hola, Mundo!</h1>
  </body>
</html>

Variantes del mismo ejercicio​

Una vez que entendiste la estructura mínima, probá estas variantes para consolidar lo aprendido.

Variante 1: Agregar lang y meta charset​

Todo documento HTML profesional debe declarar el idioma y la codificación de caracteres para evitar problemas con tildes y caracteres especiales.

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Mi Primera Página Web</title>
  </head>
  <body>
    <h1>¡Hola Mundo!</h1>
    <p>Este es un párrafo con tildes: á, é, í, ó, ú, ñ.</p>
  </body>
</html>
  • lang="es": le dice al navegador y a los buscadores que el contenido está en español.
  • <meta charset="UTF-8" />: garantiza que caracteres como tildes y eñes se muestren correctamente.

Variante 2: Agregar un comentario explicativo​

Los comentarios son fundamentales para documentar tu código. No se muestran en el navegador pero ayudan a entender qué hace cada sección.

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Página con Comentarios</title>
  </head>
  <body>
    <!-- Encabezado principal: solo debe haber un h1 por página -->
    <h1>Bienvenidos a mi sitio</h1>

    <!-- Sección de contenido principal -->
    <p>Este es el contenido principal de la página.</p>

    <!-- Pie de página con información de contacto -->
    <footer>
      <p>Contacto: info@misitio.com</p>
    </footer>
  </body>
</html>

Mini-desafío: Ponelo a prueba​

Creá un documento HTML que cumpla con todo lo siguiente:

  • Declare <!DOCTYPE html>
  • Tenga el atributo lang="es" y meta charset="UTF-8"
  • Su <title> sea "Mi Primera Página"
  • Tenga un comentario <!-- Inicio del contenido --> antes del body
  • Muestre un <h1> que diga "Bienvenidos" y un <p> con tu nombre

Intentá resolverlo sin mirar los ejemplos anteriores. Cuando termines, compará tu solución con el código de la Variante 1.

Errores comunes al crear un documento HTML​

ErrorPor qué es un problema
Olvidar <!DOCTYPE html>El navegador entra en "quirks mode" y puede renderizar mal la página
No cerrar etiquetas correctamenteCausa que el contenido se muestre desordenado o anidado de forma incorrecta
No poner lang="es"Los lectores de pantalla y buscadores no saben en qué idioma está el contenido
Olvidar <meta charset="UTF-8" />Las tildes, eñes y caracteres especiales se ven como símbolos raros ()
Poner contenido fuera de <body>Todo el contenido visible debe ir dentro de <body>, no entre <head> o fuera de <html>

Preguntas frecuentes​

¿Qué pasa si no pongo <!DOCTYPE html>?​

El navegador activa el modo de compatibilidad (quirks mode), que emula el comportamiento de navegadores antiguos. Esto puede hacer que tu página se vea diferente en distintos navegadores y que algunas propiedades CSS no funcionen como esperás. Siempre empezá tus documentos HTML con <!DOCTYPE html>.

¿HTML distingue entre mayúsculas y minúsculas?​

No. HTML no es case-sensitive: <HTML>, <html> y <Html> son equivalentes. Sin embargo, la convención y las buenas prácticas recomiendan escribir las etiquetas siempre en minúsculas (<html>, <body>, <p>) porque es más legible y coherente con XHTML y frameworks modernos.

Practicá con DivZone AI

¿Ya creaste tu primer documento HTML? Llevalo al siguiente nivel: generá una app web completa con DivZone AI y analizá el código HTML generado automáticamente. Vas a ver cómo se aplican la estructura básica, los encabezados y mucho más en un proyecto real.

info

🔎 Revisa las siguientes secciones con más información sobre este tema: