Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende Estructura del Documento HTML Explicada | Fundamentos de HTML
Fundamentos de HTML

bookEstructura del Documento HTML Explicada

En primer lugar, exploramos la estructura de un documento HTML.

Estructura de un Documento HTML

Cada documento HTML debe seguir una estructura consistente. Los elementos descritos aquí establecen la base para organizar el contenido, definir la estructura de la página y mejorar la experiencia del usuario en la web.

etiqueta html

La etiqueta <html> es el elemento raíz de un documento HTML. Todos los demás elementos se escribirán dentro de ella. La etiqueta de apertura <html> marca el inicio del documento HTML, mientras que la etiqueta de cierre </html> indica el final.
Example:

<html>
  <!-- Other elements go here -->
</html>

etiqueta head

La etiqueta <head> contiene metainformación sobre el documento HTML, como el título, la codificación de caracteres y recursos externos como hojas de estilo y scripts. No contiene contenido visible directamente para el usuario en la página web.
Ejemplo:

<head>
  <title>Title of the Document</title>
  <meta charset="UTF-8" />
  <!-- Other meta tags, links, and scripts go here -->
</head>

Explicación:

  • La etiqueta <title> define el título de una página web. Se muestra en la barra de título del navegador web o en la pestaña del navegador. El título de una página proporciona una visión general de su contenido, facilitando a los usuarios la comprensión del propósito de la página y la navegación eficiente entre varias pestañas;
  • <meta charset="UTF-8"> es responsable de especificar la codificación de caracteres utilizada en un documento HTML. Esta codificación determina cómo los navegadores web interpretan y muestran el texto;
  • Algunas etiquetas meta comunes incluyen:
    • <meta name="description" content="Brief description of the page">: Proporciona una descripción concisa del contenido de la página, que puede aparecer en los resultados de los motores de búsqueda;
    • <meta name="keywords" content="keyword1, keyword2, ...">: Especifica palabras clave relevantes para el contenido de la página, ayudando a mejorar la optimización para motores de búsqueda (SEO);
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Define la configuración del viewport para el diseño responsivo, asegurando el escalado adecuado en diferentes dispositivos.

etiqueta body

La etiqueta <body> contiene el contenido principal visible para los usuarios en una página web. Este contenido incluye texto, imágenes, enlaces, formularios y otros elementos con los que los usuarios pueden interactuar al visitar el sitio web. En esencia, la etiqueta <body> contiene lo que los usuarios ven y con lo que interactúan al navegar por un sitio web.
Ejemplo:

<body>
  <h1>Hello, World!</h1>
  <p>This is a paragraph of text.</p>
  <!-- Other content goes here -->
</body>

Declaración del tipo de documento

La declaración del tipo de documento informa al navegador web sobre la versión de HTML utilizada en el documento. Esta declaración garantiza que el navegador web renderice correctamente el documento siguiendo el estándar HTML especificado. Para documentos HTML5, la declaración doctype es <!DOCTYPE html>.
Ejemplo:

<!DOCTYPE html>

Estructura resultante

Para concluir, reunamos todos los elementos que hemos considerado y combinémoslos en un solo documento HTML.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the Document</title>
    <meta charset="UTF-8" />
    <!-- Other meta tags, links, and scripts go here -->
  </head>

  <body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph of text.</p>
    <!-- Other content goes here -->
  </body>
</html>

A continuación, se muestra cómo aparece el documento HTML en el navegador web.

Tutorial en video

1. ¿Cuál etiqueta es el elemento raíz de un documento HTML?

2. ¿Qué contiene la etiqueta <head>?

3. ¿Qué define la etiqueta <title>?

4. ¿Cuál es el propósito de la etiqueta <body>?

question mark

¿Cuál etiqueta es el elemento raíz de un documento HTML?

Select the correct answer

question mark

¿Qué contiene la etiqueta <head>?

Select the correct answer

question mark

¿Qué define la etiqueta <title>?

Select the correct answer

question mark

¿Cuál es el propósito de la etiqueta <body>?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 2. Capítulo 1

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Awesome!

