Estructura 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>?
¡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 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>?
¡Gracias por tus comentarios!
