Chuck's Academy

What's New in HTML5

Home / Topic / What's New in HTML5 / Estructura básica de un documento HTML5

Estructura básica de un documento HTML5

Para comenzar a trabajar con HTML5, es esencial entender la estructura básica de un documento HTML. HTML5 simplifica y mejora la estructura general, haciendo que sea más fácil de leer y escribir.

Declaración <!DOCTYPE>

La declaración <!DOCTYPE> define que el documento es HTML5. Debe ser la primera línea en un documento HTML y no distingue entre mayúsculas y minúsculas.

html

Elemento <html>

El elemento <html> envuelve todo el contenido de la página y especifica el idioma del documento utilizando el atributo lang. Es importante para la accesibilidad y el SEO.

html

Elemento <head>

El elemento <head> contiene meta-información sobre el documento, como su título, enlaces a hojas de estilo, metadatos, etc.

html

Metaetiquetas importantes

  1. <meta charset="UTF-8">: Define la codificación de caracteres del documento.
  2. <meta name="viewport" content="width=device-width, initial-scale=1.0">: Ajusta el ancho de la página al ancho del dispositivo, para una correcta visualización en dispositivos móviles.

Elemento <body>

El elemento <body> contiene todo el contenido visible de la página para los usuarios, como texto, imágenes, videos, enlaces, etc.

html

Estructura completa de un documento HTML5

Aquí tienes un ejemplo completo de la estructura básica de un documento HTML5:

html

Descripción de la estructura

  1. <!DOCTYPE html>: Define que se está utilizando HTML5.
  2. <html lang="es">: Elemento root que envuelve todo el contenido, con el atributo lang especificando el idioma.
  3. <head>: Contiene meta-información sobre la página.
    • <meta charset="UTF-8">: Define la codificación de caracteres.
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Configura el viewport para dispositivos móviles.
    • <title>: Define el título del documento mostrado en la pestaña del navegador.
  4. <body>: Contiene todo el contenido visible de la página.
    • <header>: Contiene el encabezado principal de la página.
    • <main>: Contiene el contenido principal del documento.
    • <section>: Define secciones dentro del contenido principal.
    • <footer>: Contiene el pie de página.

[Placeholder Image: Diagrama mostrando la estructura jerárquica de un documento HTML5, destacando los elementos <html>, <head> y <body> con sus respectivos hijos]

Conclusión

Comprender la estructura básica de un documento HTML5 es fundamental para cualquier desarrollador web. Esto establece la base sobre la cual se construyen páginas y aplicaciones web más complejas, y asegura que el contenido sea accesible, semánticamente correcto y bien organizado.

Back to previous chapter
Mark as read and continue
Ask me anything