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:

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:

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:

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:

Estructura resultante

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

A continuación, puedes ver cómo aparece el documento HTML en el navegador web.

Tutorial en Video

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 2. Capítulo 1