David Nebot

Estructura básica de un documento HTML

—

por

DavidNebot
en , ,

Un documento HTML básico incluye tres etiquetas principales que estructuran su contenido:

  1. <html>: Es el contenedor principal que engloba todo el contenido de la página web.
    • Todo el código HTML debe ir dentro de esta etiqueta.
  2. <head>: Contiene información «invisible» para el usuario pero esencial para el navegador, como:
    • El título de la página (<title>), que aparece en la pestaña del navegador.
    • Metadatos (<meta>), como el conjunto de caracteres (charset) o la descripción de la página.
    • Enlaces a hojas de estilo externas y scripts.
  3. <body>: Contiene el contenido visible para el usuario, como:
    • Encabezados, párrafos, imágenes, enlaces, tablas y más.

Cómo crear tu primer archivo HTML

  1. Abre un editor de texto (por ejemplo, Visual Studio Code).
  2. Escribe el siguiente código básico: <!DOCTYPE html> <html> <head> <title>Mi primera página HTML</title> <meta charset="UTF-8"> </head> <body> <h1>¡Bienvenido a HTML!</h1> <p>Esta es la estructura básica de un documento HTML.</p> </body> </html>
  3. Guarda el archivo con la extensión .html.
  4. Ábrelo en tu navegador para ver el resultado.

Introducción al estándar HTML5

HTML5 es la versión más reciente del lenguaje HTML. Introduce nuevas características que mejoran la semántica, la accesibilidad y el soporte multimedia. Algunas de sus principales mejoras incluyen:

  • Etiquetas semánticas nuevas: <header>, <footer>, <article>, <section> para una mejor organización del contenido.
  • Soporte multimedia: Etiquetas <audio> y <video> para reproducir contenido sin necesidad de complementos externos.
  • Mejora en formularios: Nuevos atributos y tipos de entrada como email, date y number.
  • Compatibilidad móvil: Mejor rendimiento en dispositivos móviles y tablets.

HTML5 es compatible con la mayoría de los navegadores modernos, por lo que se recomienda su uso en todos los proyectos actuales.

Actividades

  1. Reconocer la estructura básica:
    • Abre el archivo de una página web en el navegador y utiliza la herramienta «Inspeccionar» para identificar las etiquetas <html>, <head> y <body>.
  2. Crear una página con información personal:
    • Escribe un archivo HTML con la siguiente estructura: <!DOCTYPE html> <html> <head> <title>Sobre mí</title> <meta charset="UTF-8"> </head> <body> <h1>Mi página personal</h1> <p>Mi nombre es [tu nombre]. Estoy aprendiendo HTML.</p> </body> </html>
    • Guárdalo como sobre_mi.html y ábrelo en tu navegador.
  3. Practicar con HTML5:
    • Crea un documento que utilice las etiquetas <header>, <article> y <footer>. Por ejemplo: <!DOCTYPE html> <html> <head> <title>Página con HTML5</title> <meta charset="UTF-8"> </head> <body> <header> <h1>Bienvenido a mi sitio</h1> </header> <article> <h2>Mi primer artículo</h2> <p>Este es un ejemplo de cómo usar etiquetas semánticas.</p> </article> <footer> <p>Creado por [tu nombre].</p> </footer> </body> </html>
  4. Explorar validación:
    • Usa una herramienta de validación como https://validator.w3.org/ para comprobar si tu archivo HTML sigue los estándares.

Comentarios

Deja un comentario