Estructura del Documento HTML
Primero, exploramos la estructura de un documento HTML.
Estructura del Documento HTML
Cada documento HTML debe adherirse a una estructura consistente. Los elementos aquí descritos 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 comienzo del documento HTML, mientras que la etiqueta de cierre </html> marca el final.
Ejemplo:
<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 ofrece una breve descripción de su contenido, facilitando a los usuarios entender el propósito de la página y navegar a través de múltiples pestañas de manera más eficiente; <meta charset="UTF-8">es responsable de especificar la codificación de caracteres utilizada en un documento HTML. Esta codificación de caracteres es lo que determina cómo los navegadores web interpretan y muestran el texto;- Algunas etiquetas meta comunes incluyen:
<meta name="description" content="Breve descripción de la página">: 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="palabra clave1, palabra clave2, ...">: 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 diseño responsivo, asegurando un 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 mientras visitan el sitio web. Esencialmente, la etiqueta <body> contiene lo que los usuarios ven e interactúan cuando navegan 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 asegura 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, puedes ver 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>?
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Awesome!
Completion rate improved to 3.13Estructura del Documento HTML
Desliza para mostrar el menú
Primero, exploramos la estructura de un documento HTML.
Estructura del Documento HTML
Cada documento HTML debe adherirse a una estructura consistente. Los elementos aquí descritos 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 comienzo del documento HTML, mientras que la etiqueta de cierre </html> marca el final.
Ejemplo:
<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 ofrece una breve descripción de su contenido, facilitando a los usuarios entender el propósito de la página y navegar a través de múltiples pestañas de manera más eficiente; <meta charset="UTF-8">es responsable de especificar la codificación de caracteres utilizada en un documento HTML. Esta codificación de caracteres es lo que determina cómo los navegadores web interpretan y muestran el texto;- Algunas etiquetas meta comunes incluyen:
<meta name="description" content="Breve descripción de la página">: 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="palabra clave1, palabra clave2, ...">: 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 diseño responsivo, asegurando un 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 mientras visitan el sitio web. Esencialmente, la etiqueta <body> contiene lo que los usuarios ven e interactúan cuando navegan 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 asegura 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, puedes ver 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>?
¡Gracias por tus comentarios!
