Summary  
This chapter explains how to structure a semantic HTML document by using tags such as html, head, body, header, main, article, headings, paragraphs, images, and footer to organize content into multiple articles.

General domain of usage  
Blog website development

## Objetivo
Primero, vamos a crear la estructura básica del documento de nuestro sitio web. Queremos tener tres artículos. En cada artículo, queremos especificar el encabezado del artículo, algo de contenido y una imagen.

Puedes utilizar los prompts que proporcionamos o modificarlos según sea necesario. No existe una única manera de lograr el objetivo. ChatGPT es flexible y puede ayudar de diversas formas.

Nota

## Prompt Posible
Crea una estructura de documento HTML para un sitio web de blog que permita la publicación de 3 artículos. Cada artículo debe consistir en:
- Un título (encabezado);
- Varios párrafos de texto;
- Una imagen;
- Un tema o categoría.

La estructura HTML debe estar organizada de manera clara y lógica, utilizando correctamente las etiquetas HTML y el significado semántico.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+TXkgQmxvZzwvdGl0bGU+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGhlYWRlcj4KICAgICAgPGgxPldlbGNvbWUgdG8gTXkgQmxvZzwvaDE+CiAgICA8L2hlYWRlcj4KCiAgICA8bWFpbj4KICAgICAgPGFydGljbGU+CiAgICAgICAgPGgyPkFydGljbGUgMTogRXhwbG9yaW5nIE5hdHVyZTwvaDI+CiAgICAgICAgPHA+CiAgICAgICAgICBMb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldCwgY29uc2VjdGV0dXIgYWRpcGlzY2luZyBlbGl0LiBTZWQgZXVpc21vZCwgdG9ydG9yIG5vbgogICAgICAgICAgdWxsYW1jb3JwZXIgY29tbW9kbywganVzdG8gbGliZXJvIG1heGltdXMgcHVydXMsIHZlbCBwdWx2aW5hciB0dXJwaXMgcXVhbSB2aXRhZSBtaS4gTnVsbGFtCiAgICAgICAgICBhdWN0b3IsIHRvcnRvciBpZCBzYWdpdHRpcyBmZXJtZW50dW0sIGxlbyBsYWN1cyB2ZW5lbmF0aXMgdG9ydG9yLCBhdCB0cmlzdGlxdWUgbGVvIG1hZ25hCiAgICAgICAgICBpbiBsb3JlbS4KICAgICAgICA8L3A+CiAgICAgICAgPGltZyBzcmM9Im5hdHVyZS5qcGciIGFsdD0iTmF0dXJlIEltYWdlIiAvPgogICAgICAgIDxwPkNhdGVnb3J5OiBOYXR1cmU8L3A+CiAgICAgIDwvYXJ0aWNsZT4KCiAgICAgIDxhcnRpY2xlPgogICAgICAgIDxoMj5BcnRpY2xlIDI6IENvb2tpbmcgQWR2ZW50dXJlczwvaDI+CiAgICAgICAgPHA+CiAgICAgICAgICBQaGFzZWxsdXMgcnV0cnVtIHRpbmNpZHVudCBzYXBpZW4sIHNlZCB2ZXN0aWJ1bHVtIHZlbGl0IHZlaGljdWxhIG5lYy4gU2VkIHBoYXJldHJhIGR1aSBpbgogICAgICAgICAgZmVybWVudHVtIHNvZGFsZXMuIFBlbGxlbnRlc3F1ZSBoYWJpdGFudCBtb3JiaSB0cmlzdGlxdWUgc2VuZWN0dXMgZXQgbmV0dXMgZXQgbWFsZXN1YWRhCiAgICAgICAgICBmYW1lcyBhYyB0dXJwaXMgZWdlc3Rhcy4KICAgICAgICA8L3A+CiAgICAgICAgPGltZyBzcmM9ImNvb2tpbmcuanBnIiBhbHQ9IkNvb2tpbmcgSW1hZ2UiIC8+CiAgICAgICAgPHA+Q2F0ZWdvcnk6IENvb2tpbmc8L3A+CiAgICAgIDwvYXJ0aWNsZT4KCiAgICAgIDxhcnRpY2xlPgogICAgICAgIDxoMj5BcnRpY2xlIDM6IFRyYXZlbGluZyBBcm91bmQgdGhlIFdvcmxkPC9oMj4KICAgICAgICA8cD4KICAgICAgICAgIE51bGxhbSBlZmZpY2l0dXIgbGFjdXMgbmVjIHVybmEgZnJpbmdpbGxhLCB1dCB2ZW5lbmF0aXMgdG9ydG9yIGxhY2luaWEuIER1aXMgdml0YWUgbWF1cmlzCiAgICAgICAgICBzZWQgbWkgc2VtcGVyIGFsaXF1ZXQuIEFlbmVhbiB2ZXN0aWJ1bHVtIGxpYmVybyBlZ2V0IG5pYmggbWFsZXN1YWRhLCBpZCBsdWN0dXMgbGliZXJvCiAgICAgICAgICBwaGFyZXRyYS4gRnVzY2UgYXVjdG9yIG1hdXJpcyBzZWQgdHJpc3RpcXVlIGVmZmljaXR1ci4KICAgICAgICA8L3A+CiAgICAgICAgPGltZyBzcmM9InRyYXZlbC5qcGciIGFsdD0iVHJhdmVsIEltYWdlIiAvPgogICAgICAgIDxwPkNhdGVnb3J5OiBUcmF2ZWw8L3A+CiAgICAgIDwvYXJ0aWNsZT4KICAgIDwvbWFpbj4KCiAgICA8Zm9vdGVyPgogICAgICA8cD4mY29weTsgMjAyNCBNeSBCbG9nLiBBbGwgcmlnaHRzIHJlc2VydmVkLjwvcD4KICAgIDwvZm9vdGVyPgogIDwvYm9keT4KPC9odG1sPg==