Completion rate improved to 3.13

bookEstructura del Documento HTML Explicada

Desliza para mostrar el menú

En primer lugar, exploramos la estructura de un documento HTML.

Estructura de un Documento HTML

Cada documento HTML debe seguir una estructura consistente. Los elementos descritos aquí establecen la base para organizar el contenido, definir la estructura de la página y mejorar la experiencia del usuario en la web.

etiqueta html

La etiqueta <html> es el elemento raíz de un documento HTML. Todos los demás elementos se escribirán dentro de ella. La etiqueta de apertura <html> marca el inicio del documento HTML, mientras que la etiqueta de cierre </html> indica el final.
Example:

<html>
  <!-- Other elements go here -->
</html>

etiqueta head

La etiqueta <head> contiene metainformación sobre el documento HTML, como el título, la codificación de caracteres y recursos externos como hojas de estilo y scripts. No contiene contenido visible directamente para el usuario en la página web.
Ejemplo:

<head>
  <title>Title of the Document</title>
  <meta charset="UTF-8" />
  <!-- Other meta tags, links, and scripts go here -->
</head>

Explicación:

  • La etiqueta <title> define el título de una página web. Se muestra en la barra de título del navegador web o en la pestaña del navegador. El título de una página proporciona una visión general de su contenido, facilitando a los usuarios la comprensión del propósito de la página y la navegación eficiente entre varias pestañas;
  • <meta charset="UTF-8"> es responsable de especificar la codificación de caracteres utilizada en un documento HTML. Esta codificación determina cómo los navegadores web interpretan y muestran el texto;
  • Algunas etiquetas meta comunes incluyen:
    • <meta name="description" content="Brief description of the page">: Proporciona una descripción concisa del contenido de la página, que puede aparecer en los resultados de los motores de búsqueda;
    • <meta name="keywords" content="keyword1, keyword2, ...">: Especifica palabras clave relevantes para el contenido de la página, ayudando a mejorar la optimización para motores de búsqueda (SEO);
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Define la configuración del viewport para el diseño responsivo, asegurando el escalado adecuado en diferentes dispositivos.

etiqueta body

La etiqueta <body> contiene el contenido principal visible para los usuarios en una página web. Este contenido incluye texto, imágenes, enlaces, formularios y otros elementos con los que los usuarios pueden interactuar al visitar el sitio web. En esencia, la etiqueta <body> contiene lo que los usuarios ven y con lo que interactúan al navegar por un sitio web.
Ejemplo:

<body>
  <h1>Hello, World!</h1>
  <p>This is a paragraph of text.</p>
  <!-- Other content goes here -->
</body>

Declaración del tipo de documento

La declaración del tipo de documento informa al navegador web sobre la versión de HTML utilizada en el documento. Esta declaración garantiza que el navegador web renderice correctamente el documento siguiendo el estándar HTML especificado. Para documentos HTML5, la declaración doctype es <!DOCTYPE html>.
Ejemplo:

<!DOCTYPE html>

Estructura resultante

Para concluir, reunamos todos los elementos que hemos considerado y combinémoslos en un solo documento HTML.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the Document</title>
    <meta charset="UTF-8" />
    <!-- Other meta tags, links, and scripts go here -->
  </head>

  <body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph of text.</p>
    <!-- Other content goes here -->
  </body>
</html>

A continuación, se muestra cómo aparece el documento HTML en el navegador web.

Tutorial en video

1. ¿Cuál etiqueta es el elemento raíz de un documento HTML?

2. ¿Qué contiene la etiqueta <head>?

3. ¿Qué define la etiqueta <title>?

4. ¿Cuál es el propósito de la etiqueta <body>?

question mark

¿Cuál etiqueta es el elemento raíz de un documento HTML?

Select the correct answer

question mark

¿Qué contiene la etiqueta <head>?

Select the correct answer

question mark

¿Qué define la etiqueta <title>?

Select the correct answer

question mark

¿Cuál es el propósito de la etiqueta <body>?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 2. Capítulo 1
some-alt