Si desea profundizar en el código y comprender su funcionalidad, utilice el botón <span style="padding: 0 10px; border: 2px solid lightgray; border-radius: 10px; color: black; background-color: #fff;">Descripción del Código</span> a continuación. Si lo prefiere, omita este paso y continúe con el siguiente capítulo.

¿Por qué es recomendable estructurar cada artículo dentro de un elemento `<article>` al construir una página de blog?

Aprende los fundamentos del desarrollo web aprovechando el poder de herramientas de IA como ChatGPT. Comprende los roles de HTML, CSS y JavaScript en la creación de sitios web y cómo la IA puede mejorar la velocidad y creatividad en la programación. Practica la elaboración de prompts efectivos y la generación de código con ChatGPT. Construye un sitio web de blog completo desde cero utilizando desarrollo asistido por IA, adquiriendo habilidades prácticas para tus proyectos web.

Introducción a los conceptos y tecnologías clave en el desarrollo web, incluyendo el papel de la IA en la programación moderna. Esta sección establece la base para tu aprendizaje, abarcando los fundamentos del desarrollo web y cómo la IA mejora la productividad, la creatividad y la eficiencia en la programación.

Aprenda las tecnologías esenciales del desarrollo web. Profundice en los fundamentos de HTML, CSS y JavaScript, desentrañando sus funcionalidades individuales y su papel conjunto en la configuración del entorno digital.

Descubra el potencial de ChatGPT al explorar sus capacidades y aprender a utilizarlo de manera eficaz.
Obtención de conocimientos sobre la elaboración de prompts y el trabajo con código mediante ChatGPT.
Conclusión con recomendaciones prácticas para aprovechar ChatGPT en diversas aplicaciones.

Construcción del sitio web del blog. Creación de un sitio web de blog completo y funcional desde cero, incorporando diversas técnicas de desarrollo web utilizando ChatGPT.

Estructuración del Documento HTML

Objetivo

Prompt Posible

Resultado