Configuración de VSCode y estructura HTML5 básica

Clase 3 de 17 • Curso de HTML

Clase anteriorSiguiente clase

Resumen

Crear tu primer sitio en HTML5 es más simple de lo que parece. Aquí verás cómo configurar VSCode, usar el navegador con el inspector de elementos, generar la estructura base con un atajo y renderizar tu primer Hola mundo con buenas prácticas. Todo paso a paso y con conceptos clave explicados de forma clara.

¿Cómo preparar las herramientas para HTML con VSCode y navegador?

Para escribir y visualizar código necesitas dos piezas: un editor de texto y un navegador. El editor recomendado es VSCode. El navegador es esencial porque ahí verás cómo se renderiza el HTML y porque incluye el inspector de elementos.

  • Instala VSCode y ábrelo. Sigue el instalador según tu sistema operativo.
  • Usa un navegador moderno con inspector de elementos. Te permitirá ver el HTML real y debuggear con feedback en tiempo real.
  • Crea una carpeta raíz llamada "Curso HTML". Allí guardarás todo el contenido, clase por clase.
  • Dentro, crea "uno_Fundamentos_HTML" para el módulo y luego "clase uno" como subcarpeta.
  • Evita acentos y espacios en nombres. Usa guion medio, guion bajo o camel case.
  • En "clase uno", crea el archivo index.html.

¿Para qué sirve el inspector de elementos?

El inspector muestra el árbol real de etiquetas: html, head y body. Permite identificar errores, probar cambios rápidos y entender qué se está renderizando. Es clave para debuggear y para recibir feedback en tiempo real antes de llevar los cambios al editor.

¿Qué incluye la estructura básica de HTML5 y por qué importa?

En index.html puedes generar la base con un atajo: escribe ! y presiona tab. Esto crea el esqueleto HTML5 con etiquetas contenedoras que abren y cierran. Es importante comprender cada línea para que después te enfoques en el contenido dentro de body.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>document</title>
  </head>
  <body>
  </body>
</html>
  • Las etiquetas contenedoras se abren y se cierran con slash. El contenido va dentro del par.
  • Todo lo visible en el navegador está dentro de body. Lo de head son instrucciones para el navegador.

¿Qué hacen doctype html y el atributo lang?

  • <!DOCTYPE html> le indica al navegador: esto es HTML5. Así usas el estándar vigente y sus etiquetas.
  • En defines el idioma del contenido. El navegador puede ofrecer traducción automática si tu idioma local difiere, por ejemplo con Google Translator mediante un pequeño prompt.

¿Qué hace meta charset y meta viewport?

  • habilita caracteres especiales y emojis. Sin esto, acentos y símbolos pueden verse como códigos extraños.
  • mejora la visualización en dispositivos móviles. Usa el ancho real del dispositivo y evita un zoom inicial que distorsione el diseño.

¿Dónde va el contenido visible: body?

Todo lo que agregues dentro de body se renderiza. El head aloja reglas y metadatos: estilos, configuración del documento y el , que define el texto de la pestaña del navegador.</p> <h2>¿Cómo crear y visualizar tu primer HTML: h1 y párrafo?</h2> <p>Abre index.html con <em>Open with Live Server</em> desde el clic derecho en el explorador de archivos. Verás en la URL que se sirve desde local, con la ruta de tus carpetas y el index.html. En el inspector podrás verificar doctype, html, head y body.</p> <p>Agrega contenido dentro de body:</p> <div class="codehilite"><pre><span></span><code><span class="p"><</span><span class="nt">body</span><span class="p">></span> <span class="p"><</span><span class="nt">h1</span><span class="p">></span>Hola mundo<span class="p"></</span><span class="nt">h1</span><span class="p">></span> <span class="p"><</span><span class="nt">p</span><span class="p">></span>Es mi primer sitio web.<span class="p"></</span><span class="nt">p</span><span class="p">></span> <span class="p"></</span><span class="nt">body</span><span class="p">></span> </code></pre></div> <p>Buenas prácticas y recordatorios.</p> <ul> <li>Guarda y revisa en el navegador para ver cómo se renderiza el cambio.</li> <li>Verifica en el inspector que h1 y p aparezcan dentro de body.</li> <li>Cambia el <title> para ajustar el texto de la pestaña.</li> <li>Usa el atajo ! + tab para generar la estructura base rápidamente.</li> <li>Nombres de archivos y carpetas sin acentos ni espacios. Usa guion medio, guion bajo o <em>camel case</em>.</li> <li>Recuerda que las etiquetas contenedoras se cierran con slash.</li> <li>Mantén meta charset="UTF-8" y meta viewport para compatibilidad y móviles.</li> <li>Usa el inspector para <strong>debuggear</strong> errores y aplicar correcciones informadas.</li> </ul> <p>¿Tienes dudas o quieres compartir cómo nombraste tus carpetas y qué viste en el inspector? Deja un comentario y seguimos construyendo juntos.</p></div></div></div></div></div><div class="page_Classes__tabs__JTg4t"></div></div><script async="" type="application/ld+json">{"@context":"https://schema.org","@graph":[{"@context":"https://schema.org","@type":"Organization","name":"Platzi","url":"https://platzi.com/","description":"Aprende desde cero a crear el futuro de la web. Cursos en línea de desarrollo, inteligencia artificial, diseño, marketing y negocios.","foundingDate":"2013-01-01T00:00:00Z","founders":[{"@type":"Person","name":"John Freddy Vega"},{"@type":"Person","name":"Christian Van Der Henst"}],"sameAs":["https://www.facebook.com/platzi/","https://twitter.com/Platzi","https://www.youtube.com/channel/UC55-mxUj5Nj3niXFReG44OQ","https://www.linkedin.com/school/2822346"]},{"@context":"http://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https://platzi.com/","name":"🚀 Platzi: ‎Cursos Online Profesionales de Tecnología"}}]},{"@context":"https://schema.org","@type":"VideoObject","name":"Configuración de VSCode y estructura HTML5 básica","description":"Crear tu primer sitio en HTML5 es más simple de lo que parece. Aquí verás cómo configurar VSCode, usar el navegador con el inspector de elementos, gen","thumbnailUrl":["https://static.platzi.com/media/courses/Piezas-Curso-HTML_OG.jpg"],"uploadDate":"2025-09-30T19:00:00+00:00","duration":"P0DT00H13M48S","embedUrl":"https://platzi.com/cursos/html/configuracion-de-vscode-y-estructura-htm/"}]}</script></main></div><noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MRHH59DB" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><div role="region" aria-label="Notifications (F8)" tabindex="-1" style="pointer-events:none"><ol tabindex="-1" class="ToastViewport"></ol></div><div role="region" aria-label="Notifications (F8)" tabindex="-1" style="pointer-events:none"><ol tabindex="-1" data-class="snackbar-viewport" class="SnackBar-module_SnackBar__ToastViewport__Glmsh"></ol></div></section><script src="https://pages-production.static.platzi.com/radiance-experience/_next/static/chunks/webpack-5d829e1f689ddd49.js" async=""></script><script src="https://pages-production.static.platzi.com/radiance-experience/_next/static/chunks/b7dfe19b-3bba8bf1ab606cfa.js" async=""></script><script src="https://pages-production.static.platzi.com/radiance-experience/_next/static/chunks/4183-46a7b0a26783bcbf.js" async=""></script><script src="https://pages-production.static.platzi.com/radiance-experience/_next/static/chunks/main-app-1c56bfa4d7ff88ca.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:HL[\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/95353ba8bf5c01b0.css\",{\"as\":\"style\"}]\n0:\"$L2\"\n"])</script><script>self.__next_f.push([1,"3:HL[\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/ccafd38cd6485723.css\",{\"as\":\"style\"}]\n4:HL[\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/30f7548c35f2aa96.css\",{\"as\":\"style\"}]\n5:HL[\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/d7efa0c12a36753c.css\",{\"as\":\"style\"}]\n6:HL[\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/44b170497c2243ab.css\",{\"as\":\"style\"}]\n7:HL[\"https://pa"])</script><script>self.__next_f.push([1,"ges-production.static.platzi.com/radiance-experience/_next/static/css/8db9ef950006134a.css\",{\"as\":\"style\"}]\n"])</script><script>self.__next_f.push([1,"8:I{\"id\":\"38827\",\"chunks\":[\"2272:static/chunks/webpack-5d829e1f689ddd49.js\",\"8875:static/chunks/b7dfe19b-3bba8bf1ab606cfa.js\",\"4183:static/chunks/4183-46a7b0a26783bcbf.js\"],\"name\":\"\",\"async\":false}\na:I{\"id\":\"9126\",\"chunks\":[\"2272:static/chunks/webpack-5d829e1f689ddd49.js\",\"8875:static/chunks/b7dfe19b-3bba8bf1ab606cfa.js\",\"4183:static/chunks/4183-46a7b0a26783bcbf.js\"],\"name\":\"\",\"async\":false}\n"])</script><script>self.__next_f.push([1,"2:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/95353ba8bf5c01b0.css\",\"precedence\":\"next\"}]],[\"$\",\"$L8\",null,{\"assetPrefix\":\"https://pages-production.static.platzi.com/radiance-experience\",\"initialCanonicalUrl\":\"/cursos/html/configuracion-de-vscode-y-estructura-htm/\",\"initialTree\":[\"\",{\"children\":[\"(materialView)\",{\"children\":[\"cursos\",{\"children\":[[\"courseSlug\",\"html\",\"d\"],{\"children\":[[\"materialSlug\",\"configuracion-de-vscode-y-estructura-htm\",\"d\"],{\"children\":[\"__PAGE__?{\\\"courseSlug\\\":\\\"html\\\",\\\"materialSlug\\\":\\\"configuracion-de-vscode-y-estructura-htm\\\"}\",{}]}]}]}]}]},\"$undefined\",\"$undefined\",true],\"initialHead\":[\"$L9\",null],\"globalErrorComponent\":\"$a\",\"notFound\":\"$Lb\",\"asNotFound\":false,\"children\":[\"$Lc\",null]}]]\n"])</script><script>self.__next_f.push([1,"d:I{\"id\":\"14463\",\"chunks\":[\"2272:static/chunks/webpack-5d829e1f689ddd49.js\",\"8875:static/chunks/b7dfe19b-3bba8bf1ab606cfa.js\",\"4183:static/chunks/4183-46a7b0a26783bcbf.js\"],\"name\":\"\",\"async\":false}\n"])</script><script>self.__next_f.push([1,"e:I{\"id\":\"25786\",\"chunks\":[\"977:static/chunks/977-9897da7f10f09b20.js\",\"7390:static/chunks/7390-4eaaf6860210910c.js\",\"8188:static/chunks/8188-0f30a7f75a70bcb5.js\",\"7825:static/chunks/7825-7511ea9a19aaa2b2.js\",\"7249:static/chunks/7249-fbeaf8761ab160aa.js\",\"6394:static/chunks/6394-773f18c38031acd7.js\",\"8556:static/chunks/8556-d810e88718dfccbc.js\",\"5846:static/chunks/5846-791dd5215da36a5c.js\",\"2177:static/chunks/2177-11db7c19e73bcfe4.js\",\"4608:static/chunks/4608-44841cc671e31409.js\",\"3208:static/chunks/3208-81399601612344ed.js\",\"9101:static/chunks/9101-33aa2118aab8b065.js\",\"5858:static/chunks/5858-93f4f9c03baa66ee.js\",\"3975:static/chunks/3975-32f2b18136e728d6.js\",\"1955:static/chunks/1955-47eac97c59aa1fb4.js\",\"5388:static/chunks/5388-ecf9e848b968d7a2.js\",\"8214:static/chunks/8214-74e15c85c26cb0f4.js\",\"9461:static/chunks/9461-37ca78b5d45a146d.js\",\"5653:static/chunks/5653-038a8425bcf0a23f.js\",\"8955:static/chunks/8955-cc172f005a54aa4a.js\",\"4276:static/chunks/app/(materialView)/cursos/[courseSlug]/[materialSlug]/layout-ff3b204a9233fbf9.js\"],\"name\":\"\",\"async\":false}\nf:I{\"id\":\"91010\",\"chunks\":[\"2272:static/chunks/webpack-5d829e1f689ddd49.js\",\"8875:static/chunks/b7dfe19b-3bba8bf1ab606cfa.js\",\"4183:static/chunks/4183-46a7b0a26783bcbf.js\"],\"name\":\"\",\"async\":false}\nc:[\"$\",\"html\",null,{\"lang\":\"es\",\"children\":[[\"$\",\"head\",null,{\"children\":[\"$\",\"link\",null,{\"rel\":\"manifest\",\"href\":\"/manifest.json\"}]}],[\"$\",\"body\",null,{\"children\":[\"$\",\"$Ld\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$e\",\"errorStyles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/b60d5dc295cfdb75.css\",\"precedence\":\"$undefined\"}]],\"loading\":\"$undefined\",\"loadingStyles\":\"$undefined\",\"hasLoading\":false,\"template\":[\"$\",\"$Lf\",null,{}],\"templateStyles\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"childProp\":{\"current\":[\"$\",\"$Ld\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"(materialView)\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"loading\":\"$undefined\",\"loadingStyles\":\"$undefined\",\"hasLoading\":false,\"template\":[\"$\",\"$Lf\",null,{}],\"templateStyles\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"childProp\":{\"current\":[\"$\",\"$Ld\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"(materialView)\",\"children\",\"cursos\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"loading\":\"$undefined\",\"loadingStyles\":\"$undefined\",\"hasLoading\":false,\"template\":[\"$\",\"$Lf\",null,{}],\"templateStyles\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"childProp\":{\"current\":[\"$\",\"$Ld\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"(materialView)\",\"children\",\"cursos\",\"children\",[\"courseSlug\",\"html\",\"d\"],\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"loading\":\"$undefined\",\"loadingStyles\":\"$undefined\",\"hasLoading\":false,\"template\":[\"$\",\"$Lf\",null,{}],\"templateStyles\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"childProp\":{\"current\":[\"$L10\",null],\"segment\":[\"materialSlug\",\"configuracion-de-vscode-y-estructura-htm\",\"d\"]},\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/ccafd38cd6485723.css\",\"precedence\":\"next\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/30f7548c35f2aa96.css\",\"precedence\":\"next\"}],[\"$\",\"link\",\"2\",{\"rel\":\"stylesheet\",\"href\":\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/d7efa0c12a36753c.css\",\"precedence\":\"next\"}]]}],\"segment\":[\"courseSlug\",\"html\",\"d\"]},\"styles\":[]}],\"segment\":\"cursos\"},\"styles\":[]}],\"segment\":\"(materialView)\"},\"styles\":[]}]}]]}]\nb:[\"$\",\"html\",null,{\"lang\":\"es\",\"children\":[[\"$\",\"head\",null,{\"children\":[\"$\",\"link\",null,{\"rel\":\"manifest\",\"href\":\"/manifest.json\"}]}],[\"$\",\"body\",null,{\"children\":[\"$L11\",\"$undefined\",[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"styl"])</script><script>self.__next_f.push([1,"e\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]]]}]]}]\n"])</script><script>self.__next_f.push([1,"10:[\"$\",\"section\",null,{\"children\":\"$L12\"}]\n11:[[[\"$\",\"meta\",null,{\"charSet\":\"utf-8\"}],null,null,null,null,null,null,null,null,null,null,[\"$\",\"meta\",null,{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],null,null,null,null,null,null,null,null,null,null,[]],[null,null,null,null],null,null,[null,null,null,null,null],null,null,null,null,null]\n"])</script><script>self.__next_f.push([1,"13:I{\"id\":\"8993\",\"chunks\":[\"977:static/chunks/977-9897da7f10f09b20.js\",\"7390:static/chunks/7390-4eaaf6860210910c.js\",\"8188:static/chunks/8188-0f30a7f75a70bcb5.js\",\"7825:static/chunks/7825-7511ea9a19aaa2b2.js\",\"7249:static/chunks/7249-fbeaf8761ab160aa.js\",\"6394:static/chunks/6394-773f18c38031acd7.js\",\"8556:static/chunks/8556-d810e88718dfccbc.js\",\"5846:static/chunks/5846-791dd5215da36a5c.js\",\"2177:static/chunks/2177-11db7c19e73bcfe4.js\",\"4608:static/chunks/4608-44841cc671e31409.js\",\"3208:static/chunks/3208-81399601612344ed.js\",\"9101:static/chunks/9101-33aa2118aab8b065.js\",\"5858:static/chunks/5858-93f4f9c03baa66ee.js\",\"3975:static/chunks/3975-32f2b18136e728d6.js\",\"1955:static/chunks/1955-47eac97c59aa1fb4.js\",\"5388:static/chunks/5388-ecf9e848b968d7a2.js\",\"8214:static/chunks/8214-74e15c85c26cb0f4.js\",\"9461:static/chunks/9461-37ca78b5d45a146d.js\",\"5653:static/chunks/5653-038a8425bcf0a23f.js\",\"8955:static/chunks/8955-cc172f005a54aa4a.js\",\"4276:static/chunks/app/(materialView)/cursos/[courseSlug]/[materialSlug]/layout-ff3b204a9233fbf9.js\"],\"name\":\"\",\"async\":false}\n"])</script><script>self.__next_f.push([1,"14:I{\"id\":\"8204\",\"chunks\":[\"977:static/chunks/977-9897da7f10f09b20.js\",\"7390:static/chunks/7390-4eaaf6860210910c.js\",\"8188:static/chunks/8188-0f30a7f75a70bcb5.js\",\"7825:static/chunks/7825-7511ea9a19aaa2b2.js\",\"7249:static/chunks/7249-fbeaf8761ab160aa.js\",\"6394:static/chunks/6394-773f18c38031acd7.js\",\"8556:static/chunks/8556-d810e88718dfccbc.js\",\"5846:static/chunks/5846-791dd5215da36a5c.js\",\"2177:static/chunks/2177-11db7c19e73bcfe4.js\",\"4608:static/chunks/4608-44841cc671e31409.js\",\"3208:static/chunks/3208-81399601612344ed.js\",\"9101:static/chunks/9101-33aa2118aab8b065.js\",\"5858:static/chunks/5858-93f4f9c03baa66ee.js\",\"3975:static/chunks/3975-32f2b18136e728d6.js\",\"1955:static/chunks/1955-47eac97c59aa1fb4.js\",\"5388:static/chunks/5388-ecf9e848b968d7a2.js\",\"8214:static/chunks/8214-74e15c85c26cb0f4.js\",\"9461:static/chunks/9461-37ca78b5d45a146d.js\",\"5653:static/chunks/5653-038a8425bcf0a23f.js\",\"8955:static/chunks/8955-cc172f005a54aa4a.js\",\"4276:static/chunks/app/(materialView)/cursos/[courseSlug]/[materialSlug]/layout-ff3b204a9233fbf9.js\"],\"name\":\"\",\"async\":false}\n15:I{\"id\":\"89510\",\"chunks\":[\"977:static/chunks/977-9897da7f10f09b20.js\",\"7390:static/chunks/7390-4eaaf6860210910c.js\",\"8188:static/chunks/8188-0f30a7f75a70bcb5.js\",\"7825:static/chunks/7825-7511ea9a19aaa2b2.js\",\"7249:static/chunks/7249-fbeaf8761ab160aa.js\",\"6394:static/chunks/6394-773f18c38031acd7.js\",\"8556:static/chunks/8556-d810e88718dfccbc.js\",\"5846:static/chunks/5846-791dd5215da36a5c.js\",\"2177:static/chunks/2177-11db7c19e73bcfe4.js\",\"4608:static/chunks/4608-44841cc671e31409.js\",\"3208:static/chunks/3208-81399601612344ed.js\",\"9101:static/chunks/9101-33aa2118aab8b065.js\",\"5858:static/chunks/5858-93f4f9c03baa66ee.js\",\"3975:static/chunks/3975-32f2b18136e728d6.js\",\"1955:static/chunks/1955-47eac97c59aa1fb4.js\",\"5388:static/chunks/5388-ecf9e848b968d7a2.js\",\"8214:static/chunks/8214-74e15c85c26cb0f4.js\",\"9461:static/chunks/9461-37ca78b5d45a146d.js\",\"5653:static/chunks/5653-038a8425bcf0a23f.js\",\"8955:static/chunks/8955-cc172f005a54aa4a.js\",\"4276:static/chunks/app/(materialView)/cursos/[courseSlug]/[materialSlug]/layout-ff3b204a9233fbf9.js\"],\"name\":\"PageViewTrackerWrapper\",\"async\":false}\n16:I{\"id\":\"60732\",\"chunks\":[\"977:static/chunks/977-9897da7f10f09b20.js\",\"7390:static/chunks/7390-4eaaf6860210910c.js\",\"8188:static/chunks/8188-0f30a7f75a70bcb5.js\",\"7825:static/chunks/7825-7511ea9a19aaa2b2.js\",\"7249:static/chunks/7249-fbeaf8761ab160aa.js\",\"6394:static/chunks/6394-773f18c38031acd7.js\",\"8556:static/chunks/8556-d810e88718dfccbc.js\",\"5846:static/chunks/5846-791dd5215da36a5c.js\",\"2177:static/chunks/2177-11db7c19e73bcfe4.js\",\"4608:static/chunks/4608-44841cc671e31409.js\",\"3208:static/chunks/3208-81399601612344ed.js\",\"9101:static/chunks/9101-33aa2118aab8b065.js\",\"5858:static/chunks/5858-93f4f9c03baa66ee.js\",\"3975:static/chunks/3975-32f2b18136e728d6.js\",\"1955:static/chunks/1955-47eac97c59aa1fb4.js\",\"5388:static/chunks/5388-ecf9e848b968d7a2.js\",\"8214:static/chunks/8214-74e15c85c26cb0f4.js\",\"9461:static/chunks/9461-37ca78b5d45a146d.js\",\"5653:static/chunks/5653-038a8425bcf0a23f.js\",\"8955:static/chunks/8955-cc172f005a54aa4a.js\",\"4276:static/chunks/app/(materialView)/cursos/[courseSlug]/[materialSlug]/layout-ff3b204a9233fbf9.js\"],\"name\":\"Layout\",\"async\":false}\n17:I{\"id\":\"81246\",\"chunks\":[\"977:static/chunks/977-9897da7f10f09b20.js\",\"7390:static/chunks/7390-4eaaf6860210910c.js\",\"7249:static/chunks/7249-fbeaf8761ab160aa.js\",\"9101:static/chunks/9101-33aa2118aab8b065.js\",\"5858:static/chunks/5858-93f4f9c03baa66ee.js\",\"487:static/chunks/app/(materialView)/cursos/[courseSlug]/[materialSlug]/not-found-e7cc110e146e2be2.js\"],\"name\":\"\",\"async\":false}\n1a:I{\"id\":\"53529\",\"chunks\":[\"977:static/chunks/977-9897da7f10f09b20.js\",\"7390:static/chunks/7390-4eaaf6860210910c.js\",\"8188:static/chunks/8188-0f30a7f75a70bcb5.js\",\"7825:static/chunks/7825-7511ea9a19aaa2b2.js\",\"7249:static/chunks/7249-fbeaf8761ab160aa.js\",\"6394:static/chunks/6394-773f18c38031acd7.js\",\"8556:static/chunks/8556-d810e88718dfccbc.js\",\"5846:static/chunks/5846-791dd5215da36a5c.js\",\"2177:static/chunks/2177-11db7c19e73bcfe4.js\",\"4608:static/chunks/4"])</script><script>self.__next_f.push([1,"608-44841cc671e31409.js\",\"3208:static/chunks/3208-81399601612344ed.js\",\"9101:static/chunks/9101-33aa2118aab8b065.js\",\"5858:static/chunks/5858-93f4f9c03baa66ee.js\",\"3975:static/chunks/3975-32f2b18136e728d6.js\",\"1955:static/chunks/1955-47eac97c59aa1fb4.js\",\"5388:static/chunks/5388-ecf9e848b968d7a2.js\",\"8214:static/chunks/8214-74e15c85c26cb0f4.js\",\"9461:static/chunks/9461-37ca78b5d45a146d.js\",\"5653:static/chunks/5653-038a8425bcf0a23f.js\",\"8955:static/chunks/8955-cc172f005a54aa4a.js\",\"4276:static/chunks/app/(materialView)/cursos/[courseSlug]/[materialSlug]/layout-ff3b204a9233fbf9.js\"],\"name\":\"\",\"async\":false}\n1b:I{\"id\":\"20179\",\"chunks\":[\"977:static/chunks/977-9897da7f10f09b20.js\",\"7390:static/chunks/7390-4eaaf6860210910c.js\",\"8188:static/chunks/8188-0f30a7f75a70bcb5.js\",\"7825:static/chunks/7825-7511ea9a19aaa2b2.js\",\"7249:static/chunks/7249-fbeaf8761ab160aa.js\",\"6394:static/chunks/6394-773f18c38031acd7.js\",\"8556:static/chunks/8556-d810e88718dfccbc.js\",\"5846:static/chunks/5846-791dd5215da36a5c.js\",\"2177:static/chunks/2177-11db7c19e73bcfe4.js\",\"4608:static/chunks/4608-44841cc671e31409.js\",\"3208:static/chunks/3208-81399601612344ed.js\",\"9101:static/chunks/9101-33aa2118aab8b065.js\",\"5858:static/chunks/5858-93f4f9c03baa66ee.js\",\"3975:static/chunks/3975-32f2b18136e728d6.js\",\"1955:static/chunks/1955-47eac97c59aa1fb4.js\",\"5388:static/chunks/5388-ecf9e848b968d7a2.js\",\"8214:static/chunks/8214-74e15c85c26cb0f4.js\",\"9461:static/chunks/9461-37ca78b5d45a146d.js\",\"5653:static/chunks/5653-038a8425bcf0a23f.js\",\"8955:static/chunks/8955-cc172f005a54aa4a.js\",\"4276:static/chunks/app/(materialView)/cursos/[courseSlug]/[materialSlug]/layout-ff3b204a9233fbf9.js\"],\"name\":\"NotificationPrompt\",\"async\":false}\n12:[\"$\",\"$L13\",null,{\"formats\":\"$undefined\",\"locale\":\"es\",\"messages\":{\"shared\":{\"plans-frequency-annual\":\"anual\",\"plans-frequency-monthly\":\"mensual\",\"plans-tag-special-price\":\"Precio Especial\",\"plans-tag-save-months\":\"Ahorras {months} meses\",\"plans-tag-save\":\"Ahorras\",\"plans-installments-platzi\":\"Paga a {strongOpen}{fees} cuotas{strongClose} sin intereses {spanOpen}de {price}{spanClose}\",\"plans-installments-credit-card\":\"Paga hasta en 12 meses {strongOpen}sin intereses{strongClose} con tarjeta de crédito o PayPal.\",\"plans-billing-recurring\":\"cobro {frequency} recurrente\",\"plans-billing-subscription\":\"suscripción {frequency}\",\"plans-billing-recurring-price\":\"cobro {frequency} recurrente de {price}\",\"plans-billing-subscription-price\":\"suscripción {frequency} de {price}\",\"plans-students-single\":\"1 estudiante\",\"plans-students-multiple\":\"{count} estudiantes\",\"plans-cta-business\":\"Conoce los planes para empresas\",\"plans-card-add-year\":\"Agregar 1 año a mi plan\",\"plans-card-subscribe\":\"Suscríbete a Platzi\",\"plans-card-add-year-now\":\"Agregar 1 año ahora\",\"plans-card-continue\":\"Continuar\",\"plans-card-buy-now\":\"Comprar ahora\",\"plans-card-name-placeholder\":\"Nombre y Apellido\",\"plans-card-email-placeholder\":\"Correo electrónico\",\"plans-card-extend-until\":\"Tu plan se extenderá hasta el:\",\"plans-card-charge-card\":\"Se cobrará a la tarjeta:\",\"plans-card-change\":\"Cambiar\",\"plans-card-subscribe-to\":\"Suscríbete a {title}\",\"plans-card-installments\":\"Paga {installments} Cuotas sin intereses de {price}\",\"plans-card-year\":\"1 año\",\"plans-card-normal-price\":\"Precio normal\",\"plans-card-before\":\"Antes\",\"plans-card-save\":\"Ahorras\",\"plans-card-for\":\"Para\",\"plans-responsive-ends-in\":\"Termina en:\",\"plans-responsive-ends-in-text\":\"Aprovecha el precio especial\",\"plans-responsive-time-days\":\"días\",\"plans-responsive-time-hours\":\"hrs\",\"plans-responsive-time-minutes\":\"min\",\"plans-responsive-time-seconds\":\"seg\",\"plans-selector-students\":\"{count} estudiantes\",\"plans-table-benefits\":\"Beneficios\",\"plans-table-compare\":\"Comparar planes\",\"plans-table-basic\":\"Plan Basic\",\"plans-table-expert\":\"Plan Expert\",\"plans-table-expert-plus\":\"Expert+\",\"plans-b2b-title\":\"Planes para empresas\",\"plans-b2b-subtitle\":\"Potencia el crecimiento de tu equipo\",\"plans-b2b-contact\":\"Contáctanos\",\"plans-b2b-name\":\"Nombre completo\",\"plans-b2b-company\":\"Empresa\",\"plans-b2b-email\":\"Correo electrónico\",\"plan"])</script><script>self.__next_f.push([1,"s-b2b-phone\":\"Teléfono\",\"plans-b2b-country\":\"País\",\"plans-b2b-team-size\":\"Tamaño del equipo\",\"plans-b2b-message\":\"Mensaje\",\"plans-b2b-required\":\"Campo requerido\",\"plans-b2b-invalid-email\":\"Correo electrónico inválido\",\"plans-b2b-invalid-phone\":\"Teléfono inválido\",\"plans-b2b-send\":\"Enviar\",\"plans-b2b-step-1\":\"Paso 1\",\"plans-b2b-step-2\":\"Paso 2\",\"plans-b2b-step-3\":\"Paso 3\",\"plans-b2b-step-1-title\":\"Contáctanos\",\"plans-b2b-step-2-title\":\"Personaliza tu plan\",\"plans-b2b-step-3-title\":\"Comienza a aprender\",\"plans-b2b-benefits-subtitle-1\":\"Adquiere los\",\"plans-b2b-benefits-subtitle-2\":\"meses de acceso\",\"plans-b2b-benefits-subtitle-3\":\"que necesitas y\",\"plans-b2b-benefits-subtitle-4\":\"asígnalos\",\"plans-b2b-benefits-subtitle-5\":\"como prefieras.\",\"plans-b2b-benefits-learning-paths\":\"Rutas de aprendizaje personalizadas por empleado y por equipos\",\"plans-b2b-benefits-admin-panel\":\"Panel de administración para medir el progreso de tus empleados\",\"plans-b2b-benefits-certificates\":\"Certificados con el logo de tu empresa\",\"plans-b2b-benefits-access\":\"Acceso a todos los cursos, clases en vivo, eventos y actividades de la comunidad\",\"plans-b2b-step-company\":\"Tu empresa\",\"plans-b2b-step-goals\":\"Tus objetivos\",\"plans-b2b-step-price\":\"Precio\",\"plans-b2b-invoice-calculator-desc\":\"Esta propuesta estima el precio total de acceso a todo Platzi para tus {employees} empleados durante {months} meses. Los meses de acceso por empleado pueden ser modificados de acuerdo a tus necesidades.\",\"plans-b2b-invoice-employees\":\"Empleados\",\"plans-b2b-invoice-months\":\"Meses\",\"plans-b2b-invoice-months-per-employee\":\"Por empleado\",\"plans-b2b-invoice-access-months\":\"Meses de acceso\",\"plans-b2b-invoice-buy\":\"Comprar\",\"plans-b2b-invoice-contact-info-pretext\":\"Gracias por tu interés. Te contactaremos al correo\",\"plans-b2b-invoice-contact-info-email\":\"o al teléfono\",\"plans-b2b-invoice-contact-info-posttext\":\"para más información.\",\"plans-b2b-invoice-suggested-plan\":\"Plan de formación sugerido:\",\"plans-b2b-invoice-course-alt\":\"curso de {title}\",\"plans-b2b-first-company-name\":\"Nombre de tu empresa\",\"plans-b2b-first-name\":\"Tu nombre\",\"plans-b2b-first-email\":\"Tu email corporativo\",\"plans-b2b-first-email-error\":\"Ingresa un correo corporativo válido\",\"plans-b2b-first-position\":\"Nivel de tu cargo\",\"plans-b2b-first-position-clevel\":\"C-Level\",\"plans-b2b-first-position-vp\":\"Vicepresidente\",\"plans-b2b-first-position-director\":\"Director\",\"plans-b2b-first-position-manager\":\"Gerente\",\"plans-b2b-first-position-other\":\"Cargo no gerencial\",\"plans-b2b-first-phone\":\"Tu número de teléfono\",\"plans-b2b-first-phone-error\":\"Este campo debe tener al menos 7 dígitos\",\"plans-b2b-first-error\":\"Hubo un error, intenta de nuevo\",\"plans-b2b-first-loading\":\"Cargando...\",\"plans-b2b-first-continue\":\"Continuar\",\"plans-b2b-second-company\":\"Empresa:\",\"plans-b2b-second-employees\":\"Número de empleados en tu empresa\",\"plans-b2b-second-personal-plan-pretext\":\"Elige un plan de\",\"plans-b2b-second-personal-plan-text\":\"Personas\",\"plans-b2b-second-personal-plan-posttext\":\"para 1 empleado\",\"plans-b2b-second-learning-needs\":\"¿Qué necesita aprender tu empresa? (Opcional)\",\"plans-b2b-second-error\":\"Hubo un error, intenta de nuevo\",\"plans-b2b-second-loading\":\"Calculando...\",\"plans-b2b-second-get-price\":\"Obtener precio\",\"plans-b2b-input-required\":\"Este campo es obligatorio\",\"plans-banner-ends-in\":\"Termina en:\",\"plans-b2b-terms-agreement-prefix\":\"Al enviar el formulario, aceptas los\",\"plans-b2b-terms-agreement-terms\":\"Términos de servicio\",\"plans-b2b-terms-agreement-and\":\"y\",\"plans-b2b-terms-agreement-privacy\":\"Políticas de privacidad\",\"plans-b2b-terms-agreement-suffix\":\"de Platzi.\",\"plans-toggle-personal\":\"Personas\",\"plans-toggle-business\":\"Empresas\",\"plans-month\":\"mes\",\"plans-year\":\"año\",\"plans-b2b-leadform-specialist-contact\":\"Uno de nuestros especialistas se pondrá en contacto contigo cuanto antes\",\"plans-b2b-leadform-lets-begin\":\"¡Comencemos!\",\"plans-b2b-leadform-company-name\":\"Nombre de tu empresa\",\"plans-b2b-leadform-your-name\":\"Tu nombre\",\"plans-b2b-leadform-business-email\":\"Correo empr"])</script><script>self.__next_f.push([1,"esarial\",\"plans-b2b-leadform-months-per-employee\":\"Total empleados en tu empresa\",\"plans-b2b-leadform-company-number-access\":\"Total accesos a comprar\",\"plans-b2b-leadform-country-code\":\"Código de tu país\",\"plans-b2b-leadform-phone-number\":\"Tu nro. de teléfono\",\"plans-b2b-leadform-required-field\":\"Campo requerido\",\"plans-b2b-leadform-invalid-email\":\"Formato de correo electrónico inválido\",\"plans-b2b-leadform-business-email-required\":\"Debes usar un correo corporativo\",\"plans-b2b-leadform-must-be-number\":\"Debe ser un número\",\"plans-b2b-leadform-valid-number\":\"Debe ser un número válido\",\"plans-b2b-leadform-send\":\"Enviar\",\"plans-b2b-leadform-continue\":\"Continuar\",\"plans-b2b-leadform-terms-prefix\":\"Al enviar el formulario, aceptas los\",\"plans-b2b-leadform-terms-service\":\"Términos de servicio\",\"plans-b2b-leadform-terms-and\":\"y\",\"plans-b2b-leadform-terms-privacy\":\"Políticas de privacidad\",\"plans-b2b-leadform-terms-of-platzi\":\"de Platzi.\",\"plans-b2b-successview-ready\":\"¡Todo listo! Ya recibimos tu información\",\"plans-b2b-successview-description\":\"Estamos revisando todo para prepararte la mejor oferta. ¡Te escribiremos muy pronto!\",\"plans-b2b-successview-discover-content\":\"Descubre nuestro contenido\",\"plans-b2b-successview-questions\":\"¿Tienes dudas? Escríbenos a\",\"plans-b2b-modalpage-close\":\"Cerrar modal\",\"plans-b2b-plan-most-popular\":\"MÁS POPULAR\",\"plans-b2b-plan-up-to\":\"Hasta\",\"plans-b2b-plan-monthly-per-student\":\"mensual por estudiante\",\"plans-b2b-plan-lets-talk\":\"¡Hablemos!\",\"plans-b2b-plan-acquire-plan\":\"Adquirir plan\",\"plans-b2b-plan-benefits\":\"Beneficios\",\"plans-b2b-plan-custom-price-text\":\"¡Más licencias, menor precio!\",\"plans-b2b-plan-description-starter\":\"Ideal para empresas que están iniciando con capacitación online efectiva.\",\"plans-b2b-plan-description-business\":\"Ideal para empresas con necesidades más avanzadas.\",\"plans-b2b-plan-description-enterprise\":\"Ideal para empresas que necesitan una implementación personalizada.\",\"plans-b2b-leadform-months-tooltip\":\"Estos meses los puedes asignar como desees entre tus empleados. Solo asegúrate de asignar mínimo 1 mes por persona.\",\"plan-responsive-expert-message\":\"Un año de acceso con cursos ilimitados\",\"plans-b2b-leadform-amount-limit-error\":\"Debido a la cantidad de empleados que deseas capacitar, nos pondremos en contacto para ofrecerte una propuesta personalizada.\",\"plans-b2b-leadform-generic-error\":\"Ha ocurrido un error. Por favor, intenta nuevamente.\",\"plans-iva-text\":\"Servicio SaaS excluido de IVA (Art. 476 E.T.)\",\"micro-ui-header-plans\":\"Planes\",\"micro-ui-header-close-session\":\"Cerrar sesión\",\"micro-ui-header-hello\":\"Hola\",\"micro-ui-header-subscription\":\"Suscripción\",\"micro-ui-header-days-left-singular\":\"Tienes 1 día de tu plan\",\"micro-ui-header-days-left-plural\":\"Tienes {days} días de tu plan\",\"micro-ui-header-view-profile\":\"Ver mi perfil\",\"micro-ui-header-with-access\":\"Con acceso\",\"micro-ui-header-without-access\":\"Sin acceso\",\"micro-ui-header-day\":\"día\",\"micro-ui-header-days\":\"días\",\"micro-ui-header-request-extension\":\"Solicita una extensión para aumentar tus días de acceso y cumplir tus metas de aprendizaje.\",\"micro-ui-header-need-more-time\":\"Si necesitas más tiempo solicita una extensión.\",\"micro-ui-header-subscription-expired\":\"El tiempo de tu suscripción a Platzi for Business se agotó. No te preocupes, no perderás tu progreso ni certificados.\",\"micro-ui-header-subscription-error\":\"Si crees que esto es un error comunicate con el administrador de tu plan Platzi for Business.\",\"micro-ui-header-access-change-note\":\"Si necesitas cambiar tu estado de acceso como estudiante, puedes hacerlo desde el Espacio de Administración.\",\"micro-ui-header-days-left\":\"Te quedan {days} {daysText} de acceso\",\"micro-ui-header-days-left-prefix\":\"Te quedan\",\"micro-ui-header-days-left-suffix\":\"de acceso\",\"micro-ui-header-request-extension-button\":\"Solicitar extensión\",\"micro-ui-header-waiting-response\":\"Esperando respuesta\",\"micro-ui-header-admin-space\":\"Espacio de administración\",\"micro-ui-header-contact-us\":\"Contáctanos\",\"micro-ui-header-what-l"])</script><script>self.__next_f.push([1,"earn\":\"¿Qué quieres aprender?\",\"micro-ui-header-see-all-results\":\"Ver todos los resultados\",\"micro-ui-header-platzi\":\"Platzi\",\"micro-ui-header-live\":\"Live\",\"search-teacher-prefix\":\"Profe\",\"search-teachers-prefix\":\"Profes\",\"search-level-prefix\":\"Nivel\",\"search-duration-hour\":\"hora\",\"search-duration-hours\":\"horas\",\"search-duration-minute\":\"minuto\",\"search-duration-minutes\":\"minutos\",\"search-duration-content\":\"de contenido\",\"search-course\":\"curso\",\"search-courses\":\"cursos\",\"search-course-tag\":\"Curso\",\"search-learning-path-tag\":\"Ruta\",\"search-material-tag\":\"Clase\",\"search-custom-object-test-tag\":\"Test\",\"search-blog-tag\":\"Blog\",\"search-blog-date-format\":\"DD [de] MMMM [de] YYYY\",\"search-locale\":\"es\",\"micro-ui-public-header-courses\":\"Cursos\",\"micro-ui-public-header-companies\":\"Empresas\",\"micro-ui-public-header-blogs\":\"Blog\",\"micro-ui-public-header-live\":\"Live\",\"micro-ui-public-header-conf\":\"Conf\",\"micro-ui-public-header-prices\":\"Precios\",\"micro-ui-header-menu-free-month\":\"Obtén 1 mes gratis\",\"micro-ui-header-menu-subscription\":\"Mi suscripción\",\"micro-ui-header-menu-search\":\"Buscar\",\"micro-ui-header-login-cta\":\"Acceder\",\"modals_wrapper-completed_title\":\"¡Perfil actualizado con éxito!\",\"modals_wrapper-completed_description\":\"¡Gracias por actualizar tu perfil! Ahora tendrás una experiencia mas personalizada para continuar tu aprendizaje\",\"modals_wrapper-whatsapp_title\":\"Sigue disfrutando de \u003cb\u003ePlatzi\u003c/b\u003e\",\"modals_wrapper-whatsapp_description\":\"Agrega tu foto, nombre y número de teléfono para seguir viendo sin costo las primeras clases\",\"modals_wrapper-linkedin_title\":\"Mejora tu perfil en \u003cb\u003ePlatzi\u003c/b\u003e\",\"modals_wrapper-linkedin_description\":\"Agrega tu foto, nombre, trabajo y LinkedIn para mantener tu perfil profesional actualizado con tus certificados y tener una experiencia más personalizada\",\"modals_wrapper-close_button\":\"Omitir por ahora\",\"modals_wrapper-continue_button\":\"Completar perfil\",\"modals_wrapper-form_first_name\":\"Nombre\",\"modals_wrapper-form_last_name\":\"Apellido\",\"modals_wrapper-form_linkedin_profile\":\"Enlace de tu LinkedIn\",\"modals_wrapper-form_workplace\":\"Empresa en la que trabajas (opcional)\",\"modals_wrapper-form_phone\":\"Tu número de teléfono\",\"modals_wrapper-form_upload_image\":\"Subir imagen\",\"modals_wrapper-form_image_requirements\":\"Carga una imagen JPG o PNG.\",\"header-menu-free-month\":\"Obtén 1 mes gratis\",\"header-menu-subscription\":\"Mi suscripción\",\"notifications-waiting\":\"Esperando respuesta\",\"main-menu-search\":\"Buscar\",\"main-menu-home\":\"Inicio\",\"main-menu-comments\":\"Comentarios\",\"main-menu-my-paths\":\"Mis Rutas\",\"main-menu-my-progress\":\"Mi progreso\",\"main-menu-chat\":\"Chat ADA\",\"main-menu-notifications\":\"Notificaciones\",\"main-menu-teachers\":\"Profesores\",\"main-menu-dashboard\":\"Dashboard\",\"main-menu-business\":\"Empresas\",\"main-menu-admin\":\"Administración\",\"main-menu-platzi-home\":\"Platzi Home\",\"main-menu-certificates\":\"Mis certificados\",\"delete-path-title\":\"¿Eliminar Ruta?\",\"delete-path-custom-description\":\"Al eliminar \\\"{title}\\\" no perderás el progreso de los cursos ni los certificados obtenidos.\",\"delete-path-description\":\"Como \\\"{title}\\\" es una ruta personalizada, al eliminarla ya no podrás recuperarla. No perderás el progreso de los cursos y los certificados obtenidos.\",\"delete-button-cancel\":\"Cancelar\",\"delete-button-delete\":\"Eliminar\",\"delete-course-title\":\"¿Quieres eliminar \\\"{title}\\\"?\",\"delete-course-description\":\"Como esta es una ruta personalizada, al hacerlo, ya no podrás recuperarla. Mantendrás el progreso de los cursos y los certificados obtenidos.\",\"delete-course-success\":\"Curso eliminado\",\"delete-course-error\":\"Hubo un error, intentalo de nuevo\",\"route-card-tag\":\"Ruta\",\"route-card-start\":\"Iniciar Ruta\",\"route-card-more-courses\":\"+{count} cursos más\",\"route-card-added\":\"Ruta agregada\",\"route-card-add\":\"Agregar ruta\",\"route-card-added-mobile\":\"Agregada\",\"route-card-add-mobile\":\"Agregar\",\"route-card-go-to-path\":\"Ir a la ruta\",\"route-card-add-error\":\"No pudimos agregar la ruta. Inténtalo de nuevo\",\"route-card-deleted\":\"Ruta eliminada\",\"route-card-delete-error\":\"No pudimos elimina"])</script><script>self.__next_f.push([1,"r la ruta. Inténtalo de nuevo\",\"add-learning-path-button-added\":\"Ruta agregada\",\"add-learning-path-button-add\":\"Agregar ruta\",\"add-learning-path-button-added-mobile\":\"Agregada\",\"add-learning-path-button-add-mobile\":\"Agregar\",\"add-learning-path-button-go-to-path\":\"Ir a la ruta\",\"completed\":\"Completado\",\"progress-aria-label\":\"Progreso\",\"breadcrumb-aria-label\":\"Migas de pan\",\"close-modal\":\"Cerrar\",\"like-remove\":\"Remover Like\",\"like-add\":\"Dar Like\",\"comment-editor-reply\":\"Responder comentario\",\"comment-editor-create\":\"Crear aporte\",\"comment-editor-placeholder-reply\":\"Escribe tu respuesta\",\"comment-editor-placeholder-create\":\"Escribe tu aporte o pregunta\",\"comment-editor-default-placeholder\":\"Escribe aquí tu comentario\",\"close-preview\":\"Cerrar preview\",\"open-preview\":\"Abrir preview\",\"zoom-in\":\"Acercar\",\"zoom-out\":\"Alejar\",\"close-editor\":\"Cerrar editor\",\"default-path-name\":\"Mi ruta personalizada\",\"popover-streak-tag\":\"Nuevo\",\"popover-streak-content\":\"Haz seguimiento de tu progreso con la racha semanal\",\"popover-streak-cta\":\"Ver cómo funciona\",\"banner-business-redirect-copy\":\"Hay empresas que le pagan Platzi a sus empleados 👀\",\"banner-business-redirect-button\":\"Descubre más\",\"confirm-email-title\":\"Confirmar tu correo\",\"confirm-email-text\":\"Enviamos un enlace de confirmación a tu correo electrónico {email}\",\"comment-reply-button\":\"Responder\",\"comment-see-more\":\"Ver más\",\"comment-discussion-tag\":\"Pregunta\",\"comment-team-platzi\":\"Team Platzi\",\"comment-ai-generated\":\"Generado con IA\",\"comment-profile-link\":\"Ver perfil de {name}\",\"comment-delete-tooltip\":\"Borrar comentario\",\"comment-see-more-replies\":\"Ver más respuestas\",\"translate-button\":\"Traducir\",\"create-learning-path-modal-cancel\":\"Cancelar\",\"create-learning-path-modal-create\":\"Crear\",\"create-learning-path-modal-name-label\":\"Nombre\",\"main-menu-role-teachers-title\":\"Profesores\",\"main-menu-role-business-title\":\"Empresas\",\"countdown-days\":\"días\",\"countdown-hours\":\"h\",\"countdown-minutes\":\"min\",\"countdown-seconds\":\"seg\",\"countdown-short-format-days\":\"d\",\"countdown-short-format-hours\":\"h\",\"countdown-short-format-minutes\":\"m\",\"countdown-short-format-seconds\":\"s\",\"notification-panel-error-title\":\"Hubo un problema al cargar tus notificaciones\",\"notification-panel-error-description\":\"Por favor, intenta de nuevo.\",\"notification-panel-error-retry\":\"Reintentar\",\"notification-panel-filter-unread\":\"Sin leer\",\"notification-panel-filter-comments\":\"Comentarios\",\"notification-panel-filter-releases\":\"Lanzamientos\",\"notification-panel-heading-close\":\"Cerrar\",\"notification-panel-heading-title\":\"Notificaciones\",\"notification-panel-heading-mark-all-read\":\"Marcar todo como leído\",\"paywalls-modal-title-default\":\"Suscríbete y desbloquea tu potencial\",\"paywalls-modal-title-mobile\":\"Suscríbete a un plan\",\"paywalls-modal-title-certificates\":\"Adquiere una suscripción para descargar tus certificados\",\"paywalls-modal-disclaimer\":\"Nunca subiremos el precio mientras mantengas tu suscripción activa.\",\"paywalls-modal-b2b-title\":\"Calcula el precio para tu empresa\",\"report-comment-button-tooltip\":\"Reportar comentario\",\"report-comment-modal-title\":\"Reportar comentario\",\"report-comment-modal-subtitle\":\"Cuéntanos la razón por la que reportas este comentario.\",\"report-comment-modal-placeholder\":\"Motivo del reporte\",\"report-comment-modal-cancel\":\"Cancelar\",\"report-comment-modal-submit\":\"Reportar\",\"report-comment-success\":\"Reporte enviado\",\"edit-path-title\":\"Editar\",\"edit-path-name-label\":\"Nombre\",\"edit-path-cancel\":\"Cancelar\",\"edit-path-save\":\"Guardar\",\"edit-path-saved\":\"Guardado\",\"edit-path-error\":\"No pudimos editar la ruta. Inténtalo de nuevo\",\"comment-editor-write\":\"Escribe tu comentario o pregunta\",\"comment-editor-toast-success\":\"Comentario agregado\",\"comment-editor-toast-error\":\"Hubo un error, inténtalo de nuevo\",\"comment-editor-toast-update-success\":\"Comentario actualizado exitosamente\",\"comment-editor-toast-update-error\":\"Hubo un error al actualizar el comentario\",\"banner-tell-us-your-opinion\":\"Cuéntanos tu opinión\",\"terms-banner-title\":\"Queremos contarte que en Platzi hemos actualizado nues"])</script><script>self.__next_f.push([1,"tros\",\"terms-banner-terms-of-use\":\"Términos de Uso\",\"terms-banner-subtitle\":\"Esta actualización no afecta tu experiencia como estudiante.\",\"terms-banner-cta-button\":\"Revisar Términos de uso\",\"atomic-ui-common-loading\":\"Cargando\",\"atomic-ui-common-confirm\":\"Confirmar\",\"atomic-ui-common-cancel\":\"Cancelar\",\"atomic-ui-common-save\":\"Guardar\",\"atomic-ui-common-close\":\"Cerrar\",\"atomic-ui-common-back\":\"Atrás\",\"atomic-ui-common-next\":\"Siguiente\",\"atomic-ui-common-submit\":\"Enviar\",\"atomic-ui-common-search\":\"Buscar\",\"atomic-ui-common-filter\":\"Filtrar\",\"atomic-ui-common-sort\":\"Ordenar\",\"atomic-ui-common-view-more\":\"Ver más\",\"atomic-ui-common-show-less\":\"Ver menos\",\"atomic-ui-common-not-found\":\"No encontrado\",\"atomic-ui-common-retry\":\"Reintentar\",\"atomic-ui-common-reload\":\"Recargar\",\"atomic-ui-common-success\":\"Éxito\",\"atomic-ui-common-error\":\"Error\",\"atomic-ui-common-warning\":\"Advertencia\",\"atomic-ui-common-info\":\"Información\",\"atomic-ui-button-submit\":\"Enviar\",\"atomic-ui-button-cancel\":\"Cancelar\",\"atomic-ui-button-confirm\":\"Confirmar\",\"atomic-ui-button-save\":\"Guardar\",\"atomic-ui-button-reload\":\"Recargar\",\"atomic-ui-main-menu-home-link\":\"Ir a la página principal de Platzi\",\"atomic-ui-main-menu-confirm-email-title\":\"Confirmar tu correo\",\"atomic-ui-main-menu-confirm-email-text\":\"Enviamos un enlace de confirmación a tu correo electrónico {email}\",\"atomic-ui-main-menu-business-banner-text\":\"Hay empresas que le pagan Platzi a sus empleados 👀\",\"atomic-ui-main-menu-business-banner-cta\":\"Descubre más\",\"atomic-ui-error-box-title\":\"Parece que ocurrió un error\",\"atomic-ui-error-box-description\":\"Por favor, inténtalo de nuevo.\",\"atomic-ui-error-box-retry\":\"Recargar\",\"atomic-ui-content-rater-question\":\"¿Fue útil?\",\"atomic-ui-content-rater-like\":\"Sí, fue útil\",\"atomic-ui-content-rater-dislike\":\"No, no fue útil\",\"atomic-ui-form-required\":\"Campo requerido\",\"atomic-ui-form-invalid-email\":\"Correo electrónico inválido\",\"atomic-ui-form-invalid-password\":\"Contraseña inválida\",\"atomic-ui-form-password-mismatch\":\"Las contraseñas no coinciden\",\"atomic-ui-form-min-length\":\"Mínimo {count} caracteres requeridos\",\"atomic-ui-form-max-length\":\"Máximo {count} caracteres permitidos\",\"atomic-ui-avatar-alt\":\"Avatar de usuario\",\"atomic-ui-avatar-upload\":\"Subir imagen\",\"atomic-ui-avatar-remove\":\"Eliminar imagen\",\"atomic-ui-modal-close\":\"Cerrar modal\",\"atomic-ui-notification-new\":\"Nueva notificación\",\"atomic-ui-notification-read-all\":\"Marcar todas como leídas\",\"atomic-ui-notification-empty\":\"No hay notificaciones\",\"atomic-ui-notification-empty-description\":\"Prueba filtrando por otra categoría o quita los filtros para ver todo.\",\"atomic-ui-notification-mark-as-read\":\"Marcar como leído\",\"atomic-ui-notification-reaction-a\":\"a\",\"atomic-ui-notification-reaction-and\":\"y\",\"atomic-ui-notification-comment-replied\":\"{authorName} respondió a tu comentario {courseTitle}\",\"atomic-ui-notification-reaction-single\":\"A {authorName} le gustó tu comentario {courseTitle}.\",\"atomic-ui-notification-reaction-multiple\":\"{likesText} les gustó tu comentario {courseTitle}.\",\"atomic-ui-notification-reaction-one-more\":\"persona más\",\"atomic-ui-notification-reaction-multiple-more\":\"personas más\",\"atomic-ui-notification-new-course-badge\":\"Nuevo\",\"atomic-ui-notification-new-course-launched\":\"Hemos lanzado:\",\"atomic-ui-notification-in-the-course\":\"en el {courseTitle}\",\"atomic-ui-notification-error-title\":\"Hubo un problema al cargar tus notificaciones\",\"atomic-ui-notification-error-description\":\"Por favor, intenta de nuevo.\",\"atomic-ui-notification-error-retry\":\"Reintentar\",\"atomic-ui-tab-selection\":\"Seleccionar pestaña\",\"atomic-ui-input-placeholder\":\"Escribe aquí\",\"atomic-ui-input-search-placeholder\":\"Buscar...\",\"atomic-ui-input-clear\":\"Limpiar campo\",\"atomic-ui-select-placeholder\":\"Selecciona una opción\",\"atomic-ui-select-no-results\":\"No se encontraron resultados\",\"atomic-ui-select-clear\":\"Limpiar selección\",\"atomic-ui-checkbox-select-all\":\"Seleccionar todos\",\"atomic-ui-checkbox-unselect-all\":\"Deseleccionar todos\",\"atomic-ui-recommendator-box-default-label\":\"¿Q"])</script><script>self.__next_f.push([1,"ué cursos quieres que Platzi cree para ti?\",\"atomic-ui-recommendator-box-default-placeholder\":\"Escribe el curso que quieres\",\"atomic-ui-recommendator-box-error-empty\":\"Debes escribir un curso\",\"atomic-ui-recommendator-box-error-processing\":\"Hubo un error al procesar tu sugerencia. Por favor, intenta de nuevo.\",\"atomic-ui-recommendator-box-success-with-recommendations\":\"Gracias por tus recomendaciones, las usaremos para priorizar los nuevos cursos. Mientras tanto, te recomendamos iniciar con el siguiente curso:\",\"atomic-ui-recommendator-box-success-without-recommendations\":\"Gracias por tus recomendaciones, las usaremos para priorizar los nuevos cursos.\",\"atomic-ui-recommendator-box-teacher-prefix\":\"Por\",\"atomic-ui-school-card-alt\":\"Cursos de {title}\",\"atomic-ui-evaluation-header-logo-platzi\":\"Platzi\",\"atomic-ui-evaluation-header-logo-platzi-business\":\"Platzi Business\",\"atomic-ui-notification-panel-close\":\"Cerrar\",\"atomic-ui-notification-panel-notifications\":\"Notificaciones\",\"atomic-ui-notification-panel-mark-all-read\":\"Marcar todo como leído\",\"atomic-ui-notification-panel-settings\":\"Configuración\",\"atomic-ui-notification-filter-unread\":\"Sin leer\",\"atomic-ui-notification-filter-comments\":\"Comentarios\",\"atomic-ui-notification-filter-new-courses\":\"Lanzamientos\",\"atomic-ui-role-menu-teacher-title\":\"Profesores\",\"atomic-ui-role-menu-teacher-dashboard\":\"Dashboard\",\"atomic-ui-role-menu-b2b-title\":\"Empresas\",\"atomic-ui-role-menu-b2b-admin\":\"Administración\",\"atomic-ui-main-menu-search\":\"Buscar\",\"atomic-ui-main-menu-home\":\"Inicio\",\"atomic-ui-main-menu-comments\":\"Comentarios\",\"atomic-ui-main-menu-my-paths\":\"Mis Rutas\",\"atomic-ui-main-menu-my-progress\":\"Mi Progreso\",\"atomic-ui-main-menu-chat\":\"Chat ADA\",\"atomic-ui-main-menu-notifications\":\"Notificaciones\",\"atomic-ui-main-menu-my-certificates\":\"Mis Certificados\",\"atomic-ui-main-menu-tell-us-your-opinion\":\"Cuéntanos tu opinión\",\"atomic-ui-streak-risk\":\"¡Estás a punto de perder tu racha semanal! Mira una clase ahora para salvarla.\",\"atomic-ui-streak-running\":\"¡Avanza en tu racha! Mira una clase esta semana para avanzar.\",\"atomic-ui-streak-default\":\"Mira una clase para iniciar tu racha y medir tu progreso estudiando.\",\"atomic-ui-streak-completed\":\"¡Llevas {range} en racha! Regresa la próxima semana para mantenerla.\",\"atomic-ui-streak-week\":\"semana\",\"atomic-ui-streak-weeks\":\"semanas\",\"atomic-ui-streak-popover-title\":\"Racha semanal\",\"atomic-ui-streak-popover-week-label\":\"Semana:\",\"atomic-ui-banner-promo-subscribe\":\"Suscríbete\",\"atomic-ui-banner-promo-subscribe-msi\":\"MSI\",\"atomic-ui-banner-promo-subscribe-installments\":\"cuotas sin intereses\",\"atomic-ui-banner-promo-subscribe-pay-at\":\"Paga a\",\"atomic-ui-schools-title\":\"¿Por qué nos eligen?\",\"atomic-ui-schools-subtitle\":\"Formamos expertos en las áreas más demandadas\",\"atomic-ui-schools-description\":\"17 escuelas dónde encontrarás todo para potenciar y fortalecer las habilidades de tus empleados.\",\"atomic-ui-school-routes-count\":\"{count} rutas de aprendizaje\",\"atomic-ui-footer-schools-title\":\"Escuelas\",\"atomic-ui-footer-schools-web-development\":\"Desarrollo Web\",\"atomic-ui-footer-schools-ai-data-science\":\"Inteligencia Artificial y Data Science\",\"atomic-ui-footer-schools-product-ux-design\":\"Diseño de Producto y UX\",\"atomic-ui-footer-schools-graphic-design\":\"Diseño Gráfico y Arte Digital\",\"atomic-ui-footer-schools-blockchain-web3\":\"Blockchain y Web3\",\"atomic-ui-footer-schools-startups\":\"Startups\",\"atomic-ui-footer-schools-english-academy\":\"English Academy\",\"atomic-ui-footer-schools-cybersecurity\":\"Ciberseguridad\",\"atomic-ui-footer-schools-audiovisual-content\":\"Contenido Audiovisual\",\"atomic-ui-footer-schools-programming\":\"Programación\",\"atomic-ui-footer-schools-human-resources\":\"Recursos Humanos\",\"atomic-ui-footer-schools-cloud-devops\":\"Cloud Computing y DevOps\",\"atomic-ui-footer-schools-digital-marketing\":\"Marketing Digital\",\"atomic-ui-footer-schools-leadership-soft-skills\":\"Liderazgo y Habilidades Blandas\",\"atomic-ui-footer-schools-mobile-development\":\"Desarrollo Móvil\",\"atomic-ui-footer-schools-business\":\"Negocios\",\"atomic"])</script><script>self.__next_f.push([1,"-ui-footer-schools-finance-investments\":\"Finanzas e Inversiones\",\"atomic-ui-footer-platzi-community-title\":\"Platzi y comunidad\",\"atomic-ui-footer-platzi-community-work-with-us\":\"Trabaja con nosotros\",\"atomic-ui-footer-platzi-community-podcast\":\"Podcast\",\"atomic-ui-footer-platzi-community-launches\":\"Lanzamientos\",\"atomic-ui-footer-platzi-community-executive-program\":\"Executive Program\",\"atomic-ui-footer-platzi-community-business\":\"Platzi Business\",\"atomic-ui-footer-platzi-community-live-classes\":\"Live Classes\",\"atomic-ui-footer-resources-title\":\"Recursos\",\"atomic-ui-footer-resources-brand-manual\":\"Manual de Marca\",\"atomic-ui-footer-support-title\":\"Soporte\",\"atomic-ui-footer-support-faq\":\"Preguntas Frecuentes\",\"atomic-ui-footer-support-contact\":\"Contáctanos\",\"atomic-ui-footer-legal-title\":\"Legal\",\"atomic-ui-footer-legal-terms\":\"Términos y Condiciones\",\"atomic-ui-footer-legal-privacy\":\"Privacidad\",\"atomic-ui-footer-award-time-magazine\":\"Top 40 Mejores EdTech del mundo · 2024\",\"atomic-ui-footer-award-y-combinator\":\"Primera Startup Latina admitida en YC · 2014\",\"atomic-ui-footer-award-ey\":\"Primera Startup EdTech · 2018\",\"atomic-ui-footer-award-medal-education\":\"CEO Ganador Medalla por la Educación T4 \u0026 HP · 2024\",\"atomic-ui-footer-award-forbes\":\"CEO Mejor Emprendedor del año · 2024\",\"atomic-ui-footer-links-section-aria-label\":\"Enlaces principales\",\"atomic-ui-footer-awards-section-title\":\"Reconocimientos\",\"atomic-ui-footer-awards-section-logo-alt\":\"Logo reconocimiento\",\"atomic-ui-footer-social-section-aria-label\":\"Redes sociales\",\"atomic-ui-footer-social-section-from-latam\":\"De LATAM con\",\"atomic-ui-footer-social-section-for-world\":\"para el mundo\",\"atomic-ui-course-level-basico-label\":\"Nivel Básico\",\"atomic-ui-course-level-intermedio-label\":\"Nivel Intermedio\",\"atomic-ui-course-level-avanzado-label\":\"Nivel Avanzado\",\"atomic-ui-share-buttons-facebook\":\"Compartir en Facebook\",\"atomic-ui-share-buttons-twitter\":\"Compartir en Twitter\",\"atomic-ui-share-buttons-linkedin\":\"Compartir en LinkedIn\",\"atomic-ui-share-buttons-whatsapp\":\"Compartir en WhatsApp\",\"atomic-ui-share-buttons-copy-link\":\"Copiar enlace\",\"atomic-ui-share-buttons-copy-link-toast\":\"Enlace copiado al portapapeles\"}},\"now\":\"$undefined\",\"timeZone\":\"UTC\",\"children\":[\"$\",\"$L14\",null,{\"isLogged\":false,\"children\":[[\"$\",\"$L15\",null,{\"referrer\":\"https://platzi.com/cursos/html/configuracion-de-vscode-y-estructura-htm\"}],[\"$\",\"$L16\",null,{\"isLogged\":false,\"children\":[\"$\",\"$Ld\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"(materialView)\",\"children\",\"cursos\",\"children\",[\"courseSlug\",\"html\",\"d\"],\"children\",[\"materialSlug\",\"configuracion-de-vscode-y-estructura-htm\",\"d\"],\"children\"],\"error\":\"$17\",\"errorStyles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/5260c55064d9d88a.css\",\"precedence\":\"$undefined\"}]],\"loading\":\"$undefined\",\"loadingStyles\":\"$undefined\",\"hasLoading\":false,\"template\":[\"$\",\"$Lf\",null,{}],\"templateStyles\":\"$undefined\",\"notFound\":\"$L18\",\"notFoundStyles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/5260c55064d9d88a.css\",\"precedence\":\"$undefined\"}]],\"childProp\":{\"current\":[\"$L19\",null],\"segment\":\"__PAGE__?{\\\"courseSlug\\\":\\\"html\\\",\\\"materialSlug\\\":\\\"configuracion-de-vscode-y-estructura-htm\\\"}\"},\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/44b170497c2243ab.css\",\"precedence\":\"next\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/8db9ef950006134a.css\",\"precedence\":\"next\"}]]}]}],[\"$\",\"$L1a\",null,{}],[\"$\",\"$L1b\",null,{}]]}]}]\n"])</script><script>self.__next_f.push([1,"18:[\"$\",\"$L17\",null,{\"error\":{\"message\":\"{\\\"title\\\":\\\"Error 404\\\",\\\"originalError\\\":\\\"MaterialNotFoundError\\\",\\\"userId\\\":1,\\\"message\\\":\\\"No encontramos lo que estabas buscando, inicia sesión y ve a platzi.com para continuar tu búsqueda\\\"}\"}}]\n"])</script><script>self.__next_f.push([1,"19:\"$L1c\"\n"])</script><script>self.__next_f.push([1,"9:[[[\"$\",\"meta\",null,{\"charSet\":\"utf-8\"}],[\"$\",\"title\",null,{\"children\":\"Configuración de VSCode y estructura HTML5 básica\"}],[\"$\",\"meta\",null,{\"name\":\"description\",\"content\":\"Crear tu primer sitio en HTML5 es más simple de lo que parece. Aquí verás cómo configurar VSCode, usar el navegador con el inspector de elementos, gen\"}],null,null,null,null,null,null,null,null,[\"$\",\"meta\",null,{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],null,null,null,null,null,null,null,null,null,null,[[\"$\",\"meta\",null,{\"name\":\"fb:app_id\",\"content\":\"263680607075199\"}],[\"$\",\"meta\",null,{\"name\":\"fb:admins\",\"content\":\"1030603473\"}],[\"$\",\"meta\",null,{\"name\":\"p:domain_verify\",\"content\":\"7b60446823db932528d0528d4cb50e66\"}]]],[[\"$\",\"link\",null,{\"rel\":\"canonical\",\"href\":\"https://platzi.com/cursos/html/configuracion-de-vscode-y-estructura-htm/\"}],null,null,null],null,null,[null,null,null,null,null],null,[null,[\"$\",\"meta\",null,{\"property\":\"og:title\",\"content\":\"Configuración de VSCode y estructura HTML5 básica\"}],[\"$\",\"meta\",null,{\"property\":\"og:description\",\"content\":\"Crear tu primer sitio en HTML5 es más simple de lo que parece. Aquí verás cómo configurar VSCode, usar el navegador con el inspector de elementos, gen\"}],[\"$\",\"meta\",null,{\"property\":\"og:url\",\"content\":\"https://platzi.com/cursos/html/configuracion-de-vscode-y-estructura-htm/\"}],null,null,null,null,[[[\"$\",\"meta\",null,{\"property\":\"og:image\",\"content\":\"https://static.platzi.com/media/courses/Piezas-Curso-HTML_OG.jpg\"}]]],null,null,null,null,null,null,[\"$\",\"meta\",null,{\"property\":\"og:type\",\"content\":\"website\"}]],[[\"$\",\"meta\",null,{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",null,{\"name\":\"twitter:site\",\"content\":\"@Platzi\"}],[\"$\",\"meta\",null,{\"name\":\"twitter:site:id\",\"content\":\"4503599630205252\"}],[\"$\",\"meta\",null,{\"name\":\"twitter:creator\",\"content\":\"@Platzi\"}],[\"$\",\"meta\",null,{\"name\":\"twitter:creator:id\",\"content\":\"4503599630205252\"}],[\"$\",\"meta\",null,{\"name\":\"twitter:title\",\"content\":\"Configuración de VSCode y estructura HTML5 básica\"}],[\"$\",\"meta\",null,{\"name\":\"twitter:description\",\"content\":\"Crear tu primer sitio en HTML5 es más simple de lo que parece. Aquí verás cómo configurar VSCode, usar el navegador con el inspector de elementos, gen\"}],[[[\"$\",\"meta\",null,{\"name\":\"twitter:image\",\"content\":\"https://static.platzi.com/media/courses/Piezas-Curso-HTML_OG.jpg\"}]]],null,null],null,[null,[[\"$\",\"link\",null,{\"rel\":\"icon\",\"href\":\"https://static.platzi.com/media/uploads/icon_77b5127626.png\"}]],[],null]]\n"])</script><script>self.__next_f.push([1,"1d:I{\"id\":\"42440\",\"chunks\":[\"9213:static/chunks/27aef467-b5e4717f1c69178b.js\",\"6180:static/chunks/553e4e45-4f9b7b565e5b094e.js\",\"2777:static/chunks/b4b11215-0f2ab320f9136642.js\",\"9263:static/chunks/9263-9505371acb196845.js\",\"977:static/chunks/977-9897da7f10f09b20.js\",\"7390:static/chunks/7390-4eaaf6860210910c.js\",\"8188:static/chunks/8188-0f30a7f75a70bcb5.js\",\"7825:static/chunks/7825-7511ea9a19aaa2b2.js\",\"7249:static/chunks/7249-fbeaf8761ab160aa.js\",\"6394:static/chunks/6394-773f18c38031acd7.js\",\"8556:static/chunks/8556-d810e88718dfccbc.js\",\"8727:static/chunks/8727-e4860de435779979.js\",\"5846:static/chunks/5846-791dd5215da36a5c.js\",\"2023:static/chunks/2023-6aeb23f7d40e9386.js\",\"4264:static/chunks/4264-291b9ba974390436.js\",\"6026:static/chunks/6026-d9c2bd3231ce27ee.js\",\"7194:static/chunks/7194-a00f5bdba6ccbac9.js\",\"2176:static/chunks/2176-b5d5b925defe454f.js\",\"8671:static/chunks/8671-e017e49042d9426a.js\",\"2039:static/chunks/2039-63c6d2780e1ec59b.js\",\"7680:static/chunks/7680-61b1e7ef2afef8d8.js\",\"4346:static/chunks/4346-a71fc8e073602c10.js\",\"9304:static/chunks/9304-b817e3b4141e91b2.js\",\"513:static/chunks/513-a1b4937ee55600bc.js\",\"922:static/chunks/922-4922a9cd7ef6eec3.js\",\"9101:static/chunks/9101-33aa2118aab8b065.js\",\"5858:static/chunks/5858-93f4f9c03baa66ee.js\",\"3975:static/chunks/3975-32f2b18136e728d6.js\",\"5243:static/chunks/5243-ff11fa673f59200f.js\",\"5647:static/chunks/app/(materialView)/cursos/[courseSlug]/[materialSlug]/page-47d93517e24d7634.js\"],\"name\":\"EventBusProvider\",\"async\":false}\n"])</script><script>self.__next_f.push([1,"1e:I{\"id\":\"20043\",\"chunks\":[\"9213:static/chunks/27aef467-b5e4717f1c69178b.js\",\"6180:static/chunks/553e4e45-4f9b7b565e5b094e.js\",\"2777:static/chunks/b4b11215-0f2ab320f9136642.js\",\"9263:static/chunks/9263-9505371acb196845.js\",\"977:static/chunks/977-9897da7f10f09b20.js\",\"7390:static/chunks/7390-4eaaf6860210910c.js\",\"8188:static/chunks/8188-0f30a7f75a70bcb5.js\",\"7825:static/chunks/7825-7511ea9a19aaa2b2.js\",\"7249:static/chunks/7249-fbeaf8761ab160aa.js\",\"6394:static/chunks/6394-773f18c38031acd7.js\",\"8556:static/chunks/8556-d810e88718dfccbc.js\",\"8727:static/chunks/8727-e4860de435779979.js\",\"5846:static/chunks/5846-791dd5215da36a5c.js\",\"2023:static/chunks/2023-6aeb23f7d40e9386.js\",\"4264:static/chunks/4264-291b9ba974390436.js\",\"6026:static/chunks/6026-d9c2bd3231ce27ee.js\",\"7194:static/chunks/7194-a00f5bdba6ccbac9.js\",\"2176:static/chunks/2176-b5d5b925defe454f.js\",\"8671:static/chunks/8671-e017e49042d9426a.js\",\"2039:static/chunks/2039-63c6d2780e1ec59b.js\",\"7680:static/chunks/7680-61b1e7ef2afef8d8.js\",\"4346:static/chunks/4346-a71fc8e073602c10.js\",\"9304:static/chunks/9304-b817e3b4141e91b2.js\",\"513:static/chunks/513-a1b4937ee55600bc.js\",\"922:static/chunks/922-4922a9cd7ef6eec3.js\",\"9101:static/chunks/9101-33aa2118aab8b065.js\",\"5858:static/chunks/5858-93f4f9c03baa66ee.js\",\"3975:static/chunks/3975-32f2b18136e728d6.js\",\"5243:static/chunks/5243-ff11fa673f59200f.js\",\"5647:static/chunks/app/(materialView)/cursos/[courseSlug]/[materialSlug]/page-47d93517e24d7634.js\"],\"name\":\"\",\"async\":false}\n1f:I{\"id\":\"48456\",\"chunks\":[\"9213:static/chunks/27aef467-b5e4717f1c69178b.js\",\"6180:static/chunks/553e4e45-4f9b7b565e5b094e.js\",\"2777:static/chunks/b4b11215-0f2ab320f9136642.js\",\"9263:static/chunks/9263-9505371acb196845.js\",\"977:static/chunks/977-9897da7f10f09b20.js\",\"7390:static/chunks/7390-4eaaf6860210910c.js\",\"8188:static/chunks/8188-0f30a7f75a70bcb5.js\",\"7825:static/chunks/7825-7511ea9a19aaa2b2.js\",\"7249:static/chunks/7249-fbeaf8761ab160aa.js\",\"6394:static/chunks/6394-773f18c38031acd7.js\",\"8556:static/chunks/8556-d810e88718dfccbc.js\",\"8727:static/chunks/8727-e4860de435779979.js\",\"5846:static/chunks/5846-791dd5215da36a5c.js\",\"2023:static/chunks/2023-6aeb23f7d40e9386.js\",\"4264:static/chunks/4264-291b9ba974390436.js\",\"6026:static/chunks/6026-d9c2bd3231ce27ee.js\",\"7194:static/chunks/7194-a00f5bdba6ccbac9.js\",\"2176:static/chunks/2176-b5d5b925defe454f.js\",\"8671:static/chunks/8671-e017e49042d9426a.js\",\"2039:static/chunks/2039-63c6d2780e1ec59b.js\",\"7680:static/chunks/7680-61b1e7ef2afef8d8.js\",\"4346:static/chunks/4346-a71fc8e073602c10.js\",\"9304:static/chunks/9304-b817e3b4141e91b2.js\",\"513:static/chunks/513-a1b4937ee55600bc.js\",\"922:static/chunks/922-4922a9cd7ef6eec3.js\",\"9101:static/chunks/9101-33aa2118aab8b065.js\",\"5858:static/chunks/5858-93f4f9c03baa66ee.js\",\"3975:static/chunks/3975-32f2b18136e728d6.js\",\"5243:static/chunks/5243-ff11fa673f59200f.js\",\"5647:static/chunks/app/(materialView)/cursos/[courseSlug]/[materialSlug]/page-47d93517e24d7634.js\"],\"name\":\"MaterialProvider\",\"async\":false}\n20:I{\"id\":\"70026\",\"chunks\":[\"9213:static/chunks/27aef467-b5e4717f1c69178b.js\",\"6180:static/chunks/553e4e45-4f9b7b565e5b094e.js\",\"2777:static/chunks/b4b11215-0f2ab320f9136642.js\",\"9263:static/chunks/9263-9505371acb196845.js\",\"977:static/chunks/977-9897da7f10f09b20.js\",\"7390:static/chunks/7390-4eaaf6860210910c.js\",\"8188:static/chunks/8188-0f30a7f75a70bcb5.js\",\"7825:static/chunks/7825-7511ea9a19aaa2b2.js\",\"7249:static/chunks/7249-fbeaf8761ab160aa.js\",\"6394:static/chunks/6394-773f18c38031acd7.js\",\"8556:static/chunks/8556-d810e88718dfccbc.js\",\"8727:static/chunks/8727-e4860de435779979.js\",\"5846:static/chunks/5846-791dd5215da36a5c.js\",\"2023:static/chunks/2023-6aeb23f7d40e9386.js\",\"4264:static/chunks/4264-291b9ba974390436.js\",\"6026:static/chunks/6026-d9c2bd3231ce27ee.js\",\"7194:static/chunks/7194-a00f5bdba6ccbac9.js\",\"2176:static/chunks/2176-b5d5b925defe454f.js\",\"8671:static/chunks/8671-e017e49042d9426a.js\",\"2039:static/chunks/2039-63c6d2780e1ec59b.js\",\"7680:static/chunks/7680-61b1e7ef2afef8d8.js\",\"4346:static/chunks/4346-a71fc8e073602c10.js\",\"9304:static/chunks/9304-b817e3b4141e91b2."])</script><script>self.__next_f.push([1,"js\",\"513:static/chunks/513-a1b4937ee55600bc.js\",\"922:static/chunks/922-4922a9cd7ef6eec3.js\",\"9101:static/chunks/9101-33aa2118aab8b065.js\",\"5858:static/chunks/5858-93f4f9c03baa66ee.js\",\"3975:static/chunks/3975-32f2b18136e728d6.js\",\"5243:static/chunks/5243-ff11fa673f59200f.js\",\"5647:static/chunks/app/(materialView)/cursos/[courseSlug]/[materialSlug]/page-47d93517e24d7634.js\"],\"name\":\"MaterialHeading\",\"async\":false}\n21:I{\"id\":\"91779\",\"chunks\":[\"9213:static/chunks/27aef467-b5e4717f1c69178b.js\",\"6180:static/chunks/553e4e45-4f9b7b565e5b094e.js\",\"2777:static/chunks/b4b11215-0f2ab320f9136642.js\",\"9263:static/chunks/9263-9505371acb196845.js\",\"977:static/chunks/977-9897da7f10f09b20.js\",\"7390:static/chunks/7390-4eaaf6860210910c.js\",\"8188:static/chunks/8188-0f30a7f75a70bcb5.js\",\"7825:static/chunks/7825-7511ea9a19aaa2b2.js\",\"7249:static/chunks/7249-fbeaf8761ab160aa.js\",\"6394:static/chunks/6394-773f18c38031acd7.js\",\"8556:static/chunks/8556-d810e88718dfccbc.js\",\"8727:static/chunks/8727-e4860de435779979.js\",\"5846:static/chunks/5846-791dd5215da36a5c.js\",\"2023:static/chunks/2023-6aeb23f7d40e9386.js\",\"4264:static/chunks/4264-291b9ba974390436.js\",\"6026:static/chunks/6026-d9c2bd3231ce27ee.js\",\"7194:static/chunks/7194-a00f5bdba6ccbac9.js\",\"2176:static/chunks/2176-b5d5b925defe454f.js\",\"8671:static/chunks/8671-e017e49042d9426a.js\",\"2039:static/chunks/2039-63c6d2780e1ec59b.js\",\"7680:static/chunks/7680-61b1e7ef2afef8d8.js\",\"4346:static/chunks/4346-a71fc8e073602c10.js\",\"9304:static/chunks/9304-b817e3b4141e91b2.js\",\"513:static/chunks/513-a1b4937ee55600bc.js\",\"922:static/chunks/922-4922a9cd7ef6eec3.js\",\"9101:static/chunks/9101-33aa2118aab8b065.js\",\"5858:static/chunks/5858-93f4f9c03baa66ee.js\",\"3975:static/chunks/3975-32f2b18136e728d6.js\",\"5243:static/chunks/5243-ff11fa673f59200f.js\",\"5647:static/chunks/app/(materialView)/cursos/[courseSlug]/[materialSlug]/page-47d93517e24d7634.js\"],\"name\":\"PlayerEventWatcher\",\"async\":false}\n22:I{\"id\":\"91469\",\"chunks\":[\"9213:static/chunks/27aef467-b5e4717f1c69178b.js\",\"6180:static/chunks/553e4e45-4f9b7b565e5b094e.js\",\"2777:static/chunks/b4b11215-0f2ab320f9136642.js\",\"9263:static/chunks/9263-9505371acb196845.js\",\"977:static/chunks/977-9897da7f10f09b20.js\",\"7390:static/chunks/7390-4eaaf6860210910c.js\",\"8188:static/chunks/8188-0f30a7f75a70bcb5.js\",\"7825:static/chunks/7825-7511ea9a19aaa2b2.js\",\"7249:static/chunks/7249-fbeaf8761ab160aa.js\",\"6394:static/chunks/6394-773f18c38031acd7.js\",\"8556:static/chunks/8556-d810e88718dfccbc.js\",\"8727:static/chunks/8727-e4860de435779979.js\",\"5846:static/chunks/5846-791dd5215da36a5c.js\",\"2023:static/chunks/2023-6aeb23f7d40e9386.js\",\"4264:static/chunks/4264-291b9ba974390436.js\",\"6026:static/chunks/6026-d9c2bd3231ce27ee.js\",\"7194:static/chunks/7194-a00f5bdba6ccbac9.js\",\"2176:static/chunks/2176-b5d5b925defe454f.js\",\"8671:static/chunks/8671-e017e49042d9426a.js\",\"2039:static/chunks/2039-63c6d2780e1ec59b.js\",\"7680:static/chunks/7680-61b1e7ef2afef8d8.js\",\"4346:static/chunks/4346-a71fc8e073602c10.js\",\"9304:static/chunks/9304-b817e3b4141e91b2.js\",\"513:static/chunks/513-a1b4937ee55600bc.js\",\"922:static/chunks/922-4922a9cd7ef6eec3.js\",\"9101:static/chunks/9101-33aa2118aab8b065.js\",\"5858:static/chunks/5858-93f4f9c03baa66ee.js\",\"3975:static/chunks/3975-32f2b18136e728d6.js\",\"5243:static/chunks/5243-ff11fa673f59200f.js\",\"5647:static/chunks/app/(materialView)/cursos/[courseSlug]/[materialSlug]/page-47d93517e24d7634.js\"],\"name\":\"Viewer\",\"async\":false}\n23:I{\"id\":\"98182\",\"chunks\":[\"9213:static/chunks/27aef467-b5e4717f1c69178b.js\",\"6180:static/chunks/553e4e45-4f9b7b565e5b094e.js\",\"2777:static/chunks/b4b11215-0f2ab320f9136642.js\",\"9263:static/chunks/9263-9505371acb196845.js\",\"977:static/chunks/977-9897da7f10f09b20.js\",\"7390:static/chunks/7390-4eaaf6860210910c.js\",\"8188:static/chunks/8188-0f30a7f75a70bcb5.js\",\"7825:static/chunks/7825-7511ea9a19aaa2b2.js\",\"7249:static/chunks/7249-fbeaf8761ab160aa.js\",\"6394:static/chunks/6394-773f18c38031acd7.js\",\"8556:static/chunks/8556-d810e88718dfccbc.js\",\"8727:static/chunks/8727-e4860de435779979.js\",\"5846:static/chunks/5846-791dd5215da36a5c.js\",\"2023:static/chunks/2023-6aeb23"])</script><script>self.__next_f.push([1,"f7d40e9386.js\",\"4264:static/chunks/4264-291b9ba974390436.js\",\"6026:static/chunks/6026-d9c2bd3231ce27ee.js\",\"7194:static/chunks/7194-a00f5bdba6ccbac9.js\",\"2176:static/chunks/2176-b5d5b925defe454f.js\",\"8671:static/chunks/8671-e017e49042d9426a.js\",\"2039:static/chunks/2039-63c6d2780e1ec59b.js\",\"7680:static/chunks/7680-61b1e7ef2afef8d8.js\",\"4346:static/chunks/4346-a71fc8e073602c10.js\",\"9304:static/chunks/9304-b817e3b4141e91b2.js\",\"513:static/chunks/513-a1b4937ee55600bc.js\",\"922:static/chunks/922-4922a9cd7ef6eec3.js\",\"9101:static/chunks/9101-33aa2118aab8b065.js\",\"5858:static/chunks/5858-93f4f9c03baa66ee.js\",\"3975:static/chunks/3975-32f2b18136e728d6.js\",\"5243:static/chunks/5243-ff11fa673f59200f.js\",\"5647:static/chunks/app/(materialView)/cursos/[courseSlug]/[materialSlug]/page-47d93517e24d7634.js\"],\"name\":\"DesktopAfterMaterial\",\"async\":false}\n24:I{\"id\":\"56520\",\"chunks\":[\"9213:static/chunks/27aef467-b5e4717f1c69178b.js\",\"6180:static/chunks/553e4e45-4f9b7b565e5b094e.js\",\"2777:static/chunks/b4b11215-0f2ab320f9136642.js\",\"9263:static/chunks/9263-9505371acb196845.js\",\"977:static/chunks/977-9897da7f10f09b20.js\",\"7390:static/chunks/7390-4eaaf6860210910c.js\",\"8188:static/chunks/8188-0f30a7f75a70bcb5.js\",\"7825:static/chunks/7825-7511ea9a19aaa2b2.js\",\"7249:static/chunks/7249-fbeaf8761ab160aa.js\",\"6394:static/chunks/6394-773f18c38031acd7.js\",\"8556:static/chunks/8556-d810e88718dfccbc.js\",\"8727:static/chunks/8727-e4860de435779979.js\",\"5846:static/chunks/5846-791dd5215da36a5c.js\",\"2023:static/chunks/2023-6aeb23f7d40e9386.js\",\"4264:static/chunks/4264-291b9ba974390436.js\",\"6026:static/chunks/6026-d9c2bd3231ce27ee.js\",\"7194:static/chunks/7194-a00f5bdba6ccbac9.js\",\"2176:static/chunks/2176-b5d5b925defe454f.js\",\"8671:static/chunks/8671-e017e49042d9426a.js\",\"2039:static/chunks/2039-63c6d2780e1ec59b.js\",\"7680:static/chunks/7680-61b1e7ef2afef8d8.js\",\"4346:static/chunks/4346-a71fc8e073602c10.js\",\"9304:static/chunks/9304-b817e3b4141e91b2.js\",\"513:static/chunks/513-a1b4937ee55600bc.js\",\"922:static/chunks/922-4922a9cd7ef6eec3.js\",\"9101:static/chunks/9101-33aa2118aab8b065.js\",\"5858:static/chunks/5858-93f4f9c03baa66ee.js\",\"3975:static/chunks/3975-32f2b18136e728d6.js\",\"5243:static/chunks/5243-ff11fa673f59200f.js\",\"5647:static/chunks/app/(materialView)/cursos/[courseSlug]/[materialSlug]/page-47d93517e24d7634.js\"],\"name\":\"MobileAfterMaterial\",\"async\":false}\n25:I{\"id\":\"50682\",\"chunks\":[\"9213:static/chunks/27aef467-b5e4717f1c69178b.js\",\"6180:static/chunks/553e4e45-4f9b7b565e5b094e.js\",\"2777:static/chunks/b4b11215-0f2ab320f9136642.js\",\"9263:static/chunks/9263-9505371acb196845.js\",\"977:static/chunks/977-9897da7f10f09b20.js\",\"7390:static/chunks/7390-4eaaf6860210910c.js\",\"8188:static/chunks/8188-0f30a7f75a70bcb5.js\",\"7825:static/chunks/7825-7511ea9a19aaa2b2.js\",\"7249:static/chunks/7249-fbeaf8761ab160aa.js\",\"6394:static/chunks/6394-773f18c38031acd7.js\",\"8556:static/chunks/8556-d810e88718dfccbc.js\",\"8727:static/chunks/8727-e4860de435779979.js\",\"5846:static/chunks/5846-791dd5215da36a5c.js\",\"2023:static/chunks/2023-6aeb23f7d40e9386.js\",\"4264:static/chunks/4264-291b9ba974390436.js\",\"6026:static/chunks/6026-d9c2bd3231ce27ee.js\",\"7194:static/chunks/7194-a00f5bdba6ccbac9.js\",\"2176:static/chunks/2176-b5d5b925defe454f.js\",\"8671:static/chunks/8671-e017e49042d9426a.js\",\"2039:static/chunks/2039-63c6d2780e1ec59b.js\",\"7680:static/chunks/7680-61b1e7ef2afef8d8.js\",\"4346:static/chunks/4346-a71fc8e073602c10.js\",\"9304:static/chunks/9304-b817e3b4141e91b2.js\",\"513:static/chunks/513-a1b4937ee55600bc.js\",\"922:static/chunks/922-4922a9cd7ef6eec3.js\",\"9101:static/chunks/9101-33aa2118aab8b065.js\",\"5858:static/chunks/5858-93f4f9c03baa66ee.js\",\"3975:static/chunks/3975-32f2b18136e728d6.js\",\"5243:static/chunks/5243-ff11fa673f59200f.js\",\"5647:static/chunks/app/(materialView)/cursos/[courseSlug]/[materialSlug]/page-47d93517e24d7634.js\"],\"name\":\"MaterialTabs\",\"async\":false}\n26:I{\"id\":\"81325\",\"chunks\":[\"9213:static/chunks/27aef467-b5e4717f1c69178b.js\",\"6180:static/chunks/553e4e45-4f9b7b565e5b094e.js\",\"2777:static/chunks/b4b11215-0f2ab320f9136642.js\",\"9263:static/chunks/9263-9505371acb196845.js\",\"977:s"])</script><script>self.__next_f.push([1,"tatic/chunks/977-9897da7f10f09b20.js\",\"7390:static/chunks/7390-4eaaf6860210910c.js\",\"8188:static/chunks/8188-0f30a7f75a70bcb5.js\",\"7825:static/chunks/7825-7511ea9a19aaa2b2.js\",\"7249:static/chunks/7249-fbeaf8761ab160aa.js\",\"6394:static/chunks/6394-773f18c38031acd7.js\",\"8556:static/chunks/8556-d810e88718dfccbc.js\",\"8727:static/chunks/8727-e4860de435779979.js\",\"5846:static/chunks/5846-791dd5215da36a5c.js\",\"2023:static/chunks/2023-6aeb23f7d40e9386.js\",\"4264:static/chunks/4264-291b9ba974390436.js\",\"6026:static/chunks/6026-d9c2bd3231ce27ee.js\",\"7194:static/chunks/7194-a00f5bdba6ccbac9.js\",\"2176:static/chunks/2176-b5d5b925defe454f.js\",\"8671:static/chunks/8671-e017e49042d9426a.js\",\"2039:static/chunks/2039-63c6d2780e1ec59b.js\",\"7680:static/chunks/7680-61b1e7ef2afef8d8.js\",\"4346:static/chunks/4346-a71fc8e073602c10.js\",\"9304:static/chunks/9304-b817e3b4141e91b2.js\",\"513:static/chunks/513-a1b4937ee55600bc.js\",\"922:static/chunks/922-4922a9cd7ef6eec3.js\",\"9101:static/chunks/9101-33aa2118aab8b065.js\",\"5858:static/chunks/5858-93f4f9c03baa66ee.js\",\"3975:static/chunks/3975-32f2b18136e728d6.js\",\"5243:static/chunks/5243-ff11fa673f59200f.js\",\"5647:static/chunks/app/(materialView)/cursos/[courseSlug]/[materialSlug]/page-47d93517e24d7634.js\"],\"name\":\"SignUpWrapper\",\"async\":false}\n1c:[\"$\",\"$L13\",null,{\"formats\":\"$undefined\",\"locale\":\"es\",\"messages\":{\"clases\":{\"material-tabs-resources\":\"Recursos\",\"material-tabs-comments\":\"Comentarios\",\"material-tabs-classes\":\"Clases\",\"next-material-button-exam\":\"Tomar examen\",\"next-material-button-class\":\"Siguiente clase\",\"prev-material-button-class\":\"Clase anterior\",\"class-viewed\":\"Clase vista\",\"class-counter\":\"Clase {actual} de {total}\",\"ai-question-mobile-placeholder\":\"¿Dudas? Obtén respuesta inmediata\",\"ai-question-desktop-placeholder\":\"¿Tienes preguntas sobre la clase? Obtén respuesta inmediata\",\"ai-question-ask-button\":\"Preguntar\",\"ai-question-close-button\":\"Cerrar\",\"ai-question-comment-added\":\"Tu comentario ha sido agregado.\",\"ai-response-feedback-message\":\"Gracias por tu calificación.\",\"ai-response-title\":\"Respuesta:\",\"ai-response-error-title\":\"¡Lo sentimos!\",\"ai-response-publish-button\":\"Publicar respuesta\",\"ai-response-new-question-button\":\"Nueva pregunta\",\"material-comments-deleted\":\"Comentario eliminado\",\"material-comments-undo\":\"Deshacer\",\"material-comments-empty-title\":\"Aún no hay aportes en esta clase\",\"material-comments-empty-description\":\"Escribe tu pregunta o comentario y sé la primera persona en participar en esta clase.\",\"material-comments-filter-label\":\"Filtrar comentarios\",\"material-comments-filter-all\":\"Todo\",\"material-comments-filter-questions\":\"Preguntas\",\"material-comments-filter-contributions\":\"Aportes\",\"material-comments-filter-most-voted\":\"Más votados\",\"material-comments-filter-newest\":\"Nuevos\",\"material-comments-filter-unanswered\":\"Sin responder\",\"material-comments-filter-sort-by\":\"ORDENAR POR\",\"material-comments-filter-own\":\"Favoritos\",\"material-banner-subscribe-message\":\"Suscríbete a un plan y accede al curso completo.\",\"material-banner-b2b-blocked-message\":\"Contacta a tu empresa o a {email} para acceder al curso completo.\",\"material-banner-b2b-message\":\"Suscríbete a un plan y accede a todos los cursos.\",\"material-banner-see-plans\":\"Ver planes\",\"material-banner-see-subscription\":\"Ver suscripción\",\"material-banner-activate-subscription\":\"Activa tu suscripción para acceder al curso completo.\",\"material-banner-upgrade-plan\":\"Cámbiate a un plan Expert para acceder a los cursos de inglés, liderazgo y startups.\",\"material-banner-update-card\":\"Tu último pago no pudo ser procesado, actualiza tu tarjeta.\",\"material-progress-label\":\"{progress}% progreso\",\"report-class-button\":\"Reportar\",\"report-class-tooltip\":\"Reportar clase\",\"report-class-modal-title\":\"Reportar clase\",\"report-class-modal-subtitle\":\"Cuéntanos por qué reportas esta clase.\",\"report-class-success\":\"Reporte enviado\",\"blocked-content-default-message\":\"Suscríbete a Platzi para ver el curso completo {startTag}y aprende a:{endTag}\",\"blocked-content-accountless-message\":\"Regístrate para ver el contenido del curso "])</script><script>self.__next_f.push([1,"{startTag}y aprende a:{endTag}\",\"blocked-content-cta-signup-account\":\"Registrarme\",\"blocked-content-paused-message\":\"Activa tu suscripción para acceder al curso y aprende a:\",\"blocked-content-b2b-message\":\"Contacta a tu empresa o a {email} para acceder al curso.\",\"blocked-content-upgrade-message\":\"Cámbiate a un plan Expert para acceder al contenido exclusivo.\",\"blocked-content-past-due-message\":\"Tu último pago no pudo ser procesado, actualiza tu tarjeta para recuperar el acceso.\",\"blocked-content-skills-title\":\"Lo que podras aprender:\",\"blocked-content-cta-see-plans\":\"Ver planes\",\"blocked-content-cta-activate-account\":\"Activar mi cuenta\",\"blocked-content-cta-upgrade-expert\":\"Actualizar a Expert\",\"blocked-content-cta-update-card\":\"Actualizar tarjeta\",\"streak-accomplished-title\":\"¡Avanzaste en tu racha semanal!\",\"streak-accomplished-cta\":\"¡Continuar aprendiendo!\",\"streak-accomplished-message\":\"Sigue estudiando para mantenerla activa y no perder \u003cyour\u003e\u003c/your\u003e \u003cweek\u003e\u003c/week\u003e en racha.\",\"streak-accomplished-week\":\"semana\",\"streak-accomplished-weeks\":\"semanas\",\"streak-accomplished-your\":\"tu\",\"streak-accomplished-yours\":\"tus\",\"end-screen-title\":\"Siguiente clase:\",\"end-screen-next-class\":\"Próxima clase\",\"end-screen-next-class-in\":\"en\",\"end-screen-stop\":\"Detener\",\"end-screen-take-exam\":\"Tomar examen\",\"end-screen-next-class-desktop\":\"Ver siguiente clase\",\"end-screen-next-class-mobile\":\"Siguiente clase\",\"resources-summary\":\"Resumen\",\"resources-show-less\":\"Mostrar menos\",\"resources-continue-reading\":\"Continuar leyendo\",\"course-progress\":\"Progreso del curso\",\"course-content\":\"Contenido del curso\",\"view-classes\":\"Ver clases\",\"admin-tool-edit\":\"Editar\",\"admin-tool-edit-class\":\"Editar clase\",\"dashboard-tool\":\"Ir al dashboard\",\"dashboard-tool-class\":\"Ir al dashboard\",\"resources-class-files\":\"Archivos de la clase\",\"resources-recommended-readings\":\"Lecturas recomendadas\",\"resources-error\":\"Algo salió mal\",\"resources-download-all\":\"Descargar todo\",\"error-not-found-logged\":\"No encontramos lo que estabas buscando, revisa la url o ve a platzi.com para continuar tu búsqueda\",\"error-not-found-not-logged\":\"No encontramos lo que estabas buscando, inicia sesión y ve a platzi.com para continuar tu búsqueda\",\"error-404-title\":\"Error 404\",\"error-permissions-title\":\"Error en permisos\",\"error-permissions-message\":\"No tienes permisos para acceder a este material\",\"error-loading-title\":\"Error al cargar material\",\"error-loading-message\":\"Ocurrió un error al cargar el material\",\"material-challenge-footer-skip\":\"Saltar\",\"material-challenge-footer-repeat\":\"Repetir capítulo\",\"material-challenge-footer-continue\":\"Continuar\",\"material-challenge-footer-retry\":\"Reintentar\",\"material-challenge-footer-test\":\"Comprobar\",\"material-challenge-card-baskets-title\":\"Tarjetas sin asignar\",\"material-challenge-card-baskets-placeholder\":\"¡Asignaste todas las tarjetas!\",\"material-challenge-droppable-basket-placeholder\":\"Esta categoría está vacía\",\"material-challenge-feedback-correct\":\"¡Correcto!\",\"material-challenge-feedback-incorrect\":\"¡Casi lo logras!\",\"material-challenge-feedback-repeat\":\"Repetir capítulo\",\"material-challenge-feedback-continue\":\"Continuar\",\"material-challenge-feedback-retry\":\"Reintentar\",\"micro-ui-comments-see-more\":\"Ver más\",\"micro-ui-comments-replies\":\"respuestas\",\"micro-ui-comments-one-reply\":\"respuesta\",\"micro-ui-comments-no-replies\":\"No hay respuestas\",\"micro-ui-comments-see-more-replies\":\"Ver más respuestas\",\"micro-ui-comments-load-more-replies\":\"Cargar más respuestas\",\"micro-ui-comments-close-editor\":\"Cerrar editor\",\"micro-ui-comments-write-comment\":\"Escribe tu comentario o pregunta\",\"micro-ui-comments-reply-comment\":\"Responder comentario\",\"micro-ui-comments-create-contribution\":\"Crear aporte\",\"micro-ui-comments-write-reply\":\"Escribe tu respuesta\",\"micro-ui-comments-write-contribution\":\"Escribe tu aporte o pregunta\",\"micro-ui-comments-reply\":\"Responder\",\"micro-ui-comments-report-comment\":\"Reportar comentario\",\"micro-ui-comments-report-button-title\":\"Reportar comentario\",\"micro-ui-comments-report-button-subtitle\":\"Cuéntanos la raz"])</script><script>self.__next_f.push([1,"ón por la que reportas este comentario.\",\"micro-ui-comments-report-placeholder\":\"Motivo del reporte\",\"micro-ui-comments-cancel\":\"Cancelar\",\"micro-ui-comments-report\":\"Reportar\",\"micro-ui-comments-report-success\":\"Reporte enviado\",\"micro-ui-comments-report-error\":\"Error al enviar reporte. Inténtalo de nuevo.\",\"micro-ui-comments-delete\":\"Eliminar\",\"micro-ui-comments-edit\":\"Editar\",\"micro-ui-comments-class\":\"Clase\",\"micro-ui-comments-of\":\"de\",\"micro-ui-comments-see\":\"Ver\",\"micro-ui-comments-see-one-more-reply\":\"Ver una respuesta más\",\"micro-ui-comments-see-more-replies-count\":\"Ver {{count}} respuestas más\",\"micro-ui-comments-replies-more\":\"respuestas más\",\"micro-ui-comments-see-less-replies\":\"Ver menos respuestas\",\"micro-ui-comments-edited\":\"editado\",\"micro-ui-comments-edited-on\":\"Editado el {{date}}\",\"comments-title\":\"Comentarios\",\"comments-load-more\":\"Ver más comentarios\",\"comments-empty-title\":\"No hay comentarios aún\",\"comments-empty-description\":\"Sé el primero en compartir tu opinión.\",\"comment-class\":\"Clase\",\"comment-of\":\"de\",\"no-comments\":\"No hay comentarios aún\",\"comment-reply-created\":\"Respuesta creada\",\"comment-created\":\"Comentario creado\",\"comment-error\":\"Error al crear el comentario\",\"comment-updated\":\"Comentario actualizado exitosamente\",\"comment-update-error\":\"Error al actualizar el comentario\"},\"shared\":{\"plans-frequency-annual\":\"anual\",\"plans-frequency-monthly\":\"mensual\",\"plans-tag-special-price\":\"Precio Especial\",\"plans-tag-save-months\":\"Ahorras {months} meses\",\"plans-tag-save\":\"Ahorras\",\"plans-installments-platzi\":\"Paga a {strongOpen}{fees} cuotas{strongClose} sin intereses {spanOpen}de {price}{spanClose}\",\"plans-installments-credit-card\":\"Paga hasta en 12 meses {strongOpen}sin intereses{strongClose} con tarjeta de crédito o PayPal.\",\"plans-billing-recurring\":\"cobro {frequency} recurrente\",\"plans-billing-subscription\":\"suscripción {frequency}\",\"plans-billing-recurring-price\":\"cobro {frequency} recurrente de {price}\",\"plans-billing-subscription-price\":\"suscripción {frequency} de {price}\",\"plans-students-single\":\"1 estudiante\",\"plans-students-multiple\":\"{count} estudiantes\",\"plans-cta-business\":\"Conoce los planes para empresas\",\"plans-card-add-year\":\"Agregar 1 año a mi plan\",\"plans-card-subscribe\":\"Suscríbete a Platzi\",\"plans-card-add-year-now\":\"Agregar 1 año ahora\",\"plans-card-continue\":\"Continuar\",\"plans-card-buy-now\":\"Comprar ahora\",\"plans-card-name-placeholder\":\"Nombre y Apellido\",\"plans-card-email-placeholder\":\"Correo electrónico\",\"plans-card-extend-until\":\"Tu plan se extenderá hasta el:\",\"plans-card-charge-card\":\"Se cobrará a la tarjeta:\",\"plans-card-change\":\"Cambiar\",\"plans-card-subscribe-to\":\"Suscríbete a {title}\",\"plans-card-installments\":\"Paga {installments} Cuotas sin intereses de {price}\",\"plans-card-year\":\"1 año\",\"plans-card-normal-price\":\"Precio normal\",\"plans-card-before\":\"Antes\",\"plans-card-save\":\"Ahorras\",\"plans-card-for\":\"Para\",\"plans-responsive-ends-in\":\"Termina en:\",\"plans-responsive-ends-in-text\":\"Aprovecha el precio especial\",\"plans-responsive-time-days\":\"días\",\"plans-responsive-time-hours\":\"hrs\",\"plans-responsive-time-minutes\":\"min\",\"plans-responsive-time-seconds\":\"seg\",\"plans-selector-students\":\"{count} estudiantes\",\"plans-table-benefits\":\"Beneficios\",\"plans-table-compare\":\"Comparar planes\",\"plans-table-basic\":\"Plan Basic\",\"plans-table-expert\":\"Plan Expert\",\"plans-table-expert-plus\":\"Expert+\",\"plans-b2b-title\":\"Planes para empresas\",\"plans-b2b-subtitle\":\"Potencia el crecimiento de tu equipo\",\"plans-b2b-contact\":\"Contáctanos\",\"plans-b2b-name\":\"Nombre completo\",\"plans-b2b-company\":\"Empresa\",\"plans-b2b-email\":\"Correo electrónico\",\"plans-b2b-phone\":\"Teléfono\",\"plans-b2b-country\":\"País\",\"plans-b2b-team-size\":\"Tamaño del equipo\",\"plans-b2b-message\":\"Mensaje\",\"plans-b2b-required\":\"Campo requerido\",\"plans-b2b-invalid-email\":\"Correo electrónico inválido\",\"plans-b2b-invalid-phone\":\"Teléfono inválido\",\"plans-b2b-send\":\"Enviar\",\"plans-b2b-step-1\":\"Paso 1\",\"plans-b2b-step-2\":\"Paso 2\",\"plans-b2b-step-3\":\"Paso 3\",\"plans-b2b-step-1-title\":\"Contáctanos\",\"plans-b2b-step-2"])</script><script>self.__next_f.push([1,"-title\":\"Personaliza tu plan\",\"plans-b2b-step-3-title\":\"Comienza a aprender\",\"plans-b2b-benefits-subtitle-1\":\"Adquiere los\",\"plans-b2b-benefits-subtitle-2\":\"meses de acceso\",\"plans-b2b-benefits-subtitle-3\":\"que necesitas y\",\"plans-b2b-benefits-subtitle-4\":\"asígnalos\",\"plans-b2b-benefits-subtitle-5\":\"como prefieras.\",\"plans-b2b-benefits-learning-paths\":\"Rutas de aprendizaje personalizadas por empleado y por equipos\",\"plans-b2b-benefits-admin-panel\":\"Panel de administración para medir el progreso de tus empleados\",\"plans-b2b-benefits-certificates\":\"Certificados con el logo de tu empresa\",\"plans-b2b-benefits-access\":\"Acceso a todos los cursos, clases en vivo, eventos y actividades de la comunidad\",\"plans-b2b-step-company\":\"Tu empresa\",\"plans-b2b-step-goals\":\"Tus objetivos\",\"plans-b2b-step-price\":\"Precio\",\"plans-b2b-invoice-calculator-desc\":\"Esta propuesta estima el precio total de acceso a todo Platzi para tus {employees} empleados durante {months} meses. Los meses de acceso por empleado pueden ser modificados de acuerdo a tus necesidades.\",\"plans-b2b-invoice-employees\":\"Empleados\",\"plans-b2b-invoice-months\":\"Meses\",\"plans-b2b-invoice-months-per-employee\":\"Por empleado\",\"plans-b2b-invoice-access-months\":\"Meses de acceso\",\"plans-b2b-invoice-buy\":\"Comprar\",\"plans-b2b-invoice-contact-info-pretext\":\"Gracias por tu interés. Te contactaremos al correo\",\"plans-b2b-invoice-contact-info-email\":\"o al teléfono\",\"plans-b2b-invoice-contact-info-posttext\":\"para más información.\",\"plans-b2b-invoice-suggested-plan\":\"Plan de formación sugerido:\",\"plans-b2b-invoice-course-alt\":\"curso de {title}\",\"plans-b2b-first-company-name\":\"Nombre de tu empresa\",\"plans-b2b-first-name\":\"Tu nombre\",\"plans-b2b-first-email\":\"Tu email corporativo\",\"plans-b2b-first-email-error\":\"Ingresa un correo corporativo válido\",\"plans-b2b-first-position\":\"Nivel de tu cargo\",\"plans-b2b-first-position-clevel\":\"C-Level\",\"plans-b2b-first-position-vp\":\"Vicepresidente\",\"plans-b2b-first-position-director\":\"Director\",\"plans-b2b-first-position-manager\":\"Gerente\",\"plans-b2b-first-position-other\":\"Cargo no gerencial\",\"plans-b2b-first-phone\":\"Tu número de teléfono\",\"plans-b2b-first-phone-error\":\"Este campo debe tener al menos 7 dígitos\",\"plans-b2b-first-error\":\"Hubo un error, intenta de nuevo\",\"plans-b2b-first-loading\":\"Cargando...\",\"plans-b2b-first-continue\":\"Continuar\",\"plans-b2b-second-company\":\"Empresa:\",\"plans-b2b-second-employees\":\"Número de empleados en tu empresa\",\"plans-b2b-second-personal-plan-pretext\":\"Elige un plan de\",\"plans-b2b-second-personal-plan-text\":\"Personas\",\"plans-b2b-second-personal-plan-posttext\":\"para 1 empleado\",\"plans-b2b-second-learning-needs\":\"¿Qué necesita aprender tu empresa? (Opcional)\",\"plans-b2b-second-error\":\"Hubo un error, intenta de nuevo\",\"plans-b2b-second-loading\":\"Calculando...\",\"plans-b2b-second-get-price\":\"Obtener precio\",\"plans-b2b-input-required\":\"Este campo es obligatorio\",\"plans-banner-ends-in\":\"Termina en:\",\"plans-b2b-terms-agreement-prefix\":\"Al enviar el formulario, aceptas los\",\"plans-b2b-terms-agreement-terms\":\"Términos de servicio\",\"plans-b2b-terms-agreement-and\":\"y\",\"plans-b2b-terms-agreement-privacy\":\"Políticas de privacidad\",\"plans-b2b-terms-agreement-suffix\":\"de Platzi.\",\"plans-toggle-personal\":\"Personas\",\"plans-toggle-business\":\"Empresas\",\"plans-month\":\"mes\",\"plans-year\":\"año\",\"plans-b2b-leadform-specialist-contact\":\"Uno de nuestros especialistas se pondrá en contacto contigo cuanto antes\",\"plans-b2b-leadform-lets-begin\":\"¡Comencemos!\",\"plans-b2b-leadform-company-name\":\"Nombre de tu empresa\",\"plans-b2b-leadform-your-name\":\"Tu nombre\",\"plans-b2b-leadform-business-email\":\"Correo empresarial\",\"plans-b2b-leadform-months-per-employee\":\"Total empleados en tu empresa\",\"plans-b2b-leadform-company-number-access\":\"Total accesos a comprar\",\"plans-b2b-leadform-country-code\":\"Código de tu país\",\"plans-b2b-leadform-phone-number\":\"Tu nro. de teléfono\",\"plans-b2b-leadform-required-field\":\"Campo requerido\",\"plans-b2b-leadform-invalid-email\":\"Formato de correo electrónico inválido\",\"plans-b2b-leadform-business-email-require"])</script><script>self.__next_f.push([1,"d\":\"Debes usar un correo corporativo\",\"plans-b2b-leadform-must-be-number\":\"Debe ser un número\",\"plans-b2b-leadform-valid-number\":\"Debe ser un número válido\",\"plans-b2b-leadform-send\":\"Enviar\",\"plans-b2b-leadform-continue\":\"Continuar\",\"plans-b2b-leadform-terms-prefix\":\"Al enviar el formulario, aceptas los\",\"plans-b2b-leadform-terms-service\":\"Términos de servicio\",\"plans-b2b-leadform-terms-and\":\"y\",\"plans-b2b-leadform-terms-privacy\":\"Políticas de privacidad\",\"plans-b2b-leadform-terms-of-platzi\":\"de Platzi.\",\"plans-b2b-successview-ready\":\"¡Todo listo! Ya recibimos tu información\",\"plans-b2b-successview-description\":\"Estamos revisando todo para prepararte la mejor oferta. ¡Te escribiremos muy pronto!\",\"plans-b2b-successview-discover-content\":\"Descubre nuestro contenido\",\"plans-b2b-successview-questions\":\"¿Tienes dudas? Escríbenos a\",\"plans-b2b-modalpage-close\":\"Cerrar modal\",\"plans-b2b-plan-most-popular\":\"MÁS POPULAR\",\"plans-b2b-plan-up-to\":\"Hasta\",\"plans-b2b-plan-monthly-per-student\":\"mensual por estudiante\",\"plans-b2b-plan-lets-talk\":\"¡Hablemos!\",\"plans-b2b-plan-acquire-plan\":\"Adquirir plan\",\"plans-b2b-plan-benefits\":\"Beneficios\",\"plans-b2b-plan-custom-price-text\":\"¡Más licencias, menor precio!\",\"plans-b2b-plan-description-starter\":\"Ideal para empresas que están iniciando con capacitación online efectiva.\",\"plans-b2b-plan-description-business\":\"Ideal para empresas con necesidades más avanzadas.\",\"plans-b2b-plan-description-enterprise\":\"Ideal para empresas que necesitan una implementación personalizada.\",\"plans-b2b-leadform-months-tooltip\":\"Estos meses los puedes asignar como desees entre tus empleados. Solo asegúrate de asignar mínimo 1 mes por persona.\",\"plan-responsive-expert-message\":\"Un año de acceso con cursos ilimitados\",\"plans-b2b-leadform-amount-limit-error\":\"Debido a la cantidad de empleados que deseas capacitar, nos pondremos en contacto para ofrecerte una propuesta personalizada.\",\"plans-b2b-leadform-generic-error\":\"Ha ocurrido un error. Por favor, intenta nuevamente.\",\"plans-iva-text\":\"Servicio SaaS excluido de IVA (Art. 476 E.T.)\",\"micro-ui-header-plans\":\"Planes\",\"micro-ui-header-close-session\":\"Cerrar sesión\",\"micro-ui-header-hello\":\"Hola\",\"micro-ui-header-subscription\":\"Suscripción\",\"micro-ui-header-days-left-singular\":\"Tienes 1 día de tu plan\",\"micro-ui-header-days-left-plural\":\"Tienes {days} días de tu plan\",\"micro-ui-header-view-profile\":\"Ver mi perfil\",\"micro-ui-header-with-access\":\"Con acceso\",\"micro-ui-header-without-access\":\"Sin acceso\",\"micro-ui-header-day\":\"día\",\"micro-ui-header-days\":\"días\",\"micro-ui-header-request-extension\":\"Solicita una extensión para aumentar tus días de acceso y cumplir tus metas de aprendizaje.\",\"micro-ui-header-need-more-time\":\"Si necesitas más tiempo solicita una extensión.\",\"micro-ui-header-subscription-expired\":\"El tiempo de tu suscripción a Platzi for Business se agotó. No te preocupes, no perderás tu progreso ni certificados.\",\"micro-ui-header-subscription-error\":\"Si crees que esto es un error comunicate con el administrador de tu plan Platzi for Business.\",\"micro-ui-header-access-change-note\":\"Si necesitas cambiar tu estado de acceso como estudiante, puedes hacerlo desde el Espacio de Administración.\",\"micro-ui-header-days-left\":\"Te quedan {days} {daysText} de acceso\",\"micro-ui-header-days-left-prefix\":\"Te quedan\",\"micro-ui-header-days-left-suffix\":\"de acceso\",\"micro-ui-header-request-extension-button\":\"Solicitar extensión\",\"micro-ui-header-waiting-response\":\"Esperando respuesta\",\"micro-ui-header-admin-space\":\"Espacio de administración\",\"micro-ui-header-contact-us\":\"Contáctanos\",\"micro-ui-header-what-learn\":\"¿Qué quieres aprender?\",\"micro-ui-header-see-all-results\":\"Ver todos los resultados\",\"micro-ui-header-platzi\":\"Platzi\",\"micro-ui-header-live\":\"Live\",\"search-teacher-prefix\":\"Profe\",\"search-teachers-prefix\":\"Profes\",\"search-level-prefix\":\"Nivel\",\"search-duration-hour\":\"hora\",\"search-duration-hours\":\"horas\",\"search-duration-minute\":\"minuto\",\"search-duration-minutes\":\"minutos\",\"search-duration-content\":\"de contenido\",\"search-cou"])</script><script>self.__next_f.push([1,"rse\":\"curso\",\"search-courses\":\"cursos\",\"search-course-tag\":\"Curso\",\"search-learning-path-tag\":\"Ruta\",\"search-material-tag\":\"Clase\",\"search-custom-object-test-tag\":\"Test\",\"search-blog-tag\":\"Blog\",\"search-blog-date-format\":\"DD [de] MMMM [de] YYYY\",\"search-locale\":\"es\",\"micro-ui-public-header-courses\":\"Cursos\",\"micro-ui-public-header-companies\":\"Empresas\",\"micro-ui-public-header-blogs\":\"Blog\",\"micro-ui-public-header-live\":\"Live\",\"micro-ui-public-header-conf\":\"Conf\",\"micro-ui-public-header-prices\":\"Precios\",\"micro-ui-header-menu-free-month\":\"Obtén 1 mes gratis\",\"micro-ui-header-menu-subscription\":\"Mi suscripción\",\"micro-ui-header-menu-search\":\"Buscar\",\"micro-ui-header-login-cta\":\"Acceder\",\"modals_wrapper-completed_title\":\"¡Perfil actualizado con éxito!\",\"modals_wrapper-completed_description\":\"¡Gracias por actualizar tu perfil! Ahora tendrás una experiencia mas personalizada para continuar tu aprendizaje\",\"modals_wrapper-whatsapp_title\":\"Sigue disfrutando de \u003cb\u003ePlatzi\u003c/b\u003e\",\"modals_wrapper-whatsapp_description\":\"Agrega tu foto, nombre y número de teléfono para seguir viendo sin costo las primeras clases\",\"modals_wrapper-linkedin_title\":\"Mejora tu perfil en \u003cb\u003ePlatzi\u003c/b\u003e\",\"modals_wrapper-linkedin_description\":\"Agrega tu foto, nombre, trabajo y LinkedIn para mantener tu perfil profesional actualizado con tus certificados y tener una experiencia más personalizada\",\"modals_wrapper-close_button\":\"Omitir por ahora\",\"modals_wrapper-continue_button\":\"Completar perfil\",\"modals_wrapper-form_first_name\":\"Nombre\",\"modals_wrapper-form_last_name\":\"Apellido\",\"modals_wrapper-form_linkedin_profile\":\"Enlace de tu LinkedIn\",\"modals_wrapper-form_workplace\":\"Empresa en la que trabajas (opcional)\",\"modals_wrapper-form_phone\":\"Tu número de teléfono\",\"modals_wrapper-form_upload_image\":\"Subir imagen\",\"modals_wrapper-form_image_requirements\":\"Carga una imagen JPG o PNG.\",\"header-menu-free-month\":\"Obtén 1 mes gratis\",\"header-menu-subscription\":\"Mi suscripción\",\"notifications-waiting\":\"Esperando respuesta\",\"main-menu-search\":\"Buscar\",\"main-menu-home\":\"Inicio\",\"main-menu-comments\":\"Comentarios\",\"main-menu-my-paths\":\"Mis Rutas\",\"main-menu-my-progress\":\"Mi progreso\",\"main-menu-chat\":\"Chat ADA\",\"main-menu-notifications\":\"Notificaciones\",\"main-menu-teachers\":\"Profesores\",\"main-menu-dashboard\":\"Dashboard\",\"main-menu-business\":\"Empresas\",\"main-menu-admin\":\"Administración\",\"main-menu-platzi-home\":\"Platzi Home\",\"main-menu-certificates\":\"Mis certificados\",\"delete-path-title\":\"¿Eliminar Ruta?\",\"delete-path-custom-description\":\"Al eliminar \\\"{title}\\\" no perderás el progreso de los cursos ni los certificados obtenidos.\",\"delete-path-description\":\"Como \\\"{title}\\\" es una ruta personalizada, al eliminarla ya no podrás recuperarla. No perderás el progreso de los cursos y los certificados obtenidos.\",\"delete-button-cancel\":\"Cancelar\",\"delete-button-delete\":\"Eliminar\",\"delete-course-title\":\"¿Quieres eliminar \\\"{title}\\\"?\",\"delete-course-description\":\"Como esta es una ruta personalizada, al hacerlo, ya no podrás recuperarla. Mantendrás el progreso de los cursos y los certificados obtenidos.\",\"delete-course-success\":\"Curso eliminado\",\"delete-course-error\":\"Hubo un error, intentalo de nuevo\",\"route-card-tag\":\"Ruta\",\"route-card-start\":\"Iniciar Ruta\",\"route-card-more-courses\":\"+{count} cursos más\",\"route-card-added\":\"Ruta agregada\",\"route-card-add\":\"Agregar ruta\",\"route-card-added-mobile\":\"Agregada\",\"route-card-add-mobile\":\"Agregar\",\"route-card-go-to-path\":\"Ir a la ruta\",\"route-card-add-error\":\"No pudimos agregar la ruta. Inténtalo de nuevo\",\"route-card-deleted\":\"Ruta eliminada\",\"route-card-delete-error\":\"No pudimos eliminar la ruta. Inténtalo de nuevo\",\"add-learning-path-button-added\":\"Ruta agregada\",\"add-learning-path-button-add\":\"Agregar ruta\",\"add-learning-path-button-added-mobile\":\"Agregada\",\"add-learning-path-button-add-mobile\":\"Agregar\",\"add-learning-path-button-go-to-path\":\"Ir a la ruta\",\"completed\":\"Completado\",\"progress-aria-label\":\"Progreso\",\"breadcrumb-aria-label\":\"Migas de pan\",\"close-modal\":\"Cerrar\",\"like-remove\":\"Remover Like\",\"like-add\""])</script><script>self.__next_f.push([1,":\"Dar Like\",\"comment-editor-reply\":\"Responder comentario\",\"comment-editor-create\":\"Crear aporte\",\"comment-editor-placeholder-reply\":\"Escribe tu respuesta\",\"comment-editor-placeholder-create\":\"Escribe tu aporte o pregunta\",\"comment-editor-default-placeholder\":\"Escribe aquí tu comentario\",\"close-preview\":\"Cerrar preview\",\"open-preview\":\"Abrir preview\",\"zoom-in\":\"Acercar\",\"zoom-out\":\"Alejar\",\"close-editor\":\"Cerrar editor\",\"default-path-name\":\"Mi ruta personalizada\",\"popover-streak-tag\":\"Nuevo\",\"popover-streak-content\":\"Haz seguimiento de tu progreso con la racha semanal\",\"popover-streak-cta\":\"Ver cómo funciona\",\"banner-business-redirect-copy\":\"Hay empresas que le pagan Platzi a sus empleados 👀\",\"banner-business-redirect-button\":\"Descubre más\",\"confirm-email-title\":\"Confirmar tu correo\",\"confirm-email-text\":\"Enviamos un enlace de confirmación a tu correo electrónico {email}\",\"comment-reply-button\":\"Responder\",\"comment-see-more\":\"Ver más\",\"comment-discussion-tag\":\"Pregunta\",\"comment-team-platzi\":\"Team Platzi\",\"comment-ai-generated\":\"Generado con IA\",\"comment-profile-link\":\"Ver perfil de {name}\",\"comment-delete-tooltip\":\"Borrar comentario\",\"comment-see-more-replies\":\"Ver más respuestas\",\"translate-button\":\"Traducir\",\"create-learning-path-modal-cancel\":\"Cancelar\",\"create-learning-path-modal-create\":\"Crear\",\"create-learning-path-modal-name-label\":\"Nombre\",\"main-menu-role-teachers-title\":\"Profesores\",\"main-menu-role-business-title\":\"Empresas\",\"countdown-days\":\"días\",\"countdown-hours\":\"h\",\"countdown-minutes\":\"min\",\"countdown-seconds\":\"seg\",\"countdown-short-format-days\":\"d\",\"countdown-short-format-hours\":\"h\",\"countdown-short-format-minutes\":\"m\",\"countdown-short-format-seconds\":\"s\",\"notification-panel-error-title\":\"Hubo un problema al cargar tus notificaciones\",\"notification-panel-error-description\":\"Por favor, intenta de nuevo.\",\"notification-panel-error-retry\":\"Reintentar\",\"notification-panel-filter-unread\":\"Sin leer\",\"notification-panel-filter-comments\":\"Comentarios\",\"notification-panel-filter-releases\":\"Lanzamientos\",\"notification-panel-heading-close\":\"Cerrar\",\"notification-panel-heading-title\":\"Notificaciones\",\"notification-panel-heading-mark-all-read\":\"Marcar todo como leído\",\"paywalls-modal-title-default\":\"Suscríbete y desbloquea tu potencial\",\"paywalls-modal-title-mobile\":\"Suscríbete a un plan\",\"paywalls-modal-title-certificates\":\"Adquiere una suscripción para descargar tus certificados\",\"paywalls-modal-disclaimer\":\"Nunca subiremos el precio mientras mantengas tu suscripción activa.\",\"paywalls-modal-b2b-title\":\"Calcula el precio para tu empresa\",\"report-comment-button-tooltip\":\"Reportar comentario\",\"report-comment-modal-title\":\"Reportar comentario\",\"report-comment-modal-subtitle\":\"Cuéntanos la razón por la que reportas este comentario.\",\"report-comment-modal-placeholder\":\"Motivo del reporte\",\"report-comment-modal-cancel\":\"Cancelar\",\"report-comment-modal-submit\":\"Reportar\",\"report-comment-success\":\"Reporte enviado\",\"edit-path-title\":\"Editar\",\"edit-path-name-label\":\"Nombre\",\"edit-path-cancel\":\"Cancelar\",\"edit-path-save\":\"Guardar\",\"edit-path-saved\":\"Guardado\",\"edit-path-error\":\"No pudimos editar la ruta. Inténtalo de nuevo\",\"comment-editor-write\":\"Escribe tu comentario o pregunta\",\"comment-editor-toast-success\":\"Comentario agregado\",\"comment-editor-toast-error\":\"Hubo un error, inténtalo de nuevo\",\"comment-editor-toast-update-success\":\"Comentario actualizado exitosamente\",\"comment-editor-toast-update-error\":\"Hubo un error al actualizar el comentario\",\"banner-tell-us-your-opinion\":\"Cuéntanos tu opinión\",\"terms-banner-title\":\"Queremos contarte que en Platzi hemos actualizado nuestros\",\"terms-banner-terms-of-use\":\"Términos de Uso\",\"terms-banner-subtitle\":\"Esta actualización no afecta tu experiencia como estudiante.\",\"terms-banner-cta-button\":\"Revisar Términos de uso\",\"atomic-ui-common-loading\":\"Cargando\",\"atomic-ui-common-confirm\":\"Confirmar\",\"atomic-ui-common-cancel\":\"Cancelar\",\"atomic-ui-common-save\":\"Guardar\",\"atomic-ui-common-close\":\"Cerrar\",\"atomic-ui-common-back\":\"Atrás\",\"atomic-ui-common-next\":\"Sigu"])</script><script>self.__next_f.push([1,"iente\",\"atomic-ui-common-submit\":\"Enviar\",\"atomic-ui-common-search\":\"Buscar\",\"atomic-ui-common-filter\":\"Filtrar\",\"atomic-ui-common-sort\":\"Ordenar\",\"atomic-ui-common-view-more\":\"Ver más\",\"atomic-ui-common-show-less\":\"Ver menos\",\"atomic-ui-common-not-found\":\"No encontrado\",\"atomic-ui-common-retry\":\"Reintentar\",\"atomic-ui-common-reload\":\"Recargar\",\"atomic-ui-common-success\":\"Éxito\",\"atomic-ui-common-error\":\"Error\",\"atomic-ui-common-warning\":\"Advertencia\",\"atomic-ui-common-info\":\"Información\",\"atomic-ui-button-submit\":\"Enviar\",\"atomic-ui-button-cancel\":\"Cancelar\",\"atomic-ui-button-confirm\":\"Confirmar\",\"atomic-ui-button-save\":\"Guardar\",\"atomic-ui-button-reload\":\"Recargar\",\"atomic-ui-main-menu-home-link\":\"Ir a la página principal de Platzi\",\"atomic-ui-main-menu-confirm-email-title\":\"Confirmar tu correo\",\"atomic-ui-main-menu-confirm-email-text\":\"Enviamos un enlace de confirmación a tu correo electrónico {email}\",\"atomic-ui-main-menu-business-banner-text\":\"Hay empresas que le pagan Platzi a sus empleados 👀\",\"atomic-ui-main-menu-business-banner-cta\":\"Descubre más\",\"atomic-ui-error-box-title\":\"Parece que ocurrió un error\",\"atomic-ui-error-box-description\":\"Por favor, inténtalo de nuevo.\",\"atomic-ui-error-box-retry\":\"Recargar\",\"atomic-ui-content-rater-question\":\"¿Fue útil?\",\"atomic-ui-content-rater-like\":\"Sí, fue útil\",\"atomic-ui-content-rater-dislike\":\"No, no fue útil\",\"atomic-ui-form-required\":\"Campo requerido\",\"atomic-ui-form-invalid-email\":\"Correo electrónico inválido\",\"atomic-ui-form-invalid-password\":\"Contraseña inválida\",\"atomic-ui-form-password-mismatch\":\"Las contraseñas no coinciden\",\"atomic-ui-form-min-length\":\"Mínimo {count} caracteres requeridos\",\"atomic-ui-form-max-length\":\"Máximo {count} caracteres permitidos\",\"atomic-ui-avatar-alt\":\"Avatar de usuario\",\"atomic-ui-avatar-upload\":\"Subir imagen\",\"atomic-ui-avatar-remove\":\"Eliminar imagen\",\"atomic-ui-modal-close\":\"Cerrar modal\",\"atomic-ui-notification-new\":\"Nueva notificación\",\"atomic-ui-notification-read-all\":\"Marcar todas como leídas\",\"atomic-ui-notification-empty\":\"No hay notificaciones\",\"atomic-ui-notification-empty-description\":\"Prueba filtrando por otra categoría o quita los filtros para ver todo.\",\"atomic-ui-notification-mark-as-read\":\"Marcar como leído\",\"atomic-ui-notification-reaction-a\":\"a\",\"atomic-ui-notification-reaction-and\":\"y\",\"atomic-ui-notification-comment-replied\":\"{authorName} respondió a tu comentario {courseTitle}\",\"atomic-ui-notification-reaction-single\":\"A {authorName} le gustó tu comentario {courseTitle}.\",\"atomic-ui-notification-reaction-multiple\":\"{likesText} les gustó tu comentario {courseTitle}.\",\"atomic-ui-notification-reaction-one-more\":\"persona más\",\"atomic-ui-notification-reaction-multiple-more\":\"personas más\",\"atomic-ui-notification-new-course-badge\":\"Nuevo\",\"atomic-ui-notification-new-course-launched\":\"Hemos lanzado:\",\"atomic-ui-notification-in-the-course\":\"en el {courseTitle}\",\"atomic-ui-notification-error-title\":\"Hubo un problema al cargar tus notificaciones\",\"atomic-ui-notification-error-description\":\"Por favor, intenta de nuevo.\",\"atomic-ui-notification-error-retry\":\"Reintentar\",\"atomic-ui-tab-selection\":\"Seleccionar pestaña\",\"atomic-ui-input-placeholder\":\"Escribe aquí\",\"atomic-ui-input-search-placeholder\":\"Buscar...\",\"atomic-ui-input-clear\":\"Limpiar campo\",\"atomic-ui-select-placeholder\":\"Selecciona una opción\",\"atomic-ui-select-no-results\":\"No se encontraron resultados\",\"atomic-ui-select-clear\":\"Limpiar selección\",\"atomic-ui-checkbox-select-all\":\"Seleccionar todos\",\"atomic-ui-checkbox-unselect-all\":\"Deseleccionar todos\",\"atomic-ui-recommendator-box-default-label\":\"¿Qué cursos quieres que Platzi cree para ti?\",\"atomic-ui-recommendator-box-default-placeholder\":\"Escribe el curso que quieres\",\"atomic-ui-recommendator-box-error-empty\":\"Debes escribir un curso\",\"atomic-ui-recommendator-box-error-processing\":\"Hubo un error al procesar tu sugerencia. Por favor, intenta de nuevo.\",\"atomic-ui-recommendator-box-success-with-recommendations\":\"Gracias por tus recomendaciones, las usaremos para priorizar los "])</script><script>self.__next_f.push([1,"nuevos cursos. Mientras tanto, te recomendamos iniciar con el siguiente curso:\",\"atomic-ui-recommendator-box-success-without-recommendations\":\"Gracias por tus recomendaciones, las usaremos para priorizar los nuevos cursos.\",\"atomic-ui-recommendator-box-teacher-prefix\":\"Por\",\"atomic-ui-school-card-alt\":\"Cursos de {title}\",\"atomic-ui-evaluation-header-logo-platzi\":\"Platzi\",\"atomic-ui-evaluation-header-logo-platzi-business\":\"Platzi Business\",\"atomic-ui-notification-panel-close\":\"Cerrar\",\"atomic-ui-notification-panel-notifications\":\"Notificaciones\",\"atomic-ui-notification-panel-mark-all-read\":\"Marcar todo como leído\",\"atomic-ui-notification-panel-settings\":\"Configuración\",\"atomic-ui-notification-filter-unread\":\"Sin leer\",\"atomic-ui-notification-filter-comments\":\"Comentarios\",\"atomic-ui-notification-filter-new-courses\":\"Lanzamientos\",\"atomic-ui-role-menu-teacher-title\":\"Profesores\",\"atomic-ui-role-menu-teacher-dashboard\":\"Dashboard\",\"atomic-ui-role-menu-b2b-title\":\"Empresas\",\"atomic-ui-role-menu-b2b-admin\":\"Administración\",\"atomic-ui-main-menu-search\":\"Buscar\",\"atomic-ui-main-menu-home\":\"Inicio\",\"atomic-ui-main-menu-comments\":\"Comentarios\",\"atomic-ui-main-menu-my-paths\":\"Mis Rutas\",\"atomic-ui-main-menu-my-progress\":\"Mi Progreso\",\"atomic-ui-main-menu-chat\":\"Chat ADA\",\"atomic-ui-main-menu-notifications\":\"Notificaciones\",\"atomic-ui-main-menu-my-certificates\":\"Mis Certificados\",\"atomic-ui-main-menu-tell-us-your-opinion\":\"Cuéntanos tu opinión\",\"atomic-ui-streak-risk\":\"¡Estás a punto de perder tu racha semanal! Mira una clase ahora para salvarla.\",\"atomic-ui-streak-running\":\"¡Avanza en tu racha! Mira una clase esta semana para avanzar.\",\"atomic-ui-streak-default\":\"Mira una clase para iniciar tu racha y medir tu progreso estudiando.\",\"atomic-ui-streak-completed\":\"¡Llevas {range} en racha! Regresa la próxima semana para mantenerla.\",\"atomic-ui-streak-week\":\"semana\",\"atomic-ui-streak-weeks\":\"semanas\",\"atomic-ui-streak-popover-title\":\"Racha semanal\",\"atomic-ui-streak-popover-week-label\":\"Semana:\",\"atomic-ui-banner-promo-subscribe\":\"Suscríbete\",\"atomic-ui-banner-promo-subscribe-msi\":\"MSI\",\"atomic-ui-banner-promo-subscribe-installments\":\"cuotas sin intereses\",\"atomic-ui-banner-promo-subscribe-pay-at\":\"Paga a\",\"atomic-ui-schools-title\":\"¿Por qué nos eligen?\",\"atomic-ui-schools-subtitle\":\"Formamos expertos en las áreas más demandadas\",\"atomic-ui-schools-description\":\"17 escuelas dónde encontrarás todo para potenciar y fortalecer las habilidades de tus empleados.\",\"atomic-ui-school-routes-count\":\"{count} rutas de aprendizaje\",\"atomic-ui-footer-schools-title\":\"Escuelas\",\"atomic-ui-footer-schools-web-development\":\"Desarrollo Web\",\"atomic-ui-footer-schools-ai-data-science\":\"Inteligencia Artificial y Data Science\",\"atomic-ui-footer-schools-product-ux-design\":\"Diseño de Producto y UX\",\"atomic-ui-footer-schools-graphic-design\":\"Diseño Gráfico y Arte Digital\",\"atomic-ui-footer-schools-blockchain-web3\":\"Blockchain y Web3\",\"atomic-ui-footer-schools-startups\":\"Startups\",\"atomic-ui-footer-schools-english-academy\":\"English Academy\",\"atomic-ui-footer-schools-cybersecurity\":\"Ciberseguridad\",\"atomic-ui-footer-schools-audiovisual-content\":\"Contenido Audiovisual\",\"atomic-ui-footer-schools-programming\":\"Programación\",\"atomic-ui-footer-schools-human-resources\":\"Recursos Humanos\",\"atomic-ui-footer-schools-cloud-devops\":\"Cloud Computing y DevOps\",\"atomic-ui-footer-schools-digital-marketing\":\"Marketing Digital\",\"atomic-ui-footer-schools-leadership-soft-skills\":\"Liderazgo y Habilidades Blandas\",\"atomic-ui-footer-schools-mobile-development\":\"Desarrollo Móvil\",\"atomic-ui-footer-schools-business\":\"Negocios\",\"atomic-ui-footer-schools-finance-investments\":\"Finanzas e Inversiones\",\"atomic-ui-footer-platzi-community-title\":\"Platzi y comunidad\",\"atomic-ui-footer-platzi-community-work-with-us\":\"Trabaja con nosotros\",\"atomic-ui-footer-platzi-community-podcast\":\"Podcast\",\"atomic-ui-footer-platzi-community-launches\":\"Lanzamientos\",\"atomic-ui-footer-platzi-community-executive-program\":\"Executive Program\",\"atomic-ui-footer-platzi-community-business\":\"Plat"])</script><script>self.__next_f.push([1,"zi Business\",\"atomic-ui-footer-platzi-community-live-classes\":\"Live Classes\",\"atomic-ui-footer-resources-title\":\"Recursos\",\"atomic-ui-footer-resources-brand-manual\":\"Manual de Marca\",\"atomic-ui-footer-support-title\":\"Soporte\",\"atomic-ui-footer-support-faq\":\"Preguntas Frecuentes\",\"atomic-ui-footer-support-contact\":\"Contáctanos\",\"atomic-ui-footer-legal-title\":\"Legal\",\"atomic-ui-footer-legal-terms\":\"Términos y Condiciones\",\"atomic-ui-footer-legal-privacy\":\"Privacidad\",\"atomic-ui-footer-award-time-magazine\":\"Top 40 Mejores EdTech del mundo · 2024\",\"atomic-ui-footer-award-y-combinator\":\"Primera Startup Latina admitida en YC · 2014\",\"atomic-ui-footer-award-ey\":\"Primera Startup EdTech · 2018\",\"atomic-ui-footer-award-medal-education\":\"CEO Ganador Medalla por la Educación T4 \u0026 HP · 2024\",\"atomic-ui-footer-award-forbes\":\"CEO Mejor Emprendedor del año · 2024\",\"atomic-ui-footer-links-section-aria-label\":\"Enlaces principales\",\"atomic-ui-footer-awards-section-title\":\"Reconocimientos\",\"atomic-ui-footer-awards-section-logo-alt\":\"Logo reconocimiento\",\"atomic-ui-footer-social-section-aria-label\":\"Redes sociales\",\"atomic-ui-footer-social-section-from-latam\":\"De LATAM con\",\"atomic-ui-footer-social-section-for-world\":\"para el mundo\",\"atomic-ui-course-level-basico-label\":\"Nivel Básico\",\"atomic-ui-course-level-intermedio-label\":\"Nivel Intermedio\",\"atomic-ui-course-level-avanzado-label\":\"Nivel Avanzado\",\"atomic-ui-share-buttons-facebook\":\"Compartir en Facebook\",\"atomic-ui-share-buttons-twitter\":\"Compartir en Twitter\",\"atomic-ui-share-buttons-linkedin\":\"Compartir en LinkedIn\",\"atomic-ui-share-buttons-whatsapp\":\"Compartir en WhatsApp\",\"atomic-ui-share-buttons-copy-link\":\"Copiar enlace\",\"atomic-ui-share-buttons-copy-link-toast\":\"Enlace copiado al portapapeles\"},\"shared-signup\":{\"micro-ui-signup-continue\":\"Continuar\",\"micro-ui-signup-or\":\"o\",\"micro-ui-signup-with-google-apple-facebook\":\"Con Google, Apple o Facebook\",\"micro-ui-signup-close-modal\":\"cerrar el modal\",\"micro-ui-signup-close-backdrop\":\"cerrar fondo\",\"micro-ui-signup-create-password\":\"Crea una contraseña\",\"micro-ui-signup-passwords-dont-match\":\"Las contraseñas no coinciden.\",\"micro-ui-signup-close\":\"Cerrar\",\"micro-ui-signup-something-went-wrong\":\"¡Algo salió mal!\",\"micro-ui-signup-continue-with\":\"Continuar con {provider}\",\"micro-ui-signup-hello\":\"Hola\",\"micro-ui-signup-you-login-with\":\"tu ingresas con\",\"micro-ui-signup-hello-again\":\"Hola de nuevo,\",\"micro-ui-signup-login-with-password-for\":\"Inicia sesión con la contraseña para\",\"micro-ui-signup-password\":\"Contraseña\",\"micro-ui-signup-wrong-password\":\"Contraseña incorrecta, intenta de nuevo\",\"micro-ui-signup-forgot-password\":\"¿Olvidaste tu contraseña?\",\"micro-ui-signup-auto-login-after-password\":\"Al finalizar este paso automáticamente ingresarás a Platzi.\",\"micro-ui-signup-confirm-password\":\"Confirmar contraseña\",\"micro-ui-signup-password-min-chars\":\"Debe tener al menos 10 caracteres.\",\"micro-ui-signup-terms-agreement\":\"Al crear una cuenta en Platzi, aceptas los\",\"micro-ui-signup-terms-of-service\":\"Términos de Servicio\",\"micro-ui-signup-and\":\"y\",\"micro-ui-signup-privacy-policy\":\"Políticas de privacidad.\",\"micro-ui-signup-login-or-create-account-with\":\"Ingresar o crear una cuenta con:\",\"micro-ui-signup-email\":\"Correo electrónico\",\"micro-ui-signup-check-your-email\":\"Revisa tu email. Asegúrate de que tenga este formato: ejemplo@email.com\",\"micro-ui-signup-one-step-away-redeem-gift\":\"Estás a un paso de canjear tu regalo\",\"micro-ui-signup-first-login-or-create-account\":\"Primero ingresa a Platzi o crea una cuenta\",\"micro-ui-signup-show\":\"Mostrar\",\"micro-ui-signup-hide\":\"Ocultar\",\"micro-ui-signup-email-required\":\"El correo electrónico es requerido.\",\"micro-ui-signup-email-blank\":\"El correo electrónico no puede estar en blanco.\",\"micro-ui-signup-email-invalid\":\"Introduzca una dirección de correo electrónico válida.\",\"micro-ui-signup-email-missmatch\":\"El email no coincide con el usuario autenticado.\",\"micro-ui-signup-used-token\":\"El token ya fue usado.\",\"micro-ui-signup-invalid-token\":\"No hay pre registro que coinci"])</script><script>self.__next_f.push([1,"da con el token.\",\"micro-ui-signup-invalid-invitation-token\":\"No hay invitación que coincida con el token.\",\"micro-ui-signup-email-missmatch-invitation\":\"La invitación va dirigida a otro email.\",\"micro-ui-signup-used-invitation-token\":\"La invitación ya fue usada.\",\"micro-ui-signup-invalid-code\":\"Encontramos un error en tu proceso de registro. Escríbenos a team@platzi.com para solucionarlo.\",\"micro-ui-signup-repeated-code\":\"El estudiante ya redimió un código del mismo tipo.\",\"micro-ui-signup-expired-code\":\"El codigo ha expirado.\",\"micro-ui-signup-used-code\":\"El codigo ya fue redimido.\",\"micro-ui-signup-too-many-attempts\":\"Demasiados intentos, intenta nuevamente en 24 horas.\",\"micro-ui-signup-invalid-credentials\":\"Correo electrónico o contraseña incorrectos. Vuelve a intentarlo.\",\"micro-ui-signup-password-repeated\":\"La contraseña es igual a una usada recientemente\",\"micro-ui-signup-user-not-found\":\"No encontramos un usuario con este correo electrónico.\",\"micro-ui-signup-token-required\":\"El token es requerido.\",\"micro-ui-signup-token-blank\":\"El token no puede estar en blanco.\",\"micro-ui-signup-password-required\":\"La contraseña es requerida.\",\"micro-ui-signup-password-blank\":\"La contraseña no puede estar en blanco.\",\"micro-ui-signup-reset-password-error\":\"No pudimos enviar el correo para restablecer tu contraseña, intenta de nuevo.\",\"micro-ui-signup-excellent\":\"¡Excelente!\",\"micro-ui-signup-excellent-name\":\"¡Excelente, {name}!\",\"micro-ui-signup-account-created-success\":\"Tu cuenta fue creada con éxito\",\"micro-ui-signup-thanks-community\":\"Gracias por ser parte de la comunidad de aprendizaje más grande en Latinoamérica.\",\"micro-ui-signup-start\":\"Comenzar\",\"micro-ui-signup-check-verification-mark\":\"Marca de verificación\",\"micro-ui-signup-celebratory-confetti\":\"Confeti celebratorio\",\"micro-ui-signup-partner-logo\":\"Logo del aliado\",\"micro-ui-signup-how-to-continue\":\"¿Cómo quieres continuar?\",\"micro-ui-signup-enter-password\":\"Ingresar una contraseña\",\"micro-ui-signup-or-also\":\"o también puedes\",\"micro-ui-signup-finally-whats-your-name\":\"Finalmente, ¿cómo te llamas?\",\"micro-ui-signup-name-certificate-description\":\"Escríbelo como aparecerá en los certificados de tus cursos aprobados.\",\"micro-ui-signup-full-name\":\"Nombre completo\",\"micro-ui-signup-include-last-name\":\"Incluye al menos un apellido\",\"micro-ui-signup-create-account\":\"Crear cuenta\",\"micro-ui-signup-congratulations-code-redeemed\":\"¡Enhorabuena, {name}!\\nHas canjeado tu código con éxito.\",\"micro-ui-signup-in-alliance-with\":\"En alianza con:\",\"micro-ui-signup-start-now\":\"Comienza ahora\",\"micro-ui-signup-email-envelope\":\"Sobre de correo\",\"micro-ui-signup-password-reset-email-sent\":\"Te hemos enviado un correo electrónico a {email} con el enlace para que puedas crear una nueva contraseña. Si no te ha llegado en unos minutos, revisa la carpeta de los correos no deseados.\",\"micro-ui-signup-back-to-start\":\"Volver al inicio\",\"micro-ui-signup-need-help-contact\":\"Si necesitas ayuda comunícate con nuestro equipo de soporte a \",\"micro-ui-signup-create-new-password\":\"Crear una nueva contraseña\",\"micro-ui-signup-password-updated\":\"Tu contraseña ha sido actualizada\",\"micro-ui-signup-password-update-description\":\"Recuerda que puedes actualizarla cuando lo necesites desde la configuración de tu perfil.\",\"micro-ui-signup-code-redeemed-success\":\"Has canjeado tu código con éxito.\",\"micro-ui-signup-with-email-password\":\"Con correo y contraseña\",\"micro-ui-signup-init-session\":\"Iniciar sesión\"}},\"now\":\"$undefined\",\"timeZone\":\"UTC\",\"children\":[false,[\"$\",\"$L1d\",null,{\"children\":[[\"$\",\"$L1e\",null,{}],[\"$\",\"$L1f\",null,{\"courseId\":12341,\"courseSlug\":\"html\",\"materialId\":\"84728\",\"materialSlug\":\"configuracion-de-vscode-y-estructura-htm\",\"materialInfo\":{\"freeAccess\":false,\"id\":84728,\"courseTitle\":\"Curso de HTML\",\"courseDescription\":\"Domina la estructura esencial de las páginas web con HTML. Aprende a escribir código limpio, jerarquizado y funcional. Comprende el rol de HTML en la web moderna y cómo su estructura impacta la accesibilidad, el SEO y la mantenibilidad"])</script><script>self.__next_f.push([1," del sitio.\",\"courseCategory\":\"Desarrollo e Ingeniería\",\"courseOpenGraphImage\":\"https://static.platzi.com/media/courses/Piezas-Curso-HTML_OG.jpg\",\"courseBadge\":\"https://static.platzi.com/media/achievements/piezas-curso-html-badge-80b94b6a-d39d-44d8-9218-f14ca1e4764e.png\",\"courseUrl\":\"/cursos/html/\",\"teacherName\":\"Diego De Granda\",\"teacherUrl\":\"/profesores/degranda/\",\"teacherAvatar\":\"https://static.platzi.com/media/avatars/avatars/degranda_d2a604a7-53bb-44b7-a517-002c63043563.jpg\",\"type\":\"video\",\"commentsNumber\":0,\"discussionsNumber\":0,\"name\":\"Configuración de VSCode y estructura HTML5 básica\",\"duration\":828,\"content\":\"\u003cp\u003eCrear tu primer sitio en HTML5 es más simple de lo que parece. Aquí verás cómo configurar \u003cem\u003eVSCode\u003c/em\u003e, usar el navegador con el inspector de elementos, generar la estructura base con un atajo y renderizar tu primer Hola mundo con buenas prácticas. Todo paso a paso y con conceptos clave explicados de forma clara.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo preparar las herramientas para HTML con VSCode y navegador?\u003c/h2\u003e\\n\u003cp\u003ePara escribir y visualizar código necesitas dos piezas: un editor de texto y un navegador. El editor recomendado es \u003cem\u003eVSCode\u003c/em\u003e. El navegador es esencial porque ahí verás cómo se renderiza el HTML y porque incluye el inspector de elementos.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eInstala \u003cem\u003eVSCode\u003c/em\u003e y ábrelo. Sigue el instalador según tu sistema operativo.\u003c/li\u003e\\n\u003cli\u003eUsa un navegador moderno con inspector de elementos. Te permitirá ver el HTML real y \u003cstrong\u003edebuggear\u003c/strong\u003e con feedback en tiempo real.\u003c/li\u003e\\n\u003cli\u003eCrea una carpeta raíz llamada \\\"Curso HTML\\\". Allí guardarás todo el contenido, clase por clase.\u003c/li\u003e\\n\u003cli\u003eDentro, crea \\\"uno_Fundamentos_HTML\\\" para el módulo y luego \\\"clase uno\\\" como subcarpeta.\u003c/li\u003e\\n\u003cli\u003eEvita acentos y espacios en nombres. Usa guion medio, guion bajo o \u003cem\u003ecamel case\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003eEn \\\"clase uno\\\", crea el archivo index.html.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Para qué sirve el inspector de elementos?\u003c/h3\u003e\\n\u003cp\u003eEl inspector muestra el árbol real de etiquetas: html, head y body. Permite identificar errores, probar cambios rápidos y entender qué se está renderizando. Es clave para \u003cstrong\u003edebuggear\u003c/strong\u003e y para recibir \u003cstrong\u003efeedback en tiempo real\u003c/strong\u003e antes de llevar los cambios al editor.\u003c/p\u003e\\n\u003ch2\u003e¿Qué incluye la estructura básica de HTML5 y por qué importa?\u003c/h2\u003e\\n\u003cp\u003eEn index.html puedes generar la base con un atajo: escribe ! y presiona tab. Esto crea el esqueleto HTML5 con etiquetas contenedoras que abren y cierran. Es importante comprender cada línea para que después te enfoques en el contenido dentro de body.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"cp\\\"\u003e\u0026lt;!DOCTYPE html\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehtml\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003elang\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;en\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003echarset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;UTF-8\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;viewport\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;width=device-width, initial-scale=1.0\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003edocument\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehtml\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/"])</script><script>self.__next_f.push([1,"pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eLas etiquetas contenedoras se abren y se cierran con slash. El contenido va dentro del par.\u003c/li\u003e\\n\u003cli\u003eTodo lo visible en el navegador está dentro de body. Lo de head son instrucciones para el navegador.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué hacen doctype html y el atributo lang?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u0026lt;!DOCTYPE html\u0026gt; le indica al navegador: esto es \u003cstrong\u003eHTML5\u003c/strong\u003e. Así usas el estándar vigente y sus etiquetas.\u003c/li\u003e\\n\u003cli\u003eEn \u003chtml lang=\\\"en\\\"\u003e defines el idioma del contenido. El navegador puede ofrecer traducción automática si tu idioma local difiere, por ejemplo con \u003cem\u003eGoogle Translator\u003c/em\u003e mediante un pequeño \u003cem\u003eprompt\u003c/em\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué hace meta charset y meta viewport?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cmeta charset=\\\"UTF-8\\\"\u003e habilita \u003cstrong\u003ecaracteres especiales y emojis\u003c/strong\u003e. Sin esto, acentos y símbolos pueden verse como códigos extraños.\u003c/li\u003e\\n\u003cli\u003e\u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"\u003e mejora la visualización en \u003cstrong\u003edispositivos móviles\u003c/strong\u003e. Usa el \u003cstrong\u003eancho real del dispositivo\u003c/strong\u003e y evita un \u003cstrong\u003ezoom inicial\u003c/strong\u003e que distorsione el diseño.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Dónde va el contenido visible: body?\u003c/h3\u003e\\n\u003cp\u003eTodo lo que agregues dentro de body se renderiza. El head aloja reglas y metadatos: estilos, configuración del documento y el \u003ctitle\u003e, que define el texto de la pestaña del navegador.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo crear y visualizar tu primer HTML: h1 y párrafo?\u003c/h2\u003e\\n\u003cp\u003eAbre index.html con \u003cem\u003eOpen with Live Server\u003c/em\u003e desde el clic derecho en el explorador de archivos. Verás en la URL que se sirve desde local, con la ruta de tus carpetas y el index.html. En el inspector podrás verificar doctype, html, head y body.\u003c/p\u003e\\n\u003cp\u003eAgrega contenido dentro de body:\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh1\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eHola mundo\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh1\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eEs mi primer sitio web.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eBuenas prácticas y recordatorios.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eGuarda y revisa en el navegador para ver cómo se renderiza el cambio.\u003c/li\u003e\\n\u003cli\u003eVerifica en el inspector que h1 y p aparezcan dentro de body.\u003c/li\u003e\\n\u003cli\u003eCambia el \u003ctitle\u003e para ajustar el texto de la pestaña.\u003c/li\u003e\\n\u003cli\u003eUsa el atajo ! + tab para generar la estructura base rápidamente.\u003c/li\u003e\\n\u003cli\u003eNombres de archivos y carpetas sin acentos ni espacios. Usa guion medio, guion bajo o \u003cem\u003ecamel case\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003eRecuerda que las etiquetas contenedoras se cierran con slash.\u003c/li\u003e\\n\u003cli\u003eMantén meta charset=\\\"UTF-8\\\" y meta viewport para compatibilidad y móviles.\u003c/li\u003e\\n\u003cli\u003eUsa el inspector para \u003cstrong\u003edebuggear\u003c/strong\u003e errores y aplicar correcciones informadas.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003e¿Tienes dudas o quieres compartir cómo nombraste tus carpetas y qué viste en el inspector? Deja un comentario y seguimos construyendo juntos.\u003c/p\u003e\",\"contentSeo\":\"Crear tu primer sitio en HTML5 es más simple de lo que parece. Aquí verás cómo configurar VSCode, usar el navegador con el inspector de elementos, generar la estructura base con un atajo y renderizar tu primer Hola mundo con buenas prácticas. Todo paso a paso y con conceptos clave explicados de forma clara.¿Cómo preparar las herramientas para HTML con VSCode y navegador?Para escribir y visualizar código necesitas dos piezas: un editor de texto y un navegador. El editor recomendado es VSCode. El navegador es esencial porque ahí verás cómo se renderiza el HTML y porque incluye el inspector de elementos.Instala VSCode y ábrelo. Sigue el instalador según tu sistema operativo.Usa un navegador moderno con inspector de elementos. Te permitirá ver el HTML re"])</script><script>self.__next_f.push([1,"al y debuggear con feedback en tiempo real.Crea una carpeta raíz llamada 'Curso HTML'. Allí guardarás todo el contenido, clase por clase.Dentro, crea 'uno_Fundamentos_HTML' para el módulo y luego 'clase uno' como subcarpeta.Evita acentos y espacios en nombres. Usa guion medio, guion bajo o camel case.En 'clase uno', crea el archivo index.html.¿Para qué sirve el inspector de elementos?El inspector muestra el árbol real de etiquetas: html, head y body. Permite identificar errores, probar cambios rápidos y entender qué se está renderizando. Es clave para debuggear y para recibir feedback en tiempo real antes de llevar los cambios al editor.¿Qué incluye la estructura básica de HTML5 y por qué importa?En index.html puedes generar la base con un atajo: escribe ! y presiona tab. Esto crea el esqueleto HTML5 con etiquetas contenedoras que abren y cierran. Es importante comprender cada línea para que después te enfoques en el contenido dentro de body.document Las etiquetas contenedoras se abren y se cierran con slash. El contenido va dentro del par.Todo lo visible en el navegador está dentro de body. Lo de head son instrucciones para el navegador.¿Qué hacen doctype html y el atributo lang? le indica al navegador: esto es HTML5. Así usas el estándar vigente y sus etiquetas.En defines el idioma del contenido. El navegador puede ofrecer traducción automática si tu idioma local difiere, por ejemplo con Google Translator mediante un pequeño prompt.¿Qué hace meta charset y meta viewport? habilita caracteres especiales y emojis. Sin esto, acentos y símbolos pueden verse como códigos extraños. mejora la visualización en dispositivos móviles. Usa el ancho real del dispositivo y evita un zoom inicial que distorsione el diseño.¿Dónde va el contenido visible: body?Todo lo que agregues dentro de body se renderiza. El head aloja reglas y metadatos: estilos, configuración del documento y el , que define el texto de la pestaña del navegador.¿Cómo crear y visualizar tu primer HTML: h1 y párrafo?Abre index.html con Open with Live Server desde el clic derecho en el explorador de archivos. Verás en la URL que se sirve desde local, con la ruta de tus carpetas y el index.html. En el inspector podrás verificar doctype, html, head y body.Agrega contenido dentro de body: Hola mundoEs mi primer sitio web.Buenas prácticas y recordatorios.Guarda y revisa en el navegador para ver cómo se renderiza el cambio.Verifica en el inspector que h1 y p aparezcan dentro de body.Cambia el para ajustar el texto de la pestaña.Usa el atajo ! + tab para generar la estructura base rápidamente.Nombres de archivos y carpetas sin acentos ni espacios. Usa guion medio, guion bajo o camel case.Recuerda que las etiquetas contenedoras se cierran con slash.Mantén meta charset='UTF-8' y meta viewport para compatibilidad y móviles.Usa el inspector para debuggear errores y aplicar correcciones informadas.¿Tienes dudas o quieres compartir cómo nombraste tus carpetas y qué viste en el inspector? Deja un comentario y seguimos construyendo juntos.\",\"materialParams\":{\"totalMaterial\":17,\"actualMaterial\":3,\"nextMaterialUrl\":\"/cursos/html/etiquetas-de-texto-y-jerarquia-en-html/\",\"nextMaterialName\":\"Etiquetas de texto y jerarquía en HTML\",\"previousMaterialUrl\":\"/cursos/html/como-funciona-la-web-desde-url-hasta-pag/\",\"previousMaterialName\":\"Cómo funciona la web desde URL hasta página renderizada\",\"isFirst\":false,\"isLast\":false,\"nextIsQuiz\":false,\"prevIsQuiz\":false,\"isNextMaterialPaid\":true},\"video\":{\"iframes\":[],\"servers\":{\"serverC\":{\"id\":\"serverC\",\"hls\":\"https://api.platzi.com/mdstrm/v1/video/68dc1cdae738b5b94215cc55.m3u8\"},\"serverM\":{\"id\":\"serverM\",\"hls\":\"https://api.platzi.com/mdstrm/v1/video/68dc1cdae738b5b94215cc55.m3u8?fallback=origin\"}},\"player\":{\"currentTime\":0,\"autoplay\":true,\"defaultServer\":\"serverC\"},\"movin\":{\"subtitles\":[],\"admin-url\":null}},\"seoTitle\":\"Fundamentos y estructura básica de HTML - Platzi\",\"seoDescription\":null,\"urlCanonical\":\"https://platzi.com/cursos/html/configuracion-de-vscode-y-estructura-htm/\",\"indexedCla"])</script><script>self.__next_f.push([1,"ss\":true,\"thumbnail\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1cdae738b5b94215cc55_68dc1cdae738b5b94215cc69_83s.jpg\",\"datePublished\":\"2025-09-30T19:00:00+00:00\",\"dateModified\":\"2025-09-30T19:58:02.889052+00:00\",\"isoDuration\":\"P0DT00H13M48S\",\"iframeSrc\":null,\"markdownContent\":\"Crear tu primer sitio en HTML5 es más simple de lo que parece. Aquí verás cómo configurar *VSCode*, usar el navegador con el inspector de elementos, generar la estructura base con un atajo y renderizar tu primer Hola mundo con buenas prácticas. Todo paso a paso y con conceptos clave explicados de forma clara.\\n\\n## ¿Cómo preparar las herramientas para HTML con VSCode y navegador?\\nPara escribir y visualizar código necesitas dos piezas: un editor de texto y un navegador. El editor recomendado es *VSCode*. El navegador es esencial porque ahí verás cómo se renderiza el HTML y porque incluye el inspector de elementos.\\n\\n- Instala *VSCode* y ábrelo. Sigue el instalador según tu sistema operativo.\\n- Usa un navegador moderno con inspector de elementos. Te permitirá ver el HTML real y **debuggear** con feedback en tiempo real.\\n- Crea una carpeta raíz llamada \\\"Curso HTML\\\". Allí guardarás todo el contenido, clase por clase.\\n- Dentro, crea \\\"uno_Fundamentos_HTML\\\" para el módulo y luego \\\"clase uno\\\" como subcarpeta.\\n- Evita acentos y espacios en nombres. Usa guion medio, guion bajo o *camel case*.\\n- En \\\"clase uno\\\", crea el archivo index.html.\\n\\n### ¿Para qué sirve el inspector de elementos?\\nEl inspector muestra el árbol real de etiquetas: html, head y body. Permite identificar errores, probar cambios rápidos y entender qué se está renderizando. Es clave para **debuggear** y para recibir **feedback en tiempo real** antes de llevar los cambios al editor.\\n\\n## ¿Qué incluye la estructura básica de HTML5 y por qué importa?\\nEn index.html puedes generar la base con un atajo: escribe ! y presiona tab. Esto crea el esqueleto HTML5 con etiquetas contenedoras que abren y cierran. Es importante comprender cada línea para que después te enfoques en el contenido dentro de body.\\n\\n```html\\n\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"en\\\"\u003e\\n \u003chead\u003e\\n \u003cmeta charset=\\\"UTF-8\\\" /\u003e\\n \u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\" /\u003e\\n \u003ctitle\u003edocument\u003c/title\u003e\\n \u003c/head\u003e\\n \u003cbody\u003e\\n \u003c/body\u003e\\n\u003c/html\u003e\\n```\\n\\n- Las etiquetas contenedoras se abren y se cierran con slash. El contenido va dentro del par.\\n- Todo lo visible en el navegador está dentro de body. Lo de head son instrucciones para el navegador.\\n\\n### ¿Qué hacen doctype html y el atributo lang?\\n- \u003c!DOCTYPE html\u003e le indica al navegador: esto es **HTML5**. Así usas el estándar vigente y sus etiquetas.\\n- En \u003chtml lang=\\\"en\\\"\u003e defines el idioma del contenido. El navegador puede ofrecer traducción automática si tu idioma local difiere, por ejemplo con *Google Translator* mediante un pequeño *prompt*.\\n\\n### ¿Qué hace meta charset y meta viewport?\\n- \u003cmeta charset=\\\"UTF-8\\\"\u003e habilita **caracteres especiales y emojis**. Sin esto, acentos y símbolos pueden verse como códigos extraños.\\n- \u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"\u003e mejora la visualización en **dispositivos móviles**. Usa el **ancho real del dispositivo** y evita un **zoom inicial** que distorsione el diseño.\\n\\n### ¿Dónde va el contenido visible: body?\\nTodo lo que agregues dentro de body se renderiza. El head aloja reglas y metadatos: estilos, configuración del documento y el \u003ctitle\u003e, que define el texto de la pestaña del navegador.\\n\\n## ¿Cómo crear y visualizar tu primer HTML: h1 y párrafo?\\nAbre index.html con *Open with Live Server* desde el clic derecho en el explorador de archivos. Verás en la URL que se sirve desde local, con la ruta de tus carpetas y el index.html. En el inspector podrás verificar doctype, html, head y body.\\n\\nAgrega contenido dentro de body:\\n\\n```html\\n\u003cbody\u003e\\n \u003ch1\u003eHola mundo\u003c/h1\u003e\\n \u003cp\u003eEs mi primer sitio web.\u003c/p\u003e\\n\u003c/body\u003e\\n```\\n\\nBuenas prácticas y recordatorios.\\n\\n- Guarda y re"])</script><script>self.__next_f.push([1,"visa en el navegador para ver cómo se renderiza el cambio.\\n- Verifica en el inspector que h1 y p aparezcan dentro de body.\\n- Cambia el \u003ctitle\u003e para ajustar el texto de la pestaña.\\n- Usa el atajo ! + tab para generar la estructura base rápidamente.\\n- Nombres de archivos y carpetas sin acentos ni espacios. Usa guion medio, guion bajo o *camel case*.\\n- Recuerda que las etiquetas contenedoras se cierran con slash.\\n- Mantén meta charset=\\\"UTF-8\\\" y meta viewport para compatibilidad y móviles.\\n- Usa el inspector para **debuggear** errores y aplicar correcciones informadas.\\n\\n¿Tienes dudas o quieres compartir cómo nombraste tus carpetas y qué viste en el inspector? Deja un comentario y seguimos construyendo juntos.\",\"hasAccess\":false,\"isHidden\":false,\"courseType\":\"\"},\"course\":{\"id\":12341,\"title\":\"Curso de HTML\",\"description\":\"Domina la estructura esencial de las páginas web con HTML. Aprende a escribir código limpio, jerarquizado y funcional. Comprende el rol de HTML en la web moderna y cómo su estructura impacta la accesibilidad, el SEO y la mantenibilidad del sitio.\",\"badge_url\":\"https://static.platzi.com/media/achievements/piezas-curso-html-badge-80b94b6a-d39d-44d8-9218-f14ca1e4764e.png\",\"diploma_url\":\"https://static.platzi.com/media/diplomas/Piezas-Curso-HTML_Diploma_-f1506fe2-ec76-4d0f-8da3-97d02b813367.jpg\",\"url\":\"https://platzi.com/cursos/html/\",\"stars_quantity\":5,\"opinions_quantity\":0,\"launch_date\":\"1759258800\",\"level\":\"básico\",\"slug\":\"html\",\"materials_quantity\":17,\"calendar_url\":\"https://www.google.com/calendar/event?action=TEMPLATE\u0026text=Curso de HTML\u0026dates=20250930T140000/20250930T150000\u0026ctz=America/Bogota\u0026details=Domina la estructura esencial de las páginas web con HTML. Aprende a escribir código limpio, jerarquizado y funcional. Comprende el rol de HTML en la web moderna y cómo su estructura impacta la accesibilidad, el SEO y la mantenibilidad del sitio.\",\"content_duration\":3,\"practice_duration\":12,\"seo_title\":\"Curso de HTML\",\"seo_description\":\"\",\"skills\":[\"De la intención a la acción\",\"Cómo funciona la web\",\"Fundamentos y estructura básica de HTML\",\"Texto y jerarquía de contenido\",\"Imágenes y recursos multimedia\",\"Listas y Enlaces\",\"Estructura semántica\",\"Formularios y campos de entrada\",\"Tipos de Input y Selectores\",\"Checkboxes y select\",\"Validaciones\",\"Tablas\",\"Imágenes Responsivas\",\"Videos y Elementos Multimedia\",\"Accesibilidad con ARIA\",\"SEO básico con HTML\",\"Proyecto Portfolio Personal\"],\"prior_knowledge\":[\"Uso básico de la computadora.\",\"Navegación Básica en Internet\"],\"required_software\":[\"Navegador Web \",\"Editor de código (VSCode o cualquier otro)\"],\"project\":null,\"teachers\":[{\"id\":535,\"name\":\"Diego De Granda\",\"profile_url\":\"https://platzi.com/profes/degranda/\",\"image_url\":\"https://static.platzi.com/media/teachers/degranda-opt.webp\",\"default_image_url\":\"https://static.platzi.com/static/website/v2/images/teacher_avatar_default.png\",\"description\":\"Head of Education en Platzi\",\"long_description\":\"👨‍🏫 Google Developer Expert\\r\\n🖥️ Chief Technology Officer at Besage.ai\\r\\n👨‍💻 Experto en JavaScript y Web Components\",\"job_title\":\"Chief Technology Officer\",\"company\":\"Besage.ai\"}],\"concepts\":[{\"id\":24620,\"title\":\"Fundamentos de HTML\",\"materials\":[{\"id\":84744,\"title\":\"Maquetación web con HTML semántico y accesible\",\"url\":\"https://platzi.com/cursos/html/maquetacion-web-con-html-semantico-y-acc/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc33f5fa4df65bc2b717cb_68dc33f5fa4df65bc2b717df_4s.jpg\",\"duration\":38,\"index\":1,\"content\":\"\u003cp\u003eAprende a construir páginas web desde cero con \u003cstrong\u003eHTML\u003c/strong\u003e, enfocándote en \u003cstrong\u003emaquetación semántica\u003c/strong\u003e, \u003cstrong\u003eaccesible\u003c/strong\u003e y con \u003cstrong\u003ebuenas prácticas para SEO\u003c/strong\u003e. Terminarás con el \u003cstrong\u003ecódigo base\u003c/strong\u003e de tu primer \u003cstrong\u003eportafolio profesional\u003c/strong\u003e, sin necesitar conocimientos de programación, solo ganas de iniciar tu camino como \u003cem\u003efrontend\u003c/em\u003e. Acompaña a \u003cstrong\u003eDiego de Granda\u003c/strong\u003e, profesional co"])</script><script>self.__next_f.push([1,"n \u003cstrong\u003emás de 15 años\u003c/strong\u003e en la industria de \u003cem\u003esoftware\u003c/em\u003e y desarrollo de producto.\u003c/p\u003e\\r\\n\u003ch2\u003e¿Qué aprenderás de HTML y maquetación semántica?\u003c/h2\u003e\\r\\n\u003cp\u003eLa ruta empieza por el primer paso: \u003cstrong\u003emaquetar con HTML\u003c/strong\u003e, uno de los tres lenguajes que entiende el navegador. El objetivo es construir estructura clara y preparada para crecer, cuidando la semántica desde el inicio.\u003c/p\u003e\\r\\n\u003ch3\u003e¿Cuál es el primer paso con HTML?\u003c/h3\u003e\\r\\n\u003cul\u003e\\r\\n\u003cli\u003eEntender que HTML es el lenguaje de maquetación del navegador.\u003c/li\u003e\\r\\n\u003cli\u003eOrganizar contenido con enfoque semántico desde el inicio.\u003c/li\u003e\\r\\n\u003cli\u003eTrabajar una base sólida para futuras mejoras.\u003c/li\u003e\\r\\n\u003c/ul\u003e\\r\\n\u003ch3\u003e¿Qué construirás al final del curso?\u003c/h3\u003e\\r\\n\u003cul\u003e\\r\\n\u003cli\u003eUn \u003cstrong\u003ecódigo base\u003c/strong\u003e listo para evolucionar.\u003c/li\u003e\\r\\n\u003cli\u003eEl inicio de tu \u003cstrong\u003eportafolio profesional\u003c/strong\u003e.\u003c/li\u003e\\r\\n\u003cli\u003eUn proyecto que demuestra maquetación semántica y accesible.\u003c/li\u003e\\r\\n\u003c/ul\u003e\\r\\n\u003ch2\u003e¿Cómo se relaciona con accesibilidad y SEO?\u003c/h2\u003e\\r\\n\u003cp\u003eLa \u003cstrong\u003emaquetación semántica\u003c/strong\u003e facilita que el navegador comprenda tu contenido y promueve una experiencia \u003cstrong\u003eaccesible\u003c/strong\u003e desde la base. Además, seguir \u003cstrong\u003ebuenas prácticas para SEO\u003c/strong\u003e te prepara para posicionar mejor tu sitio sin complejidad adicional.\u003c/p\u003e\\r\\n\u003ch3\u003e¿Qué enfoque tendrás para accesibilidad y SEO?\u003c/h3\u003e\\r\\n\u003cul\u003e\\r\\n\u003cli\u003eEstructura clara y comprensible para el navegador.\u003c/li\u003e\\r\\n\u003cli\u003eInclusión como principio del diseño accesible.\u003c/li\u003e\\r\\n\u003cli\u003ePrácticas alineadas con posicionamiento en buscadores.\u003c/li\u003e\\r\\n\u003c/ul\u003e\\r\\n\u003ch2\u003e¿Quién es tu profesor y qué necesitas para iniciar?\u003c/h2\u003e\\r\\n\u003cp\u003eEl curso lo guía \u003cstrong\u003eDiego de Granda\u003c/strong\u003e, con \u003cstrong\u003emás de 15 años\u003c/strong\u003e de experiencia en la industria de \u003cem\u003esoftware\u003c/em\u003e y desarrollo de producto. No requieres experiencia previa en programación ni otros lenguajes.\u003c/p\u003e\\r\\n\u003ch3\u003e¿Qué requisitos y objetivos tendrás?\u003c/h3\u003e\\r\\n\u003cul\u003e\\r\\n\u003cli\u003eRequisitos: ninguna base de programación, solo motivación.\u003c/li\u003e\\r\\n\u003cli\u003eObjetivo: construir el \u003cstrong\u003ecódigo base\u003c/strong\u003e de tu portafolio.\u003c/li\u003e\\r\\n\u003cli\u003eCamino: iniciar tu perfil como \u003cem\u003efrontend\u003c/em\u003e con fundamentos claros.\u003c/li\u003e\\r\\n\u003c/ul\u003e\\r\\n\u003cp\u003e¿Listo para comenzar a maquetar con HTML y dar el primer paso hacia tu portafolio? Comparte en comentarios qué te motiva a construir tu sitio y en qué quieres enfocarte.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false},{\"id\":84727,\"title\":\"Cómo funciona la web desde URL hasta página renderizada\",\"url\":\"https://platzi.com/cursos/html/como-funciona-la-web-desde-url-hasta-pag/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1cc574333fb4a977b69e_68dc1cc574333fb4a977b6ad_63s.jpg\",\"duration\":632,\"index\":2,\"content\":\"\u003cp\u003eComprende, paso a paso y sin rodeos, cómo funciona la web desde que escribes una URL hasta que se renderiza una página. Aquí verás el modelo cliente-servidor, el rol del DNS y la IP, y por qué \u003cstrong\u003eHTML, CSS y JavaScript\u003c/strong\u003e son la base del navegador. Además, distinguirás \u003cstrong\u003epáginas estáticas y dinámicas\u003c/strong\u003e, y los perfiles de \u003cstrong\u003efrontend\u003c/strong\u003e y \u003cstrong\u003ebackend\u003c/strong\u003e, con las herramientas clave para empezar.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo se conecta el navegador con Internet y el servidor?\u003c/h2\u003e\\n\u003cp\u003eAntes de escribir la primera línea de HTML, conviene entender el flujo completo. Esa visión te ayuda a depurar mejor y a tomar decisiones desde el inicio.\u003c/p\u003e\\n\u003ch3\u003e¿Qué ocurre con un HTTP request cuando escribes una URL?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eAl teclear una dirección y presionar Enter, el navegador hace un \u003cstrong\u003eHTTP request\u003c/strong\u003e por Internet hacia el \u003cstrong\u003eservidor\u003c/strong\u003e que hospeda el proyecto.\u003c/li\u003e\\n\u003cli\u003eEl servidor localiza la URL, arma una \u003cstrong\u003erespuesta HTTP\u003c/strong\u003e con un paquete de archivos y la envía de vuelta al \u003cstrong\u003ecliente\u003c/strong\u003e: tu navegador.\u003c/li\u003e\\n\u003cli\u003eEjemplo de flujo mencionado: al ingresar a plachi.com, el servidor responde con el proyecto y el navegador empieza a interpretarlo.\u003c/l"])</script><script>self.__next_f.push([1,"i\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo se relacionan DNS y la IP address?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eEl \u003cstrong\u003eDNS (Domain Name System)\u003c/strong\u003e traduce el dominio a una \u003cstrong\u003eIP address\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eEsa IP conecta con el servidor correcto para ubicar el proyecto solicitado.\u003c/li\u003e\\n\u003cli\u003eLa regla práctica: escribimos dominios fáciles de recordar y el sistema los transforma a números de IP para hacer la conexión.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué lenguajes entiende el navegador?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003eHTML\u003c/strong\u003e: estructura del contenido que aprenderás primero.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eCSS\u003c/strong\u003e: estilos para definir la apariencia.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eJavaScript\u003c/strong\u003e: interacción y dinamismo en la página.\u003c/li\u003e\\n\u003cli\u003eCon estos tres, puedes construir experiencias de lectura o páginas interactivas.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo lee y renderiza el navegador una página web?\u003c/h2\u003e\\n\u003cp\u003eEl navegador procesa de arriba hacia abajo y resuelve dependencias mientras interpreta. Este orden importa para evitar bloqueos y errores.\u003c/p\u003e\\n\u003ch3\u003e¿Qué es el DOM y el CSS Object Module?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003ePrimero descarga y analiza \u003cstrong\u003eHTML\u003c/strong\u003e, generando el \u003cstrong\u003eDOM (Document Object Model)\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eLuego, al encontrar estilos, descarga \u003cstrong\u003eCSS\u003c/strong\u003e y crea el \u003cstrong\u003eCSS Object Module\u003c/strong\u003e, similar al DOM pero solo de estilos.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo descarga recursos y ejecuta JavaScript?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eEl HTML indica recursos: \u003cstrong\u003eCSS\u003c/strong\u003e, \u003cstrong\u003eJavaScript\u003c/strong\u003e, imágenes y otros archivos.\u003c/li\u003e\\n\u003cli\u003eEl navegador descarga estilos, los interpreta y los aplica al DOM.\u003c/li\u003e\\n\u003cli\u003eCuando el HTML requiere \u003cstrong\u003eJavaScript\u003c/strong\u003e, lo descarga, lo interpreta y ejecuta para lograr la interacción.\u003c/li\u003e\\n\u003cli\u003eCon HTML, CSS y JavaScript listos, el navegador \u003cstrong\u003erenderiza\u003c/strong\u003e la página.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿En qué se diferencian páginas estáticas y dinámicas?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003ePáginas estáticas\u003c/strong\u003e: contenido de consumo. Suelen usar HTML y CSS, rara vez JavaScript. No permiten acciones del usuario como comentar o dar like.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003ePáginas dinámicas (aplicaciones web)\u003c/strong\u003e: permiten acciones del usuario. Ejemplos mencionados: platzi.com para cursos, Facebook, Amazon, Gmail y sistemas bancarios. Tu perfil y resultados cambian según tus interacciones.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Qué roles, herramientas y siguientes pasos necesitas?\u003c/h2\u003e\\n\u003cp\u003eConocer responsabilidades te orienta en el aprendizaje y te prepara para construir proyectos funcionales.\u003c/p\u003e\\n\u003ch3\u003e¿Qué hace frontend y por dónde empezar?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003eFrontend\u003c/strong\u003e: todo lo visual que el navegador renderiza y con lo que el usuario interactúa.\u003c/li\u003e\\n\u003cli\u003eRuta sugerida: \u003cstrong\u003eHTML\u003c/strong\u003e primero, luego \u003cstrong\u003eCSS\u003c/strong\u003e, y después \u003cstrong\u003eJavaScript\u003c/strong\u003e para el dinamismo.\u003c/li\u003e\\n\u003cli\u003eMás adelante, podrás aprender frameworks como \u003cem\u003eReact\u003c/em\u003e, \u003cem\u003eVue\u003c/em\u003e o \u003cem\u003eAngular\u003c/em\u003e cuando domines HTML y CSS.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué hace backend y cómo trabaja con datos?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003eBackend\u003c/strong\u003e: todo lo que sucede en el \u003cstrong\u003eservidor\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eGestiona la lógica, atiende solicitudes del navegador y se conecta con \u003cstrong\u003ebases de datos\u003c/strong\u003e para entregar información.\u003c/li\u003e\\n\u003cli\u003eRequiere lenguajes de programación del lado del servidor y lenguajes para bases de datos.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué herramientas usar para construir y probar?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003eEditores de texto\u003c/strong\u003e: VSCode, Cursor u otros que faciliten escribir código.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eNavegadores web\u003c/strong\u003e: Chrome, Firefox, Safari o el de tu preferencia para visualizar y depurar.\u003c/li\u003e\\n\u003cli\u003eHabilidades que pondrás en práctica.\u003c/li\u003e\\n\u003cli\u003eComprender el flujo cliente-servidor y las respuestas HTTP.\u003c/li\u003e\\n\u003cli\u003eIdentificar el papel del DNS y la IP en la resolución de dominios.\u003c/li\u003e\\n\u003cli\u003eDistinguir entre HTML, CSS y JavaScript al renderizar.\u003c/li\u003e\\n\u003cli\u003eDiferenciar páginas estáticas y dinámicas según la interacción.\u003c/li\u003e\\n\u003cli\u003eReconocer responsabilidades de \u003cem\u003efrontend\u003c/em\u003e y \u003cem\u003ebackend\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003eUsar editores"])</script><script>self.__next_f.push([1," y navegadores para construir y probar.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003e¿Te gustaría profundizar en alguna parte del flujo, por ejemplo DOM o páginas dinámicas? Comparte tus dudas y experiencias en los comentarios.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false},{\"id\":84728,\"title\":\"Configuración de VSCode y estructura HTML5 básica\",\"url\":\"https://platzi.com/cursos/html/configuracion-de-vscode-y-estructura-htm/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1cdae738b5b94215cc55_68dc1cdae738b5b94215cc69_83s.jpg\",\"duration\":828,\"index\":3,\"content\":\"\u003cp\u003eCrear tu primer sitio en HTML5 es más simple de lo que parece. Aquí verás cómo configurar \u003cem\u003eVSCode\u003c/em\u003e, usar el navegador con el inspector de elementos, generar la estructura base con un atajo y renderizar tu primer Hola mundo con buenas prácticas. Todo paso a paso y con conceptos clave explicados de forma clara.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo preparar las herramientas para HTML con VSCode y navegador?\u003c/h2\u003e\\n\u003cp\u003ePara escribir y visualizar código necesitas dos piezas: un editor de texto y un navegador. El editor recomendado es \u003cem\u003eVSCode\u003c/em\u003e. El navegador es esencial porque ahí verás cómo se renderiza el HTML y porque incluye el inspector de elementos.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eInstala \u003cem\u003eVSCode\u003c/em\u003e y ábrelo. Sigue el instalador según tu sistema operativo.\u003c/li\u003e\\n\u003cli\u003eUsa un navegador moderno con inspector de elementos. Te permitirá ver el HTML real y \u003cstrong\u003edebuggear\u003c/strong\u003e con feedback en tiempo real.\u003c/li\u003e\\n\u003cli\u003eCrea una carpeta raíz llamada \\\"Curso HTML\\\". Allí guardarás todo el contenido, clase por clase.\u003c/li\u003e\\n\u003cli\u003eDentro, crea \\\"uno_Fundamentos_HTML\\\" para el módulo y luego \\\"clase uno\\\" como subcarpeta.\u003c/li\u003e\\n\u003cli\u003eEvita acentos y espacios en nombres. Usa guion medio, guion bajo o \u003cem\u003ecamel case\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003eEn \\\"clase uno\\\", crea el archivo index.html.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Para qué sirve el inspector de elementos?\u003c/h3\u003e\\n\u003cp\u003eEl inspector muestra el árbol real de etiquetas: html, head y body. Permite identificar errores, probar cambios rápidos y entender qué se está renderizando. Es clave para \u003cstrong\u003edebuggear\u003c/strong\u003e y para recibir \u003cstrong\u003efeedback en tiempo real\u003c/strong\u003e antes de llevar los cambios al editor.\u003c/p\u003e\\n\u003ch2\u003e¿Qué incluye la estructura básica de HTML5 y por qué importa?\u003c/h2\u003e\\n\u003cp\u003eEn index.html puedes generar la base con un atajo: escribe ! y presiona tab. Esto crea el esqueleto HTML5 con etiquetas contenedoras que abren y cierran. Es importante comprender cada línea para que después te enfoques en el contenido dentro de body.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"cp\\\"\u003e\u0026lt;!DOCTYPE html\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehtml\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003elang\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;en\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003echarset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;UTF-8\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;viewport\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;width=device-width, initial-scale=1.0\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003edocument\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehtml\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/c"])</script><script>self.__next_f.push([1,"ode\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eLas etiquetas contenedoras se abren y se cierran con slash. El contenido va dentro del par.\u003c/li\u003e\\n\u003cli\u003eTodo lo visible en el navegador está dentro de body. Lo de head son instrucciones para el navegador.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué hacen doctype html y el atributo lang?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u0026lt;!DOCTYPE html\u0026gt; le indica al navegador: esto es \u003cstrong\u003eHTML5\u003c/strong\u003e. Así usas el estándar vigente y sus etiquetas.\u003c/li\u003e\\n\u003cli\u003eEn \u003chtml lang=\\\"en\\\"\u003e defines el idioma del contenido. El navegador puede ofrecer traducción automática si tu idioma local difiere, por ejemplo con \u003cem\u003eGoogle Translator\u003c/em\u003e mediante un pequeño \u003cem\u003eprompt\u003c/em\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué hace meta charset y meta viewport?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cmeta charset=\\\"UTF-8\\\"\u003e habilita \u003cstrong\u003ecaracteres especiales y emojis\u003c/strong\u003e. Sin esto, acentos y símbolos pueden verse como códigos extraños.\u003c/li\u003e\\n\u003cli\u003e\u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"\u003e mejora la visualización en \u003cstrong\u003edispositivos móviles\u003c/strong\u003e. Usa el \u003cstrong\u003eancho real del dispositivo\u003c/strong\u003e y evita un \u003cstrong\u003ezoom inicial\u003c/strong\u003e que distorsione el diseño.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Dónde va el contenido visible: body?\u003c/h3\u003e\\n\u003cp\u003eTodo lo que agregues dentro de body se renderiza. El head aloja reglas y metadatos: estilos, configuración del documento y el \u003ctitle\u003e, que define el texto de la pestaña del navegador.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo crear y visualizar tu primer HTML: h1 y párrafo?\u003c/h2\u003e\\n\u003cp\u003eAbre index.html con \u003cem\u003eOpen with Live Server\u003c/em\u003e desde el clic derecho en el explorador de archivos. Verás en la URL que se sirve desde local, con la ruta de tus carpetas y el index.html. En el inspector podrás verificar doctype, html, head y body.\u003c/p\u003e\\n\u003cp\u003eAgrega contenido dentro de body:\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh1\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eHola mundo\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh1\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eEs mi primer sitio web.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eBuenas prácticas y recordatorios.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eGuarda y revisa en el navegador para ver cómo se renderiza el cambio.\u003c/li\u003e\\n\u003cli\u003eVerifica en el inspector que h1 y p aparezcan dentro de body.\u003c/li\u003e\\n\u003cli\u003eCambia el \u003ctitle\u003e para ajustar el texto de la pestaña.\u003c/li\u003e\\n\u003cli\u003eUsa el atajo ! + tab para generar la estructura base rápidamente.\u003c/li\u003e\\n\u003cli\u003eNombres de archivos y carpetas sin acentos ni espacios. Usa guion medio, guion bajo o \u003cem\u003ecamel case\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003eRecuerda que las etiquetas contenedoras se cierran con slash.\u003c/li\u003e\\n\u003cli\u003eMantén meta charset=\\\"UTF-8\\\" y meta viewport para compatibilidad y móviles.\u003c/li\u003e\\n\u003cli\u003eUsa el inspector para \u003cstrong\u003edebuggear\u003c/strong\u003e errores y aplicar correcciones informadas.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003e¿Tienes dudas o quieres compartir cómo nombraste tus carpetas y qué viste en el inspector? Deja un comentario y seguimos construyendo juntos.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false},{\"id\":84729,\"title\":\"Etiquetas de texto y jerarquía en HTML\",\"url\":\"https://platzi.com/cursos/html/etiquetas-de-texto-y-jerarquia-en-html/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1cc8b0782cb9a7f3d5f8_68dc1cc8b0782cb9a7f3d60c_41s.jpg\",\"duration\":411,\"index\":4,\"content\":\"\u003cp\u003eAprende a organizar texto en HTML con una \u003cstrong\u003ejerarquía clara\u003c/strong\u003e. Usar bien \u003cstrong\u003eH1 a H6\u003c/strong\u003e, \u003cstrong\u003epárrafos\u003c/strong\u003e, \u003cstrong\u003estrong\u003c/strong\u003e y \u003cstrong\u003eblockquote\u003c/strong\u003e mejora la lectura y guía al navegador sobre lo más importante. Verás cómo crear la estructura base, cambiar el \u003cstrong\u003etítulo de la pestaña\u003c/strong\u003e y abrir el archi"])</script><script>self.__next_f.push([1,"vo en el navegador para validar resultados.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo estructurar HTML y cambiar el título de la pestaña?\u003c/h2\u003e\\n\u003cp\u003eComienza generando la \u003cstrong\u003eestructura básica de HTML\u003c/strong\u003e y ajusta el \u003cstrong\u003etítulo\u003c/strong\u003e para identificar tu proyecto como “Práctica texto”. Abre el archivo en el navegador para confirmar que el título aparece en la pestaña y que el contenido se renderiza con estilos por defecto.\u003c/p\u003e\\n\u003ch3\u003e¿Qué código base usar?\u003c/h3\u003e\\n\u003cp\u003eUsa un archivo index.html con la estructura mínima y el título configurado.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"cp\\\"\u003e\u0026lt;!DOCTYPE html\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehtml\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003elang\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;es\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003echarset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;UTF-8\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003ePráctica texto\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- Contenido --\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehtml\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eGenera la estructura con tu atajo de “símbolo de alineación” y tab.\u003c/li\u003e\\n\u003cli\u003eCambia el título a “Práctica texto”.\u003c/li\u003e\\n\u003cli\u003eAbre en el navegador y ajusta el zoom si lo necesitas.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Qué jerarquía de encabezados H1 a H6 conviene?\u003c/h2\u003e\\n\u003cp\u003eLos encabezados vienen con \u003cstrong\u003eestilos por defecto\u003c/strong\u003e que muestran su jerarquía visual. \u003cstrong\u003eH1\u003c/strong\u003e es el más grande e importante. \u003cstrong\u003eH2\u003c/strong\u003e es secundario. \u003cstrong\u003eH3\u003c/strong\u003e funciona como \u003cstrong\u003esubsecciones\u003c/strong\u003e dentro de un H2. \u003cstrong\u003eH4 a H6\u003c/strong\u003e siguen en menor importancia.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh1\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eTítulo uno\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh1\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh2\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eTítulo dos\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh2\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh3\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eSubsección del H2\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh3\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch3\u003e¿Cuántos H1, H2 y H3 por archivo?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eUn solo \u003cstrong\u003eH1\u003c/strong\u003e por archivo es buena práctica.\u003c/li\u003e\\n\u003cli\u003ePuedes tener varios \u003cstrong\u003eH2\u003c/strong\u003e según tu estructura.\u003c/li\u003e\\n\u003cli\u003eUsa \u003cstrong\u003eH3\u003c/strong\u003e para subdividir contenido dentro de un H2.\u003c/li\u003e\\n\u003cli\u003e\\n\u003cp\u003eEvita usar H4, H5 o H6 para texto común si necesitas párrafos.\u003c/p\u003e\\n\u003c/li\u003e\\n\u003cli\u003e\\n\u003cp\u003eBeneficio clave. El navegador entiende qué es lo más importante y el lector también.\u003c/p\u003e\\n\u003c/li\u003e\\n\u003cli\u003eSeñal visual. El tamaño refuerza la jerarquía al renderizar el documento.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo escribir párrafos, dar énfasis y citar?\u003c/h2\u003e\\n\u003cp\u003ePara texto de explicación usa la etiqueta \u003cstrong\u003ep\u003c/strong\u003e. No uses encabezados para contenido que debe ser un párrafo. Si necesitas \u003cstrong\u003eresaltar\u003c/strong\u003e una parte del texto dentro del párrafo, emplea \u003cstrong\u003estrong\u003c/strong\u003e. Para \u003cstrong\u003ecitas\u003c/strong\u003e o fragmentos destacados utiliza \u003cstrong\u003eblockquote\u003c/strong\u003e, que se muestra con un estilo distinto al párrafo.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo resaltar con strong sin cambiar la semántica?\u003c/h3\u003e\\n\u003cp\u003eDentr"])</script><script>self.__next_f.push([1,"o del párrafo, rodea la parte relevante con strong para darle énfasis visual.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eSoy un texto, pero \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003estrong\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eesto es más importante\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003estrong\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eÚsalo para marcar énfasis en una frase.\u003c/li\u003e\\n\u003cli\u003eNo implica que el resto del párrafo sea menos importante en el significado, solo lo resalta a nivel visual.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cuándo usar blockquote e inspeccionar estilos?\u003c/h3\u003e\\n\u003cp\u003eEmplea \u003cstrong\u003eblockquote\u003c/strong\u003e para citar texto o palabras específicas.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eblockquote\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eCurso de HTML\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eblockquote\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eSe renderiza con estilo distinto al párrafo.\u003c/li\u003e\\n\u003cli\u003eÚtil para citas o extractos destacados.\u003c/li\u003e\\n\u003cli\u003eCon el \u003cstrong\u003einspector de elementos\u003c/strong\u003e puedes ver cómo el navegador aplica estilos distintos a blockquote y p.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué habilidades prácticas se refuerzan?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eCrear la estructura básica de HTML en un index.html.\u003c/li\u003e\\n\u003cli\u003eCambiar el \u003cstrong\u003etítulo de la pestaña\u003c/strong\u003e a “Práctica texto”.\u003c/li\u003e\\n\u003cli\u003eEntender la \u003cstrong\u003ejerarquía de encabezados\u003c/strong\u003e H1 a H6.\u003c/li\u003e\\n\u003cli\u003eRespetar la regla de \u003cstrong\u003eun H1 por archivo\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eEscribir texto con \u003cstrong\u003ep\u003c/strong\u003e en lugar de encabezados.\u003c/li\u003e\\n\u003cli\u003eDar énfasis con \u003cstrong\u003estrong\u003c/strong\u003e cuando haga falta.\u003c/li\u003e\\n\u003cli\u003eCitar con \u003cstrong\u003eblockquote\u003c/strong\u003e y validar estilos en el \u003cstrong\u003einspector de elementos\u003c/strong\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003e¿Te quedaron dudas o tienes un ejemplo que quieras revisar? Comenta qué estructura de encabezados planeas usar y qué parte del texto necesitas destacar.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false},{\"id\":84730,\"title\":\"Insertar imágenes en HTML con optimización y accesibilidad\",\"url\":\"https://platzi.com/cursos/html/insertar-imagenes-en-html-con-optimizaci/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1cdf74c8d2b8b3afdbb1_68dc1cdf74c8d2b8b3afdbc5_103s.jpg\",\"duration\":1034,\"index\":5,\"content\":\"\u003cp\u003eInsertar imágenes en HTML es más que mostrar una foto: es construir una \u003cstrong\u003eestructura semántica\u003c/strong\u003e, con \u003cstrong\u003eaccesibilidad\u003c/strong\u003e y \u003cstrong\u003erendimiento\u003c/strong\u003e. Aquí aprenderás a usar la etiqueta img, el atributo src para rutas, el alt para describir, y a optimizar archivos para que tu sitio cargue rápido.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo insertar imágenes en HTML con la etiqueta img?\u003c/h2\u003e\\n\u003cp\u003eLa etiqueta \u003cstrong\u003eimg\u003c/strong\u003e renderiza imágenes directamente en el navegador. Es un elemento vacío: \u003cstrong\u003eno lleva etiqueta de cierre\u003c/strong\u003e. Debe colocarse dentro de body y necesita el atributo \u003cstrong\u003esrc\u003c/strong\u003e para apuntar a la ruta del archivo y \u003cstrong\u003ealt\u003c/strong\u003e para la descripción.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- Estructura básica --\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/paisaje.jpg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;paisajes montañosos.\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eimg es un elemento sin contenido interno: no se cierra con slash.\u003c/li\u003e\\n\u003cli\u003esrc define la ruta relativa al archivo HTML.\u003c/li\u003e\\n\u003cli\u003ealt aporta una descripción breve y útil.\u003c/li\u003e\\n\u003cli\u003eSin src no se muestra nada.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo referenciar rutas y renderizar en el navegador?\u003c/h3\u003e\\n\u003cp\u003eO"])</script><script>self.__next_f.push([1,"rganiza una carpeta img y usa rutas relativas desde tu index.html. El editor suele autocompletar nombres de carpetas y archivos.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- Dentro de index.html, apuntando a /img --\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/montana-optimizada.jpg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;montañas con lago cristalino.\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eEstructura clara de proyecto.\u003c/li\u003e\\n\u003cli\u003eRuta coherente con carpetas.\u003c/li\u003e\\n\u003cli\u003eGuardar cambios y refrescar para ver el renderizado.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué diferencia tiene img respecto a otras etiquetas?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eEs de tipo vacío: \u003cstrong\u003eno lleva contenido entre etiquetas\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eSus valores viven en propiedades o atributos: src, alt, width, height.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo optimizar imágenes para la web y mejorar rendimiento?\u003c/h2\u003e\\n\u003cp\u003eLas imágenes grandes ralentizan la carga. La buena práctica es \u003cstrong\u003ereducir el peso del archivo\u003c/strong\u003e antes de usarlo. Se mostró el uso de TinyPNG para comprimir imágenes pesadas y reemplazar versiones “original” por versiones optimizadas.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eRegla práctica: alrededor de \u003cstrong\u003e200 KB\u003c/strong\u003e por imagen para carga ágil.\u003c/li\u003e\\n\u003cli\u003eEvitar imágenes de \u003cstrong\u003emegabytes\u003c/strong\u003e: son muy pesadas.\u003c/li\u003e\\n\u003cli\u003eEjemplo: de ~3 MB a \u003cstrong\u003e863 KB\u003c/strong\u003e, y luego hasta \u003cstrong\u003e26 KB\u003c/strong\u003e tras optimización adicional.\u003c/li\u003e\\n\u003cli\u003eVerifica el peso real en las herramientas del navegador: pestaña \u003cem\u003eNetwork\u003c/em\u003e muestra los KB/MB descargados.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003eSugerencias aplicadas en el flujo:\\n- Mantener dos archivos cuando convenga: nombre “original” y versión optimizada.\\n- Reemplazar en src la versión “original” por la \u003cstrong\u003eoptimizada\u003c/strong\u003e.\\n- Probar la carga y el tamaño en \u003cem\u003eNetwork\u003c/em\u003e para validar la mejora.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- Evitar cargar el archivo pesado --\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/foco.original.jpg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;vista de focos.\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n\u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- Usar la versión optimizada --\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/foco.jpg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;vista de focos.\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch2\u003e¿Cómo mejorar accesibilidad y semántica con alt, width, height, figure y figcaption?\u003c/h2\u003e\\n\u003cp\u003eEl atributo \u003cstrong\u003ealt\u003c/strong\u003e es clave para \u003cstrong\u003eaccesibilidad\u003c/strong\u003e: si la imagen falla, el usuario ve el texto alternativo y los lectores de pantalla lo anuncian. Además, puedes ajustar dimensiones con \u003cstrong\u003ewidth\u003c/strong\u003e y \u003cstrong\u003eheight\u003c/strong\u003e cuando la imagen optimizada sigue siendo grande.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- Dimensiones controladas en pixeles --\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/foco.jpg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;vista de focos.\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ewidth\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;200\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eheight\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;150\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003ealt describe el contenido visual de forma concreta.\u003c/li\u003e\\n\u003cli\u003ewidth y height ajustan el tamaño en el layout.\u003c/li\u003e\\n\u003c/u"])</script><script>self.__next_f.push([1,"l\u003e\\n\u003cp\u003ePara descripciones visibles bajo la imagen, utiliza \u003cstrong\u003efigure\u003c/strong\u003e y \u003cstrong\u003efigcaption\u003c/strong\u003e. Es una solución semántica superior a usar img + p dentro de un \u003cem\u003ediv\u003c/em\u003e.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efigure\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/montana-optimizada.jpg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;montañas con lago cristalino.\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efigcaption\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003evista panorámica de los Alpes suizos.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efigcaption\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efigure\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003efigure agrupa imagen y su contexto.\u003c/li\u003e\\n\u003cli\u003efigcaption muestra una \u003cstrong\u003edescripción visible\u003c/strong\u003e asociada.\u003c/li\u003e\\n\u003cli\u003eMejora la semántica y la comprensión del contenido.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003e¿Tienes dudas sobre rutas, pesos en \u003cem\u003eKB\u003c/em\u003e o el uso de figure y figcaption? Cuéntamelo en los comentarios y revisamos tu caso paso a paso.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false}],\"quiz\":{\"id\":31713,\"active\":true,\"title\":\"quiz de Fundamentos de HTML\"}},{\"id\":24621,\"title\":\"Listas y Enlaces\",\"materials\":[{\"id\":84731,\"title\":\"Creación de listas desordenadas, ordenadas y enlaces en HTML\",\"url\":\"https://platzi.com/cursos/html/creacion-de-listas-desordenadas-ordenada/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1cd4bc24ceb871a97533_68dc1cd4bc24ceb871a97547_80s.jpg\",\"duration\":802,\"index\":6,\"content\":\"\u003cp\u003eAprende a estructurar contenido con \u003cstrong\u003elistas HTML\u003c/strong\u003e y a conectar páginas y acciones con \u003cstrong\u003eenlaces\u003c/strong\u003e. Verás cómo usar \u003cstrong\u003eUL\u003c/strong\u003e, \u003cstrong\u003eOL\u003c/strong\u003e y \u003cstrong\u003eLI\u003c/strong\u003e para organizar información, y cómo trabajar con \u003cstrong\u003eA\u003c/strong\u003e, \u003cstrong\u003ehref\u003c/strong\u003e, \u003cstrong\u003etarget\u003c/strong\u003e, \u003cstrong\u003emailto\u003c/strong\u003e y \u003cstrong\u003etel\u003c/strong\u003e para crear experiencias útiles y claras. Todo con ejemplos prácticos y listos para el navegador.\u003c/p\u003e\\n\u003ch2\u003e¿Qué son las listas en HTML y cuándo usarlas?\u003c/h2\u003e\\n\u003cp\u003eLas listas permiten organizar elementos relacionados. Con \u003cstrong\u003elistas desordenadas\u003c/strong\u003e presentas ítems sin prioridad. Con \u003cstrong\u003elistas ordenadas\u003c/strong\u003e defines un orden de pasos que sí importa. Así, eliges la estructura correcta según el objetivo: compras sin orden o instrucciones con secuencia.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo crear una lista desordenada con ul y li?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eUsa \u003cstrong\u003eUL\u003c/strong\u003e para una lista sin prioridad.\u003c/li\u003e\\n\u003cli\u003eAñade cada elemento con \u003cstrong\u003eLI\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eEl navegador muestra viñetas automáticamente.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eul\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eLeche\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003ePan\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eVerduras\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eul\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eClaves: \u003cstrong\u003eUL\u003c/strong\u003e (\u003cem\u003eunordered list\u003c/em\u003e) y \u003cstrong\u003eLI\u003c/strong\u003e (\u003cem\u003elist item\u003c/em\u003e). Son ideales cuando el orden no afecta el resultado.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo crear una lista ordenada con ol y li?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eUsa \u003cstrong\u003eOL\u003c/strong\u003e"])</script><script>self.__next_f.push([1," cuando el orden sí influye.\u003c/li\u003e\\n\u003cli\u003eCada \u003cstrong\u003eLI\u003c/strong\u003e se numera automáticamente.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eol\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eHervir agua\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eAgregar café\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eServir en taza\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eol\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eLa prioridad la marca el número. Cambiar el orden cambia el resultado.\u003c/p\u003e\\n\u003ch3\u003e¿Por qué importar el orden según el caso?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eCompras: el orden no importa, usa \u003cstrong\u003eUL\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eRecetas o pasos: el orden importa, usa \u003cstrong\u003eOL\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eLa elección correcta mejora claridad y experiencia.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo personalizar listas con type y start?\u003c/h2\u003e\\n\u003cp\u003eHTML permite ajustar la apariencia y la continuidad de listas ordenadas. Así comunicas mejor la prioridad y mantienes coherencia cuando hay contenido intermedio.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo usar números romanos o letras con type?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eEn \u003cstrong\u003eOL\u003c/strong\u003e, el atributo \u003cstrong\u003etype\u003c/strong\u003e cambia el estilo de numeración.\u003c/li\u003e\\n\u003cli\u003eOpciones: números romanos en mayúscula o minúscula, letras alfabéticas y números.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eol\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;I\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003ePaso uno\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003ePaso dos\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eol\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eol\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;a\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eOpción A\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eOpción B\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eol\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eResultado: I, II, III… o a, b, c… según el caso.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo continuar numeración con start?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eCada \u003cstrong\u003eOL\u003c/strong\u003e comienza en 1 por defecto.\u003c/li\u003e\\n\u003cli\u003ePara continuar después de una lista previa separada por contenido, usa \u003cstrong\u003estart\u003c/strong\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eol\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eTexto\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eImágenes\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMultimedia\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class"])</script><script>self.__next_f.push([1,"=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eol\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eContenido intermedio…\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eol\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003estart\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;4\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eAccesibilidad\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eSEO\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eDespliegue\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eol\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eBeneficio: mantienes la secuencia 1–6 aunque haya bloques intermedios.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo crear enlaces en HTML con a, href y target?\u003c/h2\u003e\\n\u003cp\u003eUn \u003cstrong\u003eenlace\u003c/strong\u003e se define con \u003cstrong\u003eA\u003c/strong\u003e y el destino con \u003cstrong\u003ehref\u003c/strong\u003e. El texto entre apertura y cierre es el que verá la persona. El navegador lo muestra con subrayado, color y cursor de mano para indicar que es interactivo.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo abrir en nueva pestaña con target?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003etarget\u003c/strong\u003e controla dónde se abre el enlace.\u003c/li\u003e\\n\u003cli\u003eUsa \u003cstrong\u003etarget=\\\"_blank\\\"\u003c/strong\u003e para abrir en otra pestaña y conservar la actual.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;https://platzi.com\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etarget\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;_blank\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eplatzi\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eÚtil cuando no quieres perder el contexto de navegación.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo enviar emails con mailto?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eCon \u003cstrong\u003emailto:\u003c/strong\u003e abres el cliente de correo con datos prellenados.\u003c/li\u003e\\n\u003cli\u003ePuedes definir \u003cstrong\u003esubject\u003c/strong\u003e y \u003cstrong\u003ebody\u003c/strong\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;mailto:info@ejemplo.com?subject=consulta\u0026amp;body=hola\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eenviar email\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eVentaja: facilita contactar sin copiar y pegar direcciones.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo llamar con tel?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eCon \u003cstrong\u003etel:\u003c/strong\u003e inicias una llamada desde móviles o apps compatibles.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;tel:3412345678\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eLlamar +34 12345678\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eEn móvil, abre el marcador y completa el número automáticamente.\u003c/p\u003e\\n\u003cp\u003e¿Tienes dudas o ejemplos que quieras probar con \u003cstrong\u003eUL\u003c/strong\u003e, \u003cstrong\u003eOL\u003c/strong\u003e, \u003cstrong\u003eLI\u003c/strong\u003e o \u003cstrong\u003eA\u003c/strong\u003e? Comenta qué estructura necesitas y lo afinamos juntos.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false},{\"id\":84732,\"title\":\"Etiquetas semánticas HTML5: header, main, nav, article y footer\",\"url\":\"https://platzi.com/cursos/html/etiquetas-semanticas-html5-header-main-n/\",\"material_type\":\"video\",\"thumbnail_url\":\"ht"])</script><script>self.__next_f.push([1,"tps://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1ce0f4aae2065e64aa11_68dc1ce0f4aae2065e64aa25_66s.jpg\",\"duration\":660,\"index\":7,\"content\":\"\u003cp\u003eLa semántica en HTML5 define una estructura clara que mejora la comprensión del contenido por personas, navegadores y lectores de pantalla. Usar etiquetas con significado aporta orden, \u003cstrong\u003efacilita el trabajo en equipo\u003c/strong\u003e, \u003cstrong\u003emejora la accesibilidad\u003c/strong\u003e y \u003cstrong\u003eayuda al SEO\u003c/strong\u003e al permitir que Google indexe mejor cada sección.\u003c/p\u003e\\n\u003ch2\u003e¿Qué es la semántica en HTML5 y por qué importa?\u003c/h2\u003e\\n\u003cp\u003eLa semántica asigna significado a las secciones del documento mediante etiquetas específicas. No cambia el diseño por sí misma, pero \u003cstrong\u003eindica qué es cada parte\u003c/strong\u003e del proyecto y \u003cstrong\u003ecómo debe ser interpretada\u003c/strong\u003e.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eDiferencia clave: head vs header. El head contiene lo que el navegador necesita para cargar el proyecto; el header es el encabezado visible del contenido. \u003c/li\u003e\\n\u003cli\u003eEl body es el cuerpo que se renderiza en pantalla. \u003c/li\u003e\\n\u003cli\u003eEtiquetas como header, main y footer delimitan secciones principales con propósito claro. \u003c/li\u003e\\n\u003cli\u003eBeneficio directo: los lectores de contenido pueden anunciar “estás en el header con una barra de navegación” y guiar a usuarios con baja visión. \u003c/li\u003e\\n\u003cli\u003eBeneficio técnico: Google puede \u003cstrong\u003eindexar\u003c/strong\u003e mejor las secciones cuando el documento utiliza etiquetas semánticas correctas. \u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo se estructura una página con etiquetas semánticas?\u003c/h2\u003e\\n\u003cp\u003eUna base semántica típica separa el encabezado, el contenido principal y el cierre. Además, incorpora navegación y organización interna del contenido con etiquetas como nav, section, article y aside.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo se ve el código base?\u003c/h3\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"cp\\\"\u003e\u0026lt;!DOCTYPE html\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehtml\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003elang\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;es\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003echarset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;UTF-8\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;viewport\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;width=device-width, initial-scale=1.0\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMi sitio web\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eheader\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh1\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMi sitio web\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh1\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eul\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#inicio\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eInicio\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt"])</script><script>self.__next_f.push([1,";\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#servicios\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eServicios\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#contacto\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eContacto\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eul\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eheader\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emain\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esection\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;articulos\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003earticle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh2\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eTítulo del artículo\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh2\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eContenido del artículo dentro de la sección principal.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003earticle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- Puedes repetir más \u0026lt;article\u0026gt; según el contenido --\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esection\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003easide\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eBarra lateral con opciones o enlaces relacionados.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003easide\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emain\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efooter\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eCopyright 2025 Mi sitio. Todos los derechos reservados.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efooter\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehtml\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch3\u003e¿Qué hace cada etiqueta?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003ehead: metadatos y recursos necesarios para cargar el proyecto. \u003c/li\u003e\\n\u003cli\u003eheader: encabezado visible; suele incluir logotipo, título y barra de navegación. \u003c/li\u003e\\n\u003cli\u003enav: la navegación principal; se implementa con una \u003cem\u003eunorganized list\u003c/em\u003e (ul), \u003cem\u003elist items\u003c/em\u003e (li) y enlaces \u003cem\u003eanchor\u003c/em\u003e (a). \u003c/li\u003e\\n\u003cli\u003emain: contenido relevante que el usuario viene a consumir. \u003c/li\u003e\\n\u003cli\u003esection: agrupa bloques temáticos dentro del main. \u003c/li\u003e\\n\u003cli\u003earticle: pieza de contenido independiente, como entradas de un blog. \u003c/li\u003e\\n\u003cli\u003easide: barra lateral que complementa o filtra el contenido principal. \u003c/li\u003e\\n\u003cli\u003efooter: cierre con información secundaria, como derechos o enlaces menos densos. \u003c/li\u003e\\n\u003c/"])</script><script>self.__next_f.push([1,"ul\u003e\\n\u003cp\u003eConsejos prácticos:\\n- Usa \u003cstrong\u003eetiquetas semánticas\u003c/strong\u003e para que cualquier integrante del equipo identifique rápido la sección que debe modificar. \\n- Mantén la navegación en nav para que lectores de pantalla y buscadores la detecten con precisión. \\n- Inserta contenidos repetibles en article y organízalos por section cuando corresponda. \u003c/p\u003e\\n\u003ch2\u003e¿Cómo mejora la accesibilidad y el SEO con semántica?\u003c/h2\u003e\\n\u003cp\u003eLa semántica crea un mapa comprensible del contenido para tecnologías de asistencia y motores de búsqueda.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eAccesibilidad: lectores de pantalla anuncian secciones como header, nav, main y footer, guiando la lectura. \u003c/li\u003e\\n\u003cli\u003eSEO: Google indexa mejor páginas con estructura clara, lo que optimiza la posibilidad de aparecer ante búsquedas relevantes. \u003c/li\u003e\\n\u003cli\u003eMantenibilidad: el equipo entiende dónde está cada parte del proyecto al leer el HTML. \u003c/li\u003e\\n\u003cli\u003eFuturo con CSS: podrás \u003cstrong\u003eaplicar estilos\u003c/strong\u003e apuntando a secciones específicas con precisión. \u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003e¿Tienes dudas sobre cómo organizar tu estructura semántica o tu menú de navegación? Comparte tus preguntas y ejemplos para revisarlos juntos.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false}],\"quiz\":{\"id\":31714,\"active\":true,\"title\":\"quiz de Listas y Enlaces\"}},{\"id\":24622,\"title\":\"Formularios y Tablas\",\"materials\":[{\"id\":84733,\"title\":\"Formularios HTML con validación nativa del navegador\",\"url\":\"https://platzi.com/cursos/html/formularios-html-con-validacion-nativa-d/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1d8c6a2459b36e85d621_68dc1d8c6a2459b36e85d635_94s.jpg\",\"duration\":940,\"index\":8,\"content\":\"\u003cp\u003eLos formularios en HTML son la vía directa para que una persona comparta datos con un proyecto web. Con una estructura correcta, el navegador ofrece autocompletado y validación nativa que simplifican el llenado y mejoran la experiencia, desde un \u003cem\u003elogin\u003c/em\u003e hasta un comentario en una red social.\u003c/p\u003e\\n\u003ch2\u003e¿Por qué los formularios son la base de la interacción en HTML?\u003c/h2\u003e\\n\u003cp\u003eLos formularios permiten enviar información al servidor para ejecutar acciones concretas. Ejemplos como iniciar sesión o comentar un contenido dependen de esta estructura. Además, el navegador puede ayudar con el autocompletado y ciertas validaciones si usamos las etiquetas y atributos adecuados.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eEvita formularios largos sin guardado intermedio: generan frustración.\u003c/li\u003e\\n\u003cli\u003eDiseña formularios sencillos y claros: mejor experiencia.\u003c/li\u003e\\n\u003cli\u003eAprovecha la validación nativa del navegador: menos código adicional.\u003c/li\u003e\\n\u003cli\u003eUsa estructura semántica y atributos correctos: autocompletado más efectivo.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo estructurar un formulario con form, action y method?\u003c/h2\u003e\\n\u003cp\u003eLa etiqueta \u003ccode\u003eform\u003c/code\u003e no es decorativa: informa al navegador que habrá interacción y activa funciones útiles. Define dos atributos clave: \u003cstrong\u003eaction\u003c/strong\u003e indica a dónde se envían los datos y \u003cstrong\u003emethod\u003c/strong\u003e define cómo se envían usando verbos HTTP como \u003cem\u003eget\u003c/em\u003e y \u003cem\u003epost\u003c/em\u003e.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eform\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eaction\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003emethod\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;post\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- Campos del formulario --\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eform\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003eaction\u003c/strong\u003e: destino de los datos; puede ser una URL o un \u003cem\u003eendpoint\u003c/em\u003e de un \u003cem\u003eAPI\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003emethod\u003c/strong\u003e: forma de envío; se usan verbos HTTP como \u003cem\u003eget\u003c/em\u003e y \u003cem\u003epost\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003ePresionar Enter o un botón de envío intenta enviar el formulario.\u003c/li\u003e\\n\u003cli\u003eUsar \u003ccode\u003eform\u003c/code\u003e habilita validaciones del navegador en campos como correos.\u003c/li"])</script><script>self.__next_f.push([1,"\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo enviar los datos con un botón submit?\u003c/h3\u003e\\n\u003cp\u003eEl formulario se completa con un botón de tipo \u003ccode\u003esubmit\u003c/code\u003e, que dispara el envío al destino definido en \u003ccode\u003eaction\u003c/code\u003e usando el \u003ccode\u003emethod\u003c/code\u003e indicado.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebutton\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;submit\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eEnviar\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebutton\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\u003ccode\u003etype=\\\"submit\\\"\u003c/code\u003e: indica que el botón envía el formulario.\u003c/li\u003e\\n\u003cli\u003eSi \u003ccode\u003eaction\u003c/code\u003e es \u003ccode\u003e#\u003c/code\u003e, la página se refresca sin una acción real.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo etiquetar y capturar datos con label, input y textarea?\u003c/h2\u003e\\n\u003cp\u003ePara mejorar la accesibilidad, el autocompletado y el envío correcto, se combinan \u003ccode\u003elabel\u003c/code\u003e, \u003ccode\u003einput\u003c/code\u003e y, cuando corresponde, \u003ccode\u003etextarea\u003c/code\u003e. La clave es vincular cada \u003ccode\u003elabel\u003c/code\u003e con su campo y nombrar adecuadamente los datos que se enviarán.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo vincular label e input con for e id?\u003c/h3\u003e\\n\u003cp\u003e\u003ccode\u003elabel\u003c/code\u003e describe el propósito del campo y se asocia al \u003ccode\u003einput\u003c/code\u003e mediante \u003ccode\u003efor\u003c/code\u003e e \u003ccode\u003eid\u003c/code\u003e iguales. Así, un clic en la etiqueta activa el campo y el navegador reconoce mejor el dato.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;nombre\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eNombre:\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;nombre\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;nombre\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\u003ccode\u003efor\u003c/code\u003e en \u003ccode\u003elabel\u003c/code\u003e debe coincidir con el \u003ccode\u003eid\u003c/code\u003e del \u003ccode\u003einput\u003c/code\u003e.\u003c/li\u003e\\n\u003cli\u003e\u003ccode\u003ename\u003c/code\u003e define la clave con la que el dato viaja al servidor.\u003c/li\u003e\\n\u003cli\u003e\u003ccode\u003ediv\u003c/code\u003e puede usarse como contenedor para separar campos cuando no hay una etiqueta semántica específica.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo capturar correos con input type=email?\u003c/h3\u003e\\n\u003cp\u003ePara correos, el navegador ofrece validación básica y autocompletado cuando el \u003ccode\u003einput\u003c/code\u003e usa \u003ccode\u003etype=\\\"email\\\"\u003c/code\u003e y está correctamente etiquetado.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;email\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eCorreo electrónico:\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;email\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;email\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;email\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\u003ccode\u003etype=\\\"email\\\"\u003c/code\u003e: activa validaciones nativas para formato de correo.\u003c/li\u003e\\n\u003cli\u003eCon datos guardados, el navegador sugiere completar el campo.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cuándo usar textarea con filas y columnas?\u003c/h3\u003e\\n\u003cp\u003eCuando se requiere texto largo (por ejemplo, un mensaje), \u003ccode\u003etextar"])</script><script>self.__next_f.push([1,"ea\u003c/code\u003e ofrece un área ampliada y redimensionable. Se vincula igual que un \u003ccode\u003einput\u003c/code\u003e con \u003ccode\u003elabel\u003c/code\u003e.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;mensaje\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMensaje:\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etextarea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;mensaje\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;mensaje\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erows\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;4\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ecols\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;40\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etextarea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\u003ccode\u003erows\u003c/code\u003e y \u003ccode\u003ecols\u003c/code\u003e: altura y ancho iniciales visibles.\u003c/li\u003e\\n\u003cli\u003ePermite saltos de línea y mayor comodidad al escribir textos extensos.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eform\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eaction\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003emethod\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;post\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;nombre\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eNombre:\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;nombre\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;nombre\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;email\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eCorreo electrónico:\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;email\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;email\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;email\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;mensaje\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMensaje:\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etextarea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;mensaje\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;mensaje\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erows\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/sp"])</script><script>self.__next_f.push([1,"an\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;4\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ecols\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;40\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etextarea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebutton\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;submit\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eEnviar\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebutton\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eform\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eCombina \u003ccode\u003eform\u003c/code\u003e con \u003ccode\u003eaction\u003c/code\u003e y \u003ccode\u003emethod\u003c/code\u003e para definir destino y envío.\u003c/li\u003e\\n\u003cli\u003eVincula \u003ccode\u003elabel\u003c/code\u003e y campos con \u003ccode\u003efor\u003c/code\u003e/\u003ccode\u003eid\u003c/code\u003e y nombra datos con \u003ccode\u003ename\u003c/code\u003e.\u003c/li\u003e\\n\u003cli\u003eCierra con \u003ccode\u003ebutton type=\\\"submit\\\"\u003c/code\u003e para enviar al servidor.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003e¿Tienes dudas sobre qué campos pedir o cómo nombrarlos con \u003ccode\u003ename\u003c/code\u003e para tu \u003cem\u003eendpoint\u003c/em\u003e de \u003cem\u003elogin\u003c/em\u003e o un comentario? Comparte tu caso en los comentarios y afinamos la estructura juntos.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false},{\"id\":84734,\"title\":\"Tipos de inputs HTML para formularios avanzados\",\"url\":\"https://platzi.com/cursos/html/tipos-de-inputs-html-para-formularios-av/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1d8794db30b44237a203_68dc1d8794db30b44237a217_85s.jpg\",\"duration\":853,\"index\":9,\"content\":\"\u003cp\u003eAprende a ampliar y validar datos en formularios HTML con inputs nativos y buenas prácticas. Aquí verás cómo usar password, number con min y max, date con calendario, color con selector y radio agrupado con \u003cem\u003efieldset\u003c/em\u003e y \u003cem\u003elegend\u003c/em\u003e. Todo con etiquetas label, for, id y name bien enlazadas para accesibilidad y envío correcto.\u003c/p\u003e\\n\u003ch2\u003e¿Qué inputs de formulario amplían la recolección de datos?\u003c/h2\u003e\\n\u003cp\u003eLos inputs adecuados mejoran la experiencia y la calidad de los datos. Con HTML puedes pedir contraseñas con privacidad, números validados, fechas con calendario y colores con un selector visual.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo capturar contraseñas con privacidad?\u003c/h3\u003e\\n\u003cp\u003eEl input type=\\\"password\\\" oculta los caracteres con puntos o asteriscos. Es una mejora de \u003cstrong\u003eprivacidad\u003c/strong\u003e, no de \u003cstrong\u003eseguridad\u003c/strong\u003e. La seguridad depende de enviar por \u003cstrong\u003eHTTPS\u003c/strong\u003e.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eUsa label, for, id y name para accesibilidad y envío correcto.\u003c/li\u003e\\n\u003cli\u003eLos navegadores y el \u003cem\u003epassword manager\u003c/em\u003e pueden sugerir autocompletado.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eform\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003emethod\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;post\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eaction\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;password\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eContraseña:\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;password\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;password\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;password\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eform\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n"])</script><script>self.__next_f.push([1,"\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch3\u003e¿Cómo pedir colores con un selector nativo?\u003c/h3\u003e\\n\u003cp\u003eEl input type=\\\"color\\\" abre un \u003cem\u003ecolor picker\u003c/em\u003e para elegir un valor hexadecimal.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;color\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eColor:\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;color\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;color\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;color\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eSelección visual y precisa del color.\u003c/li\u003e\\n\u003cli\u003eEnvío directo del valor al servidor.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo validar números y fechas en HTML sin complicarse?\u003c/h2\u003e\\n\u003cp\u003ePara datos numéricos y fechas, los inputs nativos aportan validación y controles del navegador. Evitas errores comunes y mejoras la usabilidad.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo limitar rangos con min y max?\u003c/h3\u003e\\n\u003cp\u003eCon type=\\\"number\\\" puedes aceptar solo números y definir límites con min y max. Útil, por ejemplo, para una \u003cstrong\u003eedad\u003c/strong\u003e entre 18 y 70.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;edad\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eEdad:\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;number\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;edad\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;edad\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003emin\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;18\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003emax\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;70\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eSolo valores numéricos válidos.\u003c/li\u003e\\n\u003cli\u003eImpide bajar de 18 o subir de 70.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo seleccionar fechas con el calendario nativo?\u003c/h3\u003e\\n\u003cp\u003eEl input type=\\\"date\\\" muestra un calendario para elegir día, mes y año.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;fecha\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eFecha:\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;date\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;fecha\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;fecha\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eReduce errores de formato de fecha.\u003c/li\u003e\\n\u003cli\u003eInterfaz familiar del navegador.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo agrupar opciones con radio para enviar un solo va"])</script><script>self.__next_f.push([1,"lor?\u003c/h2\u003e\\n\u003cp\u003eCuando hay varias opciones y solo una respuesta válida, usa type=\\\"radio\\\" con el mismo name para cada opción. Agrupa semánticamente con \u003cem\u003efieldset\u003c/em\u003e y titula el grupo con \u003cem\u003elegend\u003c/em\u003e.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efieldset\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elegend\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eGénero\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elegend\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;radio\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;masculino\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;genero\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003evalue\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;M\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;masculino\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMasculino\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;radio\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;femenino\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;genero\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003evalue\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;F\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;femenino\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eFemenino\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efieldset\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eEl mismo name garantiza que solo se seleccione una opción.\u003c/li\u003e\\n\u003cli\u003eEl atributo value envía el dato útil: M o F.\u003c/li\u003e\\n\u003cli\u003e\u003cem\u003eFieldset\u003c/em\u003e y \u003cem\u003elegend\u003c/em\u003e agrupan y describen el conjunto de opciones.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003eConsejos rápidos.\\n- Usa name para definir cómo viaja el dato al servidor.\\n- Enlaza label con for y el id correspondiente.\\n- Recuerda: el input password mejora la privacidad visual, pero la seguridad exige usar \u003cstrong\u003eHTTPS\u003c/strong\u003e.\u003c/p\u003e\\n\u003cp\u003e¿Quieres practicar con \u003cem\u003echeckbox\u003c/em\u003e y listas de \u003cem\u003eoptions\u003c/em\u003e para países u otras categorías? Comenta qué casos de uso tienes y qué inputs necesitas implementar.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false},{\"id\":84735,\"title\":\"Checkbox y select en formularios HTML\",\"url\":\"https://platzi.com/cursos/html/checkbox-y-select-en-formularios-html/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1d79bc24ceb871a97b0e_68dc1d7abc24ceb871a97b22_38s.jpg\",\"duration\":382,\"index\":10,\"content\":\"\u003cp\u003eLos formularios en HTML pueden ser más claros y fáciles de completar si agrupas opciones correctamente y defines bien cómo se envían los datos. Aquí aprenderás a usar \u003cstrong\u003einputs tipo \u003cem\u003echeckbox\u003c/em\u003e\u003c/strong\u003e para múltiples selecciones y la etiqueta \u003cstrong\u003eselect con \u003cem\u003eoption\u003c/em\u003e\u003c/strong\u003e para listas desplegables, conectando todo con \u003cem\u003elabel\u003c/em\u003e, \u003cem\u003ename\u003c/em\u003e, \u003cem\u003eid\u003c/em\u003e y \u003cem\u003evalue\u003c/em\u003e para que el servidor reciba exactamente lo que necesitas.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo usar checkbox con fieldset y label en HTML?\u003c/h2\u003e\\n\u003cp\u003eAgrupa opciones relacionadas con un \u003cstrong\u003e\u003cfieldset\u003e\u003c/strong\u003e y titúlalas con \u003cstrong\u003e\u003clegend\u003e\u003c/strong\u003e. Los \u003cem\u003echeckbox\u003c/em\u003e permiten elegir \u003cstrong\u003emás de una opción\u003c/strong\u003e (a diferencia de los \u003cem\u003eradio buttons\u003c/em\u003e). Usa el mism"])</script><script>self.__next_f.push([1,"o atributo \u003cstrong\u003ename\u003c/strong\u003e para todas las casillas del grupo y un \u003cstrong\u003evalue\u003c/strong\u003e distinto por opción para identificar qué se seleccionó. Vincula cada casilla con su \u003cstrong\u003elabel\u003c/strong\u003e mediante \u003cstrong\u003eid\u003c/strong\u003e y \u003cstrong\u003efor\u003c/strong\u003e para mejorar accesibilidad y clicabilidad.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003eMúltiple selección\u003c/strong\u003e con \u003cem\u003echeckbox\u003c/em\u003e del mismo name.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eAgrupación semántica\u003c/strong\u003e con \u003cem\u003efieldset\u003c/em\u003e y \u003cem\u003elegend\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eAsociación accesible\u003c/strong\u003e: \u003cem\u003elabel\u003c/em\u003e for ↔ \u003cem\u003eid\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eEnvío claro\u003c/strong\u003e al servidor: usa \u003cem\u003evalue\u003c/em\u003e específico por opción.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efieldset\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elegend\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eIntereses\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elegend\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;checkbox\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;intereses\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;deportes\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003evalue\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;deportes\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;deportes\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eDeportes\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;checkbox\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;intereses\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;musica\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003evalue\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;música\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;musica\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMúsica\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efieldset\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch3\u003e¿Qué datos se envían con name y value?\u003c/h3\u003e\\n\u003cp\u003eAl enviar el formulario, el servidor recibe un par por cada opción marcada. Con el ejemplo anterior, si se marcan ambas, se envía: \u003cstrong\u003eintereses=deportes\u003c/strong\u003e e \u003cstrong\u003eintereses=música\u003c/strong\u003e. Así se conserva la agrupación y se conocen las selecciones exactas.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo crear una lista desplegable con select y option?\u003c/h2\u003e\\n\u003cp\u003eCuando necesitas que la persona elija una sola alternativa de una lista (por ejemplo, \u003cstrong\u003ePaís\u003c/strong\u003e), utiliza \u003cstrong\u003e\u003cselect\u003e\u003c/strong\u003e. Esta etiqueta contenedora incluye varias \u003cstrong\u003e\u003coption\u003e\u003c/strong\u003e, donde el texto visible puede coincidir con el \u003cstrong\u003evalue\u003c/strong\u003e que se enviará. Conecta el \u003cem\u003elabel\u003c/em\u003e al \u003cem\u003eselect\u003c/em\u003e con \u003cem\u003eid\u003c/em\u003e y usa \u003cem\u003ename\u003c/em\u003e para el campo que recibirá el servidor.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003eSelect es contenedor\u003c/strong\u003e: incluye múltiples \u003cem\u003eoption\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eOption define\u003c/strong\u003e el \u003cem\u003evalue\u003c/em\u003e que viaja al servidor.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eLabel asociado\u003c/strong\u003e mejora la usabilidad.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eDiv como contenedor comodín\u003c/strong\u003e cuando no hay \u003cem\u003efieldset\u003c/em\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan cla"])</script><script>self.__next_f.push([1,"ss=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;pais\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003ePaís\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eselect\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;pais\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;pais\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eoption\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003evalue\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;México\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMéxico\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eoption\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eoption\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003evalue\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Colombia\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eColombia\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eoption\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eoption\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003evalue\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Argentina\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eArgentina\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eoption\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eselect\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch3\u003e¿Qué diferencia hay con inputs al agrupar datos?\u003c/h3\u003e\\n\u003cp\u003eCon \u003cem\u003echeckbox\u003c/em\u003e, usas el mismo \u003cstrong\u003ename\u003c/strong\u003e para varias casillas y cambias \u003cstrong\u003evalue\u003c/strong\u003e por opción, permitiendo múltiples selecciones. Con \u003cstrong\u003eselect\u003c/strong\u003e, eliges una sola \u003cstrong\u003eoption\u003c/strong\u003e por defecto, y se envía el \u003cstrong\u003ename\u003c/strong\u003e del select con el \u003cstrong\u003evalue\u003c/strong\u003e de la opción elegida.\u003c/p\u003e\\n\u003ch2\u003e¿Qué rol jugarán las validaciones del navegador?\u003c/h2\u003e\\n\u003cp\u003eSe menciona que el navegador puede \u003cstrong\u003eayudar con validaciones\u003c/strong\u003e para hacer los formularios más seguros y fáciles de rellenar. Esto complementa el uso correcto de \u003cem\u003echeckbox\u003c/em\u003e, \u003cem\u003eselect\u003c/em\u003e, \u003cem\u003elabel\u003c/em\u003e, \u003cem\u003ename\u003c/em\u003e, \u003cem\u003eid\u003c/em\u003e y \u003cem\u003evalue\u003c/em\u003e para una experiencia completa.\u003c/p\u003e\\n\u003cp\u003e¿Te gustaría ver más ejemplos con validaciones nativas y personalizadas? Deja tus preguntas y comenta qué casos te gustaría cubrir.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false},{\"id\":84736,\"title\":\"Validaciones de formularios HTML con atributos nativos\",\"url\":\"https://platzi.com/cursos/html/validaciones-de-formularios-html-con-atr/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1d84af2b38b3b2b59d1c_68dc1d84af2b38b3b2b59d30_73s.jpg\",\"duration\":731,\"index\":11,\"content\":\"\u003cp\u003eCrear formularios confiables empieza por dominar las validaciones nativas de HTML. Con atributos como \u003cstrong\u003erequire\u003c/strong\u003e, \u003cstrong\u003eplaceholder\u003c/strong\u003e, \u003cstrong\u003epattern\u003c/strong\u003e, \u003cstrong\u003emin\u003c/strong\u003e, \u003cstrong\u003emax\u003c/strong\u003e, \u003cstrong\u003estep\u003c/strong\u003e y \u003cstrong\u003emin length\u003c/strong\u003e, el navegador hace gran parte del trabajo por ti, asegurando datos completos y con el formato correcto.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo validar formularios HTML con atributos nativos?\u003c/h2\u003e\\n\u003cp\u003eUsar la \u003cstrong\u003eetiqueta form\u003c/strong\u003e y los tipos de input adecuados activa \u003cstrong\u003evalidaciones del navegador\u003c/strong\u003e que evitan envíos incompletos o con formatos inválidos. Así reduces errores y mejoras la experiencia desde el primer intento.\u003c/p\u003e\\n\u003ch3\u003e¿Qué hace el navegador al usar form y tipos de input?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eComprueba formato de \u003cstrong\u003eemail\u003c/strong\u003e al enviar: falta de arroba dispara un aviso.\u003c/li\u003e\\n\u003cli\u003eMuestra mensajes contextuales cuando algo no coincide con lo esperado.\u003c/li\u003e\\n\u003cli\u003eImpide el envío si un campo \u003cstrong\u003erequire\u003c/strong\u003e está vacío.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003eEjemplo de correo con guía visual usando \u003cstrong\u003eplaceholder\u003c/strong\u003e y o"])</script><script>self.__next_f.push([1,"bligatoriedad con \u003cstrong\u003erequire\u003c/strong\u003e:\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;email\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;correo\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;correo\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003erequired\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eplaceholder\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;usuario@ejemplos.com\u0026quot;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003ePuntos clave:\\n- \u003cstrong\u003erequire\u003c/strong\u003e obliga a completar el campo antes de enviar.\\n- \u003cstrong\u003eplaceholder\u003c/strong\u003e muestra el formato esperado (por ejemplo, usuario@ejemplos.com).\\n- El navegador valida el patrón básico del correo al momento de enviar.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo restringir un teléfono con pattern y expresión regular?\u003c/h3\u003e\\n\u003cp\u003ePara evitar texto en un teléfono, usa \u003cstrong\u003epattern\u003c/strong\u003e con una \u003cstrong\u003eexpresión regular\u003c/strong\u003e que permita solo dígitos y una longitud exacta.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;text\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;telefono\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;telefono\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Ingresa nueve dígitos\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eplaceholder\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;000000000\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003epattern\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;[0-9]{9}\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003erequired\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eClaves prácticas:\\n- \u003ccode\u003e[0-9]{9}\u003c/code\u003e indica: solo números del 0 al 9 y exactamente 9 caracteres.\\n- \u003cstrong\u003etitle\u003c/strong\u003e muestra una pista al pasar el cursor: “Ingresa nueve dígitos”.\\n- Si el valor no hace “match” con el \u003cstrong\u003epattern\u003c/strong\u003e, el navegador bloquea el envío.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo limitar números, fechas y contraseñas con min, max, step y min length?\u003c/h2\u003e\\n\u003cp\u003eControlar rangos y longitudes evita valores fuera de regla. Con \u003cstrong\u003emin\u003c/strong\u003e, \u003cstrong\u003emax\u003c/strong\u003e, \u003cstrong\u003estep\u003c/strong\u003e y \u003cstrong\u003emin length\u003c/strong\u003e puedes definir límites claros sin JavaScript adicional.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo controlar cantidad con number, min, max y step?\u003c/h3\u003e\\n\u003cp\u003ePara cantidades numéricas, el input de número ya valida que no haya letras. Además, puedes acotar rango y saltos:\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;number\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;cantidad\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;cantidad\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003emin\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;1\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003emax\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;100\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003estep\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;5\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003evalue\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;10\u0026quot;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eBuenas prácticas:\\n- \u003cstrong\u003emin\u003c/strong\u003e y \u003cstrong\u003emax\u003c/strong\u003e fijan el rango permitido (ejemplo: del 1 al 100).\\n- \u003cstrong\u003estep\u003c/strong\u003e define saltos (ejemplo: 1, 6, 11, 16...).\\n- El \u003cstrong\u003evalue\u003c/strong\u003e enviado corresponde al número seleccionado; puede sincronizarse con JavaScript si es necesario.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo acotar fechas con date, min y max?"])</script><script>self.__next_f.push([1,"\u003c/h3\u003e\\n\u003cp\u003eLimita el calendario a un período válido usando \u003cstrong\u003emin\u003c/strong\u003e y \u003cstrong\u003emax\u003c/strong\u003e. Útil para rangos de edad o periodos de registro.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;date\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;fecha\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;fecha\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003emin\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;2024-01-01\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003emax\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;2024-12-31\u0026quot;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eVentajas:\\n- Solo se puede seleccionar dentro del rango definido.\\n- El calendario inicia en el mínimo y bloquea años fuera del intervalo.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo fortalecer contraseñas con require y min length?\u003c/h3\u003e\\n\u003cp\u003ePara forzar contraseñas más robustas, combina obligatoriedad y longitud mínima.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;password\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;contrasena\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;contrasena\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003erequired\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eminlength\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;8\u0026quot;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eAspectos clave:\\n- \u003cstrong\u003erequire\u003c/strong\u003e evita que quede vacío.\\n- \u003cstrong\u003emin length\u003c/strong\u003e de 8 caracteres impide claves demasiado cortas.\\n- Al intentar enviar con menos de 8, el navegador muestra el error correspondiente.\u003c/p\u003e\\n\u003cp\u003e¿Tienes otros patrones útiles o rangos que te funcionen mejor en tus formularios? Comparte ejemplos y dudas en los comentarios.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false},{\"id\":84737,\"title\":\"Estructura de tablas HTML con thead, tbody y tfoot\",\"url\":\"https://platzi.com/cursos/html/estructura-de-tablas-html-con-thead-tbod/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1d850b0985b9c734ef66_68dc1d850b0985b9c734ef7a_50s.jpg\",\"duration\":504,\"index\":12,\"content\":\"\u003cp\u003eAprende a construir \u003cstrong\u003etablas HTML semánticas\u003c/strong\u003e paso a paso: usa el contenedor table, organiza encabezados con thead, datos con tbody y totales con tfoot. Define filas con tr, títulos con th y celdas con td. Aprovecha colspan para combinar columnas y mostrar un total claro.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo crear una tabla HTML semántica?\u003c/h2\u003e\\n\u003cp\u003eLas tablas fueron clave en los inicios de HTML para dar formato, pero hoy se reservan para \u003cstrong\u003emostrar datos estructurados\u003c/strong\u003e. Aun así, siguen siendo útiles cuando necesitas \u003cstrong\u003ecolumnas, filas y encabezados\u003c/strong\u003e bien definidos. La semántica correcta mejora la claridad del código y el mantenimiento.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eUsa la etiqueta table como contenedor principal.\u003c/li\u003e\\n\u003cli\u003eCrea una fila tr con th para los encabezados.\u003c/li\u003e\\n\u003cli\u003eEnvuelve los encabezados en thead.\u003c/li\u003e\\n\u003cli\u003eColoca el contenido en tbody con td.\u003c/li\u003e\\n\u003cli\u003eCierra con tfoot para el total o resumen.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etable\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ethead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etr\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eth\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eProducto\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eth\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"n"])</script><script>self.__next_f.push([1,"t\\\"\u003eth\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003ePrecio\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eth\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eth\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eCantidad\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eth\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etr\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ethead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etbody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etr\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eLaptop\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e45 USD\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e2\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etr\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etr\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMouse\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e12 USD\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e5\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etr\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etr\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eTeclado\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e10 USD\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e3\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etr\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etbody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etfoot\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etr\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eth\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eTotal\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eth\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eth\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ecolspan\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;2\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e67 USD\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eth\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etr\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etfoot\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etable\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch2\u003e¿Qué etiquetas y atributos usar en tablas?\u003c/h2\u003e\\n\u003cp\u003eLa estructura semántica divide el contenido en \u003cstrong\u003ethead, tbody y tfoot\u003c/strong\u003e. Las \u003cstrong\u003efilas\u003c/strong\u003e se crean con tr y, dentro de ellas, usas th"])</script><script>self.__next_f.push([1," para encabezados y td para datos. La tabla alinea columnas de forma automática y suele mostrar \u003cstrong\u003eseparadores por defecto\u003c/strong\u003e, lo que facilita la lectura incluso sin estilos.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo definir encabezados y filas?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eCrea una fila tr inicial para los encabezados.\u003c/li\u003e\\n\u003cli\u003eUsa th para marcar títulos como Producto, Precio y Cantidad.\u003c/li\u003e\\n\u003cli\u003eAñade más filas con tr para cada producto.\u003c/li\u003e\\n\u003cli\u003eInserta datos con td en el mismo orden de los encabezados.\u003c/li\u003e\\n\u003cli\u003eRecuerda: tr es la \u003cem\u003etable row\u003c/em\u003e, th es el \u003cem\u003etable head\u003c/em\u003e y td es la \u003cem\u003etable data\u003c/em\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo mostrar datos y totales con colspan?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eColoca el resumen en tfoot para separar visualmente el total.\u003c/li\u003e\\n\u003cli\u003eUsa th también en el pie para resaltar el total en \u003cstrong\u003enegritas\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eAplica el atributo colspan=\\\"2\\\" cuando una celda deba ocupar dos columnas.\u003c/li\u003e\\n\u003cli\u003eEjemplo: Total y 67 USD ocupando dos columnas para alinear con Precio y Cantidad.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Qué flujo práctico seguir al construir la tabla?\u003c/h2\u003e\\n\u003cp\u003eEmpieza por el contenedor table, suma thead con encabezados claros, agrega tbody con filas de datos reales y cierra con tfoot para el total. En el ejemplo, se cargan productos como Laptop, Mouse y Teclado, con precios en USD y cantidades que pueden considerarse \u003cem\u003estock\u003c/em\u003e disponible. Al avanzar, el navegador muestra alineación y separadores sin necesidad de estilos adicionales.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eDefine columnas primero: encabezados en thead.\u003c/li\u003e\\n\u003cli\u003eInserta filas en tbody con el mismo orden de columnas.\u003c/li\u003e\\n\u003cli\u003eCalcula y muestra el total en tfoot con colspan cuando corresponda.\u003c/li\u003e\\n\u003cli\u003eAprovecha la semántica para mantener el código claro y escalable.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003e¿Tienes dudas o quieres compartir tu ejemplo de tabla con thead, tbody, tfoot y colspan? Comenta y conversemos.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false}],\"quiz\":{\"id\":31715,\"active\":true,\"title\":\"quiz de Formularios y Tablas\"}},{\"id\":24623,\"title\":\"Contenido Multimedia\",\"materials\":[{\"id\":84738,\"title\":\"Imágenes responsivas con srcset y picture para mejor rendimiento\",\"url\":\"https://platzi.com/cursos/html/imagenes-responsivas-con-srcset-y-pictur/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1d96f77365b4cb2d588e_68dc1d96f77365b4cb2d58a2_140s.jpg\",\"duration\":1399,\"index\":13,\"content\":\"\u003cp\u003eOptimiza tus páginas con \u003cstrong\u003eimágenes responsivas\u003c/strong\u003e que cargan rápido, mantienen la \u003cstrong\u003eaccesibilidad\u003c/strong\u003e y mejoran la \u003cstrong\u003eexperiencia de usuario\u003c/strong\u003e. Aquí verás cómo usar img con srcset y sizes, cuándo elegir picture y cómo sumar atributos de \u003cstrong\u003erendimiento\u003c/strong\u003e como loading lazy y decoding async para un \u003cem\u003eresponsive design\u003c/em\u003e sólido.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo usar imágenes responsivas con img y srcset?\u003c/h2\u003e\\n\u003cp\u003eLa etiqueta img es la base para mostrar fotografías en la web. Con \u003cstrong\u003esrcset\u003c/strong\u003e indicas varias versiones por ancho y con \u003cstrong\u003esizes\u003c/strong\u003e describes cómo se mostrará según el \u003cem\u003eviewport\u003c/em\u003e. El \u003cstrong\u003enavegador decide\u003c/strong\u003e qué archivo descargar según el ancho disponible y tus reglas.\u003c/p\u003e\\n\u003ch3\u003e¿Qué rol cumplen src y alt en accesibilidad?\u003c/h3\u003e\\n\u003cp\u003eEl atributo src apunta al archivo, y \u003cstrong\u003ealt\u003c/strong\u003e ofrece una descripción breve si no carga o para lectores de pantalla.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eUsa descripciones claras y concisas.\u003c/li\u003e\\n\u003cli\u003eMejora la \u003cstrong\u003eaccesibilidad\u003c/strong\u003e y la comprensión del contenido.\u003c/li\u003e\\n\u003cli\u003eAporta contexto si la imagen falla.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo definir srcset por ancho?\u003c/h3\u003e\\n\u003cp\u003eEjemplo con variantes de un hero pensado para \u003cem\u003emobile\u003c/em\u003e, \u003cem\u003etablet\u003c/em\u003e y \u003cem\u003edesktop\u003c/em\u003e:\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/hero-400.jpg\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Vista pan"])</script><script>self.__next_f.push([1,"orámica\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003esrcset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;\u003c/span\u003e\\n\u003cspan class=\\\"s\\\"\u003e img/hero-400.jpg 400w,\u003c/span\u003e\\n\u003cspan class=\\\"s\\\"\u003e img/hero-800.jpg 800w,\u003c/span\u003e\\n\u003cspan class=\\\"s\\\"\u003e img/hero-1200.jpg 1200w\u003c/span\u003e\\n\u003cspan class=\\\"s\\\"\u003e \u0026quot;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e400w, 800w, 1200w: anchos reales de cada archivo.\u003c/li\u003e\\n\u003cli\u003eEl navegador elige la más adecuada según el ancho disponible.\u003c/li\u003e\\n\u003cli\u003eBeneficio: \u003cstrong\u003emejor calidad con menor peso\u003c/strong\u003e en cada dispositivo.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo controlar el tamaño con sizes?\u003c/h3\u003e\\n\u003cp\u003eDescribe el espacio que ocupará la imagen según el ancho de pantalla. Ejemplo: 100 % hasta 600 px; luego 50 %.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/hero-400.jpg\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Vista panorámica\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003esrcset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;\u003c/span\u003e\\n\u003cspan class=\\\"s\\\"\u003e img/hero-400.jpg 400w,\u003c/span\u003e\\n\u003cspan class=\\\"s\\\"\u003e img/hero-800.jpg 800w,\u003c/span\u003e\\n\u003cspan class=\\\"s\\\"\u003e img/hero-1200.jpg 1200w\u003c/span\u003e\\n\u003cspan class=\\\"s\\\"\u003e \u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003esizes\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;(max-width: 600px) 100vw, 50vw\u0026quot;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e(max-width: 600px) 100vw: ocupa todo el ancho del \u003cem\u003eviewport\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003e50vw: a partir de 600 px, usa la mitad del \u003cem\u003eviewport\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003eBeneficio: \u003cstrong\u003edescargas más precisas\u003c/strong\u003e según el diseño efectivo.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cuándo aplicar picture y source con media queries?\u003c/h2\u003e\\n\u003cp\u003eCuando necesitas \u003cstrong\u003earchivos distintos por dispositivo\u003c/strong\u003e con reglas claras, usa picture con source y media. Define una imagen para \u003cem\u003edesktop/laptop\u003c/em\u003e, otra para \u003cem\u003etablet\u003c/em\u003e y una por defecto para \u003cem\u003emobile\u003c/em\u003e dentro de img.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo escribir reglas media para desktop y tablet?\u003c/h3\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003epicture\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esource\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003emedia\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;(min-width: 768px)\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrcset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/banner-desktop.jpg\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esource\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003emedia\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;(min-width: 480px)\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrcset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/banner-tablet-600x300.jpg\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/banner-mobile.jpg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Paisajes naturales\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003epicture\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e(min-width: 768px): carga la versión de \u003cstrong\u003edesktop/laptop\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003e(min-width: 480px): prioriza la versión \u003cstrong\u003etablet\u003c/strong\u003e si no se cumple la primera.\u003c/li\u003e\\n\u003cli\u003eFallback img: versión \u003cstrong\u003emobile\u003c/strong\u003e por defecto.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué imagen cargar por defecto en mobile?\u003c/h3\u003e\\n\u003cp\u003eDentro de picture, la etiqueta img es el \u003cstrong\u003efallback\u003c/strong\u003e. Coloca ahí la versión más ligera para \u003cem\u003emobile\u003c/em\u003e y agrega alt descriptivo.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eEn móviles, se usa la imagen por defecto.\u003c/li\u003e\\n\u003cli\u003eAl crecer el ancho, se activan los source según media.\u003c/li\u003e\\n\u003cli\u003eBeneficio: \u003cstrong\u003econtrol explícito\u003c"])</script><script>self.__next_f.push([1,"/strong\u003e por dispositivo.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Qué atributos mejoran el rendimiento de imágenes?\u003c/h2\u003e\\n\u003cp\u003eAjusta la descarga y el procesamiento para mejorar la \u003cstrong\u003evelocidad\u003c/strong\u003e y la \u003cstrong\u003efluidez\u003c/strong\u003e. loading y decoding ayudan a evitar bloqueos; width y height evitan saltos de diseño.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo funcionan loading lazy y decoding async?\u003c/h3\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/producto-600.jpg\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Producto destacado\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003esrcset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/producto-300.jpg 300w, img/producto-600.jpg 600w\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003esizes\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;(max-width: 600px) 100vw, 600px\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eloading\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;lazy\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003edecoding\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;async\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003ewidth\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;600\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eheight\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;400\u0026quot;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eloading=\\\"lazy\\\": descarga \u003cstrong\u003esolo cuando te acercas\u003c/strong\u003e al elemento al hacer scroll.\u003c/li\u003e\\n\u003cli\u003edecoding=\\\"async\\\": \u003cstrong\u003eprocesa sin bloquear\u003c/strong\u003e el renderizado, manteniendo la página fluida.\u003c/li\u003e\\n\u003cli\u003eClave: mejora de \u003cstrong\u003eperformance\u003c/strong\u003e y percepción de velocidad.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Por qué definir width y height?\u003c/h3\u003e\\n\u003cp\u003eEstablecer dimensiones evita cambios de layout inesperados mientras las imágenes cargan.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003ewidth y height reservan espacio exacto.\u003c/li\u003e\\n\u003cli\u003eMenos reflujo y mejor \u003cstrong\u003eexperiencia de usuario\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eCoherencia en diseños \u003cem\u003eresponsive\u003c/em\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003eHabilidades y conceptos que pones en práctica:\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eConfigurar img con src, alt, srcset y sizes.\u003c/li\u003e\\n\u003cli\u003eUsar picture y source con media para \u003cem\u003edesktop\u003c/em\u003e, \u003cem\u003etablet\u003c/em\u003e y \u003cem\u003emobile\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003eAplicar loading lazy y decoding async para mejor \u003cstrong\u003erendimiento\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eDiseñar reglas por ancho real del dispositivo y del \u003cem\u003eviewport\u003c/em\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003e¿Te gustaría ver un ejemplo con tus propias imágenes y breakpoints? Cuéntame tu caso en los comentarios y lo afinamos juntos.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false},{\"id\":84739,\"title\":\"Integración de video y audio en HTML5 con controles y compatibilidad\",\"url\":\"https://platzi.com/cursos/html/integracion-de-video-y-audio-en-html5-co/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1e3c24246306a24ffbc8_68dc1e3c24246306a24ffbdc_105s.jpg\",\"duration\":1054,\"index\":14,\"content\":\"\u003cp\u003eAprende a integrar videos y audios en HTML5 con buenas prácticas, accesibilidad y rendimiento. Aquí verás cómo usar etiquetas, atributos clave y compatibilidad de formatos para que tus usuarios disfruten una experiencia fluida y confiable.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo insertar videos HTML5 con controles y dimensiones?\u003c/h2\u003e\\n\u003cp\u003ePara empezar, la etiqueta \u003cvideo\u003e carga un archivo con el atributo src. Sin embargo, sin más atributos el video no tiene controles ni tamaño manejable. Agrega controles y dimensiones con los atributos adecuados.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- Variante sencilla --\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003evideo\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;multimedia/video.mp4\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtrols\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ewidth\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;600\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eheight\u003c/span\u003e\u003cspan class=\\\"o\\\""])</script><script>self.__next_f.push([1,"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;400\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003evideo\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eUsa el atributo \u003cstrong\u003econtrols\u003c/strong\u003e para mostrar el reproductor con play, pausa y barra de progreso.\u003c/li\u003e\\n\u003cli\u003eDefine \u003cstrong\u003ewidth\u003c/strong\u003e y \u003cstrong\u003eheight\u003c/strong\u003e para un tamaño manejable.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003ePara mejorar la carga y la percepción del usuario, utiliza \u003cstrong\u003eposter\u003c/strong\u003e y \u003cstrong\u003epreload\u003c/strong\u003e:\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003evideo\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtrols\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ewidth\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;600\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eheight\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;400\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eposter\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;IMG/banner.jpg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003epreload\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;metadata\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esource\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;multimedia/video.mp4\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;video/mp4\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esource\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;multimedia/video.mov\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;video/mov\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n Tu navegador no soporta formatos de video.\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003evideo\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003eposter\u003c/strong\u003e: muestra una imagen previa mientras carga el video; mejora el rendimiento y la percepción de \u003cem\u003eperformance\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003epreload\u003c/strong\u003e: controla la precarga. Valores útiles: none (no carga nada), metadata (duración y dimensiones, aprox. 300 KB), auto (carga todo o lo posible antes del play).\u003c/li\u003e\\n\u003cli\u003eTexto por defecto: si ningún formato es soportado, aparece un mensaje claro para el usuario.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué formatos y etiquetas usar para compatibilidad?\u003c/h3\u003e\\n\u003cp\u003eNo todos los navegadores soportan lo mismo. \u003cstrong\u003eMP4\u003c/strong\u003e tiene amplio soporte; \u003cstrong\u003eMOV\u003c/strong\u003e no en todos; \u003cstrong\u003eWebM\u003c/strong\u003e suele estar bien soportado. La estrategia es delegar al navegador con múltiples \u003csource\u003e y \u003cstrong\u003etype\u003c/strong\u003e correcto.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eUsa \u003cstrong\u003e\u003csource\u003e\u003c/strong\u003e dentro de \u003cvideo\u003e para listar alternativas.\u003c/li\u003e\\n\u003cli\u003eEspecifica \u003cstrong\u003etype\u003c/strong\u003e como video/mp4, video/mov, etc., para que el navegador elija.\u003c/li\u003e\\n\u003cli\u003eSi no hay soporte, muestra un mensaje estándar en el contenido del \u003cvideo\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo reproducir audio con controles y múltiples formatos?\u003c/h2\u003e\\n\u003cp\u003eLa etiqueta \u003caudio\u003e funciona de forma similar a \u003cvideo\u003e. Sin controles, el audio puede no ser visible (por estilos como display: none). Agrega \u003cstrong\u003econtrols\u003c/strong\u003e para mostrar el reproductor y usa \u003cstrong\u003epreload\u003c/strong\u003e según necesidad de datos.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eaudio\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtrols\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003epreload\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;none\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esource\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;multimedia/audio.mp3\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;audio/mpeg\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n Tu navegador no soporta audio HTML5.\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eaudio\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003econtrols\u003c/strong\u003e: hace visibl"])</script><script>self.__next_f.push([1,"e y usable el reproductor.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003epreload\u003c/strong\u003e: none para ahorrar datos móviles; auto para mejorar la sensación de carga.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003etype\u003c/strong\u003e en audio: para MP3 usa audio/mpeg.\u003c/li\u003e\\n\u003cli\u003eIgual que en video, puedes listar varios \u003csource\u003e (por ejemplo, OGG, MPG) para mayor compatibilidad.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo cuidar la experiencia del usuario y el rendimiento?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eDefine tamaño con \u003cstrong\u003ewidth\u003c/strong\u003e y \u003cstrong\u003eheight\u003c/strong\u003e para evitar saltos de diseño.\u003c/li\u003e\\n\u003cli\u003eMuestra \u003cstrong\u003eposter\u003c/strong\u003e para anticipar contenido y evitar pantallas en blanco.\u003c/li\u003e\\n\u003cli\u003eAjusta \u003cstrong\u003epreload\u003c/strong\u003e a tu contexto: none si quieres ahorrar datos; metadata como equilibrio; auto si necesitas inicios más rápidos.\u003c/li\u003e\\n\u003cli\u003eIncluye mensajes de fallback para accesibilidad y claridad.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo embeber videos de YouTube con \u003cem\u003eiframe\u003c/em\u003e y parámetros útiles?\u003c/h2\u003e\\n\u003cp\u003eYouTube ofrece un código de insertar desde Compartir \u0026gt; Embeber. Ese \u003cem\u003eiframe\u003c/em\u003e trae atributos clave para accesibilidad y control del reproductor. Puedes indicar el segundo de inicio con el parámetro \u003cem\u003estart\u003c/em\u003e.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eiframe\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;https://www.youtube.com/embed/VIDEO_ID?start=60\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Título descriptivo del video\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eframeborder\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;0\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eallow\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;autoplay; accelerometer\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eallowfullscreen\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eiframe\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003estart\u003c/strong\u003e: define el segundo inicial de reproducción (por ejemplo, 60).\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003etitle\u003c/strong\u003e: mejora accesibilidad y SEO; es lo que leen los lectores de pantalla.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eframeborder\u003c/strong\u003e: evita el borde del marco.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eallow\u003c/strong\u003e: habilita capacidades como \u003cem\u003eautoplay\u003c/em\u003e o acelerómetro en orientación.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eallowfullscreen\u003c/strong\u003e: permite ver en pantalla completa.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué buenas prácticas conviene aplicar?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eOfrece varias fuentes con \u003cstrong\u003e\u003csource\u003e\u003c/strong\u003e y \u003cstrong\u003etype\u003c/strong\u003e correcto para video y audio.\u003c/li\u003e\\n\u003cli\u003eAgrega \u003cstrong\u003econtrols\u003c/strong\u003e siempre para usabilidad y accesibilidad.\u003c/li\u003e\\n\u003cli\u003eProporciona texto alternativo dentro de \u003cvideo\u003e/\u003caudio\u003e cuando no hay soporte.\u003c/li\u003e\\n\u003cli\u003eAjusta \u003cstrong\u003epreload\u003c/strong\u003e según el contexto y plan de datos de tu audiencia.\u003c/li\u003e\\n\u003cli\u003eUsa \u003cstrong\u003eposter\u003c/strong\u003e para mejorar la percepción visual y tiempos de espera.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003e¿Tienes dudas sobre \u003cem\u003eiframe\u003c/em\u003e, \u003cem\u003epreload\u003c/em\u003e o formatos como MP4, MOV u OGG? Comparte tu pregunta y cuéntame qué caso de uso quieres resolver.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false}],\"quiz\":{\"id\":31716,\"active\":true,\"title\":\"quiz de Contenido Multimedia\"}},{\"id\":24624,\"title\":\"Accesibilidad Web Y SEO\",\"materials\":[{\"id\":84740,\"title\":\"Atributos ARIA para accesibilidad web con lectores de pantalla\",\"url\":\"https://platzi.com/cursos/html/atributos-aria-para-accesibilidad-web-co/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1e343e36d605d0ac2162_68dc1e343e36d605d0ac2176_81s.jpg\",\"duration\":805,\"index\":15,\"content\":\"\u003cp\u003eLa accesibilidad web comienza con \u003cstrong\u003eHTML semántico\u003c/strong\u003e y se potencia con \u003cstrong\u003eatributos \u003cem\u003eARIA\u003c/em\u003e\u003c/strong\u003e. Aprender a describir acciones, roles y mensajes para \u003cstrong\u003electores de pantalla\u003c/strong\u003e transforma la experiencia de usuarios y hace tu interfaz más clara. Aquí verás cómo usar aria-label, aria-describedby y role tal como se muestra en ejemplos práct"])</script><script>self.__next_f.push([1,"icos.\u003c/p\u003e\\n\u003ch2\u003e¿Qué es ARIA y por qué importa en accesibilidad web?\u003c/h2\u003e\\n\u003cp\u003e\u003cem\u003eARIA\u003c/em\u003e proviene de \u003cem\u003eAccessibility Rich Internet Application\u003c/em\u003e y añade atributos a las etiquetas para \u003cstrong\u003edar contexto adicional\u003c/strong\u003e que HTML por sí solo no ofrece. Un lector de pantalla entiende mejor qué es cada elemento y qué acción o descripción comunicar al usuario.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003eHTML semántico primero.\u003c/strong\u003e Proporciona una base sólida para la lectura y estructura.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eARIA como capa extra.\u003c/strong\u003e Aporta descripciones, propósitos y roles cuando la semántica no alcanza.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eMejora la comprensión.\u003c/strong\u003e Indica qué hacer y dónde moverse en la interfaz.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo aplicar aria-label, aria-describedby y role en casos reales?\u003c/h2\u003e\\n\u003cp\u003eA partir de ejemplos sencillos, se muestran patrones útiles que puedes replicar tal cual. La habilidad clave: \u003cstrong\u003eelegir el atributo adecuado\u003c/strong\u003e según si necesitas propósito, descripción o rol.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo clarificar acciones en botones y navegación?\u003c/h3\u003e\\n\u003cp\u003eCuando el icono o texto no explican la acción, usa aria-label para explicitar el propósito.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eBotón de cierre con “X”. La X no dice “cerrar”, el atributo sí.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebutton\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;cerrar ventana\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eX\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebutton\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eNavegación sin título visible. Si hay varias barras de menú, nómbralas.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Menú principal\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eInicio\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/productos\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eProductos\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eClaves prácticas:\\n- Usa aria-label cuando necesites una \u003cstrong\u003edescripción breve del propósito\u003c/strong\u003e.\\n- Mantén los textos \u003cstrong\u003eclaros y específicos\u003c/strong\u003e.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo describir formularios y campos de búsqueda?\u003c/h3\u003e\\n\u003cp\u003eEn inputs, aria-label y aria-describedby orientan acción e instrucciones.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eBuscador con propósito explícito.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;search\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Buscador de productos\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eContraseña con reglas de formato. El texto de ayuda se asocia mediante aria-describedby.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;password\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eContraseña\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;password\u0026quot;\u003c/span\u003e \u003cspan class=\\\""])</script><script>self.__next_f.push([1,"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;password\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-describedby\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;password-help\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esmall\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;password-help\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMínimo ocho caracteres, incluyen números y letras.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esmall\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eClaves prácticas:\\n- aria-label: describe \u003cstrong\u003equé hace\u003c/strong\u003e el campo.\\n- aria-describedby: enlaza \u003cstrong\u003einstrucciones o ayudas\u003c/strong\u003e ya visibles en el DOM.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo enriquecer imágenes y contenedores sin semántica?\u003c/h3\u003e\\n\u003cp\u003eCuando el alt se queda corto, complementa con aria-describedby. Y si usas contenedores genéricos, define roles.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eImagen con descripción extendida.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;grafica.png\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Ventas 2024\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-describedby\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;grafica-descripcion\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;grafica-descripcion\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eLas ventas aumentaron un 40 % en el Q1.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eContenedor comodín con roles semánticos.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erole\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;main\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh3\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eSección principal\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh3\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eContenido del área principal.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erole\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;alert\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eEste es un mensaje de alerta.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eClaves prácticas:\\n- alt: breve y directo; aria-describedby: \u003cstrong\u003edetalle adicional\u003c/strong\u003e cuando hace falta.\\n- role: aporta \u003cstrong\u003esemántica\u003c/strong\u003e a divs cuando no puedes usar etiquetas como header o nav.\u003c/p\u003e\\n\u003ch2\u003e¿Qué buenas prácticas y próximos pasos se recomiendan?\u003c/h2\u003e\\n\u003cp\u003eLa prioridad es que todas las personas comprendan la interfaz y sus acciones. ARIA es amplio y hay más atributos que pueden ser útiles según el caso.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eConstruye con \u003cstrong\u003eHTML semántico\u003c/strong\u003e y añade \u003cem\u003eARIA\u003c/em\u003e solo para cubrir vacíos.\u003c/li\u003e\\n\u003cli\u003eEmplea aria-label para \u003cstrong\u003epropósito corto\u003c/strong\u003e y aria-describedby para \u003cstrong\u003einstrucciones\u003c/strong\u003e existentes.\u003c/li\u003e\\n\u003cli\u003eUsa role para \u003cstrong\u003edefinir el contexto\u003c/strong\u003e en contenedores genéricos.\u003c/li\u003e\\n\u003cli\u003eConsulta recursos para \u003cstrong\u003eprofundizar en otros atributos de ARIA\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eRecuerda: \u003cstrong\u003eaccesibilidad es para todos\u003c/strong\u003e y es una"])</script><script>self.__next_f.push([1," buena práctica esencial.\u003c/li\u003e\\n\u003cli\u003ePróximo tema: \u003cstrong\u003ebuenas prácticas y SEO\u003c/strong\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003e¿Te quedó alguna duda o quieres compartir cómo aplicarías estos atributos en tu proyecto? Escribe en los comentarios y continuemos la conversación.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false},{\"id\":84741,\"title\":\"Estructura semántica y meta tags para mejorar posicionamiento web\",\"url\":\"https://platzi.com/cursos/html/estructura-semantica-y-meta-tags-para-me/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1e36af2b38b3b2b5a38c_68dc1e36af2b38b3b2b5a3a0_95s.jpg\",\"duration\":949,\"index\":16,\"content\":\"\u003cp\u003eSEO bien aplicado impulsa el alcance orgánico de un sitio sin pagar anuncios. Aquí verás cómo combinar \u003cstrong\u003esemántica HTML\u003c/strong\u003e, \u003cstrong\u003eaccesibilidad\u003c/strong\u003e, \u003cstrong\u003emeta tags\u003c/strong\u003e, estructura clara y optimización de medios para lograr una mejor calificación en buscadores. No es un código único: son prácticas y estrategias coherentes que trabajan juntas.\u003c/p\u003e\\n\u003ch2\u003e¿Qué es SEO y cómo ayuda a crecer de forma orgánica?\u003c/h2\u003e\\n\u003cp\u003eSEO permite que los buscadores muestren tu contenido sin pago directo. Funciona cuando aplicas un \u003cstrong\u003econjunto de buenas prácticas\u003c/strong\u003e: semántica, accesibilidad, estructura correcta y optimización de recursos. Es dinámico y evoluciona; en la era de la AI, las reglas cambian, por lo que conviene mantenerse al día.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eEnfoque: llegar a más gente de forma orgánica.\u003c/li\u003e\\n\u003cli\u003eClave: una sola estrategia no basta; suma prácticas consistentes.\u003c/li\u003e\\n\u003cli\u003eEfecto: mejor calificación en buscadores y mayor visibilidad.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Por qué la semántica y la accesibilidad influyen en SEO?\u003c/h3\u003e\\n\u003cp\u003ePorque ayudan a los buscadores y a los lectores de pantalla a entender la página. Un HTML semántico claro, con roles y \u003cem\u003eARIA labels\u003c/em\u003e, mejora la interpretación del contenido y la experiencia de todos.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo optimizar el head con meta tags, título y \u003cem\u003eOpen Graph\u003c/em\u003e?\u003c/h2\u003e\\n\u003cp\u003eEl head define idioma, codificación, \u003cem\u003emobile first\u003c/em\u003e, título y metadatos que los buscadores y redes sociales usan para indexar y previsualizar tu sitio.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eIdioma con lang: indica el lenguaje principal del documento.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehtml\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003elang\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;es\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eCodificación con charset UTF-8: muestra bien caracteres en español.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003echarset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;UTF-8\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\u003cem\u003eViewport\u003c/em\u003e para \u003cem\u003emobile first\u003c/em\u003e: crítico en móviles y calificación SEO.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;viewport\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;width=device-width, initial-scale=1.0\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eTítulo optimizado: 50–60 caracteres, con palabras clave y único por página.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eGuía de SEO: semántica, accesibilidad y rendimiento\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eMeta description: texto que aparece bajo el título en Google; debe reflejar el contenido real.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan clas"])</script><script>self.__next_f.push([1,"s=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;description\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Buenas prácticas de SEO con HTML semántico, accesibilidad y optimización para mejorar el posicionamiento orgánico.\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eMeta keywords: hoy tiene menos peso, pero puede incluirse.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;keywords\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;SEO, HTML semántico, accesibilidad, meta tags\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eAutor: atribuye el contenido a una persona o empresa.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;author\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Tu Empresa\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\u003cem\u003eRobots\u003c/em\u003e: indica a las arañas cómo tratar la página: \u003cem\u003eindex\u003c/em\u003e, \u003cem\u003efollow\u003c/em\u003e, \u003cem\u003enoindex\u003c/em\u003e, \u003cem\u003e\u003c/em\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;robots\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;index, follow\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eCanonical: evita contenido duplicado indicando la URL original.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elink\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erel\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;canonical\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;https://ejemplo.com/\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\u003cem\u003eOpen Graph\u003c/em\u003e para redes sociales: control de título, descripción, imagen y URL compartida.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eproperty\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;og:title\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Guía práctica de SEO en HTML\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eproperty\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;og:description\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Semántica, accesibilidad y meta tags para posicionar.\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eproperty\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;og:image\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;https://ejemplo.com/og-image.jpg\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eproperty\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;og:url\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;https://ejemplo.com/\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eFavicon: refuerza la identidad visual en pestañas y dispositivos.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elink\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erel\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s"])</script><script>self.__next_f.push([1,"\\\"\u003e\u0026quot;icon\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/favicon.ico\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;image/x-icon\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch2\u003e¿Qué estructura semántica y accesible mejora tu calificación?\u003c/h2\u003e\\n\u003cp\u003eOrganiza el body con secciones claras, una jerarquía de encabezados correcta y enlaces descriptivos. Optimiza imágenes y videos para rendimiento y experiencia.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eHeader con logotipo enlazando al \u003cem\u003ehome\u003c/em\u003e y aria-label descriptivo.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eheader\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Ir al inicio\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/logo.svg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Logotipo de la empresa\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ewidth\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;120\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eheight\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;40\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eheader\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eNavegación principal con nav y aria-label.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Navegación principal\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eul\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#inicio\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eInicio\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#servicios\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eServicios\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#productos\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eProductos\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#sobre-nosotros\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eSobre nosotros\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#blog\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026"])</script><script>self.__next_f.push([1,"gt;\u003c/span\u003eBlog\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#contacto\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eContacto\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eul\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eMain con un único H1 por página: regla de oro; H2/H3 para secciones.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emain\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh1\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eSEO con HTML semántico y accesible\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh1\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003earticle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh2\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eBuenas prácticas de estructura\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh2\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eContenido introductorio.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003earticle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eImágenes optimizadas con alt, dimensiones y carga diferida.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/img/ejemplo.webp\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Descripción de la imagen\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ewidth\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;800\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eheight\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;500\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eloading\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;lazy\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eEnlaces internos descriptivos: evita “page” o “info”; explica el destino.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/guia-completa-seo\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eGuía completa de SEO en HTML\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\\n\u003cp\u003eListas para agrupar puntos clave de forma clara.\u003c/p\u003e\\n\u003c/li\u003e\\n\u003cli\u003e\\n\u003cp\u003eVideo con múltiples formatos y atributos que mejoran rendimiento.\u003c/p\u003e\\n\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003evideo\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtrols\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003epreload\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;metadata\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ewidth\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;800\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esource\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/video/ejemplo.webm\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;video/webm\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esource\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003csp"])</script><script>self.__next_f.push([1,"an class=\\\"s\\\"\u003e\u0026quot;/video/ejemplo.mp4\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;video/mp4\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n Tu navegador no soporta el elemento video.\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003evideo\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eAside para contenido secundario, no principal.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003easide\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh2\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eContenido relacionado\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh2\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eul\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/mejores-practicas\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMejores prácticas\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eul\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003easide\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eFooter con navegaciones adicionales y aria-label específico (por ejemplo, “Enlaces del pie” y “Redes sociales”).\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efooter\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Enlaces del pie\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e…\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Redes sociales\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e…\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efooter\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eHabilidades y conceptos aplicados: definición de SEO y alcance orgánico; HTML semántico con header, nav, main, article, section, aside y footer; uso correcto de H1 único; accesibilidad con \u003cem\u003eARIA labels\u003c/em\u003e; meta tags clave (lang, charset UTF-8, viewport, title, description, keywords con menor peso, author, robots, canonical); \u003cem\u003eOpen Graph\u003c/em\u003e para compartir en redes; favicons; optimización de imágenes con alt, dimensiones y \u003cem\u003elazy loading\u003c/em\u003e; enlaces internos descriptivos; videos con múltiples formatos. Todo suma para mejorar la calificación y el posicionamiento.\u003c/p\u003e\\n\u003cp\u003e¿Tienes dudas o un caso real que quieras optimizar? Coméntalo y afinamos juntos tu implementación.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false}],\"quiz\":{\"id\":31717,\"active\":true,\"title\":\"quiz de Accesibilidad Web Y SEO\"}},{\"id\":24625,\"title\":\"Proyecto final\",\"materials\":[{\"id\":84742,\"title\":\"Portafolio profesional con HTML semántico y SEO\",\"url\":\"https://platzi.com/cursos/html/portafolio-profesional-con-html-semantic/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1e33cfc42806e7b9a76d_68dc1e33cfc42806e7b9a781_48s.jpg\",\"duration\":481,\"index\":17,\"content\":\"\u003cp\u003eConstruye un portafolio profesional con \u003cstrong\u003eHTML semántico\u003c/strong\u003e, \u003cstrong\u003eaccesibilidad con ARIA\u003c/strong\u003e y \u003cstrong\u003eSEO\u003c/strong\u003e listo para compartir cuando busques trabajo. La guía resume cómo organizar la estructura, los metadatos y la navegación para presentar proyectos, descargar tu CV y optimizar tu presencia en redes sociales.\u003c/p\u003e\\n\u003ch2\u003e"])</script><script>self.__next_f.push([1,"¿Qué incluye el proyecto final de portafolio HTML semántico y SEO?\u003c/h2\u003e\\n\u003cp\u003eEste proyecto es tu \u003cstrong\u003eperfil personal\u003c/strong\u003e: una página estática con secciones claras, navegación accesible y metadatos bien configurados. La idea es personalizarlo con tu contenido, no solo copiar y pegar.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003eDatos esenciales\u003c/strong\u003e en el head: título, descripción y codificación.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eSEO básico\u003c/strong\u003e: metadatos y estructura semántica comprensible por buscadores.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003e“Orphan graphs” para redes sociales\u003c/strong\u003e y graphs para Twitter, hoy aún llamado Twitter.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eURLs canónicas\u003c/strong\u003e para evitar contenido duplicado.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eFavicons\u003c/strong\u003e para identidad visual en pestañas y dispositivos.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué metadatos SEO, canonical y favicons configurar?\u003c/h3\u003e\\n\u003cp\u003eConfigura atributos mínimos en el head para buscadores y navegadores.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003echarset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;utf-8\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMi perfil personal\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;description\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Portafolio de proyectos y experiencia.\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elink\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erel\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;canonical\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;https://midominio.com/\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elink\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erel\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;icon\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/favicon.ico\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esizes\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;any\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elink\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erel\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;icon\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/icon.svg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;image/svg+xml\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elink\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erel\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;apple-touch-icon\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/apple-touch-icon.png\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch3\u003e¿Cómo añadir graphs para redes sociales y Twitter?\u003c/h3\u003e\\n\u003cp\u003eIncluye metadatos para compartir correctamente en redes y en Twitter.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- graphs para redes sociales --\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eproperty\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;og:title\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Mi portafolio\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eproperty\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;og:description\u0026quot;\u003c/span\u003e \u003cspan c"])</script><script>self.__next_f.push([1,"lass=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Proyectos destacados y experiencia.\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eproperty\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;og:image\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;https://midominio.com/cover.jpg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eproperty\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;og:url\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;https://midominio.com/\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\\n\u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- graphs para Twitter --\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;twitter:card\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;summary_large_image\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;twitter:title\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Mi portafolio\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;twitter:description\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Proyectos y CV para descarga.\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;twitter:image\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;https://midominio.com/cover.jpg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch2\u003e¿Cómo estructurar el header, navegación y CTA con ARIA?\u003c/h2\u003e\\n\u003cp\u003eEl \u003cem\u003eheader\u003c/em\u003e superior integra logotipo/ícono, tu nombre y el título de la página (por ejemplo, “Mi portafolio”). La \u003cstrong\u003enavegación principal\u003c/strong\u003e usa ARIA para mejorar la accesibilidad con lectores de software. Incluye \u003cstrong\u003eacciones rápidas\u003c/strong\u003e como la descarga de tu CV.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo usar el atributo download y aria-label en enlaces?\u003c/h3\u003e\\n\u003cp\u003ePermite que el CV se descargue directo con un enlace accesible.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Navegación principal\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/docs/CV.pdf\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003edownload\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Descarga el CV en PDF\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eDescargar CV\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch3\u003e¿Cómo preparar un selector de idioma con JavaScript?\u003c/h3\u003e\\n\u003cp\u003eEl selector se maqueta ahora y se habilita después con \u003cem\u003eJavaScript\u003c/em\u003e para traducir contenido.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;lang\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Cambiar idioma\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eIdioma\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/s"])</script><script>self.__next_f.push([1,"pan\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eselect\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;lang\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;lang\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-controls\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;contenido\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eoption\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003evalue\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;es\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eEspañol\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eoption\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eoption\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003evalue\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;en\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eEnglish\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eoption\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eselect\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch2\u003e¿Cómo organizar el main, hero y enlaces internos en una landing?\u003c/h2\u003e\\n\u003cp\u003eEl contenido principal vive en el elemento semántico \u003cstrong\u003emain\u003c/strong\u003e. El \u003cem\u003ehero\u003c/em\u003e presenta mensajes y \u003cem\u003ecall to action\u003c/em\u003e. Además, puedes mover al usuario a secciones específicas de la misma \u003cem\u003elanding\u003c/em\u003e usando IDs en enlaces.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo enlazar secciones con IDs en una landing?\u003c/h3\u003e\\n\u003cp\u003eCrea anclas internas que desplacen a áreas como “Proyectos destacados”.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emain\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erole\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;main\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esection\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Hero\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#proyectos-destacados\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eVer mis proyectos\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esection\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esection\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;proyectos-destacados\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Proyectos destacados\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- Tarjetas de proyectos --\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esection\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emain\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eUsa el atributo id en la sección destino.\u003c/li\u003e\\n\u003cli\u003eEnlaza con href=\\\"#id\\\" para el desplazamiento interno.\u003c/li\u003e\\n\u003cli\u003eMantén los CTA claros y descriptivos.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo usar div como comodines y roles semánticos?\u003c/h3\u003e\\n\u003cp\u003eCuando no exista una etiqueta específica, usa div como contenedor y agrega roles o ARIA si aporta claridad.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esection\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Estadísticas rápidas\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erole\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;group\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Logros\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e+10 proyectos.\u003cspan class=\\"])</script><script>self.__next_f.push([1,"\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e3 productos lanzados.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esection\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch3\u003e¿Cómo optimizar imágenes con picture, source y figure?\u003c/h3\u003e\\n\u003cp\u003eSirve imágenes por formato y tamaño, con texto alternativo y un pie explicativo.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efigure\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003epicture\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esource\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;image/avif\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrcset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/img/desk.avif\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esource\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;image/webp\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrcset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/img/desk.webp\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/img/desk.jpg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Diego De Granda en su espacio de trabajo\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003epicture\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efigcaption\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003etitle caption: foto en el espacio de trabajo.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efigcaption\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efigure\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eUsa figure y figcaption para contexto visual.\u003c/li\u003e\\n\u003cli\u003eEmplea picture y source para formatos modernos.\u003c/li\u003e\\n\u003cli\u003eDefine alt descriptivo y conciso.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo presentar “Sobre mí”, valores y enlaces?\u003c/h3\u003e\\n\u003cp\u003eOrganiza un section con H2 y subsecciones con H3 para valores, citas y una tabla simple.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eIncluye texto y quotes para tu voz personal.\u003c/li\u003e\\n\u003cli\u003eAñade enlaces externos a más información.\u003c/li\u003e\\n\u003cli\u003eMantén la jerarquía: H2 para secciones, H3 para detalles.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003ePor último, agrega estilos con \u003cstrong\u003eCSS\u003c/strong\u003e cuando termines la estructura. Será una \u003cstrong\u003epágina estática\u003c/strong\u003e lista para compartir; no requiere interacción para mostrar tu información, imágenes y texto. Es una \u003cstrong\u003ebase completa\u003c/strong\u003e con HTML semántico, accesible y con un porcentaje de \u003cstrong\u003eSEO\u003c/strong\u003e que facilita que la gente llegue a tu contenido. Como nota inspiradora: Diego De Granda comparte que tiene más de quince años en desarrollo de software y producto, y en años recientes ha trabajado en productos base con inteligencia artificial.\u003c/p\u003e\\n\u003cp\u003e¿Tienes dudas o quieres mostrar tu versión personalizada? Deja un comentario y comparte tu portafolio.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false}],\"quiz\":null}],\"exam\":{\"id\":31705,\"active\":true,\"title\":\"Examen de Curso de HTML\",\"shash\":\"f79cc03a-2159-4139-9713-99b912444819\",\"url\":\"/clases/examen/f79cc03a-2159-4139-9713-99b912444819/examen_usuario/\"},\"private\":false},\"concepts\":[{\"id\":24620,\"title\":\"Fundamentos de HTML\",\"materials\":[{\"id\":84744,\"title\":\"Maquetación web con HTML semántico y accesible\",\"url\":\"https://platzi.com/cursos/html/maquetacion-web-con-html-semantico-y-acc/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mds"])</script><script>self.__next_f.push([1,"trm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc33f5fa4df65bc2b717cb_68dc33f5fa4df65bc2b717df_4s.jpg\",\"duration\":38,\"index\":1,\"content\":\"\u003cp\u003eAprende a construir páginas web desde cero con \u003cstrong\u003eHTML\u003c/strong\u003e, enfocándote en \u003cstrong\u003emaquetación semántica\u003c/strong\u003e, \u003cstrong\u003eaccesible\u003c/strong\u003e y con \u003cstrong\u003ebuenas prácticas para SEO\u003c/strong\u003e. Terminarás con el \u003cstrong\u003ecódigo base\u003c/strong\u003e de tu primer \u003cstrong\u003eportafolio profesional\u003c/strong\u003e, sin necesitar conocimientos de programación, solo ganas de iniciar tu camino como \u003cem\u003efrontend\u003c/em\u003e. Acompaña a \u003cstrong\u003eDiego de Granda\u003c/strong\u003e, profesional con \u003cstrong\u003emás de 15 años\u003c/strong\u003e en la industria de \u003cem\u003esoftware\u003c/em\u003e y desarrollo de producto.\u003c/p\u003e\\r\\n\u003ch2\u003e¿Qué aprenderás de HTML y maquetación semántica?\u003c/h2\u003e\\r\\n\u003cp\u003eLa ruta empieza por el primer paso: \u003cstrong\u003emaquetar con HTML\u003c/strong\u003e, uno de los tres lenguajes que entiende el navegador. El objetivo es construir estructura clara y preparada para crecer, cuidando la semántica desde el inicio.\u003c/p\u003e\\r\\n\u003ch3\u003e¿Cuál es el primer paso con HTML?\u003c/h3\u003e\\r\\n\u003cul\u003e\\r\\n\u003cli\u003eEntender que HTML es el lenguaje de maquetación del navegador.\u003c/li\u003e\\r\\n\u003cli\u003eOrganizar contenido con enfoque semántico desde el inicio.\u003c/li\u003e\\r\\n\u003cli\u003eTrabajar una base sólida para futuras mejoras.\u003c/li\u003e\\r\\n\u003c/ul\u003e\\r\\n\u003ch3\u003e¿Qué construirás al final del curso?\u003c/h3\u003e\\r\\n\u003cul\u003e\\r\\n\u003cli\u003eUn \u003cstrong\u003ecódigo base\u003c/strong\u003e listo para evolucionar.\u003c/li\u003e\\r\\n\u003cli\u003eEl inicio de tu \u003cstrong\u003eportafolio profesional\u003c/strong\u003e.\u003c/li\u003e\\r\\n\u003cli\u003eUn proyecto que demuestra maquetación semántica y accesible.\u003c/li\u003e\\r\\n\u003c/ul\u003e\\r\\n\u003ch2\u003e¿Cómo se relaciona con accesibilidad y SEO?\u003c/h2\u003e\\r\\n\u003cp\u003eLa \u003cstrong\u003emaquetación semántica\u003c/strong\u003e facilita que el navegador comprenda tu contenido y promueve una experiencia \u003cstrong\u003eaccesible\u003c/strong\u003e desde la base. Además, seguir \u003cstrong\u003ebuenas prácticas para SEO\u003c/strong\u003e te prepara para posicionar mejor tu sitio sin complejidad adicional.\u003c/p\u003e\\r\\n\u003ch3\u003e¿Qué enfoque tendrás para accesibilidad y SEO?\u003c/h3\u003e\\r\\n\u003cul\u003e\\r\\n\u003cli\u003eEstructura clara y comprensible para el navegador.\u003c/li\u003e\\r\\n\u003cli\u003eInclusión como principio del diseño accesible.\u003c/li\u003e\\r\\n\u003cli\u003ePrácticas alineadas con posicionamiento en buscadores.\u003c/li\u003e\\r\\n\u003c/ul\u003e\\r\\n\u003ch2\u003e¿Quién es tu profesor y qué necesitas para iniciar?\u003c/h2\u003e\\r\\n\u003cp\u003eEl curso lo guía \u003cstrong\u003eDiego de Granda\u003c/strong\u003e, con \u003cstrong\u003emás de 15 años\u003c/strong\u003e de experiencia en la industria de \u003cem\u003esoftware\u003c/em\u003e y desarrollo de producto. No requieres experiencia previa en programación ni otros lenguajes.\u003c/p\u003e\\r\\n\u003ch3\u003e¿Qué requisitos y objetivos tendrás?\u003c/h3\u003e\\r\\n\u003cul\u003e\\r\\n\u003cli\u003eRequisitos: ninguna base de programación, solo motivación.\u003c/li\u003e\\r\\n\u003cli\u003eObjetivo: construir el \u003cstrong\u003ecódigo base\u003c/strong\u003e de tu portafolio.\u003c/li\u003e\\r\\n\u003cli\u003eCamino: iniciar tu perfil como \u003cem\u003efrontend\u003c/em\u003e con fundamentos claros.\u003c/li\u003e\\r\\n\u003c/ul\u003e\\r\\n\u003cp\u003e¿Listo para comenzar a maquetar con HTML y dar el primer paso hacia tu portafolio? Comparte en comentarios qué te motiva a construir tu sitio y en qué quieres enfocarte.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false},{\"id\":84727,\"title\":\"Cómo funciona la web desde URL hasta página renderizada\",\"url\":\"https://platzi.com/cursos/html/como-funciona-la-web-desde-url-hasta-pag/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1cc574333fb4a977b69e_68dc1cc574333fb4a977b6ad_63s.jpg\",\"duration\":632,\"index\":2,\"content\":\"\u003cp\u003eComprende, paso a paso y sin rodeos, cómo funciona la web desde que escribes una URL hasta que se renderiza una página. Aquí verás el modelo cliente-servidor, el rol del DNS y la IP, y por qué \u003cstrong\u003eHTML, CSS y JavaScript\u003c/strong\u003e son la base del navegador. Además, distinguirás \u003cstrong\u003epáginas estáticas y dinámicas\u003c/strong\u003e, y los perfiles de \u003cstrong\u003efrontend\u003c/strong\u003e y \u003cstrong\u003ebackend\u003c/strong\u003e, con las herramientas clave para empezar.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo se conecta el navegador con Internet y el servidor?\u003c/h2\u003e\\n\u003cp\u003eAntes de escribir la primera línea de HTML, conviene entender el flujo completo. Esa visión te ayuda a depurar"])</script><script>self.__next_f.push([1," mejor y a tomar decisiones desde el inicio.\u003c/p\u003e\\n\u003ch3\u003e¿Qué ocurre con un HTTP request cuando escribes una URL?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eAl teclear una dirección y presionar Enter, el navegador hace un \u003cstrong\u003eHTTP request\u003c/strong\u003e por Internet hacia el \u003cstrong\u003eservidor\u003c/strong\u003e que hospeda el proyecto.\u003c/li\u003e\\n\u003cli\u003eEl servidor localiza la URL, arma una \u003cstrong\u003erespuesta HTTP\u003c/strong\u003e con un paquete de archivos y la envía de vuelta al \u003cstrong\u003ecliente\u003c/strong\u003e: tu navegador.\u003c/li\u003e\\n\u003cli\u003eEjemplo de flujo mencionado: al ingresar a plachi.com, el servidor responde con el proyecto y el navegador empieza a interpretarlo.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo se relacionan DNS y la IP address?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eEl \u003cstrong\u003eDNS (Domain Name System)\u003c/strong\u003e traduce el dominio a una \u003cstrong\u003eIP address\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eEsa IP conecta con el servidor correcto para ubicar el proyecto solicitado.\u003c/li\u003e\\n\u003cli\u003eLa regla práctica: escribimos dominios fáciles de recordar y el sistema los transforma a números de IP para hacer la conexión.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué lenguajes entiende el navegador?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003eHTML\u003c/strong\u003e: estructura del contenido que aprenderás primero.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eCSS\u003c/strong\u003e: estilos para definir la apariencia.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eJavaScript\u003c/strong\u003e: interacción y dinamismo en la página.\u003c/li\u003e\\n\u003cli\u003eCon estos tres, puedes construir experiencias de lectura o páginas interactivas.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo lee y renderiza el navegador una página web?\u003c/h2\u003e\\n\u003cp\u003eEl navegador procesa de arriba hacia abajo y resuelve dependencias mientras interpreta. Este orden importa para evitar bloqueos y errores.\u003c/p\u003e\\n\u003ch3\u003e¿Qué es el DOM y el CSS Object Module?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003ePrimero descarga y analiza \u003cstrong\u003eHTML\u003c/strong\u003e, generando el \u003cstrong\u003eDOM (Document Object Model)\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eLuego, al encontrar estilos, descarga \u003cstrong\u003eCSS\u003c/strong\u003e y crea el \u003cstrong\u003eCSS Object Module\u003c/strong\u003e, similar al DOM pero solo de estilos.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo descarga recursos y ejecuta JavaScript?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eEl HTML indica recursos: \u003cstrong\u003eCSS\u003c/strong\u003e, \u003cstrong\u003eJavaScript\u003c/strong\u003e, imágenes y otros archivos.\u003c/li\u003e\\n\u003cli\u003eEl navegador descarga estilos, los interpreta y los aplica al DOM.\u003c/li\u003e\\n\u003cli\u003eCuando el HTML requiere \u003cstrong\u003eJavaScript\u003c/strong\u003e, lo descarga, lo interpreta y ejecuta para lograr la interacción.\u003c/li\u003e\\n\u003cli\u003eCon HTML, CSS y JavaScript listos, el navegador \u003cstrong\u003erenderiza\u003c/strong\u003e la página.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿En qué se diferencian páginas estáticas y dinámicas?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003ePáginas estáticas\u003c/strong\u003e: contenido de consumo. Suelen usar HTML y CSS, rara vez JavaScript. No permiten acciones del usuario como comentar o dar like.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003ePáginas dinámicas (aplicaciones web)\u003c/strong\u003e: permiten acciones del usuario. Ejemplos mencionados: platzi.com para cursos, Facebook, Amazon, Gmail y sistemas bancarios. Tu perfil y resultados cambian según tus interacciones.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Qué roles, herramientas y siguientes pasos necesitas?\u003c/h2\u003e\\n\u003cp\u003eConocer responsabilidades te orienta en el aprendizaje y te prepara para construir proyectos funcionales.\u003c/p\u003e\\n\u003ch3\u003e¿Qué hace frontend y por dónde empezar?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003eFrontend\u003c/strong\u003e: todo lo visual que el navegador renderiza y con lo que el usuario interactúa.\u003c/li\u003e\\n\u003cli\u003eRuta sugerida: \u003cstrong\u003eHTML\u003c/strong\u003e primero, luego \u003cstrong\u003eCSS\u003c/strong\u003e, y después \u003cstrong\u003eJavaScript\u003c/strong\u003e para el dinamismo.\u003c/li\u003e\\n\u003cli\u003eMás adelante, podrás aprender frameworks como \u003cem\u003eReact\u003c/em\u003e, \u003cem\u003eVue\u003c/em\u003e o \u003cem\u003eAngular\u003c/em\u003e cuando domines HTML y CSS.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué hace backend y cómo trabaja con datos?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003eBackend\u003c/strong\u003e: todo lo que sucede en el \u003cstrong\u003eservidor\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eGestiona la lógica, atiende solicitudes del navegador y se conecta con \u003cstrong\u003ebases de datos\u003c/strong\u003e para entregar información.\u003c/li\u003e\\n\u003cli\u003eRequiere lenguajes de programación del lado del servidor y lenguajes para bases de datos.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué herramientas usar para construir y probar?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003eEditores de texto\u003c/strong\u003e: VS"])</script><script>self.__next_f.push([1,"Code, Cursor u otros que faciliten escribir código.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eNavegadores web\u003c/strong\u003e: Chrome, Firefox, Safari o el de tu preferencia para visualizar y depurar.\u003c/li\u003e\\n\u003cli\u003eHabilidades que pondrás en práctica.\u003c/li\u003e\\n\u003cli\u003eComprender el flujo cliente-servidor y las respuestas HTTP.\u003c/li\u003e\\n\u003cli\u003eIdentificar el papel del DNS y la IP en la resolución de dominios.\u003c/li\u003e\\n\u003cli\u003eDistinguir entre HTML, CSS y JavaScript al renderizar.\u003c/li\u003e\\n\u003cli\u003eDiferenciar páginas estáticas y dinámicas según la interacción.\u003c/li\u003e\\n\u003cli\u003eReconocer responsabilidades de \u003cem\u003efrontend\u003c/em\u003e y \u003cem\u003ebackend\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003eUsar editores y navegadores para construir y probar.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003e¿Te gustaría profundizar en alguna parte del flujo, por ejemplo DOM o páginas dinámicas? Comparte tus dudas y experiencias en los comentarios.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false},{\"id\":84728,\"title\":\"Configuración de VSCode y estructura HTML5 básica\",\"url\":\"https://platzi.com/cursos/html/configuracion-de-vscode-y-estructura-htm/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1cdae738b5b94215cc55_68dc1cdae738b5b94215cc69_83s.jpg\",\"duration\":828,\"index\":3,\"content\":\"\u003cp\u003eCrear tu primer sitio en HTML5 es más simple de lo que parece. Aquí verás cómo configurar \u003cem\u003eVSCode\u003c/em\u003e, usar el navegador con el inspector de elementos, generar la estructura base con un atajo y renderizar tu primer Hola mundo con buenas prácticas. Todo paso a paso y con conceptos clave explicados de forma clara.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo preparar las herramientas para HTML con VSCode y navegador?\u003c/h2\u003e\\n\u003cp\u003ePara escribir y visualizar código necesitas dos piezas: un editor de texto y un navegador. El editor recomendado es \u003cem\u003eVSCode\u003c/em\u003e. El navegador es esencial porque ahí verás cómo se renderiza el HTML y porque incluye el inspector de elementos.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eInstala \u003cem\u003eVSCode\u003c/em\u003e y ábrelo. Sigue el instalador según tu sistema operativo.\u003c/li\u003e\\n\u003cli\u003eUsa un navegador moderno con inspector de elementos. Te permitirá ver el HTML real y \u003cstrong\u003edebuggear\u003c/strong\u003e con feedback en tiempo real.\u003c/li\u003e\\n\u003cli\u003eCrea una carpeta raíz llamada \\\"Curso HTML\\\". Allí guardarás todo el contenido, clase por clase.\u003c/li\u003e\\n\u003cli\u003eDentro, crea \\\"uno_Fundamentos_HTML\\\" para el módulo y luego \\\"clase uno\\\" como subcarpeta.\u003c/li\u003e\\n\u003cli\u003eEvita acentos y espacios en nombres. Usa guion medio, guion bajo o \u003cem\u003ecamel case\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003eEn \\\"clase uno\\\", crea el archivo index.html.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Para qué sirve el inspector de elementos?\u003c/h3\u003e\\n\u003cp\u003eEl inspector muestra el árbol real de etiquetas: html, head y body. Permite identificar errores, probar cambios rápidos y entender qué se está renderizando. Es clave para \u003cstrong\u003edebuggear\u003c/strong\u003e y para recibir \u003cstrong\u003efeedback en tiempo real\u003c/strong\u003e antes de llevar los cambios al editor.\u003c/p\u003e\\n\u003ch2\u003e¿Qué incluye la estructura básica de HTML5 y por qué importa?\u003c/h2\u003e\\n\u003cp\u003eEn index.html puedes generar la base con un atajo: escribe ! y presiona tab. Esto crea el esqueleto HTML5 con etiquetas contenedoras que abren y cierran. Es importante comprender cada línea para que después te enfoques en el contenido dentro de body.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"cp\\\"\u003e\u0026lt;!DOCTYPE html\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehtml\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003elang\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;en\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003echarset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;UTF-8\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;viewport\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;width=device-width, initial-scale="])</script><script>self.__next_f.push([1,"1.0\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003edocument\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehtml\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eLas etiquetas contenedoras se abren y se cierran con slash. El contenido va dentro del par.\u003c/li\u003e\\n\u003cli\u003eTodo lo visible en el navegador está dentro de body. Lo de head son instrucciones para el navegador.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué hacen doctype html y el atributo lang?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u0026lt;!DOCTYPE html\u0026gt; le indica al navegador: esto es \u003cstrong\u003eHTML5\u003c/strong\u003e. Así usas el estándar vigente y sus etiquetas.\u003c/li\u003e\\n\u003cli\u003eEn \u003chtml lang=\\\"en\\\"\u003e defines el idioma del contenido. El navegador puede ofrecer traducción automática si tu idioma local difiere, por ejemplo con \u003cem\u003eGoogle Translator\u003c/em\u003e mediante un pequeño \u003cem\u003eprompt\u003c/em\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué hace meta charset y meta viewport?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cmeta charset=\\\"UTF-8\\\"\u003e habilita \u003cstrong\u003ecaracteres especiales y emojis\u003c/strong\u003e. Sin esto, acentos y símbolos pueden verse como códigos extraños.\u003c/li\u003e\\n\u003cli\u003e\u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"\u003e mejora la visualización en \u003cstrong\u003edispositivos móviles\u003c/strong\u003e. Usa el \u003cstrong\u003eancho real del dispositivo\u003c/strong\u003e y evita un \u003cstrong\u003ezoom inicial\u003c/strong\u003e que distorsione el diseño.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Dónde va el contenido visible: body?\u003c/h3\u003e\\n\u003cp\u003eTodo lo que agregues dentro de body se renderiza. El head aloja reglas y metadatos: estilos, configuración del documento y el \u003ctitle\u003e, que define el texto de la pestaña del navegador.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo crear y visualizar tu primer HTML: h1 y párrafo?\u003c/h2\u003e\\n\u003cp\u003eAbre index.html con \u003cem\u003eOpen with Live Server\u003c/em\u003e desde el clic derecho en el explorador de archivos. Verás en la URL que se sirve desde local, con la ruta de tus carpetas y el index.html. En el inspector podrás verificar doctype, html, head y body.\u003c/p\u003e\\n\u003cp\u003eAgrega contenido dentro de body:\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh1\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eHola mundo\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh1\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eEs mi primer sitio web.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eBuenas prácticas y recordatorios.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eGuarda y revisa en el navegador para ver cómo se renderiza el cambio.\u003c/li\u003e\\n\u003cli\u003eVerifica en el inspector que h1 y p aparezcan dentro de body.\u003c/li\u003e\\n\u003cli\u003eCambia el \u003ctitle\u003e para ajustar el texto de la pestaña.\u003c/li\u003e\\n\u003cli\u003eUsa el atajo ! + tab para generar la estructura base rápidamente.\u003c/li\u003e\\n\u003cli\u003eNombres de archivos y carpetas sin acentos ni espacios. Usa guion medio, guion bajo o \u003cem\u003ecamel case\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003eRecuerda que las etiquetas contenedoras se cierran con slash.\u003c/li\u003e\\n\u003cli\u003eMantén meta charset=\\\"UTF-8\\\" y meta viewport para compatibilidad y móviles.\u003c/li\u003e\\n\u003cli\u003eUsa el inspector para \u003cstrong\u003edebuggear\u003c/strong\u003e errores y aplicar correcciones informadas.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003e¿Tienes dudas o quieres compartir cómo nombraste tus carpetas y qué viste en el inspector? Deja un comentario y seguimos construyendo juntos.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false},{\"id\":84729,\"title\":\"Etiquetas de texto y jerarquía en HTML\",\"url\":\"https://platzi.com/cursos/html/"])</script><script>self.__next_f.push([1,"etiquetas-de-texto-y-jerarquia-en-html/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1cc8b0782cb9a7f3d5f8_68dc1cc8b0782cb9a7f3d60c_41s.jpg\",\"duration\":411,\"index\":4,\"content\":\"\u003cp\u003eAprende a organizar texto en HTML con una \u003cstrong\u003ejerarquía clara\u003c/strong\u003e. Usar bien \u003cstrong\u003eH1 a H6\u003c/strong\u003e, \u003cstrong\u003epárrafos\u003c/strong\u003e, \u003cstrong\u003estrong\u003c/strong\u003e y \u003cstrong\u003eblockquote\u003c/strong\u003e mejora la lectura y guía al navegador sobre lo más importante. Verás cómo crear la estructura base, cambiar el \u003cstrong\u003etítulo de la pestaña\u003c/strong\u003e y abrir el archivo en el navegador para validar resultados.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo estructurar HTML y cambiar el título de la pestaña?\u003c/h2\u003e\\n\u003cp\u003eComienza generando la \u003cstrong\u003eestructura básica de HTML\u003c/strong\u003e y ajusta el \u003cstrong\u003etítulo\u003c/strong\u003e para identificar tu proyecto como “Práctica texto”. Abre el archivo en el navegador para confirmar que el título aparece en la pestaña y que el contenido se renderiza con estilos por defecto.\u003c/p\u003e\\n\u003ch3\u003e¿Qué código base usar?\u003c/h3\u003e\\n\u003cp\u003eUsa un archivo index.html con la estructura mínima y el título configurado.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"cp\\\"\u003e\u0026lt;!DOCTYPE html\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehtml\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003elang\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;es\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003echarset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;UTF-8\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003ePráctica texto\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- Contenido --\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehtml\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eGenera la estructura con tu atajo de “símbolo de alineación” y tab.\u003c/li\u003e\\n\u003cli\u003eCambia el título a “Práctica texto”.\u003c/li\u003e\\n\u003cli\u003eAbre en el navegador y ajusta el zoom si lo necesitas.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Qué jerarquía de encabezados H1 a H6 conviene?\u003c/h2\u003e\\n\u003cp\u003eLos encabezados vienen con \u003cstrong\u003eestilos por defecto\u003c/strong\u003e que muestran su jerarquía visual. \u003cstrong\u003eH1\u003c/strong\u003e es el más grande e importante. \u003cstrong\u003eH2\u003c/strong\u003e es secundario. \u003cstrong\u003eH3\u003c/strong\u003e funciona como \u003cstrong\u003esubsecciones\u003c/strong\u003e dentro de un H2. \u003cstrong\u003eH4 a H6\u003c/strong\u003e siguen en menor importancia.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh1\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eTítulo uno\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh1\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh2\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eTítulo dos\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh2\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh3\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eSubsección del H2\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh3\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch3\u003e¿Cuántos H1, H2 y H3 por archivo?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eUn solo \u003cstrong\u003eH1\u003c/strong\u003e por archivo es buena práctica.\u003c/li\u003e\\n\u003cli\u003ePuedes tener varios \u003cstrong\u003eH2\u003c/strong\u003e según tu estructura.\u003c/li\u003e\\n\u003cli\u003eUsa \u003cstrong\u003eH3\u003c/strong\u003e para subdividir contenido dentro de un H2.\u003c/li\u003e\\n\u003cli\u003e\\n\u003cp\u003eEvita usar H4, H5 o H6 para texto común si necesitas párrafos.\u003c/p\u003e\\n\u003c/li\u003e\\n\u003cli\u003e\\n\u003cp\u003eBeneficio clave. El navegador entiende qué es lo más importante y el lector también.\u003c/p\u003e\\n\u003c/li"])</script><script>self.__next_f.push([1,"\u003e\\n\u003cli\u003eSeñal visual. El tamaño refuerza la jerarquía al renderizar el documento.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo escribir párrafos, dar énfasis y citar?\u003c/h2\u003e\\n\u003cp\u003ePara texto de explicación usa la etiqueta \u003cstrong\u003ep\u003c/strong\u003e. No uses encabezados para contenido que debe ser un párrafo. Si necesitas \u003cstrong\u003eresaltar\u003c/strong\u003e una parte del texto dentro del párrafo, emplea \u003cstrong\u003estrong\u003c/strong\u003e. Para \u003cstrong\u003ecitas\u003c/strong\u003e o fragmentos destacados utiliza \u003cstrong\u003eblockquote\u003c/strong\u003e, que se muestra con un estilo distinto al párrafo.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo resaltar con strong sin cambiar la semántica?\u003c/h3\u003e\\n\u003cp\u003eDentro del párrafo, rodea la parte relevante con strong para darle énfasis visual.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eSoy un texto, pero \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003estrong\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eesto es más importante\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003estrong\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eÚsalo para marcar énfasis en una frase.\u003c/li\u003e\\n\u003cli\u003eNo implica que el resto del párrafo sea menos importante en el significado, solo lo resalta a nivel visual.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cuándo usar blockquote e inspeccionar estilos?\u003c/h3\u003e\\n\u003cp\u003eEmplea \u003cstrong\u003eblockquote\u003c/strong\u003e para citar texto o palabras específicas.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eblockquote\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eCurso de HTML\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eblockquote\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eSe renderiza con estilo distinto al párrafo.\u003c/li\u003e\\n\u003cli\u003eÚtil para citas o extractos destacados.\u003c/li\u003e\\n\u003cli\u003eCon el \u003cstrong\u003einspector de elementos\u003c/strong\u003e puedes ver cómo el navegador aplica estilos distintos a blockquote y p.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué habilidades prácticas se refuerzan?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eCrear la estructura básica de HTML en un index.html.\u003c/li\u003e\\n\u003cli\u003eCambiar el \u003cstrong\u003etítulo de la pestaña\u003c/strong\u003e a “Práctica texto”.\u003c/li\u003e\\n\u003cli\u003eEntender la \u003cstrong\u003ejerarquía de encabezados\u003c/strong\u003e H1 a H6.\u003c/li\u003e\\n\u003cli\u003eRespetar la regla de \u003cstrong\u003eun H1 por archivo\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eEscribir texto con \u003cstrong\u003ep\u003c/strong\u003e en lugar de encabezados.\u003c/li\u003e\\n\u003cli\u003eDar énfasis con \u003cstrong\u003estrong\u003c/strong\u003e cuando haga falta.\u003c/li\u003e\\n\u003cli\u003eCitar con \u003cstrong\u003eblockquote\u003c/strong\u003e y validar estilos en el \u003cstrong\u003einspector de elementos\u003c/strong\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003e¿Te quedaron dudas o tienes un ejemplo que quieras revisar? Comenta qué estructura de encabezados planeas usar y qué parte del texto necesitas destacar.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false},{\"id\":84730,\"title\":\"Insertar imágenes en HTML con optimización y accesibilidad\",\"url\":\"https://platzi.com/cursos/html/insertar-imagenes-en-html-con-optimizaci/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1cdf74c8d2b8b3afdbb1_68dc1cdf74c8d2b8b3afdbc5_103s.jpg\",\"duration\":1034,\"index\":5,\"content\":\"\u003cp\u003eInsertar imágenes en HTML es más que mostrar una foto: es construir una \u003cstrong\u003eestructura semántica\u003c/strong\u003e, con \u003cstrong\u003eaccesibilidad\u003c/strong\u003e y \u003cstrong\u003erendimiento\u003c/strong\u003e. Aquí aprenderás a usar la etiqueta img, el atributo src para rutas, el alt para describir, y a optimizar archivos para que tu sitio cargue rápido.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo insertar imágenes en HTML con la etiqueta img?\u003c/h2\u003e\\n\u003cp\u003eLa etiqueta \u003cstrong\u003eimg\u003c/strong\u003e renderiza imágenes directamente en el navegador. Es un elemento vacío: \u003cstrong\u003eno lleva etiqueta de cierre\u003c/strong\u003e. Debe colocarse dentro de body y necesita el atributo \u003cstrong\u003esrc\u003c/strong\u003e para apuntar a la ruta del archivo y \u003cstrong\u003ealt\u003c/strong\u003e para la descripción.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- Estructura básica --\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/s"])</script><script>self.__next_f.push([1,"pan\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/paisaje.jpg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;paisajes montañosos.\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eimg es un elemento sin contenido interno: no se cierra con slash.\u003c/li\u003e\\n\u003cli\u003esrc define la ruta relativa al archivo HTML.\u003c/li\u003e\\n\u003cli\u003ealt aporta una descripción breve y útil.\u003c/li\u003e\\n\u003cli\u003eSin src no se muestra nada.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo referenciar rutas y renderizar en el navegador?\u003c/h3\u003e\\n\u003cp\u003eOrganiza una carpeta img y usa rutas relativas desde tu index.html. El editor suele autocompletar nombres de carpetas y archivos.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- Dentro de index.html, apuntando a /img --\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/montana-optimizada.jpg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;montañas con lago cristalino.\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eEstructura clara de proyecto.\u003c/li\u003e\\n\u003cli\u003eRuta coherente con carpetas.\u003c/li\u003e\\n\u003cli\u003eGuardar cambios y refrescar para ver el renderizado.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué diferencia tiene img respecto a otras etiquetas?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eEs de tipo vacío: \u003cstrong\u003eno lleva contenido entre etiquetas\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eSus valores viven en propiedades o atributos: src, alt, width, height.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo optimizar imágenes para la web y mejorar rendimiento?\u003c/h2\u003e\\n\u003cp\u003eLas imágenes grandes ralentizan la carga. La buena práctica es \u003cstrong\u003ereducir el peso del archivo\u003c/strong\u003e antes de usarlo. Se mostró el uso de TinyPNG para comprimir imágenes pesadas y reemplazar versiones “original” por versiones optimizadas.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eRegla práctica: alrededor de \u003cstrong\u003e200 KB\u003c/strong\u003e por imagen para carga ágil.\u003c/li\u003e\\n\u003cli\u003eEvitar imágenes de \u003cstrong\u003emegabytes\u003c/strong\u003e: son muy pesadas.\u003c/li\u003e\\n\u003cli\u003eEjemplo: de ~3 MB a \u003cstrong\u003e863 KB\u003c/strong\u003e, y luego hasta \u003cstrong\u003e26 KB\u003c/strong\u003e tras optimización adicional.\u003c/li\u003e\\n\u003cli\u003eVerifica el peso real en las herramientas del navegador: pestaña \u003cem\u003eNetwork\u003c/em\u003e muestra los KB/MB descargados.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003eSugerencias aplicadas en el flujo:\\n- Mantener dos archivos cuando convenga: nombre “original” y versión optimizada.\\n- Reemplazar en src la versión “original” por la \u003cstrong\u003eoptimizada\u003c/strong\u003e.\\n- Probar la carga y el tamaño en \u003cem\u003eNetwork\u003c/em\u003e para validar la mejora.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- Evitar cargar el archivo pesado --\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/foco.original.jpg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;vista de focos.\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n\u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- Usar la versión optimizada --\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/foco.jpg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;vista de focos.\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch2\u003e¿Cómo mejorar accesibilidad y semántica con alt, width, height, figure y figcaption?\u003c/h2\u003e\\n\u003cp\u003eEl atributo \u003cstrong\u003ealt\u003c/strong\u003e es clave para \u003cstrong\u003eaccesibilidad\u003c/strong\u003e: si la imagen falla, el usuario ve el texto alternativo y los lectores de pantalla lo anuncian. Además, puedes ajustar dimensiones con \u003cstrong\u003ewidth\u003c/strong\u003e y \u003cstrong\u003eheight\u003c/strong\u003e cuando la imagen optimizada sigue siendo grande.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- Dimensiones controladas en pixeles --\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan cl"])</script><script>self.__next_f.push([1,"ass=\\\"nt\\\"\u003eimg\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/foco.jpg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;vista de focos.\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ewidth\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;200\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eheight\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;150\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003ealt describe el contenido visual de forma concreta.\u003c/li\u003e\\n\u003cli\u003ewidth y height ajustan el tamaño en el layout.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003ePara descripciones visibles bajo la imagen, utiliza \u003cstrong\u003efigure\u003c/strong\u003e y \u003cstrong\u003efigcaption\u003c/strong\u003e. Es una solución semántica superior a usar img + p dentro de un \u003cem\u003ediv\u003c/em\u003e.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efigure\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/montana-optimizada.jpg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;montañas con lago cristalino.\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efigcaption\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003evista panorámica de los Alpes suizos.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efigcaption\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efigure\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003efigure agrupa imagen y su contexto.\u003c/li\u003e\\n\u003cli\u003efigcaption muestra una \u003cstrong\u003edescripción visible\u003c/strong\u003e asociada.\u003c/li\u003e\\n\u003cli\u003eMejora la semántica y la comprensión del contenido.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003e¿Tienes dudas sobre rutas, pesos en \u003cem\u003eKB\u003c/em\u003e o el uso de figure y figcaption? Cuéntamelo en los comentarios y revisamos tu caso paso a paso.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false}],\"quiz\":{\"id\":31713,\"active\":true,\"title\":\"quiz de Fundamentos de HTML\"}},{\"id\":24621,\"title\":\"Listas y Enlaces\",\"materials\":[{\"id\":84731,\"title\":\"Creación de listas desordenadas, ordenadas y enlaces en HTML\",\"url\":\"https://platzi.com/cursos/html/creacion-de-listas-desordenadas-ordenada/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1cd4bc24ceb871a97533_68dc1cd4bc24ceb871a97547_80s.jpg\",\"duration\":802,\"index\":6,\"content\":\"\u003cp\u003eAprende a estructurar contenido con \u003cstrong\u003elistas HTML\u003c/strong\u003e y a conectar páginas y acciones con \u003cstrong\u003eenlaces\u003c/strong\u003e. Verás cómo usar \u003cstrong\u003eUL\u003c/strong\u003e, \u003cstrong\u003eOL\u003c/strong\u003e y \u003cstrong\u003eLI\u003c/strong\u003e para organizar información, y cómo trabajar con \u003cstrong\u003eA\u003c/strong\u003e, \u003cstrong\u003ehref\u003c/strong\u003e, \u003cstrong\u003etarget\u003c/strong\u003e, \u003cstrong\u003emailto\u003c/strong\u003e y \u003cstrong\u003etel\u003c/strong\u003e para crear experiencias útiles y claras. Todo con ejemplos prácticos y listos para el navegador.\u003c/p\u003e\\n\u003ch2\u003e¿Qué son las listas en HTML y cuándo usarlas?\u003c/h2\u003e\\n\u003cp\u003eLas listas permiten organizar elementos relacionados. Con \u003cstrong\u003elistas desordenadas\u003c/strong\u003e presentas ítems sin prioridad. Con \u003cstrong\u003elistas ordenadas\u003c/strong\u003e defines un orden de pasos que sí importa. Así, eliges la estructura correcta según el objetivo: compras sin orden o instrucciones con secuencia.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo crear una lista desordenada con ul y li?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eUsa \u003cstrong\u003eUL\u003c/strong\u003e para una lista sin prioridad.\u003c/li\u003e\\n\u003cli\u003eAñade cada elemento con \u003cstrong\u003eLI\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eEl navegador muestra viñetas automáticamente.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eul\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eLeche\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003ePan\u003cspan class=\\\"p\\\"\u003e\u0026"])</script><script>self.__next_f.push([1,"lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eVerduras\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eul\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eClaves: \u003cstrong\u003eUL\u003c/strong\u003e (\u003cem\u003eunordered list\u003c/em\u003e) y \u003cstrong\u003eLI\u003c/strong\u003e (\u003cem\u003elist item\u003c/em\u003e). Son ideales cuando el orden no afecta el resultado.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo crear una lista ordenada con ol y li?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eUsa \u003cstrong\u003eOL\u003c/strong\u003e cuando el orden sí influye.\u003c/li\u003e\\n\u003cli\u003eCada \u003cstrong\u003eLI\u003c/strong\u003e se numera automáticamente.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eol\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eHervir agua\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eAgregar café\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eServir en taza\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eol\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eLa prioridad la marca el número. Cambiar el orden cambia el resultado.\u003c/p\u003e\\n\u003ch3\u003e¿Por qué importar el orden según el caso?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eCompras: el orden no importa, usa \u003cstrong\u003eUL\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eRecetas o pasos: el orden importa, usa \u003cstrong\u003eOL\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eLa elección correcta mejora claridad y experiencia.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo personalizar listas con type y start?\u003c/h2\u003e\\n\u003cp\u003eHTML permite ajustar la apariencia y la continuidad de listas ordenadas. Así comunicas mejor la prioridad y mantienes coherencia cuando hay contenido intermedio.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo usar números romanos o letras con type?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eEn \u003cstrong\u003eOL\u003c/strong\u003e, el atributo \u003cstrong\u003etype\u003c/strong\u003e cambia el estilo de numeración.\u003c/li\u003e\\n\u003cli\u003eOpciones: números romanos en mayúscula o minúscula, letras alfabéticas y números.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eol\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;I\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003ePaso uno\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003ePaso dos\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eol\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eol\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;a\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eOpción A\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eOpción B\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eol\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eResultado: I, II, III… o a, b, c… según el caso.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo continuar numeración con start?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eCada \u003cstrong\u003eOL\u003c/strong\u003e comienza en 1 por defecto.\u003c/li\u003e\\n\u003cli\u003ePara continuar después de una lista previa separada por contenido, usa \u003cstrong\u003estart\u003c/strong\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan cla"])</script><script>self.__next_f.push([1,"ss=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eol\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eTexto\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eImágenes\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMultimedia\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eol\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eContenido intermedio…\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eol\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003estart\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;4\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eAccesibilidad\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eSEO\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eDespliegue\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eol\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eBeneficio: mantienes la secuencia 1–6 aunque haya bloques intermedios.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo crear enlaces en HTML con a, href y target?\u003c/h2\u003e\\n\u003cp\u003eUn \u003cstrong\u003eenlace\u003c/strong\u003e se define con \u003cstrong\u003eA\u003c/strong\u003e y el destino con \u003cstrong\u003ehref\u003c/strong\u003e. El texto entre apertura y cierre es el que verá la persona. El navegador lo muestra con subrayado, color y cursor de mano para indicar que es interactivo.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo abrir en nueva pestaña con target?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003etarget\u003c/strong\u003e controla dónde se abre el enlace.\u003c/li\u003e\\n\u003cli\u003eUsa \u003cstrong\u003etarget=\\\"_blank\\\"\u003c/strong\u003e para abrir en otra pestaña y conservar la actual.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;https://platzi.com\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etarget\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;_blank\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eplatzi\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eÚtil cuando no quieres perder el contexto de navegación.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo enviar emails con mailto?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eCon \u003cstrong\u003emailto:\u003c/strong\u003e abres el cliente de correo con datos prellenados.\u003c/li\u003e\\n\u003cli\u003ePuedes definir \u003cstrong\u003esubject\u003c/strong\u003e y \u003cstrong\u003ebody\u003c/strong\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;mailto:info@ejemplo.com?subject=consulta\u0026amp;body=hola\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eenviar email\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eVentaja: facilita contactar sin copiar y pegar direcciones.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo llamar con tel?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eCon \u003cstrong\u003etel:\u003c/strong\u003e inicias una llamada desde móviles o apps compatibles.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;tel:3412345678\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eLlamar +34 12345678\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003e"])</script><script>self.__next_f.push([1,"a\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eEn móvil, abre el marcador y completa el número automáticamente.\u003c/p\u003e\\n\u003cp\u003e¿Tienes dudas o ejemplos que quieras probar con \u003cstrong\u003eUL\u003c/strong\u003e, \u003cstrong\u003eOL\u003c/strong\u003e, \u003cstrong\u003eLI\u003c/strong\u003e o \u003cstrong\u003eA\u003c/strong\u003e? Comenta qué estructura necesitas y lo afinamos juntos.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false},{\"id\":84732,\"title\":\"Etiquetas semánticas HTML5: header, main, nav, article y footer\",\"url\":\"https://platzi.com/cursos/html/etiquetas-semanticas-html5-header-main-n/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1ce0f4aae2065e64aa11_68dc1ce0f4aae2065e64aa25_66s.jpg\",\"duration\":660,\"index\":7,\"content\":\"\u003cp\u003eLa semántica en HTML5 define una estructura clara que mejora la comprensión del contenido por personas, navegadores y lectores de pantalla. Usar etiquetas con significado aporta orden, \u003cstrong\u003efacilita el trabajo en equipo\u003c/strong\u003e, \u003cstrong\u003emejora la accesibilidad\u003c/strong\u003e y \u003cstrong\u003eayuda al SEO\u003c/strong\u003e al permitir que Google indexe mejor cada sección.\u003c/p\u003e\\n\u003ch2\u003e¿Qué es la semántica en HTML5 y por qué importa?\u003c/h2\u003e\\n\u003cp\u003eLa semántica asigna significado a las secciones del documento mediante etiquetas específicas. No cambia el diseño por sí misma, pero \u003cstrong\u003eindica qué es cada parte\u003c/strong\u003e del proyecto y \u003cstrong\u003ecómo debe ser interpretada\u003c/strong\u003e.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eDiferencia clave: head vs header. El head contiene lo que el navegador necesita para cargar el proyecto; el header es el encabezado visible del contenido. \u003c/li\u003e\\n\u003cli\u003eEl body es el cuerpo que se renderiza en pantalla. \u003c/li\u003e\\n\u003cli\u003eEtiquetas como header, main y footer delimitan secciones principales con propósito claro. \u003c/li\u003e\\n\u003cli\u003eBeneficio directo: los lectores de contenido pueden anunciar “estás en el header con una barra de navegación” y guiar a usuarios con baja visión. \u003c/li\u003e\\n\u003cli\u003eBeneficio técnico: Google puede \u003cstrong\u003eindexar\u003c/strong\u003e mejor las secciones cuando el documento utiliza etiquetas semánticas correctas. \u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo se estructura una página con etiquetas semánticas?\u003c/h2\u003e\\n\u003cp\u003eUna base semántica típica separa el encabezado, el contenido principal y el cierre. Además, incorpora navegación y organización interna del contenido con etiquetas como nav, section, article y aside.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo se ve el código base?\u003c/h3\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"cp\\\"\u003e\u0026lt;!DOCTYPE html\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehtml\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003elang\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;es\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003echarset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;UTF-8\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;viewport\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;width=device-width, initial-scale=1.0\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMi sitio web\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eheader\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh1\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMi sitio web\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh1\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e"])</script><script>self.__next_f.push([1,"\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eul\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#inicio\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eInicio\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#servicios\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eServicios\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#contacto\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eContacto\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eul\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eheader\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emain\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esection\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;articulos\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003earticle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh2\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eTítulo del artículo\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh2\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eContenido del artículo dentro de la sección principal.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003earticle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- Puedes repetir más \u0026lt;article\u0026gt; según el contenido --\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esection\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003easide\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eBarra lateral con opciones o enlaces relacionados.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003easide\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emain\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efooter\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eCopyright 2025 Mi sitio. Todos los derechos reservados.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efooter\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehtml\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch3\u003e¿Qué hace cada etiqueta?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003ehead: metadatos y recursos necesarios para cargar el proyecto. \u003c/li\u003e\\n\u003cli\u003eheader: encabezado"])</script><script>self.__next_f.push([1," visible; suele incluir logotipo, título y barra de navegación. \u003c/li\u003e\\n\u003cli\u003enav: la navegación principal; se implementa con una \u003cem\u003eunorganized list\u003c/em\u003e (ul), \u003cem\u003elist items\u003c/em\u003e (li) y enlaces \u003cem\u003eanchor\u003c/em\u003e (a). \u003c/li\u003e\\n\u003cli\u003emain: contenido relevante que el usuario viene a consumir. \u003c/li\u003e\\n\u003cli\u003esection: agrupa bloques temáticos dentro del main. \u003c/li\u003e\\n\u003cli\u003earticle: pieza de contenido independiente, como entradas de un blog. \u003c/li\u003e\\n\u003cli\u003easide: barra lateral que complementa o filtra el contenido principal. \u003c/li\u003e\\n\u003cli\u003efooter: cierre con información secundaria, como derechos o enlaces menos densos. \u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003eConsejos prácticos:\\n- Usa \u003cstrong\u003eetiquetas semánticas\u003c/strong\u003e para que cualquier integrante del equipo identifique rápido la sección que debe modificar. \\n- Mantén la navegación en nav para que lectores de pantalla y buscadores la detecten con precisión. \\n- Inserta contenidos repetibles en article y organízalos por section cuando corresponda. \u003c/p\u003e\\n\u003ch2\u003e¿Cómo mejora la accesibilidad y el SEO con semántica?\u003c/h2\u003e\\n\u003cp\u003eLa semántica crea un mapa comprensible del contenido para tecnologías de asistencia y motores de búsqueda.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eAccesibilidad: lectores de pantalla anuncian secciones como header, nav, main y footer, guiando la lectura. \u003c/li\u003e\\n\u003cli\u003eSEO: Google indexa mejor páginas con estructura clara, lo que optimiza la posibilidad de aparecer ante búsquedas relevantes. \u003c/li\u003e\\n\u003cli\u003eMantenibilidad: el equipo entiende dónde está cada parte del proyecto al leer el HTML. \u003c/li\u003e\\n\u003cli\u003eFuturo con CSS: podrás \u003cstrong\u003eaplicar estilos\u003c/strong\u003e apuntando a secciones específicas con precisión. \u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003e¿Tienes dudas sobre cómo organizar tu estructura semántica o tu menú de navegación? Comparte tus preguntas y ejemplos para revisarlos juntos.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false}],\"quiz\":{\"id\":31714,\"active\":true,\"title\":\"quiz de Listas y Enlaces\"}},{\"id\":24622,\"title\":\"Formularios y Tablas\",\"materials\":[{\"id\":84733,\"title\":\"Formularios HTML con validación nativa del navegador\",\"url\":\"https://platzi.com/cursos/html/formularios-html-con-validacion-nativa-d/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1d8c6a2459b36e85d621_68dc1d8c6a2459b36e85d635_94s.jpg\",\"duration\":940,\"index\":8,\"content\":\"\u003cp\u003eLos formularios en HTML son la vía directa para que una persona comparta datos con un proyecto web. Con una estructura correcta, el navegador ofrece autocompletado y validación nativa que simplifican el llenado y mejoran la experiencia, desde un \u003cem\u003elogin\u003c/em\u003e hasta un comentario en una red social.\u003c/p\u003e\\n\u003ch2\u003e¿Por qué los formularios son la base de la interacción en HTML?\u003c/h2\u003e\\n\u003cp\u003eLos formularios permiten enviar información al servidor para ejecutar acciones concretas. Ejemplos como iniciar sesión o comentar un contenido dependen de esta estructura. Además, el navegador puede ayudar con el autocompletado y ciertas validaciones si usamos las etiquetas y atributos adecuados.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eEvita formularios largos sin guardado intermedio: generan frustración.\u003c/li\u003e\\n\u003cli\u003eDiseña formularios sencillos y claros: mejor experiencia.\u003c/li\u003e\\n\u003cli\u003eAprovecha la validación nativa del navegador: menos código adicional.\u003c/li\u003e\\n\u003cli\u003eUsa estructura semántica y atributos correctos: autocompletado más efectivo.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo estructurar un formulario con form, action y method?\u003c/h2\u003e\\n\u003cp\u003eLa etiqueta \u003ccode\u003eform\u003c/code\u003e no es decorativa: informa al navegador que habrá interacción y activa funciones útiles. Define dos atributos clave: \u003cstrong\u003eaction\u003c/strong\u003e indica a dónde se envían los datos y \u003cstrong\u003emethod\u003c/strong\u003e define cómo se envían usando verbos HTTP como \u003cem\u003eget\u003c/em\u003e y \u003cem\u003epost\u003c/em\u003e.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eform\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eaction\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003emethod\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;post\u0026quot;\u003c/s"])</script><script>self.__next_f.push([1,"pan\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- Campos del formulario --\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eform\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003eaction\u003c/strong\u003e: destino de los datos; puede ser una URL o un \u003cem\u003eendpoint\u003c/em\u003e de un \u003cem\u003eAPI\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003emethod\u003c/strong\u003e: forma de envío; se usan verbos HTTP como \u003cem\u003eget\u003c/em\u003e y \u003cem\u003epost\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003ePresionar Enter o un botón de envío intenta enviar el formulario.\u003c/li\u003e\\n\u003cli\u003eUsar \u003ccode\u003eform\u003c/code\u003e habilita validaciones del navegador en campos como correos.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo enviar los datos con un botón submit?\u003c/h3\u003e\\n\u003cp\u003eEl formulario se completa con un botón de tipo \u003ccode\u003esubmit\u003c/code\u003e, que dispara el envío al destino definido en \u003ccode\u003eaction\u003c/code\u003e usando el \u003ccode\u003emethod\u003c/code\u003e indicado.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebutton\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;submit\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eEnviar\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebutton\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\u003ccode\u003etype=\\\"submit\\\"\u003c/code\u003e: indica que el botón envía el formulario.\u003c/li\u003e\\n\u003cli\u003eSi \u003ccode\u003eaction\u003c/code\u003e es \u003ccode\u003e#\u003c/code\u003e, la página se refresca sin una acción real.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo etiquetar y capturar datos con label, input y textarea?\u003c/h2\u003e\\n\u003cp\u003ePara mejorar la accesibilidad, el autocompletado y el envío correcto, se combinan \u003ccode\u003elabel\u003c/code\u003e, \u003ccode\u003einput\u003c/code\u003e y, cuando corresponde, \u003ccode\u003etextarea\u003c/code\u003e. La clave es vincular cada \u003ccode\u003elabel\u003c/code\u003e con su campo y nombrar adecuadamente los datos que se enviarán.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo vincular label e input con for e id?\u003c/h3\u003e\\n\u003cp\u003e\u003ccode\u003elabel\u003c/code\u003e describe el propósito del campo y se asocia al \u003ccode\u003einput\u003c/code\u003e mediante \u003ccode\u003efor\u003c/code\u003e e \u003ccode\u003eid\u003c/code\u003e iguales. Así, un clic en la etiqueta activa el campo y el navegador reconoce mejor el dato.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;nombre\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eNombre:\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;nombre\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;nombre\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\u003ccode\u003efor\u003c/code\u003e en \u003ccode\u003elabel\u003c/code\u003e debe coincidir con el \u003ccode\u003eid\u003c/code\u003e del \u003ccode\u003einput\u003c/code\u003e.\u003c/li\u003e\\n\u003cli\u003e\u003ccode\u003ename\u003c/code\u003e define la clave con la que el dato viaja al servidor.\u003c/li\u003e\\n\u003cli\u003e\u003ccode\u003ediv\u003c/code\u003e puede usarse como contenedor para separar campos cuando no hay una etiqueta semántica específica.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo capturar correos con input type=email?\u003c/h3\u003e\\n\u003cp\u003ePara correos, el navegador ofrece validación básica y autocompletado cuando el \u003ccode\u003einput\u003c/code\u003e usa \u003ccode\u003etype=\\\"email\\\"\u003c/code\u003e y está correctamente etiquetado.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;email\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eCorreo electrónico:\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;email\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspa"])</script><script>self.__next_f.push([1,"n class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;email\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;email\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\u003ccode\u003etype=\\\"email\\\"\u003c/code\u003e: activa validaciones nativas para formato de correo.\u003c/li\u003e\\n\u003cli\u003eCon datos guardados, el navegador sugiere completar el campo.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cuándo usar textarea con filas y columnas?\u003c/h3\u003e\\n\u003cp\u003eCuando se requiere texto largo (por ejemplo, un mensaje), \u003ccode\u003etextarea\u003c/code\u003e ofrece un área ampliada y redimensionable. Se vincula igual que un \u003ccode\u003einput\u003c/code\u003e con \u003ccode\u003elabel\u003c/code\u003e.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;mensaje\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMensaje:\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etextarea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;mensaje\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;mensaje\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erows\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;4\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ecols\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;40\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etextarea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\u003ccode\u003erows\u003c/code\u003e y \u003ccode\u003ecols\u003c/code\u003e: altura y ancho iniciales visibles.\u003c/li\u003e\\n\u003cli\u003ePermite saltos de línea y mayor comodidad al escribir textos extensos.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eform\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eaction\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003emethod\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;post\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;nombre\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eNombre:\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;nombre\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;nombre\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;email\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eCorreo electrónico:\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;email\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;email\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;email\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n"])</script><script>self.__next_f.push([1," \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;mensaje\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMensaje:\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etextarea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;mensaje\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;mensaje\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erows\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;4\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ecols\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;40\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etextarea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebutton\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;submit\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eEnviar\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebutton\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eform\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eCombina \u003ccode\u003eform\u003c/code\u003e con \u003ccode\u003eaction\u003c/code\u003e y \u003ccode\u003emethod\u003c/code\u003e para definir destino y envío.\u003c/li\u003e\\n\u003cli\u003eVincula \u003ccode\u003elabel\u003c/code\u003e y campos con \u003ccode\u003efor\u003c/code\u003e/\u003ccode\u003eid\u003c/code\u003e y nombra datos con \u003ccode\u003ename\u003c/code\u003e.\u003c/li\u003e\\n\u003cli\u003eCierra con \u003ccode\u003ebutton type=\\\"submit\\\"\u003c/code\u003e para enviar al servidor.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003e¿Tienes dudas sobre qué campos pedir o cómo nombrarlos con \u003ccode\u003ename\u003c/code\u003e para tu \u003cem\u003eendpoint\u003c/em\u003e de \u003cem\u003elogin\u003c/em\u003e o un comentario? Comparte tu caso en los comentarios y afinamos la estructura juntos.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false},{\"id\":84734,\"title\":\"Tipos de inputs HTML para formularios avanzados\",\"url\":\"https://platzi.com/cursos/html/tipos-de-inputs-html-para-formularios-av/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1d8794db30b44237a203_68dc1d8794db30b44237a217_85s.jpg\",\"duration\":853,\"index\":9,\"content\":\"\u003cp\u003eAprende a ampliar y validar datos en formularios HTML con inputs nativos y buenas prácticas. Aquí verás cómo usar password, number con min y max, date con calendario, color con selector y radio agrupado con \u003cem\u003efieldset\u003c/em\u003e y \u003cem\u003elegend\u003c/em\u003e. Todo con etiquetas label, for, id y name bien enlazadas para accesibilidad y envío correcto.\u003c/p\u003e\\n\u003ch2\u003e¿Qué inputs de formulario amplían la recolección de datos?\u003c/h2\u003e\\n\u003cp\u003eLos inputs adecuados mejoran la experiencia y la calidad de los datos. Con HTML puedes pedir contraseñas con privacidad, números validados, fechas con calendario y colores con un selector visual.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo capturar contraseñas con privacidad?\u003c/h3\u003e\\n\u003cp\u003eEl input type=\\\"password\\\" oculta los caracteres con puntos o asteriscos. Es una mejora de \u003cstrong\u003eprivacidad\u003c/strong\u003e, no de \u003cstrong\u003eseguridad\u003c/strong\u003e. La seguridad depende de enviar por \u003cstrong\u003eHTTPS\u003c/strong\u003e.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eUsa label, for, id y name para accesibilidad y envío correcto.\u003c/li\u003e\\n\u003cli\u003eLos navegadores y el \u003cem\u003epassword manager\u003c/em\u003e pueden sugerir autocompletado.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eform\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003emethod\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;post\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eaction\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;password\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eContraseña:\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003c"])</script><script>self.__next_f.push([1,"span class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;password\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;password\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;password\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eform\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch3\u003e¿Cómo pedir colores con un selector nativo?\u003c/h3\u003e\\n\u003cp\u003eEl input type=\\\"color\\\" abre un \u003cem\u003ecolor picker\u003c/em\u003e para elegir un valor hexadecimal.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;color\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eColor:\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;color\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;color\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;color\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eSelección visual y precisa del color.\u003c/li\u003e\\n\u003cli\u003eEnvío directo del valor al servidor.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo validar números y fechas en HTML sin complicarse?\u003c/h2\u003e\\n\u003cp\u003ePara datos numéricos y fechas, los inputs nativos aportan validación y controles del navegador. Evitas errores comunes y mejoras la usabilidad.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo limitar rangos con min y max?\u003c/h3\u003e\\n\u003cp\u003eCon type=\\\"number\\\" puedes aceptar solo números y definir límites con min y max. Útil, por ejemplo, para una \u003cstrong\u003eedad\u003c/strong\u003e entre 18 y 70.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;edad\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eEdad:\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;number\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;edad\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;edad\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003emin\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;18\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003emax\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;70\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eSolo valores numéricos válidos.\u003c/li\u003e\\n\u003cli\u003eImpide bajar de 18 o subir de 70.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo seleccionar fechas con el calendario nativo?\u003c/h3\u003e\\n\u003cp\u003eEl input type=\\\"date\\\" muestra un calendario para elegir día, mes y año.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;fecha\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eFecha:\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ei"])</script><script>self.__next_f.push([1,"nput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;date\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;fecha\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;fecha\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eReduce errores de formato de fecha.\u003c/li\u003e\\n\u003cli\u003eInterfaz familiar del navegador.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo agrupar opciones con radio para enviar un solo valor?\u003c/h2\u003e\\n\u003cp\u003eCuando hay varias opciones y solo una respuesta válida, usa type=\\\"radio\\\" con el mismo name para cada opción. Agrupa semánticamente con \u003cem\u003efieldset\u003c/em\u003e y titula el grupo con \u003cem\u003elegend\u003c/em\u003e.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efieldset\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elegend\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eGénero\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elegend\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;radio\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;masculino\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;genero\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003evalue\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;M\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;masculino\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMasculino\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;radio\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;femenino\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;genero\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003evalue\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;F\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;femenino\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eFemenino\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efieldset\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eEl mismo name garantiza que solo se seleccione una opción.\u003c/li\u003e\\n\u003cli\u003eEl atributo value envía el dato útil: M o F.\u003c/li\u003e\\n\u003cli\u003e\u003cem\u003eFieldset\u003c/em\u003e y \u003cem\u003elegend\u003c/em\u003e agrupan y describen el conjunto de opciones.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003eConsejos rápidos.\\n- Usa name para definir cómo viaja el dato al servidor.\\n- Enlaza label con for y el id correspondiente.\\n- Recuerda: el input password mejora la privacidad visual, pero la seguridad exige usar \u003cstrong\u003eHTTPS\u003c/strong\u003e.\u003c/p\u003e\\n\u003cp\u003e¿Quieres practicar con \u003cem\u003echeckbox\u003c/em\u003e y listas de \u003cem\u003eoptions\u003c/em\u003e para países u otras categorías? Comenta qué casos de uso tienes y qué inputs necesitas implementar.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false},{\"id\":84735,\"title\":\"Checkbox y select en formularios HTML\",\"url\":\"https://platzi.com/cursos/html/checkbox-y-select-en-formularios-html/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1d79bc24ceb871a97b0e_68dc1d7abc24ceb871a97b22_38s.jpg\",\"duration\":382,\"index\":10,\"content\":\"\u003cp\u003eLos formularios en HTML pueden ser más claros y fáciles de completar si agrupas opciones correctamente y defines bien cómo se envían los datos. Aquí aprenderás "])</script><script>self.__next_f.push([1,"a usar \u003cstrong\u003einputs tipo \u003cem\u003echeckbox\u003c/em\u003e\u003c/strong\u003e para múltiples selecciones y la etiqueta \u003cstrong\u003eselect con \u003cem\u003eoption\u003c/em\u003e\u003c/strong\u003e para listas desplegables, conectando todo con \u003cem\u003elabel\u003c/em\u003e, \u003cem\u003ename\u003c/em\u003e, \u003cem\u003eid\u003c/em\u003e y \u003cem\u003evalue\u003c/em\u003e para que el servidor reciba exactamente lo que necesitas.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo usar checkbox con fieldset y label en HTML?\u003c/h2\u003e\\n\u003cp\u003eAgrupa opciones relacionadas con un \u003cstrong\u003e\u003cfieldset\u003e\u003c/strong\u003e y titúlalas con \u003cstrong\u003e\u003clegend\u003e\u003c/strong\u003e. Los \u003cem\u003echeckbox\u003c/em\u003e permiten elegir \u003cstrong\u003emás de una opción\u003c/strong\u003e (a diferencia de los \u003cem\u003eradio buttons\u003c/em\u003e). Usa el mismo atributo \u003cstrong\u003ename\u003c/strong\u003e para todas las casillas del grupo y un \u003cstrong\u003evalue\u003c/strong\u003e distinto por opción para identificar qué se seleccionó. Vincula cada casilla con su \u003cstrong\u003elabel\u003c/strong\u003e mediante \u003cstrong\u003eid\u003c/strong\u003e y \u003cstrong\u003efor\u003c/strong\u003e para mejorar accesibilidad y clicabilidad.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003eMúltiple selección\u003c/strong\u003e con \u003cem\u003echeckbox\u003c/em\u003e del mismo name.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eAgrupación semántica\u003c/strong\u003e con \u003cem\u003efieldset\u003c/em\u003e y \u003cem\u003elegend\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eAsociación accesible\u003c/strong\u003e: \u003cem\u003elabel\u003c/em\u003e for ↔ \u003cem\u003eid\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eEnvío claro\u003c/strong\u003e al servidor: usa \u003cem\u003evalue\u003c/em\u003e específico por opción.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efieldset\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elegend\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eIntereses\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elegend\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;checkbox\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;intereses\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;deportes\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003evalue\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;deportes\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;deportes\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eDeportes\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;checkbox\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;intereses\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;musica\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003evalue\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;música\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;musica\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMúsica\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efieldset\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch3\u003e¿Qué datos se envían con name y value?\u003c/h3\u003e\\n\u003cp\u003eAl enviar el formulario, el servidor recibe un par por cada opción marcada. Con el ejemplo anterior, si se marcan ambas, se envía: \u003cstrong\u003eintereses=deportes\u003c/strong\u003e e \u003cstrong\u003eintereses=música\u003c/strong\u003e. Así se conserva la agrupación y se conocen las selecciones exactas.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo crear una lista desplegable con select y option?\u003c/h2\u003e\\n\u003cp\u003eCuando necesitas que la persona elija una sola alternativa de una lista (por ejemplo, \u003cstrong\u003ePaís\u003c/strong\u003e), utiliza \u003cstrong\u003e\u003cselect\u003e\u003c/strong\u003e. Esta etiqueta contenedora incluye varias \u003cstrong\u003e\u003coption\u003e\u003c/strong\u003e, donde el texto visible puede coincidir con el \u003cstrong\u003evalue\u003c/strong\u003e que se enviará. Conecta el \u003cem\u003elabel\u003c/em\u003e al \u003cem\u003eselect\u003c/em\u003e con \u003cem\u003eid\u003c/"])</script><script>self.__next_f.push([1,"em\u003e y usa \u003cem\u003ename\u003c/em\u003e para el campo que recibirá el servidor.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003eSelect es contenedor\u003c/strong\u003e: incluye múltiples \u003cem\u003eoption\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eOption define\u003c/strong\u003e el \u003cem\u003evalue\u003c/em\u003e que viaja al servidor.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eLabel asociado\u003c/strong\u003e mejora la usabilidad.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eDiv como contenedor comodín\u003c/strong\u003e cuando no hay \u003cem\u003efieldset\u003c/em\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;pais\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003ePaís\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eselect\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;pais\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;pais\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eoption\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003evalue\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;México\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMéxico\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eoption\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eoption\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003evalue\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Colombia\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eColombia\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eoption\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eoption\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003evalue\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Argentina\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eArgentina\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eoption\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eselect\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch3\u003e¿Qué diferencia hay con inputs al agrupar datos?\u003c/h3\u003e\\n\u003cp\u003eCon \u003cem\u003echeckbox\u003c/em\u003e, usas el mismo \u003cstrong\u003ename\u003c/strong\u003e para varias casillas y cambias \u003cstrong\u003evalue\u003c/strong\u003e por opción, permitiendo múltiples selecciones. Con \u003cstrong\u003eselect\u003c/strong\u003e, eliges una sola \u003cstrong\u003eoption\u003c/strong\u003e por defecto, y se envía el \u003cstrong\u003ename\u003c/strong\u003e del select con el \u003cstrong\u003evalue\u003c/strong\u003e de la opción elegida.\u003c/p\u003e\\n\u003ch2\u003e¿Qué rol jugarán las validaciones del navegador?\u003c/h2\u003e\\n\u003cp\u003eSe menciona que el navegador puede \u003cstrong\u003eayudar con validaciones\u003c/strong\u003e para hacer los formularios más seguros y fáciles de rellenar. Esto complementa el uso correcto de \u003cem\u003echeckbox\u003c/em\u003e, \u003cem\u003eselect\u003c/em\u003e, \u003cem\u003elabel\u003c/em\u003e, \u003cem\u003ename\u003c/em\u003e, \u003cem\u003eid\u003c/em\u003e y \u003cem\u003evalue\u003c/em\u003e para una experiencia completa.\u003c/p\u003e\\n\u003cp\u003e¿Te gustaría ver más ejemplos con validaciones nativas y personalizadas? Deja tus preguntas y comenta qué casos te gustaría cubrir.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false},{\"id\":84736,\"title\":\"Validaciones de formularios HTML con atributos nativos\",\"url\":\"https://platzi.com/cursos/html/validaciones-de-formularios-html-con-atr/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1d84af2b38b3b2b59d1c_68dc1d84af2b38b3b2b59d30_73s.jpg\",\"duration\":731,\"index\":11,\"content\":\"\u003cp\u003eCrear formularios confiables empieza por dominar las validaciones nativas de HTML. Con atributos como \u003cstrong\u003erequire\u003c/strong\u003e, \u003cstrong\u003eplaceholder\u003c/strong\u003e, \u003cstrong\u003epattern\u003c/strong\u003e, \u003cstrong\u003emin\u003c/strong\u003e, \u003cstrong\u003emax\u003c/strong\u003e, \u003cstrong\u003estep\u003c/strong\u003e y \u003cstrong\u003emin length\u003c/strong\u003e, el navegador hace gran parte del trabajo por ti, asegurando datos completos y con el formato correcto.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo validar formularios HTML con atributos nativos?\u003c/h2\u003e\\n\u003cp\u003eUsar la \u003cstrong\u003eetiqueta form\u003c/strong\u003e y los tipos de i"])</script><script>self.__next_f.push([1,"nput adecuados activa \u003cstrong\u003evalidaciones del navegador\u003c/strong\u003e que evitan envíos incompletos o con formatos inválidos. Así reduces errores y mejoras la experiencia desde el primer intento.\u003c/p\u003e\\n\u003ch3\u003e¿Qué hace el navegador al usar form y tipos de input?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eComprueba formato de \u003cstrong\u003eemail\u003c/strong\u003e al enviar: falta de arroba dispara un aviso.\u003c/li\u003e\\n\u003cli\u003eMuestra mensajes contextuales cuando algo no coincide con lo esperado.\u003c/li\u003e\\n\u003cli\u003eImpide el envío si un campo \u003cstrong\u003erequire\u003c/strong\u003e está vacío.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003eEjemplo de correo con guía visual usando \u003cstrong\u003eplaceholder\u003c/strong\u003e y obligatoriedad con \u003cstrong\u003erequire\u003c/strong\u003e:\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;email\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;correo\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;correo\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003erequired\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eplaceholder\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;usuario@ejemplos.com\u0026quot;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003ePuntos clave:\\n- \u003cstrong\u003erequire\u003c/strong\u003e obliga a completar el campo antes de enviar.\\n- \u003cstrong\u003eplaceholder\u003c/strong\u003e muestra el formato esperado (por ejemplo, usuario@ejemplos.com).\\n- El navegador valida el patrón básico del correo al momento de enviar.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo restringir un teléfono con pattern y expresión regular?\u003c/h3\u003e\\n\u003cp\u003ePara evitar texto en un teléfono, usa \u003cstrong\u003epattern\u003c/strong\u003e con una \u003cstrong\u003eexpresión regular\u003c/strong\u003e que permita solo dígitos y una longitud exacta.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;text\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;telefono\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;telefono\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Ingresa nueve dígitos\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eplaceholder\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;000000000\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003epattern\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;[0-9]{9}\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003erequired\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eClaves prácticas:\\n- \u003ccode\u003e[0-9]{9}\u003c/code\u003e indica: solo números del 0 al 9 y exactamente 9 caracteres.\\n- \u003cstrong\u003etitle\u003c/strong\u003e muestra una pista al pasar el cursor: “Ingresa nueve dígitos”.\\n- Si el valor no hace “match” con el \u003cstrong\u003epattern\u003c/strong\u003e, el navegador bloquea el envío.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo limitar números, fechas y contraseñas con min, max, step y min length?\u003c/h2\u003e\\n\u003cp\u003eControlar rangos y longitudes evita valores fuera de regla. Con \u003cstrong\u003emin\u003c/strong\u003e, \u003cstrong\u003emax\u003c/strong\u003e, \u003cstrong\u003estep\u003c/strong\u003e y \u003cstrong\u003emin length\u003c/strong\u003e puedes definir límites claros sin JavaScript adicional.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo controlar cantidad con number, min, max y step?\u003c/h3\u003e\\n\u003cp\u003ePara cantidades numéricas, el input de número ya valida que no haya letras. Además, puedes acotar rango y saltos:\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;number\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;cantidad\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;cantidad\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003emin\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;1\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003emax\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;100\u0026quot;\u003c/span\u003e\\n "])</script><script>self.__next_f.push([1,"\u003cspan class=\\\"na\\\"\u003estep\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;5\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003evalue\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;10\u0026quot;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eBuenas prácticas:\\n- \u003cstrong\u003emin\u003c/strong\u003e y \u003cstrong\u003emax\u003c/strong\u003e fijan el rango permitido (ejemplo: del 1 al 100).\\n- \u003cstrong\u003estep\u003c/strong\u003e define saltos (ejemplo: 1, 6, 11, 16...).\\n- El \u003cstrong\u003evalue\u003c/strong\u003e enviado corresponde al número seleccionado; puede sincronizarse con JavaScript si es necesario.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo acotar fechas con date, min y max?\u003c/h3\u003e\\n\u003cp\u003eLimita el calendario a un período válido usando \u003cstrong\u003emin\u003c/strong\u003e y \u003cstrong\u003emax\u003c/strong\u003e. Útil para rangos de edad o periodos de registro.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;date\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;fecha\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;fecha\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003emin\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;2024-01-01\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003emax\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;2024-12-31\u0026quot;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eVentajas:\\n- Solo se puede seleccionar dentro del rango definido.\\n- El calendario inicia en el mínimo y bloquea años fuera del intervalo.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo fortalecer contraseñas con require y min length?\u003c/h3\u003e\\n\u003cp\u003ePara forzar contraseñas más robustas, combina obligatoriedad y longitud mínima.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;password\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;contrasena\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;contrasena\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003erequired\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eminlength\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;8\u0026quot;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eAspectos clave:\\n- \u003cstrong\u003erequire\u003c/strong\u003e evita que quede vacío.\\n- \u003cstrong\u003emin length\u003c/strong\u003e de 8 caracteres impide claves demasiado cortas.\\n- Al intentar enviar con menos de 8, el navegador muestra el error correspondiente.\u003c/p\u003e\\n\u003cp\u003e¿Tienes otros patrones útiles o rangos que te funcionen mejor en tus formularios? Comparte ejemplos y dudas en los comentarios.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false},{\"id\":84737,\"title\":\"Estructura de tablas HTML con thead, tbody y tfoot\",\"url\":\"https://platzi.com/cursos/html/estructura-de-tablas-html-con-thead-tbod/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1d850b0985b9c734ef66_68dc1d850b0985b9c734ef7a_50s.jpg\",\"duration\":504,\"index\":12,\"content\":\"\u003cp\u003eAprende a construir \u003cstrong\u003etablas HTML semánticas\u003c/strong\u003e paso a paso: usa el contenedor table, organiza encabezados con thead, datos con tbody y totales con tfoot. Define filas con tr, títulos con th y celdas con td. Aprovecha colspan para combinar columnas y mostrar un total claro.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo crear una tabla HTML semántica?\u003c/h2\u003e\\n\u003cp\u003eLas tablas fueron clave en los inicios de HTML para dar formato, pero hoy se reservan para \u003cstrong\u003emostrar datos estructurados\u003c/strong\u003e. Aun así, siguen siendo útiles cuando necesitas \u003cstrong\u003ecolumnas, filas y encabezados\u003c/strong\u003e bien definidos. La semántica correcta mejora la claridad del código y el mantenimiento.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eUsa la etiqueta table como contenedor principal.\u003c/li\u003e\\n\u003cli\u003eCrea una fila tr con th para los encabezados.\u003c/li\u003e\\n\u003cli\u003eEnvuelve los encabezados en thead.\u003c/li\u003e\\n\u003cli\u003eColoca el contenido en tbody con td.\u003c/li\u003e\\n\u003cli\u003eCierra"])</script><script>self.__next_f.push([1," con tfoot para el total o resumen.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etable\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ethead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etr\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eth\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eProducto\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eth\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eth\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003ePrecio\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eth\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eth\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eCantidad\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eth\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etr\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ethead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etbody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etr\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eLaptop\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e45 USD\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e2\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etr\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etr\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMouse\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e12 USD\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e5\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etr\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etr\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eTeclado\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e10 USD\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e3\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etr\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etbody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etfoot\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etr\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eth\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eTotal\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eth\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eth\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ecolspan\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;2\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/spa"])</script><script>self.__next_f.push([1,"n\u003e67 USD\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eth\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etr\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etfoot\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etable\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch2\u003e¿Qué etiquetas y atributos usar en tablas?\u003c/h2\u003e\\n\u003cp\u003eLa estructura semántica divide el contenido en \u003cstrong\u003ethead, tbody y tfoot\u003c/strong\u003e. Las \u003cstrong\u003efilas\u003c/strong\u003e se crean con tr y, dentro de ellas, usas th para encabezados y td para datos. La tabla alinea columnas de forma automática y suele mostrar \u003cstrong\u003eseparadores por defecto\u003c/strong\u003e, lo que facilita la lectura incluso sin estilos.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo definir encabezados y filas?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eCrea una fila tr inicial para los encabezados.\u003c/li\u003e\\n\u003cli\u003eUsa th para marcar títulos como Producto, Precio y Cantidad.\u003c/li\u003e\\n\u003cli\u003eAñade más filas con tr para cada producto.\u003c/li\u003e\\n\u003cli\u003eInserta datos con td en el mismo orden de los encabezados.\u003c/li\u003e\\n\u003cli\u003eRecuerda: tr es la \u003cem\u003etable row\u003c/em\u003e, th es el \u003cem\u003etable head\u003c/em\u003e y td es la \u003cem\u003etable data\u003c/em\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo mostrar datos y totales con colspan?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eColoca el resumen en tfoot para separar visualmente el total.\u003c/li\u003e\\n\u003cli\u003eUsa th también en el pie para resaltar el total en \u003cstrong\u003enegritas\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eAplica el atributo colspan=\\\"2\\\" cuando una celda deba ocupar dos columnas.\u003c/li\u003e\\n\u003cli\u003eEjemplo: Total y 67 USD ocupando dos columnas para alinear con Precio y Cantidad.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Qué flujo práctico seguir al construir la tabla?\u003c/h2\u003e\\n\u003cp\u003eEmpieza por el contenedor table, suma thead con encabezados claros, agrega tbody con filas de datos reales y cierra con tfoot para el total. En el ejemplo, se cargan productos como Laptop, Mouse y Teclado, con precios en USD y cantidades que pueden considerarse \u003cem\u003estock\u003c/em\u003e disponible. Al avanzar, el navegador muestra alineación y separadores sin necesidad de estilos adicionales.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eDefine columnas primero: encabezados en thead.\u003c/li\u003e\\n\u003cli\u003eInserta filas en tbody con el mismo orden de columnas.\u003c/li\u003e\\n\u003cli\u003eCalcula y muestra el total en tfoot con colspan cuando corresponda.\u003c/li\u003e\\n\u003cli\u003eAprovecha la semántica para mantener el código claro y escalable.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003e¿Tienes dudas o quieres compartir tu ejemplo de tabla con thead, tbody, tfoot y colspan? Comenta y conversemos.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false}],\"quiz\":{\"id\":31715,\"active\":true,\"title\":\"quiz de Formularios y Tablas\"}},{\"id\":24623,\"title\":\"Contenido Multimedia\",\"materials\":[{\"id\":84738,\"title\":\"Imágenes responsivas con srcset y picture para mejor rendimiento\",\"url\":\"https://platzi.com/cursos/html/imagenes-responsivas-con-srcset-y-pictur/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1d96f77365b4cb2d588e_68dc1d96f77365b4cb2d58a2_140s.jpg\",\"duration\":1399,\"index\":13,\"content\":\"\u003cp\u003eOptimiza tus páginas con \u003cstrong\u003eimágenes responsivas\u003c/strong\u003e que cargan rápido, mantienen la \u003cstrong\u003eaccesibilidad\u003c/strong\u003e y mejoran la \u003cstrong\u003eexperiencia de usuario\u003c/strong\u003e. Aquí verás cómo usar img con srcset y sizes, cuándo elegir picture y cómo sumar atributos de \u003cstrong\u003erendimiento\u003c/strong\u003e como loading lazy y decoding async para un \u003cem\u003eresponsive design\u003c/em\u003e sólido.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo usar imágenes responsivas con img y srcset?\u003c/h2\u003e\\n\u003cp\u003eLa etiqueta img es la base para mostrar fotografías en la web. Con \u003cstrong\u003esrcset\u003c/strong\u003e indicas varias versiones por ancho y con \u003cstrong\u003esizes\u003c/strong\u003e describes cómo se mostrará según el \u003cem\u003eviewport\u003c/em\u003e. El \u003cstrong\u003enavegador decide\u003c/strong\u003e qué archivo descargar según el ancho disponible y tus reglas.\u003c/p\u003e\\n\u003ch3\u003e¿Qué rol cumplen src y alt en accesibilidad?\u003c/h3\u003e\\n\u003cp\u003eEl atributo src apunta al archivo, y \u003cstrong\u003ealt\u003c/strong\u003e ofrece una descripción breve si no carga o para lectores de pantalla.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eUsa descripciones claras y co"])</script><script>self.__next_f.push([1,"ncisas.\u003c/li\u003e\\n\u003cli\u003eMejora la \u003cstrong\u003eaccesibilidad\u003c/strong\u003e y la comprensión del contenido.\u003c/li\u003e\\n\u003cli\u003eAporta contexto si la imagen falla.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo definir srcset por ancho?\u003c/h3\u003e\\n\u003cp\u003eEjemplo con variantes de un hero pensado para \u003cem\u003emobile\u003c/em\u003e, \u003cem\u003etablet\u003c/em\u003e y \u003cem\u003edesktop\u003c/em\u003e:\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/hero-400.jpg\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Vista panorámica\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003esrcset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;\u003c/span\u003e\\n\u003cspan class=\\\"s\\\"\u003e img/hero-400.jpg 400w,\u003c/span\u003e\\n\u003cspan class=\\\"s\\\"\u003e img/hero-800.jpg 800w,\u003c/span\u003e\\n\u003cspan class=\\\"s\\\"\u003e img/hero-1200.jpg 1200w\u003c/span\u003e\\n\u003cspan class=\\\"s\\\"\u003e \u0026quot;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e400w, 800w, 1200w: anchos reales de cada archivo.\u003c/li\u003e\\n\u003cli\u003eEl navegador elige la más adecuada según el ancho disponible.\u003c/li\u003e\\n\u003cli\u003eBeneficio: \u003cstrong\u003emejor calidad con menor peso\u003c/strong\u003e en cada dispositivo.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo controlar el tamaño con sizes?\u003c/h3\u003e\\n\u003cp\u003eDescribe el espacio que ocupará la imagen según el ancho de pantalla. Ejemplo: 100 % hasta 600 px; luego 50 %.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/hero-400.jpg\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Vista panorámica\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003esrcset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;\u003c/span\u003e\\n\u003cspan class=\\\"s\\\"\u003e img/hero-400.jpg 400w,\u003c/span\u003e\\n\u003cspan class=\\\"s\\\"\u003e img/hero-800.jpg 800w,\u003c/span\u003e\\n\u003cspan class=\\\"s\\\"\u003e img/hero-1200.jpg 1200w\u003c/span\u003e\\n\u003cspan class=\\\"s\\\"\u003e \u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003esizes\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;(max-width: 600px) 100vw, 50vw\u0026quot;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e(max-width: 600px) 100vw: ocupa todo el ancho del \u003cem\u003eviewport\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003e50vw: a partir de 600 px, usa la mitad del \u003cem\u003eviewport\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003eBeneficio: \u003cstrong\u003edescargas más precisas\u003c/strong\u003e según el diseño efectivo.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cuándo aplicar picture y source con media queries?\u003c/h2\u003e\\n\u003cp\u003eCuando necesitas \u003cstrong\u003earchivos distintos por dispositivo\u003c/strong\u003e con reglas claras, usa picture con source y media. Define una imagen para \u003cem\u003edesktop/laptop\u003c/em\u003e, otra para \u003cem\u003etablet\u003c/em\u003e y una por defecto para \u003cem\u003emobile\u003c/em\u003e dentro de img.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo escribir reglas media para desktop y tablet?\u003c/h3\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003epicture\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esource\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003emedia\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;(min-width: 768px)\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrcset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/banner-desktop.jpg\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esource\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003emedia\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;(min-width: 480px)\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrcset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/banner-tablet-600x300.jpg\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/banner-mobile.jpg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Paisajes naturales\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003epicture\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e(min-width: 768px): carga "])</script><script>self.__next_f.push([1,"la versión de \u003cstrong\u003edesktop/laptop\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003e(min-width: 480px): prioriza la versión \u003cstrong\u003etablet\u003c/strong\u003e si no se cumple la primera.\u003c/li\u003e\\n\u003cli\u003eFallback img: versión \u003cstrong\u003emobile\u003c/strong\u003e por defecto.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué imagen cargar por defecto en mobile?\u003c/h3\u003e\\n\u003cp\u003eDentro de picture, la etiqueta img es el \u003cstrong\u003efallback\u003c/strong\u003e. Coloca ahí la versión más ligera para \u003cem\u003emobile\u003c/em\u003e y agrega alt descriptivo.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eEn móviles, se usa la imagen por defecto.\u003c/li\u003e\\n\u003cli\u003eAl crecer el ancho, se activan los source según media.\u003c/li\u003e\\n\u003cli\u003eBeneficio: \u003cstrong\u003econtrol explícito\u003c/strong\u003e por dispositivo.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Qué atributos mejoran el rendimiento de imágenes?\u003c/h2\u003e\\n\u003cp\u003eAjusta la descarga y el procesamiento para mejorar la \u003cstrong\u003evelocidad\u003c/strong\u003e y la \u003cstrong\u003efluidez\u003c/strong\u003e. loading y decoding ayudan a evitar bloqueos; width y height evitan saltos de diseño.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo funcionan loading lazy y decoding async?\u003c/h3\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/producto-600.jpg\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Producto destacado\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003esrcset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/producto-300.jpg 300w, img/producto-600.jpg 600w\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003esizes\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;(max-width: 600px) 100vw, 600px\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eloading\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;lazy\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003edecoding\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;async\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003ewidth\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;600\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eheight\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;400\u0026quot;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eloading=\\\"lazy\\\": descarga \u003cstrong\u003esolo cuando te acercas\u003c/strong\u003e al elemento al hacer scroll.\u003c/li\u003e\\n\u003cli\u003edecoding=\\\"async\\\": \u003cstrong\u003eprocesa sin bloquear\u003c/strong\u003e el renderizado, manteniendo la página fluida.\u003c/li\u003e\\n\u003cli\u003eClave: mejora de \u003cstrong\u003eperformance\u003c/strong\u003e y percepción de velocidad.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Por qué definir width y height?\u003c/h3\u003e\\n\u003cp\u003eEstablecer dimensiones evita cambios de layout inesperados mientras las imágenes cargan.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003ewidth y height reservan espacio exacto.\u003c/li\u003e\\n\u003cli\u003eMenos reflujo y mejor \u003cstrong\u003eexperiencia de usuario\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eCoherencia en diseños \u003cem\u003eresponsive\u003c/em\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003eHabilidades y conceptos que pones en práctica:\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eConfigurar img con src, alt, srcset y sizes.\u003c/li\u003e\\n\u003cli\u003eUsar picture y source con media para \u003cem\u003edesktop\u003c/em\u003e, \u003cem\u003etablet\u003c/em\u003e y \u003cem\u003emobile\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003eAplicar loading lazy y decoding async para mejor \u003cstrong\u003erendimiento\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eDiseñar reglas por ancho real del dispositivo y del \u003cem\u003eviewport\u003c/em\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003e¿Te gustaría ver un ejemplo con tus propias imágenes y breakpoints? Cuéntame tu caso en los comentarios y lo afinamos juntos.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false},{\"id\":84739,\"title\":\"Integración de video y audio en HTML5 con controles y compatibilidad\",\"url\":\"https://platzi.com/cursos/html/integracion-de-video-y-audio-en-html5-co/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1e3c24246306a24ffbc8_68dc1e3c24246306a24ffbdc_105s.jpg\",\"duration\":1054,\"index\":14,\"content\":\"\u003cp\u003eAprende a integrar videos y audios en HTML5 con buenas prácticas, accesibilidad y rendimiento. Aquí verás cómo usar etiquetas, atributos clave y compatibilidad de formatos para que tus usuarios disfruten una experiencia fluida y confiable.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo insertar videos HTML5 con controles y dimensiones?\u003c/h2\u003e\\n\u003cp\u003ePara empezar, la etiqueta \u003cvideo\u003e carga un archivo con el atributo src."])</script><script>self.__next_f.push([1," Sin embargo, sin más atributos el video no tiene controles ni tamaño manejable. Agrega controles y dimensiones con los atributos adecuados.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- Variante sencilla --\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003evideo\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;multimedia/video.mp4\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtrols\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ewidth\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;600\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eheight\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;400\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003evideo\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eUsa el atributo \u003cstrong\u003econtrols\u003c/strong\u003e para mostrar el reproductor con play, pausa y barra de progreso.\u003c/li\u003e\\n\u003cli\u003eDefine \u003cstrong\u003ewidth\u003c/strong\u003e y \u003cstrong\u003eheight\u003c/strong\u003e para un tamaño manejable.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003ePara mejorar la carga y la percepción del usuario, utiliza \u003cstrong\u003eposter\u003c/strong\u003e y \u003cstrong\u003epreload\u003c/strong\u003e:\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003evideo\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtrols\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ewidth\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;600\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eheight\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;400\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eposter\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;IMG/banner.jpg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003epreload\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;metadata\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esource\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;multimedia/video.mp4\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;video/mp4\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esource\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;multimedia/video.mov\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;video/mov\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n Tu navegador no soporta formatos de video.\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003evideo\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003eposter\u003c/strong\u003e: muestra una imagen previa mientras carga el video; mejora el rendimiento y la percepción de \u003cem\u003eperformance\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003epreload\u003c/strong\u003e: controla la precarga. Valores útiles: none (no carga nada), metadata (duración y dimensiones, aprox. 300 KB), auto (carga todo o lo posible antes del play).\u003c/li\u003e\\n\u003cli\u003eTexto por defecto: si ningún formato es soportado, aparece un mensaje claro para el usuario.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué formatos y etiquetas usar para compatibilidad?\u003c/h3\u003e\\n\u003cp\u003eNo todos los navegadores soportan lo mismo. \u003cstrong\u003eMP4\u003c/strong\u003e tiene amplio soporte; \u003cstrong\u003eMOV\u003c/strong\u003e no en todos; \u003cstrong\u003eWebM\u003c/strong\u003e suele estar bien soportado. La estrategia es delegar al navegador con múltiples \u003csource\u003e y \u003cstrong\u003etype\u003c/strong\u003e correcto.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eUsa \u003cstrong\u003e\u003csource\u003e\u003c/strong\u003e dentro de \u003cvideo\u003e para listar alternativas.\u003c/li\u003e\\n\u003cli\u003eEspecifica \u003cstrong\u003etype\u003c/strong\u003e como video/mp4, video/mov, etc., para que el navegador elija.\u003c/li\u003e\\n\u003cli\u003eSi no hay soporte, muestra un mensaje estándar en el contenido del \u003cvideo\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo reproducir audio con controles y múltiples formatos?\u003c/h2\u003e\\n\u003cp\u003eLa etiqueta \u003caudio\u003e funciona de forma similar a \u003cvideo\u003e. Sin controles, el audio puede no ser visible (por estilos como display: none). Agrega \u003cstrong\u003econtrols\u003c/strong\u003e para mostrar el reproductor y usa \u003cstrong\u003epreload\u003c/strong\u003e según necesidad de datos.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eaudio\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtrols\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003epreload\u003c/spa"])</script><script>self.__next_f.push([1,"n\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;none\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esource\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;multimedia/audio.mp3\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;audio/mpeg\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n Tu navegador no soporta audio HTML5.\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eaudio\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003econtrols\u003c/strong\u003e: hace visible y usable el reproductor.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003epreload\u003c/strong\u003e: none para ahorrar datos móviles; auto para mejorar la sensación de carga.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003etype\u003c/strong\u003e en audio: para MP3 usa audio/mpeg.\u003c/li\u003e\\n\u003cli\u003eIgual que en video, puedes listar varios \u003csource\u003e (por ejemplo, OGG, MPG) para mayor compatibilidad.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo cuidar la experiencia del usuario y el rendimiento?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eDefine tamaño con \u003cstrong\u003ewidth\u003c/strong\u003e y \u003cstrong\u003eheight\u003c/strong\u003e para evitar saltos de diseño.\u003c/li\u003e\\n\u003cli\u003eMuestra \u003cstrong\u003eposter\u003c/strong\u003e para anticipar contenido y evitar pantallas en blanco.\u003c/li\u003e\\n\u003cli\u003eAjusta \u003cstrong\u003epreload\u003c/strong\u003e a tu contexto: none si quieres ahorrar datos; metadata como equilibrio; auto si necesitas inicios más rápidos.\u003c/li\u003e\\n\u003cli\u003eIncluye mensajes de fallback para accesibilidad y claridad.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo embeber videos de YouTube con \u003cem\u003eiframe\u003c/em\u003e y parámetros útiles?\u003c/h2\u003e\\n\u003cp\u003eYouTube ofrece un código de insertar desde Compartir \u0026gt; Embeber. Ese \u003cem\u003eiframe\u003c/em\u003e trae atributos clave para accesibilidad y control del reproductor. Puedes indicar el segundo de inicio con el parámetro \u003cem\u003estart\u003c/em\u003e.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eiframe\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;https://www.youtube.com/embed/VIDEO_ID?start=60\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Título descriptivo del video\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eframeborder\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;0\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eallow\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;autoplay; accelerometer\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eallowfullscreen\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eiframe\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003estart\u003c/strong\u003e: define el segundo inicial de reproducción (por ejemplo, 60).\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003etitle\u003c/strong\u003e: mejora accesibilidad y SEO; es lo que leen los lectores de pantalla.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eframeborder\u003c/strong\u003e: evita el borde del marco.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eallow\u003c/strong\u003e: habilita capacidades como \u003cem\u003eautoplay\u003c/em\u003e o acelerómetro en orientación.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eallowfullscreen\u003c/strong\u003e: permite ver en pantalla completa.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué buenas prácticas conviene aplicar?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eOfrece varias fuentes con \u003cstrong\u003e\u003csource\u003e\u003c/strong\u003e y \u003cstrong\u003etype\u003c/strong\u003e correcto para video y audio.\u003c/li\u003e\\n\u003cli\u003eAgrega \u003cstrong\u003econtrols\u003c/strong\u003e siempre para usabilidad y accesibilidad.\u003c/li\u003e\\n\u003cli\u003eProporciona texto alternativo dentro de \u003cvideo\u003e/\u003caudio\u003e cuando no hay soporte.\u003c/li\u003e\\n\u003cli\u003eAjusta \u003cstrong\u003epreload\u003c/strong\u003e según el contexto y plan de datos de tu audiencia.\u003c/li\u003e\\n\u003cli\u003eUsa \u003cstrong\u003eposter\u003c/strong\u003e para mejorar la percepción visual y tiempos de espera.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003e¿Tienes dudas sobre \u003cem\u003eiframe\u003c/em\u003e, \u003cem\u003epreload\u003c/em\u003e o formatos como MP4, MOV u OGG? Comparte tu pregunta y cuéntame qué caso de uso quieres resolver.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false}],\"quiz\":{\"id\":31716,\"active\":true,\"title\":\"quiz de Contenido Multimedia\"}},{\"id\":24624,\"title\":\"Accesibilidad Web Y SEO\",\"materials\":[{\"id\":84740,\"title\":\"Atributos ARIA para accesibilidad web con lectores de pantalla\",\"url\":\"https://platzi.com/cursos/html/atributos-aria-para-ac"])</script><script>self.__next_f.push([1,"cesibilidad-web-co/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1e343e36d605d0ac2162_68dc1e343e36d605d0ac2176_81s.jpg\",\"duration\":805,\"index\":15,\"content\":\"\u003cp\u003eLa accesibilidad web comienza con \u003cstrong\u003eHTML semántico\u003c/strong\u003e y se potencia con \u003cstrong\u003eatributos \u003cem\u003eARIA\u003c/em\u003e\u003c/strong\u003e. Aprender a describir acciones, roles y mensajes para \u003cstrong\u003electores de pantalla\u003c/strong\u003e transforma la experiencia de usuarios y hace tu interfaz más clara. Aquí verás cómo usar aria-label, aria-describedby y role tal como se muestra en ejemplos prácticos.\u003c/p\u003e\\n\u003ch2\u003e¿Qué es ARIA y por qué importa en accesibilidad web?\u003c/h2\u003e\\n\u003cp\u003e\u003cem\u003eARIA\u003c/em\u003e proviene de \u003cem\u003eAccessibility Rich Internet Application\u003c/em\u003e y añade atributos a las etiquetas para \u003cstrong\u003edar contexto adicional\u003c/strong\u003e que HTML por sí solo no ofrece. Un lector de pantalla entiende mejor qué es cada elemento y qué acción o descripción comunicar al usuario.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003eHTML semántico primero.\u003c/strong\u003e Proporciona una base sólida para la lectura y estructura.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eARIA como capa extra.\u003c/strong\u003e Aporta descripciones, propósitos y roles cuando la semántica no alcanza.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eMejora la comprensión.\u003c/strong\u003e Indica qué hacer y dónde moverse en la interfaz.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo aplicar aria-label, aria-describedby y role en casos reales?\u003c/h2\u003e\\n\u003cp\u003eA partir de ejemplos sencillos, se muestran patrones útiles que puedes replicar tal cual. La habilidad clave: \u003cstrong\u003eelegir el atributo adecuado\u003c/strong\u003e según si necesitas propósito, descripción o rol.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo clarificar acciones en botones y navegación?\u003c/h3\u003e\\n\u003cp\u003eCuando el icono o texto no explican la acción, usa aria-label para explicitar el propósito.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eBotón de cierre con “X”. La X no dice “cerrar”, el atributo sí.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebutton\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;cerrar ventana\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eX\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebutton\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eNavegación sin título visible. Si hay varias barras de menú, nómbralas.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Menú principal\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eInicio\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/productos\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eProductos\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eClaves prácticas:\\n- Usa aria-label cuando necesites una \u003cstrong\u003edescripción breve del propósito\u003c/strong\u003e.\\n- Mantén los textos \u003cstrong\u003eclaros y específicos\u003c/strong\u003e.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo describir formularios y campos de búsqueda?\u003c/h3\u003e\\n\u003cp\u003eEn inputs, aria-label y aria-describedby orientan acción e instrucciones.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eBuscador con propósito explícito.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;search\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Buscador de productos\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eContras"])</script><script>self.__next_f.push([1,"eña con reglas de formato. El texto de ayuda se asocia mediante aria-describedby.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;password\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eContraseña\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;password\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;password\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-describedby\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;password-help\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esmall\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;password-help\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMínimo ocho caracteres, incluyen números y letras.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esmall\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eClaves prácticas:\\n- aria-label: describe \u003cstrong\u003equé hace\u003c/strong\u003e el campo.\\n- aria-describedby: enlaza \u003cstrong\u003einstrucciones o ayudas\u003c/strong\u003e ya visibles en el DOM.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo enriquecer imágenes y contenedores sin semántica?\u003c/h3\u003e\\n\u003cp\u003eCuando el alt se queda corto, complementa con aria-describedby. Y si usas contenedores genéricos, define roles.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eImagen con descripción extendida.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;grafica.png\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Ventas 2024\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-describedby\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;grafica-descripcion\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;grafica-descripcion\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eLas ventas aumentaron un 40 % en el Q1.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eContenedor comodín con roles semánticos.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erole\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;main\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh3\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eSección principal\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh3\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eContenido del área principal.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erole\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;alert\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eEste es un mensaje de alerta.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eClaves prácticas:\\n- alt: breve y directo; aria-describedby: \u003cstrong\u003edetalle adicional\u003c/strong\u003e cuando hace falta.\\n- role: aporta \u003cstrong\u003esemántica\u003c/strong\u003e a divs cuando no puedes usar etiquetas como header o nav.\u003c/p\u003e\\n\u003ch2\u003e¿Qué buenas prácticas y próximos pasos se recomiendan?\u003c/h2\u003e\\n\u003cp\u003eLa prioridad es que todas las person"])</script><script>self.__next_f.push([1,"as comprendan la interfaz y sus acciones. ARIA es amplio y hay más atributos que pueden ser útiles según el caso.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eConstruye con \u003cstrong\u003eHTML semántico\u003c/strong\u003e y añade \u003cem\u003eARIA\u003c/em\u003e solo para cubrir vacíos.\u003c/li\u003e\\n\u003cli\u003eEmplea aria-label para \u003cstrong\u003epropósito corto\u003c/strong\u003e y aria-describedby para \u003cstrong\u003einstrucciones\u003c/strong\u003e existentes.\u003c/li\u003e\\n\u003cli\u003eUsa role para \u003cstrong\u003edefinir el contexto\u003c/strong\u003e en contenedores genéricos.\u003c/li\u003e\\n\u003cli\u003eConsulta recursos para \u003cstrong\u003eprofundizar en otros atributos de ARIA\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eRecuerda: \u003cstrong\u003eaccesibilidad es para todos\u003c/strong\u003e y es una buena práctica esencial.\u003c/li\u003e\\n\u003cli\u003ePróximo tema: \u003cstrong\u003ebuenas prácticas y SEO\u003c/strong\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003e¿Te quedó alguna duda o quieres compartir cómo aplicarías estos atributos en tu proyecto? Escribe en los comentarios y continuemos la conversación.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false},{\"id\":84741,\"title\":\"Estructura semántica y meta tags para mejorar posicionamiento web\",\"url\":\"https://platzi.com/cursos/html/estructura-semantica-y-meta-tags-para-me/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1e36af2b38b3b2b5a38c_68dc1e36af2b38b3b2b5a3a0_95s.jpg\",\"duration\":949,\"index\":16,\"content\":\"\u003cp\u003eSEO bien aplicado impulsa el alcance orgánico de un sitio sin pagar anuncios. Aquí verás cómo combinar \u003cstrong\u003esemántica HTML\u003c/strong\u003e, \u003cstrong\u003eaccesibilidad\u003c/strong\u003e, \u003cstrong\u003emeta tags\u003c/strong\u003e, estructura clara y optimización de medios para lograr una mejor calificación en buscadores. No es un código único: son prácticas y estrategias coherentes que trabajan juntas.\u003c/p\u003e\\n\u003ch2\u003e¿Qué es SEO y cómo ayuda a crecer de forma orgánica?\u003c/h2\u003e\\n\u003cp\u003eSEO permite que los buscadores muestren tu contenido sin pago directo. Funciona cuando aplicas un \u003cstrong\u003econjunto de buenas prácticas\u003c/strong\u003e: semántica, accesibilidad, estructura correcta y optimización de recursos. Es dinámico y evoluciona; en la era de la AI, las reglas cambian, por lo que conviene mantenerse al día.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eEnfoque: llegar a más gente de forma orgánica.\u003c/li\u003e\\n\u003cli\u003eClave: una sola estrategia no basta; suma prácticas consistentes.\u003c/li\u003e\\n\u003cli\u003eEfecto: mejor calificación en buscadores y mayor visibilidad.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Por qué la semántica y la accesibilidad influyen en SEO?\u003c/h3\u003e\\n\u003cp\u003ePorque ayudan a los buscadores y a los lectores de pantalla a entender la página. Un HTML semántico claro, con roles y \u003cem\u003eARIA labels\u003c/em\u003e, mejora la interpretación del contenido y la experiencia de todos.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo optimizar el head con meta tags, título y \u003cem\u003eOpen Graph\u003c/em\u003e?\u003c/h2\u003e\\n\u003cp\u003eEl head define idioma, codificación, \u003cem\u003emobile first\u003c/em\u003e, título y metadatos que los buscadores y redes sociales usan para indexar y previsualizar tu sitio.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eIdioma con lang: indica el lenguaje principal del documento.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehtml\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003elang\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;es\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eCodificación con charset UTF-8: muestra bien caracteres en español.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003echarset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;UTF-8\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\u003cem\u003eViewport\u003c/em\u003e para \u003cem\u003emobile first\u003c/em\u003e: crítico en móviles y calificación SEO.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;viewport\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;width=device-width, initial-scale=1.0\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\"])</script><script>self.__next_f.push([1,"n\u003cli\u003eTítulo optimizado: 50–60 caracteres, con palabras clave y único por página.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eGuía de SEO: semántica, accesibilidad y rendimiento\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eMeta description: texto que aparece bajo el título en Google; debe reflejar el contenido real.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;description\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Buenas prácticas de SEO con HTML semántico, accesibilidad y optimización para mejorar el posicionamiento orgánico.\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eMeta keywords: hoy tiene menos peso, pero puede incluirse.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;keywords\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;SEO, HTML semántico, accesibilidad, meta tags\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eAutor: atribuye el contenido a una persona o empresa.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;author\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Tu Empresa\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\u003cem\u003eRobots\u003c/em\u003e: indica a las arañas cómo tratar la página: \u003cem\u003eindex\u003c/em\u003e, \u003cem\u003efollow\u003c/em\u003e, \u003cem\u003enoindex\u003c/em\u003e, \u003cem\u003e\u003c/em\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;robots\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;index, follow\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eCanonical: evita contenido duplicado indicando la URL original.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elink\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erel\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;canonical\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;https://ejemplo.com/\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\u003cem\u003eOpen Graph\u003c/em\u003e para redes sociales: control de título, descripción, imagen y URL compartida.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eproperty\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;og:title\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Guía práctica de SEO en HTML\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eproperty\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;og:description\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Semántica, accesibilidad y meta tags para posicionar.\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eproperty\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;og:image\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;https://ejemplo.com/og-image.jpg\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt"])</script><script>self.__next_f.push([1,";\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eproperty\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;og:url\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;https://ejemplo.com/\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eFavicon: refuerza la identidad visual en pestañas y dispositivos.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elink\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erel\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;icon\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/favicon.ico\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;image/x-icon\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch2\u003e¿Qué estructura semántica y accesible mejora tu calificación?\u003c/h2\u003e\\n\u003cp\u003eOrganiza el body con secciones claras, una jerarquía de encabezados correcta y enlaces descriptivos. Optimiza imágenes y videos para rendimiento y experiencia.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eHeader con logotipo enlazando al \u003cem\u003ehome\u003c/em\u003e y aria-label descriptivo.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eheader\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Ir al inicio\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/logo.svg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Logotipo de la empresa\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ewidth\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;120\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eheight\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;40\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eheader\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eNavegación principal con nav y aria-label.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Navegación principal\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eul\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#inicio\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eInicio\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#servicios\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eServicios\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#productos\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eProductos\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"n"])</script><script>self.__next_f.push([1,"t\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#sobre-nosotros\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eSobre nosotros\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#blog\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eBlog\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#contacto\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eContacto\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eul\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eMain con un único H1 por página: regla de oro; H2/H3 para secciones.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emain\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh1\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eSEO con HTML semántico y accesible\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh1\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003earticle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh2\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eBuenas prácticas de estructura\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh2\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eContenido introductorio.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003earticle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eImágenes optimizadas con alt, dimensiones y carga diferida.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/img/ejemplo.webp\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Descripción de la imagen\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ewidth\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;800\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eheight\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;500\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eloading\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;lazy\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eEnlaces internos descriptivos: evita “page” o “info”; explica el destino.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/guia-completa-seo\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eGuía completa de SEO en HTML\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\\n\u003cp\u003eListas para agrupar puntos clave de forma clara.\u003c/p\u003e\\n\u003c/li\u003e\\n\u003cli\u003e\\n\u003cp\u003eVideo con múltiples formatos y atributos que mejoran rendimiento.\u003c/p\u003e\\n\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003evideo\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtrols\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003epreload\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e"])</script><script>self.__next_f.push([1,"=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;metadata\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ewidth\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;800\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esource\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/video/ejemplo.webm\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;video/webm\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esource\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/video/ejemplo.mp4\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;video/mp4\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n Tu navegador no soporta el elemento video.\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003evideo\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eAside para contenido secundario, no principal.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003easide\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh2\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eContenido relacionado\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh2\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eul\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/mejores-practicas\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMejores prácticas\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eul\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003easide\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eFooter con navegaciones adicionales y aria-label específico (por ejemplo, “Enlaces del pie” y “Redes sociales”).\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efooter\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Enlaces del pie\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e…\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Redes sociales\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e…\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efooter\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eHabilidades y conceptos aplicados: definición de SEO y alcance orgánico; HTML semántico con header, nav, main, article, section, aside y footer; uso correcto de H1 único; accesibilidad con \u003cem\u003eARIA labels\u003c/em\u003e; meta tags clave (lang, charset UTF-8, viewport, title, description, keywords con menor peso, author, robots, canonical); \u003cem\u003eOpen Graph\u003c/em\u003e para compartir en redes; favicons; optimización de imágenes con alt, dimensiones y \u003cem\u003elazy loading\u003c/em\u003e; enlaces internos descriptivos; videos con múltiples formatos. Todo suma para mejorar la calificación y el posicionamiento.\u003c/p\u003e\\n\u003cp\u003e¿Tienes dudas o un caso real que quieras optimizar? Coméntalo y afinamos juntos tu implementación.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false}],\"quiz\":{\"id\":31717,\"active\":true,\"title\":\"quiz de Accesibilidad Web Y SEO\"}},{\"id\":24625,\"title\":\"Proyecto final\",\"materials\":[{\"id\":84742,\"title\":\"Portafolio profesional con HTML semántico y SEO\",\"url\":\"https://platzi.com/curs"])</script><script>self.__next_f.push([1,"os/html/portafolio-profesional-con-html-semantic/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1e33cfc42806e7b9a76d_68dc1e33cfc42806e7b9a781_48s.jpg\",\"duration\":481,\"index\":17,\"content\":\"\u003cp\u003eConstruye un portafolio profesional con \u003cstrong\u003eHTML semántico\u003c/strong\u003e, \u003cstrong\u003eaccesibilidad con ARIA\u003c/strong\u003e y \u003cstrong\u003eSEO\u003c/strong\u003e listo para compartir cuando busques trabajo. La guía resume cómo organizar la estructura, los metadatos y la navegación para presentar proyectos, descargar tu CV y optimizar tu presencia en redes sociales.\u003c/p\u003e\\n\u003ch2\u003e¿Qué incluye el proyecto final de portafolio HTML semántico y SEO?\u003c/h2\u003e\\n\u003cp\u003eEste proyecto es tu \u003cstrong\u003eperfil personal\u003c/strong\u003e: una página estática con secciones claras, navegación accesible y metadatos bien configurados. La idea es personalizarlo con tu contenido, no solo copiar y pegar.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003eDatos esenciales\u003c/strong\u003e en el head: título, descripción y codificación.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eSEO básico\u003c/strong\u003e: metadatos y estructura semántica comprensible por buscadores.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003e“Orphan graphs” para redes sociales\u003c/strong\u003e y graphs para Twitter, hoy aún llamado Twitter.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eURLs canónicas\u003c/strong\u003e para evitar contenido duplicado.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eFavicons\u003c/strong\u003e para identidad visual en pestañas y dispositivos.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué metadatos SEO, canonical y favicons configurar?\u003c/h3\u003e\\n\u003cp\u003eConfigura atributos mínimos en el head para buscadores y navegadores.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003echarset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;utf-8\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMi perfil personal\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;description\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Portafolio de proyectos y experiencia.\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elink\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erel\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;canonical\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;https://midominio.com/\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elink\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erel\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;icon\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/favicon.ico\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esizes\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;any\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elink\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erel\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;icon\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/icon.svg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;image/svg+xml\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elink\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erel\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;apple-touch-icon\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/apple-touch-icon.png\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch3\u003e¿Cómo añadir graphs para redes sociales y Twitter?\u003c/h3\u003e\\n\u003cp\u003eIncluye metadatos para compartir correctamente en redes y en Twitte"])</script><script>self.__next_f.push([1,"r.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- graphs para redes sociales --\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eproperty\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;og:title\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Mi portafolio\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eproperty\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;og:description\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Proyectos destacados y experiencia.\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eproperty\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;og:image\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;https://midominio.com/cover.jpg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eproperty\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;og:url\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;https://midominio.com/\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\\n\u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- graphs para Twitter --\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;twitter:card\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;summary_large_image\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;twitter:title\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Mi portafolio\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;twitter:description\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Proyectos y CV para descarga.\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;twitter:image\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;https://midominio.com/cover.jpg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch2\u003e¿Cómo estructurar el header, navegación y CTA con ARIA?\u003c/h2\u003e\\n\u003cp\u003eEl \u003cem\u003eheader\u003c/em\u003e superior integra logotipo/ícono, tu nombre y el título de la página (por ejemplo, “Mi portafolio”). La \u003cstrong\u003enavegación principal\u003c/strong\u003e usa ARIA para mejorar la accesibilidad con lectores de software. Incluye \u003cstrong\u003eacciones rápidas\u003c/strong\u003e como la descarga de tu CV.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo usar el atributo download y aria-label en enlaces?\u003c/h3\u003e\\n\u003cp\u003ePermite que el CV se descargue directo con un enlace accesible.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Navegación principal\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/docs/CV.pdf\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003edownload\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Descarga el CV en PDF\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eDescargar CV\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/spa"])</script><script>self.__next_f.push([1,"n\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch3\u003e¿Cómo preparar un selector de idioma con JavaScript?\u003c/h3\u003e\\n\u003cp\u003eEl selector se maqueta ahora y se habilita después con \u003cem\u003eJavaScript\u003c/em\u003e para traducir contenido.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;lang\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Cambiar idioma\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eIdioma\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eselect\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;lang\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;lang\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-controls\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;contenido\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eoption\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003evalue\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;es\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eEspañol\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eoption\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eoption\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003evalue\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;en\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eEnglish\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eoption\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eselect\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch2\u003e¿Cómo organizar el main, hero y enlaces internos en una landing?\u003c/h2\u003e\\n\u003cp\u003eEl contenido principal vive en el elemento semántico \u003cstrong\u003emain\u003c/strong\u003e. El \u003cem\u003ehero\u003c/em\u003e presenta mensajes y \u003cem\u003ecall to action\u003c/em\u003e. Además, puedes mover al usuario a secciones específicas de la misma \u003cem\u003elanding\u003c/em\u003e usando IDs en enlaces.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo enlazar secciones con IDs en una landing?\u003c/h3\u003e\\n\u003cp\u003eCrea anclas internas que desplacen a áreas como “Proyectos destacados”.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emain\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erole\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;main\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esection\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Hero\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#proyectos-destacados\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eVer mis proyectos\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esection\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esection\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;proyectos-destacados\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Proyectos destacados\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- Tarjetas de proyectos --\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esection\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emain\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eUsa el atributo id en la sección destino.\u003c/li\u003e\\n\u003cli\u003eEnlaza con href=\\\"#id\\\" para el desplazamiento interno.\u003c/li\u003e\\n\u003cli\u003eMantén los CTA claros y descriptivos.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo usar div como comodines y roles semánticos?\u003c/h3\u003e\\n\u003cp\u003eCuando no exista una etiqueta específica, usa div como contenedor y agrega roles o ARIA si aporta claridad.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p"])</script><script>self.__next_f.push([1,"\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esection\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Estadísticas rápidas\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erole\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;group\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Logros\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e+10 proyectos.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e3 productos lanzados.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esection\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch3\u003e¿Cómo optimizar imágenes con picture, source y figure?\u003c/h3\u003e\\n\u003cp\u003eSirve imágenes por formato y tamaño, con texto alternativo y un pie explicativo.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efigure\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003epicture\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esource\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;image/avif\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrcset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/img/desk.avif\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esource\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;image/webp\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrcset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/img/desk.webp\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/img/desk.jpg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Diego De Granda en su espacio de trabajo\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003epicture\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efigcaption\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003etitle caption: foto en el espacio de trabajo.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efigcaption\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efigure\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eUsa figure y figcaption para contexto visual.\u003c/li\u003e\\n\u003cli\u003eEmplea picture y source para formatos modernos.\u003c/li\u003e\\n\u003cli\u003eDefine alt descriptivo y conciso.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo presentar “Sobre mí”, valores y enlaces?\u003c/h3\u003e\\n\u003cp\u003eOrganiza un section con H2 y subsecciones con H3 para valores, citas y una tabla simple.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eIncluye texto y quotes para tu voz personal.\u003c/li\u003e\\n\u003cli\u003eAñade enlaces externos a más información.\u003c/li\u003e\\n\u003cli\u003eMantén la jerarquía: H2 para secciones, H3 para detalles.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003ePor último, agrega estilos con \u003cstrong\u003eCSS\u003c/strong\u003e cuando termines la estructura. Será una \u003cstrong\u003epágina estática\u003c/strong\u003e lista para compartir; no requiere interacción para mostrar tu información, imágenes y texto. Es una \u003cstrong\u003ebase completa\u003c/strong\u003e con HTML semántico, accesible y con un porcentaje de \u003cstrong\u003eSEO\u003c/strong\u003e que facilita que la gente llegue a tu contenido. Como nota inspiradora: Diego De Granda comparte que tiene más de quince años en desarrollo de software y producto, y en años recientes ha trabajado en productos base con inteligencia artificial.\u003c/p\u003e\\n\u003cp\u003e¿Tienes dudas o quieres mostrar tu versión personalizada? Deja un c"])</script><script>self.__next_f.push([1,"omentario y comparte tu portafolio.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false}],\"quiz\":null}]}],[\"$\",\"div\",null,{\"className\":\"page_Classes__BmZyF page_Classes--accountless__L7fZw\",\"children\":[[\"$\",\"div\",null,{\"className\":\"page_Classes__info__PS61G\",\"children\":[\"$\",\"$L20\",null,{\"concepts\":[{\"id\":24620,\"title\":\"Fundamentos de HTML\",\"materials\":[{\"id\":84744,\"title\":\"Maquetación web con HTML semántico y accesible\",\"url\":\"https://platzi.com/cursos/html/maquetacion-web-con-html-semantico-y-acc/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc33f5fa4df65bc2b717cb_68dc33f5fa4df65bc2b717df_4s.jpg\",\"duration\":38,\"index\":1,\"content\":\"\u003cp\u003eAprende a construir páginas web desde cero con \u003cstrong\u003eHTML\u003c/strong\u003e, enfocándote en \u003cstrong\u003emaquetación semántica\u003c/strong\u003e, \u003cstrong\u003eaccesible\u003c/strong\u003e y con \u003cstrong\u003ebuenas prácticas para SEO\u003c/strong\u003e. Terminarás con el \u003cstrong\u003ecódigo base\u003c/strong\u003e de tu primer \u003cstrong\u003eportafolio profesional\u003c/strong\u003e, sin necesitar conocimientos de programación, solo ganas de iniciar tu camino como \u003cem\u003efrontend\u003c/em\u003e. Acompaña a \u003cstrong\u003eDiego de Granda\u003c/strong\u003e, profesional con \u003cstrong\u003emás de 15 años\u003c/strong\u003e en la industria de \u003cem\u003esoftware\u003c/em\u003e y desarrollo de producto.\u003c/p\u003e\\r\\n\u003ch2\u003e¿Qué aprenderás de HTML y maquetación semántica?\u003c/h2\u003e\\r\\n\u003cp\u003eLa ruta empieza por el primer paso: \u003cstrong\u003emaquetar con HTML\u003c/strong\u003e, uno de los tres lenguajes que entiende el navegador. El objetivo es construir estructura clara y preparada para crecer, cuidando la semántica desde el inicio.\u003c/p\u003e\\r\\n\u003ch3\u003e¿Cuál es el primer paso con HTML?\u003c/h3\u003e\\r\\n\u003cul\u003e\\r\\n\u003cli\u003eEntender que HTML es el lenguaje de maquetación del navegador.\u003c/li\u003e\\r\\n\u003cli\u003eOrganizar contenido con enfoque semántico desde el inicio.\u003c/li\u003e\\r\\n\u003cli\u003eTrabajar una base sólida para futuras mejoras.\u003c/li\u003e\\r\\n\u003c/ul\u003e\\r\\n\u003ch3\u003e¿Qué construirás al final del curso?\u003c/h3\u003e\\r\\n\u003cul\u003e\\r\\n\u003cli\u003eUn \u003cstrong\u003ecódigo base\u003c/strong\u003e listo para evolucionar.\u003c/li\u003e\\r\\n\u003cli\u003eEl inicio de tu \u003cstrong\u003eportafolio profesional\u003c/strong\u003e.\u003c/li\u003e\\r\\n\u003cli\u003eUn proyecto que demuestra maquetación semántica y accesible.\u003c/li\u003e\\r\\n\u003c/ul\u003e\\r\\n\u003ch2\u003e¿Cómo se relaciona con accesibilidad y SEO?\u003c/h2\u003e\\r\\n\u003cp\u003eLa \u003cstrong\u003emaquetación semántica\u003c/strong\u003e facilita que el navegador comprenda tu contenido y promueve una experiencia \u003cstrong\u003eaccesible\u003c/strong\u003e desde la base. Además, seguir \u003cstrong\u003ebuenas prácticas para SEO\u003c/strong\u003e te prepara para posicionar mejor tu sitio sin complejidad adicional.\u003c/p\u003e\\r\\n\u003ch3\u003e¿Qué enfoque tendrás para accesibilidad y SEO?\u003c/h3\u003e\\r\\n\u003cul\u003e\\r\\n\u003cli\u003eEstructura clara y comprensible para el navegador.\u003c/li\u003e\\r\\n\u003cli\u003eInclusión como principio del diseño accesible.\u003c/li\u003e\\r\\n\u003cli\u003ePrácticas alineadas con posicionamiento en buscadores.\u003c/li\u003e\\r\\n\u003c/ul\u003e\\r\\n\u003ch2\u003e¿Quién es tu profesor y qué necesitas para iniciar?\u003c/h2\u003e\\r\\n\u003cp\u003eEl curso lo guía \u003cstrong\u003eDiego de Granda\u003c/strong\u003e, con \u003cstrong\u003emás de 15 años\u003c/strong\u003e de experiencia en la industria de \u003cem\u003esoftware\u003c/em\u003e y desarrollo de producto. No requieres experiencia previa en programación ni otros lenguajes.\u003c/p\u003e\\r\\n\u003ch3\u003e¿Qué requisitos y objetivos tendrás?\u003c/h3\u003e\\r\\n\u003cul\u003e\\r\\n\u003cli\u003eRequisitos: ninguna base de programación, solo motivación.\u003c/li\u003e\\r\\n\u003cli\u003eObjetivo: construir el \u003cstrong\u003ecódigo base\u003c/strong\u003e de tu portafolio.\u003c/li\u003e\\r\\n\u003cli\u003eCamino: iniciar tu perfil como \u003cem\u003efrontend\u003c/em\u003e con fundamentos claros.\u003c/li\u003e\\r\\n\u003c/ul\u003e\\r\\n\u003cp\u003e¿Listo para comenzar a maquetar con HTML y dar el primer paso hacia tu portafolio? Comparte en comentarios qué te motiva a construir tu sitio y en qué quieres enfocarte.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false},{\"id\":84727,\"title\":\"Cómo funciona la web desde URL hasta página renderizada\",\"url\":\"https://platzi.com/cursos/html/como-funciona-la-web-desde-url-hasta-pag/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1cc574333fb4a977b69e_68dc1cc574333fb4a977b6ad_63s.jpg\",\"duration\":632,\"index\":2,\"content\":\"\u003cp\u003eComprende, paso a paso y sin rodeos, cómo funciona "])</script><script>self.__next_f.push([1,"la web desde que escribes una URL hasta que se renderiza una página. Aquí verás el modelo cliente-servidor, el rol del DNS y la IP, y por qué \u003cstrong\u003eHTML, CSS y JavaScript\u003c/strong\u003e son la base del navegador. Además, distinguirás \u003cstrong\u003epáginas estáticas y dinámicas\u003c/strong\u003e, y los perfiles de \u003cstrong\u003efrontend\u003c/strong\u003e y \u003cstrong\u003ebackend\u003c/strong\u003e, con las herramientas clave para empezar.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo se conecta el navegador con Internet y el servidor?\u003c/h2\u003e\\n\u003cp\u003eAntes de escribir la primera línea de HTML, conviene entender el flujo completo. Esa visión te ayuda a depurar mejor y a tomar decisiones desde el inicio.\u003c/p\u003e\\n\u003ch3\u003e¿Qué ocurre con un HTTP request cuando escribes una URL?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eAl teclear una dirección y presionar Enter, el navegador hace un \u003cstrong\u003eHTTP request\u003c/strong\u003e por Internet hacia el \u003cstrong\u003eservidor\u003c/strong\u003e que hospeda el proyecto.\u003c/li\u003e\\n\u003cli\u003eEl servidor localiza la URL, arma una \u003cstrong\u003erespuesta HTTP\u003c/strong\u003e con un paquete de archivos y la envía de vuelta al \u003cstrong\u003ecliente\u003c/strong\u003e: tu navegador.\u003c/li\u003e\\n\u003cli\u003eEjemplo de flujo mencionado: al ingresar a plachi.com, el servidor responde con el proyecto y el navegador empieza a interpretarlo.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo se relacionan DNS y la IP address?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eEl \u003cstrong\u003eDNS (Domain Name System)\u003c/strong\u003e traduce el dominio a una \u003cstrong\u003eIP address\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eEsa IP conecta con el servidor correcto para ubicar el proyecto solicitado.\u003c/li\u003e\\n\u003cli\u003eLa regla práctica: escribimos dominios fáciles de recordar y el sistema los transforma a números de IP para hacer la conexión.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué lenguajes entiende el navegador?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003eHTML\u003c/strong\u003e: estructura del contenido que aprenderás primero.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eCSS\u003c/strong\u003e: estilos para definir la apariencia.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eJavaScript\u003c/strong\u003e: interacción y dinamismo en la página.\u003c/li\u003e\\n\u003cli\u003eCon estos tres, puedes construir experiencias de lectura o páginas interactivas.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo lee y renderiza el navegador una página web?\u003c/h2\u003e\\n\u003cp\u003eEl navegador procesa de arriba hacia abajo y resuelve dependencias mientras interpreta. Este orden importa para evitar bloqueos y errores.\u003c/p\u003e\\n\u003ch3\u003e¿Qué es el DOM y el CSS Object Module?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003ePrimero descarga y analiza \u003cstrong\u003eHTML\u003c/strong\u003e, generando el \u003cstrong\u003eDOM (Document Object Model)\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eLuego, al encontrar estilos, descarga \u003cstrong\u003eCSS\u003c/strong\u003e y crea el \u003cstrong\u003eCSS Object Module\u003c/strong\u003e, similar al DOM pero solo de estilos.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo descarga recursos y ejecuta JavaScript?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eEl HTML indica recursos: \u003cstrong\u003eCSS\u003c/strong\u003e, \u003cstrong\u003eJavaScript\u003c/strong\u003e, imágenes y otros archivos.\u003c/li\u003e\\n\u003cli\u003eEl navegador descarga estilos, los interpreta y los aplica al DOM.\u003c/li\u003e\\n\u003cli\u003eCuando el HTML requiere \u003cstrong\u003eJavaScript\u003c/strong\u003e, lo descarga, lo interpreta y ejecuta para lograr la interacción.\u003c/li\u003e\\n\u003cli\u003eCon HTML, CSS y JavaScript listos, el navegador \u003cstrong\u003erenderiza\u003c/strong\u003e la página.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿En qué se diferencian páginas estáticas y dinámicas?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003ePáginas estáticas\u003c/strong\u003e: contenido de consumo. Suelen usar HTML y CSS, rara vez JavaScript. No permiten acciones del usuario como comentar o dar like.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003ePáginas dinámicas (aplicaciones web)\u003c/strong\u003e: permiten acciones del usuario. Ejemplos mencionados: platzi.com para cursos, Facebook, Amazon, Gmail y sistemas bancarios. Tu perfil y resultados cambian según tus interacciones.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Qué roles, herramientas y siguientes pasos necesitas?\u003c/h2\u003e\\n\u003cp\u003eConocer responsabilidades te orienta en el aprendizaje y te prepara para construir proyectos funcionales.\u003c/p\u003e\\n\u003ch3\u003e¿Qué hace frontend y por dónde empezar?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003eFrontend\u003c/strong\u003e: todo lo visual que el navegador renderiza y con lo que el usuario interactúa.\u003c/li\u003e\\n\u003cli\u003eRuta sugerida: \u003cstrong\u003eHTML\u003c/strong\u003e primero, luego \u003cstrong\u003eCSS\u003c/strong\u003e, y después \u003cstrong\u003eJavaScript\u003c/strong\u003e para el dinamismo.\u003c/li\u003e\\n\u003cli\u003eMás adelante, podrás aprender frameworks como \u003cem\u003eRea"])</script><script>self.__next_f.push([1,"ct\u003c/em\u003e, \u003cem\u003eVue\u003c/em\u003e o \u003cem\u003eAngular\u003c/em\u003e cuando domines HTML y CSS.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué hace backend y cómo trabaja con datos?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003eBackend\u003c/strong\u003e: todo lo que sucede en el \u003cstrong\u003eservidor\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eGestiona la lógica, atiende solicitudes del navegador y se conecta con \u003cstrong\u003ebases de datos\u003c/strong\u003e para entregar información.\u003c/li\u003e\\n\u003cli\u003eRequiere lenguajes de programación del lado del servidor y lenguajes para bases de datos.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué herramientas usar para construir y probar?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003eEditores de texto\u003c/strong\u003e: VSCode, Cursor u otros que faciliten escribir código.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eNavegadores web\u003c/strong\u003e: Chrome, Firefox, Safari o el de tu preferencia para visualizar y depurar.\u003c/li\u003e\\n\u003cli\u003eHabilidades que pondrás en práctica.\u003c/li\u003e\\n\u003cli\u003eComprender el flujo cliente-servidor y las respuestas HTTP.\u003c/li\u003e\\n\u003cli\u003eIdentificar el papel del DNS y la IP en la resolución de dominios.\u003c/li\u003e\\n\u003cli\u003eDistinguir entre HTML, CSS y JavaScript al renderizar.\u003c/li\u003e\\n\u003cli\u003eDiferenciar páginas estáticas y dinámicas según la interacción.\u003c/li\u003e\\n\u003cli\u003eReconocer responsabilidades de \u003cem\u003efrontend\u003c/em\u003e y \u003cem\u003ebackend\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003eUsar editores y navegadores para construir y probar.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003e¿Te gustaría profundizar en alguna parte del flujo, por ejemplo DOM o páginas dinámicas? Comparte tus dudas y experiencias en los comentarios.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false},{\"id\":84728,\"title\":\"Configuración de VSCode y estructura HTML5 básica\",\"url\":\"https://platzi.com/cursos/html/configuracion-de-vscode-y-estructura-htm/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1cdae738b5b94215cc55_68dc1cdae738b5b94215cc69_83s.jpg\",\"duration\":828,\"index\":3,\"content\":\"\u003cp\u003eCrear tu primer sitio en HTML5 es más simple de lo que parece. Aquí verás cómo configurar \u003cem\u003eVSCode\u003c/em\u003e, usar el navegador con el inspector de elementos, generar la estructura base con un atajo y renderizar tu primer Hola mundo con buenas prácticas. Todo paso a paso y con conceptos clave explicados de forma clara.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo preparar las herramientas para HTML con VSCode y navegador?\u003c/h2\u003e\\n\u003cp\u003ePara escribir y visualizar código necesitas dos piezas: un editor de texto y un navegador. El editor recomendado es \u003cem\u003eVSCode\u003c/em\u003e. El navegador es esencial porque ahí verás cómo se renderiza el HTML y porque incluye el inspector de elementos.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eInstala \u003cem\u003eVSCode\u003c/em\u003e y ábrelo. Sigue el instalador según tu sistema operativo.\u003c/li\u003e\\n\u003cli\u003eUsa un navegador moderno con inspector de elementos. Te permitirá ver el HTML real y \u003cstrong\u003edebuggear\u003c/strong\u003e con feedback en tiempo real.\u003c/li\u003e\\n\u003cli\u003eCrea una carpeta raíz llamada \\\"Curso HTML\\\". Allí guardarás todo el contenido, clase por clase.\u003c/li\u003e\\n\u003cli\u003eDentro, crea \\\"uno_Fundamentos_HTML\\\" para el módulo y luego \\\"clase uno\\\" como subcarpeta.\u003c/li\u003e\\n\u003cli\u003eEvita acentos y espacios en nombres. Usa guion medio, guion bajo o \u003cem\u003ecamel case\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003eEn \\\"clase uno\\\", crea el archivo index.html.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Para qué sirve el inspector de elementos?\u003c/h3\u003e\\n\u003cp\u003eEl inspector muestra el árbol real de etiquetas: html, head y body. Permite identificar errores, probar cambios rápidos y entender qué se está renderizando. Es clave para \u003cstrong\u003edebuggear\u003c/strong\u003e y para recibir \u003cstrong\u003efeedback en tiempo real\u003c/strong\u003e antes de llevar los cambios al editor.\u003c/p\u003e\\n\u003ch2\u003e¿Qué incluye la estructura básica de HTML5 y por qué importa?\u003c/h2\u003e\\n\u003cp\u003eEn index.html puedes generar la base con un atajo: escribe ! y presiona tab. Esto crea el esqueleto HTML5 con etiquetas contenedoras que abren y cierran. Es importante comprender cada línea para que después te enfoques en el contenido dentro de body.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"cp\\\"\u003e\u0026lt;!DOCTYPE html\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehtml\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003elang\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;en\u0026quot;\u003c/span\u003e\u003cspan class=\\\""])</script><script>self.__next_f.push([1,"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003echarset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;UTF-8\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;viewport\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;width=device-width, initial-scale=1.0\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003edocument\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehtml\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eLas etiquetas contenedoras se abren y se cierran con slash. El contenido va dentro del par.\u003c/li\u003e\\n\u003cli\u003eTodo lo visible en el navegador está dentro de body. Lo de head son instrucciones para el navegador.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué hacen doctype html y el atributo lang?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u0026lt;!DOCTYPE html\u0026gt; le indica al navegador: esto es \u003cstrong\u003eHTML5\u003c/strong\u003e. Así usas el estándar vigente y sus etiquetas.\u003c/li\u003e\\n\u003cli\u003eEn \u003chtml lang=\\\"en\\\"\u003e defines el idioma del contenido. El navegador puede ofrecer traducción automática si tu idioma local difiere, por ejemplo con \u003cem\u003eGoogle Translator\u003c/em\u003e mediante un pequeño \u003cem\u003eprompt\u003c/em\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué hace meta charset y meta viewport?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cmeta charset=\\\"UTF-8\\\"\u003e habilita \u003cstrong\u003ecaracteres especiales y emojis\u003c/strong\u003e. Sin esto, acentos y símbolos pueden verse como códigos extraños.\u003c/li\u003e\\n\u003cli\u003e\u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"\u003e mejora la visualización en \u003cstrong\u003edispositivos móviles\u003c/strong\u003e. Usa el \u003cstrong\u003eancho real del dispositivo\u003c/strong\u003e y evita un \u003cstrong\u003ezoom inicial\u003c/strong\u003e que distorsione el diseño.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Dónde va el contenido visible: body?\u003c/h3\u003e\\n\u003cp\u003eTodo lo que agregues dentro de body se renderiza. El head aloja reglas y metadatos: estilos, configuración del documento y el \u003ctitle\u003e, que define el texto de la pestaña del navegador.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo crear y visualizar tu primer HTML: h1 y párrafo?\u003c/h2\u003e\\n\u003cp\u003eAbre index.html con \u003cem\u003eOpen with Live Server\u003c/em\u003e desde el clic derecho en el explorador de archivos. Verás en la URL que se sirve desde local, con la ruta de tus carpetas y el index.html. En el inspector podrás verificar doctype, html, head y body.\u003c/p\u003e\\n\u003cp\u003eAgrega contenido dentro de body:\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh1\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eHola mundo\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh1\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eEs mi primer sitio web.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eBuenas prácticas y recordatorios.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eGuarda y revisa en el navegador para ver cómo se renderiza el cambio.\u003c/li\u003e\\n\u003cli\u003eVerifica en el inspector que h1 y p aparezcan dentro de body.\u003c/li\u003e\\n\u003cli\u003eCambia el \u003ctitle\u003e para ajustar el texto de la pestaña.\u003c/li\u003e\\n\u003cli\u003eUsa el atajo ! + tab para generar la estructura base rápidamente.\u003c/li\u003e\\n\u003cli\u003eNombres de archivos y carpetas sin acentos ni espacios. Usa guion medio, guion bajo o \u003cem\u003ecamel case\u003c/em\u003e.\u003c/li\u003e\\n\u003c"])</script><script>self.__next_f.push([1,"li\u003eRecuerda que las etiquetas contenedoras se cierran con slash.\u003c/li\u003e\\n\u003cli\u003eMantén meta charset=\\\"UTF-8\\\" y meta viewport para compatibilidad y móviles.\u003c/li\u003e\\n\u003cli\u003eUsa el inspector para \u003cstrong\u003edebuggear\u003c/strong\u003e errores y aplicar correcciones informadas.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003e¿Tienes dudas o quieres compartir cómo nombraste tus carpetas y qué viste en el inspector? Deja un comentario y seguimos construyendo juntos.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false},{\"id\":84729,\"title\":\"Etiquetas de texto y jerarquía en HTML\",\"url\":\"https://platzi.com/cursos/html/etiquetas-de-texto-y-jerarquia-en-html/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1cc8b0782cb9a7f3d5f8_68dc1cc8b0782cb9a7f3d60c_41s.jpg\",\"duration\":411,\"index\":4,\"content\":\"\u003cp\u003eAprende a organizar texto en HTML con una \u003cstrong\u003ejerarquía clara\u003c/strong\u003e. Usar bien \u003cstrong\u003eH1 a H6\u003c/strong\u003e, \u003cstrong\u003epárrafos\u003c/strong\u003e, \u003cstrong\u003estrong\u003c/strong\u003e y \u003cstrong\u003eblockquote\u003c/strong\u003e mejora la lectura y guía al navegador sobre lo más importante. Verás cómo crear la estructura base, cambiar el \u003cstrong\u003etítulo de la pestaña\u003c/strong\u003e y abrir el archivo en el navegador para validar resultados.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo estructurar HTML y cambiar el título de la pestaña?\u003c/h2\u003e\\n\u003cp\u003eComienza generando la \u003cstrong\u003eestructura básica de HTML\u003c/strong\u003e y ajusta el \u003cstrong\u003etítulo\u003c/strong\u003e para identificar tu proyecto como “Práctica texto”. Abre el archivo en el navegador para confirmar que el título aparece en la pestaña y que el contenido se renderiza con estilos por defecto.\u003c/p\u003e\\n\u003ch3\u003e¿Qué código base usar?\u003c/h3\u003e\\n\u003cp\u003eUsa un archivo index.html con la estructura mínima y el título configurado.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"cp\\\"\u003e\u0026lt;!DOCTYPE html\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehtml\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003elang\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;es\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003echarset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;UTF-8\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003ePráctica texto\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- Contenido --\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehtml\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eGenera la estructura con tu atajo de “símbolo de alineación” y tab.\u003c/li\u003e\\n\u003cli\u003eCambia el título a “Práctica texto”.\u003c/li\u003e\\n\u003cli\u003eAbre en el navegador y ajusta el zoom si lo necesitas.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Qué jerarquía de encabezados H1 a H6 conviene?\u003c/h2\u003e\\n\u003cp\u003eLos encabezados vienen con \u003cstrong\u003eestilos por defecto\u003c/strong\u003e que muestran su jerarquía visual. \u003cstrong\u003eH1\u003c/strong\u003e es el más grande e importante. \u003cstrong\u003eH2\u003c/strong\u003e es secundario. \u003cstrong\u003eH3\u003c/strong\u003e funciona como \u003cstrong\u003esubsecciones\u003c/strong\u003e dentro de un H2. \u003cstrong\u003eH4 a H6\u003c/strong\u003e siguen en menor importancia.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh1\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eTítulo uno\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh1\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh2\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eTítulo dos\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh2\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh3\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eSub"])</script><script>self.__next_f.push([1,"sección del H2\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh3\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch3\u003e¿Cuántos H1, H2 y H3 por archivo?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eUn solo \u003cstrong\u003eH1\u003c/strong\u003e por archivo es buena práctica.\u003c/li\u003e\\n\u003cli\u003ePuedes tener varios \u003cstrong\u003eH2\u003c/strong\u003e según tu estructura.\u003c/li\u003e\\n\u003cli\u003eUsa \u003cstrong\u003eH3\u003c/strong\u003e para subdividir contenido dentro de un H2.\u003c/li\u003e\\n\u003cli\u003e\\n\u003cp\u003eEvita usar H4, H5 o H6 para texto común si necesitas párrafos.\u003c/p\u003e\\n\u003c/li\u003e\\n\u003cli\u003e\\n\u003cp\u003eBeneficio clave. El navegador entiende qué es lo más importante y el lector también.\u003c/p\u003e\\n\u003c/li\u003e\\n\u003cli\u003eSeñal visual. El tamaño refuerza la jerarquía al renderizar el documento.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo escribir párrafos, dar énfasis y citar?\u003c/h2\u003e\\n\u003cp\u003ePara texto de explicación usa la etiqueta \u003cstrong\u003ep\u003c/strong\u003e. No uses encabezados para contenido que debe ser un párrafo. Si necesitas \u003cstrong\u003eresaltar\u003c/strong\u003e una parte del texto dentro del párrafo, emplea \u003cstrong\u003estrong\u003c/strong\u003e. Para \u003cstrong\u003ecitas\u003c/strong\u003e o fragmentos destacados utiliza \u003cstrong\u003eblockquote\u003c/strong\u003e, que se muestra con un estilo distinto al párrafo.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo resaltar con strong sin cambiar la semántica?\u003c/h3\u003e\\n\u003cp\u003eDentro del párrafo, rodea la parte relevante con strong para darle énfasis visual.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eSoy un texto, pero \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003estrong\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eesto es más importante\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003estrong\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eÚsalo para marcar énfasis en una frase.\u003c/li\u003e\\n\u003cli\u003eNo implica que el resto del párrafo sea menos importante en el significado, solo lo resalta a nivel visual.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cuándo usar blockquote e inspeccionar estilos?\u003c/h3\u003e\\n\u003cp\u003eEmplea \u003cstrong\u003eblockquote\u003c/strong\u003e para citar texto o palabras específicas.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eblockquote\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eCurso de HTML\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eblockquote\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eSe renderiza con estilo distinto al párrafo.\u003c/li\u003e\\n\u003cli\u003eÚtil para citas o extractos destacados.\u003c/li\u003e\\n\u003cli\u003eCon el \u003cstrong\u003einspector de elementos\u003c/strong\u003e puedes ver cómo el navegador aplica estilos distintos a blockquote y p.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué habilidades prácticas se refuerzan?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eCrear la estructura básica de HTML en un index.html.\u003c/li\u003e\\n\u003cli\u003eCambiar el \u003cstrong\u003etítulo de la pestaña\u003c/strong\u003e a “Práctica texto”.\u003c/li\u003e\\n\u003cli\u003eEntender la \u003cstrong\u003ejerarquía de encabezados\u003c/strong\u003e H1 a H6.\u003c/li\u003e\\n\u003cli\u003eRespetar la regla de \u003cstrong\u003eun H1 por archivo\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eEscribir texto con \u003cstrong\u003ep\u003c/strong\u003e en lugar de encabezados.\u003c/li\u003e\\n\u003cli\u003eDar énfasis con \u003cstrong\u003estrong\u003c/strong\u003e cuando haga falta.\u003c/li\u003e\\n\u003cli\u003eCitar con \u003cstrong\u003eblockquote\u003c/strong\u003e y validar estilos en el \u003cstrong\u003einspector de elementos\u003c/strong\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003e¿Te quedaron dudas o tienes un ejemplo que quieras revisar? Comenta qué estructura de encabezados planeas usar y qué parte del texto necesitas destacar.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false},{\"id\":84730,\"title\":\"Insertar imágenes en HTML con optimización y accesibilidad\",\"url\":\"https://platzi.com/cursos/html/insertar-imagenes-en-html-con-optimizaci/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1cdf74c8d2b8b3afdbb1_68dc1cdf74c8d2b8b3afdbc5_103s.jpg\",\"duration\":1034,\"index\":5,\"content\":\"\u003cp\u003eInsertar imágenes en HTML es más que mostrar una foto: es construir una \u003cstrong\u003eestructura semántica\u003c/strong\u003e, con \u003cstrong\u003eaccesibilidad\u003c/strong\u003e y \u003cstrong\u003erendimiento\u003c/strong\u003e. Aquí aprenderás a usar la etiqueta img, el atributo src para rutas, el alt para"])</script><script>self.__next_f.push([1," describir, y a optimizar archivos para que tu sitio cargue rápido.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo insertar imágenes en HTML con la etiqueta img?\u003c/h2\u003e\\n\u003cp\u003eLa etiqueta \u003cstrong\u003eimg\u003c/strong\u003e renderiza imágenes directamente en el navegador. Es un elemento vacío: \u003cstrong\u003eno lleva etiqueta de cierre\u003c/strong\u003e. Debe colocarse dentro de body y necesita el atributo \u003cstrong\u003esrc\u003c/strong\u003e para apuntar a la ruta del archivo y \u003cstrong\u003ealt\u003c/strong\u003e para la descripción.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- Estructura básica --\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/paisaje.jpg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;paisajes montañosos.\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eimg es un elemento sin contenido interno: no se cierra con slash.\u003c/li\u003e\\n\u003cli\u003esrc define la ruta relativa al archivo HTML.\u003c/li\u003e\\n\u003cli\u003ealt aporta una descripción breve y útil.\u003c/li\u003e\\n\u003cli\u003eSin src no se muestra nada.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo referenciar rutas y renderizar en el navegador?\u003c/h3\u003e\\n\u003cp\u003eOrganiza una carpeta img y usa rutas relativas desde tu index.html. El editor suele autocompletar nombres de carpetas y archivos.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- Dentro de index.html, apuntando a /img --\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/montana-optimizada.jpg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;montañas con lago cristalino.\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eEstructura clara de proyecto.\u003c/li\u003e\\n\u003cli\u003eRuta coherente con carpetas.\u003c/li\u003e\\n\u003cli\u003eGuardar cambios y refrescar para ver el renderizado.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué diferencia tiene img respecto a otras etiquetas?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eEs de tipo vacío: \u003cstrong\u003eno lleva contenido entre etiquetas\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eSus valores viven en propiedades o atributos: src, alt, width, height.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo optimizar imágenes para la web y mejorar rendimiento?\u003c/h2\u003e\\n\u003cp\u003eLas imágenes grandes ralentizan la carga. La buena práctica es \u003cstrong\u003ereducir el peso del archivo\u003c/strong\u003e antes de usarlo. Se mostró el uso de TinyPNG para comprimir imágenes pesadas y reemplazar versiones “original” por versiones optimizadas.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eRegla práctica: alrededor de \u003cstrong\u003e200 KB\u003c/strong\u003e por imagen para carga ágil.\u003c/li\u003e\\n\u003cli\u003eEvitar imágenes de \u003cstrong\u003emegabytes\u003c/strong\u003e: son muy pesadas.\u003c/li\u003e\\n\u003cli\u003eEjemplo: de ~3 MB a \u003cstrong\u003e863 KB\u003c/strong\u003e, y luego hasta \u003cstrong\u003e26 KB\u003c/strong\u003e tras optimización adicional.\u003c/li\u003e\\n\u003cli\u003eVerifica el peso real en las herramientas del navegador: pestaña \u003cem\u003eNetwork\u003c/em\u003e muestra los KB/MB descargados.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003eSugerencias aplicadas en el flujo:\\n- Mantener dos archivos cuando convenga: nombre “original” y versión optimizada.\\n- Reemplazar en src la versión “original” por la \u003cstrong\u003eoptimizada\u003c/strong\u003e.\\n- Probar la carga y el tamaño en \u003cem\u003eNetwork\u003c/em\u003e para validar la mejora.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- Evitar cargar el archivo pesado --\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/foco.original.jpg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;vista de focos.\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n\u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- Usar la versión optimizada --\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/foco.jpg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;vista de focos.\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/"])</script><script>self.__next_f.push([1,"div\u003e\\n\\n\u003ch2\u003e¿Cómo mejorar accesibilidad y semántica con alt, width, height, figure y figcaption?\u003c/h2\u003e\\n\u003cp\u003eEl atributo \u003cstrong\u003ealt\u003c/strong\u003e es clave para \u003cstrong\u003eaccesibilidad\u003c/strong\u003e: si la imagen falla, el usuario ve el texto alternativo y los lectores de pantalla lo anuncian. Además, puedes ajustar dimensiones con \u003cstrong\u003ewidth\u003c/strong\u003e y \u003cstrong\u003eheight\u003c/strong\u003e cuando la imagen optimizada sigue siendo grande.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- Dimensiones controladas en pixeles --\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/foco.jpg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;vista de focos.\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ewidth\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;200\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eheight\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;150\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003ealt describe el contenido visual de forma concreta.\u003c/li\u003e\\n\u003cli\u003ewidth y height ajustan el tamaño en el layout.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003ePara descripciones visibles bajo la imagen, utiliza \u003cstrong\u003efigure\u003c/strong\u003e y \u003cstrong\u003efigcaption\u003c/strong\u003e. Es una solución semántica superior a usar img + p dentro de un \u003cem\u003ediv\u003c/em\u003e.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efigure\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/montana-optimizada.jpg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;montañas con lago cristalino.\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efigcaption\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003evista panorámica de los Alpes suizos.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efigcaption\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efigure\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003efigure agrupa imagen y su contexto.\u003c/li\u003e\\n\u003cli\u003efigcaption muestra una \u003cstrong\u003edescripción visible\u003c/strong\u003e asociada.\u003c/li\u003e\\n\u003cli\u003eMejora la semántica y la comprensión del contenido.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003e¿Tienes dudas sobre rutas, pesos en \u003cem\u003eKB\u003c/em\u003e o el uso de figure y figcaption? Cuéntamelo en los comentarios y revisamos tu caso paso a paso.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false}],\"quiz\":{\"id\":31713,\"active\":true,\"title\":\"quiz de Fundamentos de HTML\"}},{\"id\":24621,\"title\":\"Listas y Enlaces\",\"materials\":[{\"id\":84731,\"title\":\"Creación de listas desordenadas, ordenadas y enlaces en HTML\",\"url\":\"https://platzi.com/cursos/html/creacion-de-listas-desordenadas-ordenada/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1cd4bc24ceb871a97533_68dc1cd4bc24ceb871a97547_80s.jpg\",\"duration\":802,\"index\":6,\"content\":\"\u003cp\u003eAprende a estructurar contenido con \u003cstrong\u003elistas HTML\u003c/strong\u003e y a conectar páginas y acciones con \u003cstrong\u003eenlaces\u003c/strong\u003e. Verás cómo usar \u003cstrong\u003eUL\u003c/strong\u003e, \u003cstrong\u003eOL\u003c/strong\u003e y \u003cstrong\u003eLI\u003c/strong\u003e para organizar información, y cómo trabajar con \u003cstrong\u003eA\u003c/strong\u003e, \u003cstrong\u003ehref\u003c/strong\u003e, \u003cstrong\u003etarget\u003c/strong\u003e, \u003cstrong\u003emailto\u003c/strong\u003e y \u003cstrong\u003etel\u003c/strong\u003e para crear experiencias útiles y claras. Todo con ejemplos prácticos y listos para el navegador.\u003c/p\u003e\\n\u003ch2\u003e¿Qué son las listas en HTML y cuándo usarlas?\u003c/h2\u003e\\n\u003cp\u003eLas listas permiten organizar elementos relacionados. Con \u003cstrong\u003elistas desordenadas\u003c/strong\u003e presentas ítems sin prioridad. Con \u003cstrong\u003elistas ordenadas\u003c/strong\u003e defines un orden de pasos que sí importa. Así, eliges la estructura correcta según el objetivo: compras sin orden o instrucciones con secuencia.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo crear una lista desordenada con ul y li?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eUsa \u003cstrong\u003eUL\u003c/stron"])</script><script>self.__next_f.push([1,"g\u003e para una lista sin prioridad.\u003c/li\u003e\\n\u003cli\u003eAñade cada elemento con \u003cstrong\u003eLI\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eEl navegador muestra viñetas automáticamente.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eul\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eLeche\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003ePan\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eVerduras\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eul\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eClaves: \u003cstrong\u003eUL\u003c/strong\u003e (\u003cem\u003eunordered list\u003c/em\u003e) y \u003cstrong\u003eLI\u003c/strong\u003e (\u003cem\u003elist item\u003c/em\u003e). Son ideales cuando el orden no afecta el resultado.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo crear una lista ordenada con ol y li?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eUsa \u003cstrong\u003eOL\u003c/strong\u003e cuando el orden sí influye.\u003c/li\u003e\\n\u003cli\u003eCada \u003cstrong\u003eLI\u003c/strong\u003e se numera automáticamente.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eol\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eHervir agua\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eAgregar café\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eServir en taza\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eol\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eLa prioridad la marca el número. Cambiar el orden cambia el resultado.\u003c/p\u003e\\n\u003ch3\u003e¿Por qué importar el orden según el caso?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eCompras: el orden no importa, usa \u003cstrong\u003eUL\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eRecetas o pasos: el orden importa, usa \u003cstrong\u003eOL\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eLa elección correcta mejora claridad y experiencia.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo personalizar listas con type y start?\u003c/h2\u003e\\n\u003cp\u003eHTML permite ajustar la apariencia y la continuidad de listas ordenadas. Así comunicas mejor la prioridad y mantienes coherencia cuando hay contenido intermedio.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo usar números romanos o letras con type?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eEn \u003cstrong\u003eOL\u003c/strong\u003e, el atributo \u003cstrong\u003etype\u003c/strong\u003e cambia el estilo de numeración.\u003c/li\u003e\\n\u003cli\u003eOpciones: números romanos en mayúscula o minúscula, letras alfabéticas y números.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eol\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;I\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003ePaso uno\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003ePaso dos\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eol\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eol\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;a\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eOpción A\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cs"])</script><script>self.__next_f.push([1,"pan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eOpción B\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eol\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eResultado: I, II, III… o a, b, c… según el caso.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo continuar numeración con start?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eCada \u003cstrong\u003eOL\u003c/strong\u003e comienza en 1 por defecto.\u003c/li\u003e\\n\u003cli\u003ePara continuar después de una lista previa separada por contenido, usa \u003cstrong\u003estart\u003c/strong\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eol\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eTexto\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eImágenes\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMultimedia\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eol\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eContenido intermedio…\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eol\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003estart\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;4\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eAccesibilidad\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eSEO\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eDespliegue\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eol\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eBeneficio: mantienes la secuencia 1–6 aunque haya bloques intermedios.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo crear enlaces en HTML con a, href y target?\u003c/h2\u003e\\n\u003cp\u003eUn \u003cstrong\u003eenlace\u003c/strong\u003e se define con \u003cstrong\u003eA\u003c/strong\u003e y el destino con \u003cstrong\u003ehref\u003c/strong\u003e. El texto entre apertura y cierre es el que verá la persona. El navegador lo muestra con subrayado, color y cursor de mano para indicar que es interactivo.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo abrir en nueva pestaña con target?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003etarget\u003c/strong\u003e controla dónde se abre el enlace.\u003c/li\u003e\\n\u003cli\u003eUsa \u003cstrong\u003etarget=\\\"_blank\\\"\u003c/strong\u003e para abrir en otra pestaña y conservar la actual.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;https://platzi.com\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etarget\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;_blank\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eplatzi\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eÚtil cuando no quieres perder el contexto de navegación.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo enviar emails con mailto?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eCon \u003cstrong\u003emailto:\u003c/strong\u003e abres el cliente de correo con datos prellenados.\u003c/li\u003e\\n\u003cli\u003ePuedes definir \u003cstrong\u003esubject\u003c/strong\u003e y \u003cstrong\u003ebody\u003c/strong\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;mailto:info@ejemplo.com?subject=consulta\u0026amp;body=hola\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eenviar email\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan cl"])</script><script>self.__next_f.push([1,"ass=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eVentaja: facilita contactar sin copiar y pegar direcciones.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo llamar con tel?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eCon \u003cstrong\u003etel:\u003c/strong\u003e inicias una llamada desde móviles o apps compatibles.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;tel:3412345678\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eLlamar +34 12345678\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eEn móvil, abre el marcador y completa el número automáticamente.\u003c/p\u003e\\n\u003cp\u003e¿Tienes dudas o ejemplos que quieras probar con \u003cstrong\u003eUL\u003c/strong\u003e, \u003cstrong\u003eOL\u003c/strong\u003e, \u003cstrong\u003eLI\u003c/strong\u003e o \u003cstrong\u003eA\u003c/strong\u003e? Comenta qué estructura necesitas y lo afinamos juntos.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false},{\"id\":84732,\"title\":\"Etiquetas semánticas HTML5: header, main, nav, article y footer\",\"url\":\"https://platzi.com/cursos/html/etiquetas-semanticas-html5-header-main-n/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1ce0f4aae2065e64aa11_68dc1ce0f4aae2065e64aa25_66s.jpg\",\"duration\":660,\"index\":7,\"content\":\"\u003cp\u003eLa semántica en HTML5 define una estructura clara que mejora la comprensión del contenido por personas, navegadores y lectores de pantalla. Usar etiquetas con significado aporta orden, \u003cstrong\u003efacilita el trabajo en equipo\u003c/strong\u003e, \u003cstrong\u003emejora la accesibilidad\u003c/strong\u003e y \u003cstrong\u003eayuda al SEO\u003c/strong\u003e al permitir que Google indexe mejor cada sección.\u003c/p\u003e\\n\u003ch2\u003e¿Qué es la semántica en HTML5 y por qué importa?\u003c/h2\u003e\\n\u003cp\u003eLa semántica asigna significado a las secciones del documento mediante etiquetas específicas. No cambia el diseño por sí misma, pero \u003cstrong\u003eindica qué es cada parte\u003c/strong\u003e del proyecto y \u003cstrong\u003ecómo debe ser interpretada\u003c/strong\u003e.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eDiferencia clave: head vs header. El head contiene lo que el navegador necesita para cargar el proyecto; el header es el encabezado visible del contenido. \u003c/li\u003e\\n\u003cli\u003eEl body es el cuerpo que se renderiza en pantalla. \u003c/li\u003e\\n\u003cli\u003eEtiquetas como header, main y footer delimitan secciones principales con propósito claro. \u003c/li\u003e\\n\u003cli\u003eBeneficio directo: los lectores de contenido pueden anunciar “estás en el header con una barra de navegación” y guiar a usuarios con baja visión. \u003c/li\u003e\\n\u003cli\u003eBeneficio técnico: Google puede \u003cstrong\u003eindexar\u003c/strong\u003e mejor las secciones cuando el documento utiliza etiquetas semánticas correctas. \u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo se estructura una página con etiquetas semánticas?\u003c/h2\u003e\\n\u003cp\u003eUna base semántica típica separa el encabezado, el contenido principal y el cierre. Además, incorpora navegación y organización interna del contenido con etiquetas como nav, section, article y aside.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo se ve el código base?\u003c/h3\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"cp\\\"\u003e\u0026lt;!DOCTYPE html\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehtml\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003elang\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;es\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003echarset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;UTF-8\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;viewport\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;width=device-width, initial-scale=1.0\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMi sitio web\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/sp"])</script><script>self.__next_f.push([1,"an\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eheader\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh1\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMi sitio web\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh1\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eul\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#inicio\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eInicio\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#servicios\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eServicios\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#contacto\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eContacto\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eul\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eheader\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emain\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esection\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;articulos\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003earticle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh2\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eTítulo del artículo\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh2\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eContenido del artículo dentro de la sección principal.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003earticle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- Puedes repetir más \u0026lt;article\u0026gt; según el contenido --\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esection\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003easide\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eBarra lateral con opciones o enlaces relacionados.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003easide\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emain\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efooter\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/s"])</script><script>self.__next_f.push([1,"pan\u003eCopyright 2025 Mi sitio. Todos los derechos reservados.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efooter\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehtml\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch3\u003e¿Qué hace cada etiqueta?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003ehead: metadatos y recursos necesarios para cargar el proyecto. \u003c/li\u003e\\n\u003cli\u003eheader: encabezado visible; suele incluir logotipo, título y barra de navegación. \u003c/li\u003e\\n\u003cli\u003enav: la navegación principal; se implementa con una \u003cem\u003eunorganized list\u003c/em\u003e (ul), \u003cem\u003elist items\u003c/em\u003e (li) y enlaces \u003cem\u003eanchor\u003c/em\u003e (a). \u003c/li\u003e\\n\u003cli\u003emain: contenido relevante que el usuario viene a consumir. \u003c/li\u003e\\n\u003cli\u003esection: agrupa bloques temáticos dentro del main. \u003c/li\u003e\\n\u003cli\u003earticle: pieza de contenido independiente, como entradas de un blog. \u003c/li\u003e\\n\u003cli\u003easide: barra lateral que complementa o filtra el contenido principal. \u003c/li\u003e\\n\u003cli\u003efooter: cierre con información secundaria, como derechos o enlaces menos densos. \u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003eConsejos prácticos:\\n- Usa \u003cstrong\u003eetiquetas semánticas\u003c/strong\u003e para que cualquier integrante del equipo identifique rápido la sección que debe modificar. \\n- Mantén la navegación en nav para que lectores de pantalla y buscadores la detecten con precisión. \\n- Inserta contenidos repetibles en article y organízalos por section cuando corresponda. \u003c/p\u003e\\n\u003ch2\u003e¿Cómo mejora la accesibilidad y el SEO con semántica?\u003c/h2\u003e\\n\u003cp\u003eLa semántica crea un mapa comprensible del contenido para tecnologías de asistencia y motores de búsqueda.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eAccesibilidad: lectores de pantalla anuncian secciones como header, nav, main y footer, guiando la lectura. \u003c/li\u003e\\n\u003cli\u003eSEO: Google indexa mejor páginas con estructura clara, lo que optimiza la posibilidad de aparecer ante búsquedas relevantes. \u003c/li\u003e\\n\u003cli\u003eMantenibilidad: el equipo entiende dónde está cada parte del proyecto al leer el HTML. \u003c/li\u003e\\n\u003cli\u003eFuturo con CSS: podrás \u003cstrong\u003eaplicar estilos\u003c/strong\u003e apuntando a secciones específicas con precisión. \u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003e¿Tienes dudas sobre cómo organizar tu estructura semántica o tu menú de navegación? Comparte tus preguntas y ejemplos para revisarlos juntos.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false}],\"quiz\":{\"id\":31714,\"active\":true,\"title\":\"quiz de Listas y Enlaces\"}},{\"id\":24622,\"title\":\"Formularios y Tablas\",\"materials\":[{\"id\":84733,\"title\":\"Formularios HTML con validación nativa del navegador\",\"url\":\"https://platzi.com/cursos/html/formularios-html-con-validacion-nativa-d/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1d8c6a2459b36e85d621_68dc1d8c6a2459b36e85d635_94s.jpg\",\"duration\":940,\"index\":8,\"content\":\"\u003cp\u003eLos formularios en HTML son la vía directa para que una persona comparta datos con un proyecto web. Con una estructura correcta, el navegador ofrece autocompletado y validación nativa que simplifican el llenado y mejoran la experiencia, desde un \u003cem\u003elogin\u003c/em\u003e hasta un comentario en una red social.\u003c/p\u003e\\n\u003ch2\u003e¿Por qué los formularios son la base de la interacción en HTML?\u003c/h2\u003e\\n\u003cp\u003eLos formularios permiten enviar información al servidor para ejecutar acciones concretas. Ejemplos como iniciar sesión o comentar un contenido dependen de esta estructura. Además, el navegador puede ayudar con el autocompletado y ciertas validaciones si usamos las etiquetas y atributos adecuados.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eEvita formularios largos sin guardado intermedio: generan frustración.\u003c/li\u003e\\n\u003cli\u003eDiseña formularios sencillos y claros: mejor experiencia.\u003c/li\u003e\\n\u003cli\u003eAprovecha la validación nativa del navegador: menos código adicional.\u003c/li\u003e\\n\u003cli\u003eUsa estructura semántica y atributos correctos: autocompletado más efectivo.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo estructurar un formulario con form, action y method?\u003c/h2\u003e\\n\u003cp\u003eLa etiqueta \u003ccode\u003eform\u003c/code\u003e n"])</script><script>self.__next_f.push([1,"o es decorativa: informa al navegador que habrá interacción y activa funciones útiles. Define dos atributos clave: \u003cstrong\u003eaction\u003c/strong\u003e indica a dónde se envían los datos y \u003cstrong\u003emethod\u003c/strong\u003e define cómo se envían usando verbos HTTP como \u003cem\u003eget\u003c/em\u003e y \u003cem\u003epost\u003c/em\u003e.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eform\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eaction\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003emethod\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;post\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- Campos del formulario --\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eform\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003eaction\u003c/strong\u003e: destino de los datos; puede ser una URL o un \u003cem\u003eendpoint\u003c/em\u003e de un \u003cem\u003eAPI\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003emethod\u003c/strong\u003e: forma de envío; se usan verbos HTTP como \u003cem\u003eget\u003c/em\u003e y \u003cem\u003epost\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003ePresionar Enter o un botón de envío intenta enviar el formulario.\u003c/li\u003e\\n\u003cli\u003eUsar \u003ccode\u003eform\u003c/code\u003e habilita validaciones del navegador en campos como correos.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo enviar los datos con un botón submit?\u003c/h3\u003e\\n\u003cp\u003eEl formulario se completa con un botón de tipo \u003ccode\u003esubmit\u003c/code\u003e, que dispara el envío al destino definido en \u003ccode\u003eaction\u003c/code\u003e usando el \u003ccode\u003emethod\u003c/code\u003e indicado.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebutton\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;submit\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eEnviar\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebutton\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\u003ccode\u003etype=\\\"submit\\\"\u003c/code\u003e: indica que el botón envía el formulario.\u003c/li\u003e\\n\u003cli\u003eSi \u003ccode\u003eaction\u003c/code\u003e es \u003ccode\u003e#\u003c/code\u003e, la página se refresca sin una acción real.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo etiquetar y capturar datos con label, input y textarea?\u003c/h2\u003e\\n\u003cp\u003ePara mejorar la accesibilidad, el autocompletado y el envío correcto, se combinan \u003ccode\u003elabel\u003c/code\u003e, \u003ccode\u003einput\u003c/code\u003e y, cuando corresponde, \u003ccode\u003etextarea\u003c/code\u003e. La clave es vincular cada \u003ccode\u003elabel\u003c/code\u003e con su campo y nombrar adecuadamente los datos que se enviarán.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo vincular label e input con for e id?\u003c/h3\u003e\\n\u003cp\u003e\u003ccode\u003elabel\u003c/code\u003e describe el propósito del campo y se asocia al \u003ccode\u003einput\u003c/code\u003e mediante \u003ccode\u003efor\u003c/code\u003e e \u003ccode\u003eid\u003c/code\u003e iguales. Así, un clic en la etiqueta activa el campo y el navegador reconoce mejor el dato.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;nombre\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eNombre:\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;nombre\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;nombre\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\u003ccode\u003efor\u003c/code\u003e en \u003ccode\u003elabel\u003c/code\u003e debe coincidir con el \u003ccode\u003eid\u003c/code\u003e del \u003ccode\u003einput\u003c/code\u003e.\u003c/li\u003e\\n\u003cli\u003e\u003ccode\u003ename\u003c/code\u003e define la clave con la que el dato viaja al servidor.\u003c/li\u003e\\n\u003cli\u003e\u003ccode\u003ediv\u003c/code\u003e puede usarse como contenedor para separar campos cuando no hay una etiqueta semántica específica.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo capturar correos con input type=email?\u003c/h3\u003e\\n\u003cp\u003ePara correos, el navegador ofrece validación básica y autocompletado cuando el \u003ccode\u003einput\u003c/code\u003e usa \u003ccode\u003etype=\\\"email\\\"\u003c/code\u003e y está correctamente etiquetado.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e"])</script><script>self.__next_f.push([1,"\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;email\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eCorreo electrónico:\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;email\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;email\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;email\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\u003ccode\u003etype=\\\"email\\\"\u003c/code\u003e: activa validaciones nativas para formato de correo.\u003c/li\u003e\\n\u003cli\u003eCon datos guardados, el navegador sugiere completar el campo.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cuándo usar textarea con filas y columnas?\u003c/h3\u003e\\n\u003cp\u003eCuando se requiere texto largo (por ejemplo, un mensaje), \u003ccode\u003etextarea\u003c/code\u003e ofrece un área ampliada y redimensionable. Se vincula igual que un \u003ccode\u003einput\u003c/code\u003e con \u003ccode\u003elabel\u003c/code\u003e.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;mensaje\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMensaje:\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etextarea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;mensaje\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;mensaje\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erows\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;4\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ecols\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;40\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etextarea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\u003ccode\u003erows\u003c/code\u003e y \u003ccode\u003ecols\u003c/code\u003e: altura y ancho iniciales visibles.\u003c/li\u003e\\n\u003cli\u003ePermite saltos de línea y mayor comodidad al escribir textos extensos.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eform\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eaction\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003emethod\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;post\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;nombre\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eNombre:\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;nombre\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;nombre\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;email\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eCorreo electrónico:\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e"])</script><script>self.__next_f.push([1,"\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;email\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;email\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;email\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;mensaje\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMensaje:\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etextarea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;mensaje\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;mensaje\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erows\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;4\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ecols\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;40\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etextarea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebutton\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;submit\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eEnviar\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebutton\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eform\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eCombina \u003ccode\u003eform\u003c/code\u003e con \u003ccode\u003eaction\u003c/code\u003e y \u003ccode\u003emethod\u003c/code\u003e para definir destino y envío.\u003c/li\u003e\\n\u003cli\u003eVincula \u003ccode\u003elabel\u003c/code\u003e y campos con \u003ccode\u003efor\u003c/code\u003e/\u003ccode\u003eid\u003c/code\u003e y nombra datos con \u003ccode\u003ename\u003c/code\u003e.\u003c/li\u003e\\n\u003cli\u003eCierra con \u003ccode\u003ebutton type=\\\"submit\\\"\u003c/code\u003e para enviar al servidor.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003e¿Tienes dudas sobre qué campos pedir o cómo nombrarlos con \u003ccode\u003ename\u003c/code\u003e para tu \u003cem\u003eendpoint\u003c/em\u003e de \u003cem\u003elogin\u003c/em\u003e o un comentario? Comparte tu caso en los comentarios y afinamos la estructura juntos.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false},{\"id\":84734,\"title\":\"Tipos de inputs HTML para formularios avanzados\",\"url\":\"https://platzi.com/cursos/html/tipos-de-inputs-html-para-formularios-av/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1d8794db30b44237a203_68dc1d8794db30b44237a217_85s.jpg\",\"duration\":853,\"index\":9,\"content\":\"\u003cp\u003eAprende a ampliar y validar datos en formularios HTML con inputs nativos y buenas prácticas. Aquí verás cómo usar password, number con min y max, date con calendario, color con selector y radio agrupado con \u003cem\u003efieldset\u003c/em\u003e y \u003cem\u003elegend\u003c/em\u003e. Todo con etiquetas label, for, id y name bien enlazadas para accesibilidad y envío correcto.\u003c/p\u003e\\n\u003ch2\u003e¿Qué inputs de formulario amplían la recolección de datos?\u003c/h2\u003e\\n\u003cp\u003eLos inputs adecuados mejoran la experiencia y la calidad de los datos. Con HTML puedes pedir contraseñas con privacidad, números validados, fechas con calendario y colores con un selector visual.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo capturar contraseñas con privacidad?\u003c/h3\u003e\\n\u003cp\u003eEl input type=\\\"password\\\" oculta los caracteres con puntos o asteriscos. Es una mejora de \u003cstrong\u003eprivacidad\u003c/strong\u003e, no de \u003cstrong\u003eseguridad\u003c/strong\u003e. La seguridad depende de enviar por \u003cstrong\u003eHTTPS\u003c/strong\u003e.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eUsa label, for, id y name para accesibilidad y envío correcto.\u003c/li\u003e\\n\u003cli\u003eLos navegadores y el \u003cem\u003epassword manager\u003c/em\u003e pueden sugerir autocompletado.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eform\u003c/sp"])</script><script>self.__next_f.push([1,"an\u003e \u003cspan class=\\\"na\\\"\u003emethod\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;post\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eaction\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;password\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eContraseña:\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;password\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;password\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;password\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eform\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch3\u003e¿Cómo pedir colores con un selector nativo?\u003c/h3\u003e\\n\u003cp\u003eEl input type=\\\"color\\\" abre un \u003cem\u003ecolor picker\u003c/em\u003e para elegir un valor hexadecimal.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;color\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eColor:\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;color\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;color\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;color\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eSelección visual y precisa del color.\u003c/li\u003e\\n\u003cli\u003eEnvío directo del valor al servidor.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo validar números y fechas en HTML sin complicarse?\u003c/h2\u003e\\n\u003cp\u003ePara datos numéricos y fechas, los inputs nativos aportan validación y controles del navegador. Evitas errores comunes y mejoras la usabilidad.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo limitar rangos con min y max?\u003c/h3\u003e\\n\u003cp\u003eCon type=\\\"number\\\" puedes aceptar solo números y definir límites con min y max. Útil, por ejemplo, para una \u003cstrong\u003eedad\u003c/strong\u003e entre 18 y 70.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;edad\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eEdad:\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;number\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;edad\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;edad\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003emin\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;18\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003emax\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;70\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eSolo valores numéricos válidos.\u003c/li\u003e\\n\u003cli\u003eImpide bajar de 18 o subir de 70.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo seleccionar fechas co"])</script><script>self.__next_f.push([1,"n el calendario nativo?\u003c/h3\u003e\\n\u003cp\u003eEl input type=\\\"date\\\" muestra un calendario para elegir día, mes y año.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;fecha\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eFecha:\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;date\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;fecha\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;fecha\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eReduce errores de formato de fecha.\u003c/li\u003e\\n\u003cli\u003eInterfaz familiar del navegador.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo agrupar opciones con radio para enviar un solo valor?\u003c/h2\u003e\\n\u003cp\u003eCuando hay varias opciones y solo una respuesta válida, usa type=\\\"radio\\\" con el mismo name para cada opción. Agrupa semánticamente con \u003cem\u003efieldset\u003c/em\u003e y titula el grupo con \u003cem\u003elegend\u003c/em\u003e.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efieldset\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elegend\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eGénero\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elegend\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;radio\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;masculino\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;genero\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003evalue\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;M\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;masculino\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMasculino\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;radio\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;femenino\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;genero\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003evalue\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;F\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;femenino\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eFemenino\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efieldset\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eEl mismo name garantiza que solo se seleccione una opción.\u003c/li\u003e\\n\u003cli\u003eEl atributo value envía el dato útil: M o F.\u003c/li\u003e\\n\u003cli\u003e\u003cem\u003eFieldset\u003c/em\u003e y \u003cem\u003elegend\u003c/em\u003e agrupan y describen el conjunto de opciones.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003eConsejos rápidos.\\n- Usa name para definir cómo viaja el dato al servidor.\\n- Enlaza label con for y el id correspondiente.\\n- Recuerda: el input password mejora la privacidad visual, pero la seguridad exige usar \u003cstrong\u003eHTTPS\u003c/strong\u003e.\u003c/p\u003e\\n\u003cp\u003e¿Quieres practicar con \u003cem\u003echeckbox\u003c/em\u003e y listas de \u003cem\u003eoptions\u003c/em\u003e para países u otras categorías? Comenta qué casos de uso tienes y qué inputs necesitas implemen"])</script><script>self.__next_f.push([1,"tar.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false},{\"id\":84735,\"title\":\"Checkbox y select en formularios HTML\",\"url\":\"https://platzi.com/cursos/html/checkbox-y-select-en-formularios-html/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1d79bc24ceb871a97b0e_68dc1d7abc24ceb871a97b22_38s.jpg\",\"duration\":382,\"index\":10,\"content\":\"\u003cp\u003eLos formularios en HTML pueden ser más claros y fáciles de completar si agrupas opciones correctamente y defines bien cómo se envían los datos. Aquí aprenderás a usar \u003cstrong\u003einputs tipo \u003cem\u003echeckbox\u003c/em\u003e\u003c/strong\u003e para múltiples selecciones y la etiqueta \u003cstrong\u003eselect con \u003cem\u003eoption\u003c/em\u003e\u003c/strong\u003e para listas desplegables, conectando todo con \u003cem\u003elabel\u003c/em\u003e, \u003cem\u003ename\u003c/em\u003e, \u003cem\u003eid\u003c/em\u003e y \u003cem\u003evalue\u003c/em\u003e para que el servidor reciba exactamente lo que necesitas.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo usar checkbox con fieldset y label en HTML?\u003c/h2\u003e\\n\u003cp\u003eAgrupa opciones relacionadas con un \u003cstrong\u003e\u003cfieldset\u003e\u003c/strong\u003e y titúlalas con \u003cstrong\u003e\u003clegend\u003e\u003c/strong\u003e. Los \u003cem\u003echeckbox\u003c/em\u003e permiten elegir \u003cstrong\u003emás de una opción\u003c/strong\u003e (a diferencia de los \u003cem\u003eradio buttons\u003c/em\u003e). Usa el mismo atributo \u003cstrong\u003ename\u003c/strong\u003e para todas las casillas del grupo y un \u003cstrong\u003evalue\u003c/strong\u003e distinto por opción para identificar qué se seleccionó. Vincula cada casilla con su \u003cstrong\u003elabel\u003c/strong\u003e mediante \u003cstrong\u003eid\u003c/strong\u003e y \u003cstrong\u003efor\u003c/strong\u003e para mejorar accesibilidad y clicabilidad.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003eMúltiple selección\u003c/strong\u003e con \u003cem\u003echeckbox\u003c/em\u003e del mismo name.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eAgrupación semántica\u003c/strong\u003e con \u003cem\u003efieldset\u003c/em\u003e y \u003cem\u003elegend\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eAsociación accesible\u003c/strong\u003e: \u003cem\u003elabel\u003c/em\u003e for ↔ \u003cem\u003eid\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eEnvío claro\u003c/strong\u003e al servidor: usa \u003cem\u003evalue\u003c/em\u003e específico por opción.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efieldset\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elegend\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eIntereses\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elegend\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;checkbox\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;intereses\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;deportes\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003evalue\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;deportes\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;deportes\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eDeportes\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;checkbox\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;intereses\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;musica\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003evalue\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;música\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;musica\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMúsica\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efieldset\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch3\u003e¿Qué datos se envían con name y value?\u003c/h3\u003e\\n\u003cp\u003eAl enviar el formulario, el servidor recibe un par por cada opción marcada. Con el ejemplo anterior, si se marcan amba"])</script><script>self.__next_f.push([1,"s, se envía: \u003cstrong\u003eintereses=deportes\u003c/strong\u003e e \u003cstrong\u003eintereses=música\u003c/strong\u003e. Así se conserva la agrupación y se conocen las selecciones exactas.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo crear una lista desplegable con select y option?\u003c/h2\u003e\\n\u003cp\u003eCuando necesitas que la persona elija una sola alternativa de una lista (por ejemplo, \u003cstrong\u003ePaís\u003c/strong\u003e), utiliza \u003cstrong\u003e\u003cselect\u003e\u003c/strong\u003e. Esta etiqueta contenedora incluye varias \u003cstrong\u003e\u003coption\u003e\u003c/strong\u003e, donde el texto visible puede coincidir con el \u003cstrong\u003evalue\u003c/strong\u003e que se enviará. Conecta el \u003cem\u003elabel\u003c/em\u003e al \u003cem\u003eselect\u003c/em\u003e con \u003cem\u003eid\u003c/em\u003e y usa \u003cem\u003ename\u003c/em\u003e para el campo que recibirá el servidor.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003eSelect es contenedor\u003c/strong\u003e: incluye múltiples \u003cem\u003eoption\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eOption define\u003c/strong\u003e el \u003cem\u003evalue\u003c/em\u003e que viaja al servidor.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eLabel asociado\u003c/strong\u003e mejora la usabilidad.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eDiv como contenedor comodín\u003c/strong\u003e cuando no hay \u003cem\u003efieldset\u003c/em\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;pais\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003ePaís\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eselect\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;pais\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;pais\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eoption\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003evalue\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;México\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMéxico\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eoption\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eoption\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003evalue\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Colombia\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eColombia\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eoption\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eoption\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003evalue\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Argentina\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eArgentina\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eoption\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eselect\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch3\u003e¿Qué diferencia hay con inputs al agrupar datos?\u003c/h3\u003e\\n\u003cp\u003eCon \u003cem\u003echeckbox\u003c/em\u003e, usas el mismo \u003cstrong\u003ename\u003c/strong\u003e para varias casillas y cambias \u003cstrong\u003evalue\u003c/strong\u003e por opción, permitiendo múltiples selecciones. Con \u003cstrong\u003eselect\u003c/strong\u003e, eliges una sola \u003cstrong\u003eoption\u003c/strong\u003e por defecto, y se envía el \u003cstrong\u003ename\u003c/strong\u003e del select con el \u003cstrong\u003evalue\u003c/strong\u003e de la opción elegida.\u003c/p\u003e\\n\u003ch2\u003e¿Qué rol jugarán las validaciones del navegador?\u003c/h2\u003e\\n\u003cp\u003eSe menciona que el navegador puede \u003cstrong\u003eayudar con validaciones\u003c/strong\u003e para hacer los formularios más seguros y fáciles de rellenar. Esto complementa el uso correcto de \u003cem\u003echeckbox\u003c/em\u003e, \u003cem\u003eselect\u003c/em\u003e, \u003cem\u003elabel\u003c/em\u003e, \u003cem\u003ename\u003c/em\u003e, \u003cem\u003eid\u003c/em\u003e y \u003cem\u003evalue\u003c/em\u003e para una experiencia completa.\u003c/p\u003e\\n\u003cp\u003e¿Te gustaría ver más ejemplos con validaciones nativas y personalizadas? Deja tus preguntas y comenta qué casos te gustaría cubrir.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false},{\"id\":84736,\"title\":\"Validaciones de formularios HTML con atributos nativos\",\"url\":\"https://platzi.com/cursos/html/validaciones-de-formularios-html-con-atr/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1d84af2b38b3b2b59d"])</script><script>self.__next_f.push([1,"1c_68dc1d84af2b38b3b2b59d30_73s.jpg\",\"duration\":731,\"index\":11,\"content\":\"\u003cp\u003eCrear formularios confiables empieza por dominar las validaciones nativas de HTML. Con atributos como \u003cstrong\u003erequire\u003c/strong\u003e, \u003cstrong\u003eplaceholder\u003c/strong\u003e, \u003cstrong\u003epattern\u003c/strong\u003e, \u003cstrong\u003emin\u003c/strong\u003e, \u003cstrong\u003emax\u003c/strong\u003e, \u003cstrong\u003estep\u003c/strong\u003e y \u003cstrong\u003emin length\u003c/strong\u003e, el navegador hace gran parte del trabajo por ti, asegurando datos completos y con el formato correcto.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo validar formularios HTML con atributos nativos?\u003c/h2\u003e\\n\u003cp\u003eUsar la \u003cstrong\u003eetiqueta form\u003c/strong\u003e y los tipos de input adecuados activa \u003cstrong\u003evalidaciones del navegador\u003c/strong\u003e que evitan envíos incompletos o con formatos inválidos. Así reduces errores y mejoras la experiencia desde el primer intento.\u003c/p\u003e\\n\u003ch3\u003e¿Qué hace el navegador al usar form y tipos de input?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eComprueba formato de \u003cstrong\u003eemail\u003c/strong\u003e al enviar: falta de arroba dispara un aviso.\u003c/li\u003e\\n\u003cli\u003eMuestra mensajes contextuales cuando algo no coincide con lo esperado.\u003c/li\u003e\\n\u003cli\u003eImpide el envío si un campo \u003cstrong\u003erequire\u003c/strong\u003e está vacío.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003eEjemplo de correo con guía visual usando \u003cstrong\u003eplaceholder\u003c/strong\u003e y obligatoriedad con \u003cstrong\u003erequire\u003c/strong\u003e:\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;email\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;correo\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;correo\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003erequired\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eplaceholder\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;usuario@ejemplos.com\u0026quot;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003ePuntos clave:\\n- \u003cstrong\u003erequire\u003c/strong\u003e obliga a completar el campo antes de enviar.\\n- \u003cstrong\u003eplaceholder\u003c/strong\u003e muestra el formato esperado (por ejemplo, usuario@ejemplos.com).\\n- El navegador valida el patrón básico del correo al momento de enviar.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo restringir un teléfono con pattern y expresión regular?\u003c/h3\u003e\\n\u003cp\u003ePara evitar texto en un teléfono, usa \u003cstrong\u003epattern\u003c/strong\u003e con una \u003cstrong\u003eexpresión regular\u003c/strong\u003e que permita solo dígitos y una longitud exacta.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;text\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;telefono\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;telefono\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Ingresa nueve dígitos\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eplaceholder\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;000000000\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003epattern\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;[0-9]{9}\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003erequired\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eClaves prácticas:\\n- \u003ccode\u003e[0-9]{9}\u003c/code\u003e indica: solo números del 0 al 9 y exactamente 9 caracteres.\\n- \u003cstrong\u003etitle\u003c/strong\u003e muestra una pista al pasar el cursor: “Ingresa nueve dígitos”.\\n- Si el valor no hace “match” con el \u003cstrong\u003epattern\u003c/strong\u003e, el navegador bloquea el envío.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo limitar números, fechas y contraseñas con min, max, step y min length?\u003c/h2\u003e\\n\u003cp\u003eControlar rangos y longitudes evita valores fuera de regla. Con \u003cstrong\u003emin\u003c/strong\u003e, \u003cstrong\u003emax\u003c/strong\u003e, \u003cstrong\u003estep\u003c/strong\u003e y \u003cstrong\u003emin length\u003c/strong\u003e puedes definir límites claros sin JavaScript adicional.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo controlar cantidad con number, min, max y step?\u003c/h3\u003e\\n\u003cp\u003ePara cantidades numéricas, el input de número ya valida que no haya letras. Además, puedes acotar rango y saltos:\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e"])</script><script>self.__next_f.push([1,"\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;number\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;cantidad\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;cantidad\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003emin\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;1\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003emax\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;100\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003estep\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;5\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003evalue\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;10\u0026quot;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eBuenas prácticas:\\n- \u003cstrong\u003emin\u003c/strong\u003e y \u003cstrong\u003emax\u003c/strong\u003e fijan el rango permitido (ejemplo: del 1 al 100).\\n- \u003cstrong\u003estep\u003c/strong\u003e define saltos (ejemplo: 1, 6, 11, 16...).\\n- El \u003cstrong\u003evalue\u003c/strong\u003e enviado corresponde al número seleccionado; puede sincronizarse con JavaScript si es necesario.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo acotar fechas con date, min y max?\u003c/h3\u003e\\n\u003cp\u003eLimita el calendario a un período válido usando \u003cstrong\u003emin\u003c/strong\u003e y \u003cstrong\u003emax\u003c/strong\u003e. Útil para rangos de edad o periodos de registro.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;date\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;fecha\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;fecha\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003emin\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;2024-01-01\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003emax\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;2024-12-31\u0026quot;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eVentajas:\\n- Solo se puede seleccionar dentro del rango definido.\\n- El calendario inicia en el mínimo y bloquea años fuera del intervalo.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo fortalecer contraseñas con require y min length?\u003c/h3\u003e\\n\u003cp\u003ePara forzar contraseñas más robustas, combina obligatoriedad y longitud mínima.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;password\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;contrasena\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;contrasena\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003erequired\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eminlength\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;8\u0026quot;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eAspectos clave:\\n- \u003cstrong\u003erequire\u003c/strong\u003e evita que quede vacío.\\n- \u003cstrong\u003emin length\u003c/strong\u003e de 8 caracteres impide claves demasiado cortas.\\n- Al intentar enviar con menos de 8, el navegador muestra el error correspondiente.\u003c/p\u003e\\n\u003cp\u003e¿Tienes otros patrones útiles o rangos que te funcionen mejor en tus formularios? Comparte ejemplos y dudas en los comentarios.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false},{\"id\":84737,\"title\":\"Estructura de tablas HTML con thead, tbody y tfoot\",\"url\":\"https://platzi.com/cursos/html/estructura-de-tablas-html-con-thead-tbod/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1d850b0985b9c734ef66_68dc1d850b0985b9c734ef7a_50s.jpg\",\"duration\":504,\"index\":12,\"content\":\"\u003cp\u003eAprende a construir \u003cstrong\u003etablas HTML semánticas\u003c/strong\u003e paso a paso: usa el contenedor table, organiza encabezados con thead, datos con tbody y totales con tfoot. Define filas con tr, títulos con th y celdas con td. Aprovecha colspan para combinar columnas y mostrar un total claro.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo cre"])</script><script>self.__next_f.push([1,"ar una tabla HTML semántica?\u003c/h2\u003e\\n\u003cp\u003eLas tablas fueron clave en los inicios de HTML para dar formato, pero hoy se reservan para \u003cstrong\u003emostrar datos estructurados\u003c/strong\u003e. Aun así, siguen siendo útiles cuando necesitas \u003cstrong\u003ecolumnas, filas y encabezados\u003c/strong\u003e bien definidos. La semántica correcta mejora la claridad del código y el mantenimiento.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eUsa la etiqueta table como contenedor principal.\u003c/li\u003e\\n\u003cli\u003eCrea una fila tr con th para los encabezados.\u003c/li\u003e\\n\u003cli\u003eEnvuelve los encabezados en thead.\u003c/li\u003e\\n\u003cli\u003eColoca el contenido en tbody con td.\u003c/li\u003e\\n\u003cli\u003eCierra con tfoot para el total o resumen.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etable\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ethead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etr\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eth\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eProducto\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eth\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eth\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003ePrecio\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eth\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eth\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eCantidad\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eth\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etr\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ethead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etbody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etr\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eLaptop\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e45 USD\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e2\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etr\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etr\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMouse\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e12 USD\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e5\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etr\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etr\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eTeclado\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e10 USD\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e3\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etr\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etbody\u003c/span\u003e"])</script><script>self.__next_f.push([1,"\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etfoot\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etr\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eth\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eTotal\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eth\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eth\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ecolspan\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;2\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e67 USD\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eth\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etr\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etfoot\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etable\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch2\u003e¿Qué etiquetas y atributos usar en tablas?\u003c/h2\u003e\\n\u003cp\u003eLa estructura semántica divide el contenido en \u003cstrong\u003ethead, tbody y tfoot\u003c/strong\u003e. Las \u003cstrong\u003efilas\u003c/strong\u003e se crean con tr y, dentro de ellas, usas th para encabezados y td para datos. La tabla alinea columnas de forma automática y suele mostrar \u003cstrong\u003eseparadores por defecto\u003c/strong\u003e, lo que facilita la lectura incluso sin estilos.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo definir encabezados y filas?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eCrea una fila tr inicial para los encabezados.\u003c/li\u003e\\n\u003cli\u003eUsa th para marcar títulos como Producto, Precio y Cantidad.\u003c/li\u003e\\n\u003cli\u003eAñade más filas con tr para cada producto.\u003c/li\u003e\\n\u003cli\u003eInserta datos con td en el mismo orden de los encabezados.\u003c/li\u003e\\n\u003cli\u003eRecuerda: tr es la \u003cem\u003etable row\u003c/em\u003e, th es el \u003cem\u003etable head\u003c/em\u003e y td es la \u003cem\u003etable data\u003c/em\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo mostrar datos y totales con colspan?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eColoca el resumen en tfoot para separar visualmente el total.\u003c/li\u003e\\n\u003cli\u003eUsa th también en el pie para resaltar el total en \u003cstrong\u003enegritas\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eAplica el atributo colspan=\\\"2\\\" cuando una celda deba ocupar dos columnas.\u003c/li\u003e\\n\u003cli\u003eEjemplo: Total y 67 USD ocupando dos columnas para alinear con Precio y Cantidad.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Qué flujo práctico seguir al construir la tabla?\u003c/h2\u003e\\n\u003cp\u003eEmpieza por el contenedor table, suma thead con encabezados claros, agrega tbody con filas de datos reales y cierra con tfoot para el total. En el ejemplo, se cargan productos como Laptop, Mouse y Teclado, con precios en USD y cantidades que pueden considerarse \u003cem\u003estock\u003c/em\u003e disponible. Al avanzar, el navegador muestra alineación y separadores sin necesidad de estilos adicionales.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eDefine columnas primero: encabezados en thead.\u003c/li\u003e\\n\u003cli\u003eInserta filas en tbody con el mismo orden de columnas.\u003c/li\u003e\\n\u003cli\u003eCalcula y muestra el total en tfoot con colspan cuando corresponda.\u003c/li\u003e\\n\u003cli\u003eAprovecha la semántica para mantener el código claro y escalable.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003e¿Tienes dudas o quieres compartir tu ejemplo de tabla con thead, tbody, tfoot y colspan? Comenta y conversemos.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false}],\"quiz\":{\"id\":31715,\"active\":true,\"title\":\"quiz de Formularios y Tablas\"}},{\"id\":24623,\"title\":\"Contenido Multimedia\",\"materials\":[{\"id\":84738,\"title\":\"Imágenes responsivas con srcset y picture para mejor rendimiento\",\"url\":\"https://platzi.com/cursos/html/imagenes-responsivas-con-srcset-y-pictur/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1d96f77365b4cb2d588e_68dc1d96f77365b4cb2d58a2_140s.jpg\",\"duration\":1399,\"index\":13,\"content\":\"\u003cp\u003eOptimiza tus páginas con \u003cstrong\u003eimágenes responsivas\u003c/strong\u003e que cargan rápido, mantienen la \u003cstrong\u003eaccesibilidad\u003c/strong\u003e y mejoran la \u003cstrong\u003eexperiencia de usuario\u003c/strong\u003e. Aquí verás cómo usar img con srcset y sizes, cuándo elegir picture y cómo sumar atributos de \u003cstrong\u003erendimiento\u003c/strong\u003e como loading lazy y decoding async para un \u003cem\u003eresponsive design\u003c/em\u003e sólido.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo usar imágenes re"])</script><script>self.__next_f.push([1,"sponsivas con img y srcset?\u003c/h2\u003e\\n\u003cp\u003eLa etiqueta img es la base para mostrar fotografías en la web. Con \u003cstrong\u003esrcset\u003c/strong\u003e indicas varias versiones por ancho y con \u003cstrong\u003esizes\u003c/strong\u003e describes cómo se mostrará según el \u003cem\u003eviewport\u003c/em\u003e. El \u003cstrong\u003enavegador decide\u003c/strong\u003e qué archivo descargar según el ancho disponible y tus reglas.\u003c/p\u003e\\n\u003ch3\u003e¿Qué rol cumplen src y alt en accesibilidad?\u003c/h3\u003e\\n\u003cp\u003eEl atributo src apunta al archivo, y \u003cstrong\u003ealt\u003c/strong\u003e ofrece una descripción breve si no carga o para lectores de pantalla.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eUsa descripciones claras y concisas.\u003c/li\u003e\\n\u003cli\u003eMejora la \u003cstrong\u003eaccesibilidad\u003c/strong\u003e y la comprensión del contenido.\u003c/li\u003e\\n\u003cli\u003eAporta contexto si la imagen falla.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo definir srcset por ancho?\u003c/h3\u003e\\n\u003cp\u003eEjemplo con variantes de un hero pensado para \u003cem\u003emobile\u003c/em\u003e, \u003cem\u003etablet\u003c/em\u003e y \u003cem\u003edesktop\u003c/em\u003e:\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/hero-400.jpg\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Vista panorámica\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003esrcset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;\u003c/span\u003e\\n\u003cspan class=\\\"s\\\"\u003e img/hero-400.jpg 400w,\u003c/span\u003e\\n\u003cspan class=\\\"s\\\"\u003e img/hero-800.jpg 800w,\u003c/span\u003e\\n\u003cspan class=\\\"s\\\"\u003e img/hero-1200.jpg 1200w\u003c/span\u003e\\n\u003cspan class=\\\"s\\\"\u003e \u0026quot;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e400w, 800w, 1200w: anchos reales de cada archivo.\u003c/li\u003e\\n\u003cli\u003eEl navegador elige la más adecuada según el ancho disponible.\u003c/li\u003e\\n\u003cli\u003eBeneficio: \u003cstrong\u003emejor calidad con menor peso\u003c/strong\u003e en cada dispositivo.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo controlar el tamaño con sizes?\u003c/h3\u003e\\n\u003cp\u003eDescribe el espacio que ocupará la imagen según el ancho de pantalla. Ejemplo: 100 % hasta 600 px; luego 50 %.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/hero-400.jpg\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Vista panorámica\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003esrcset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;\u003c/span\u003e\\n\u003cspan class=\\\"s\\\"\u003e img/hero-400.jpg 400w,\u003c/span\u003e\\n\u003cspan class=\\\"s\\\"\u003e img/hero-800.jpg 800w,\u003c/span\u003e\\n\u003cspan class=\\\"s\\\"\u003e img/hero-1200.jpg 1200w\u003c/span\u003e\\n\u003cspan class=\\\"s\\\"\u003e \u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003esizes\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;(max-width: 600px) 100vw, 50vw\u0026quot;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e(max-width: 600px) 100vw: ocupa todo el ancho del \u003cem\u003eviewport\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003e50vw: a partir de 600 px, usa la mitad del \u003cem\u003eviewport\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003eBeneficio: \u003cstrong\u003edescargas más precisas\u003c/strong\u003e según el diseño efectivo.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cuándo aplicar picture y source con media queries?\u003c/h2\u003e\\n\u003cp\u003eCuando necesitas \u003cstrong\u003earchivos distintos por dispositivo\u003c/strong\u003e con reglas claras, usa picture con source y media. Define una imagen para \u003cem\u003edesktop/laptop\u003c/em\u003e, otra para \u003cem\u003etablet\u003c/em\u003e y una por defecto para \u003cem\u003emobile\u003c/em\u003e dentro de img.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo escribir reglas media para desktop y tablet?\u003c/h3\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003epicture\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esource\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003emedia\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;(min-width: 768px)\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrcset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/banner-desktop.jpg\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esource\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003emedia\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;(min-width: 480px)\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrcset\u003c/span\u003e\u003cs"])</script><script>self.__next_f.push([1,"pan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/banner-tablet-600x300.jpg\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/banner-mobile.jpg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Paisajes naturales\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003epicture\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e(min-width: 768px): carga la versión de \u003cstrong\u003edesktop/laptop\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003e(min-width: 480px): prioriza la versión \u003cstrong\u003etablet\u003c/strong\u003e si no se cumple la primera.\u003c/li\u003e\\n\u003cli\u003eFallback img: versión \u003cstrong\u003emobile\u003c/strong\u003e por defecto.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué imagen cargar por defecto en mobile?\u003c/h3\u003e\\n\u003cp\u003eDentro de picture, la etiqueta img es el \u003cstrong\u003efallback\u003c/strong\u003e. Coloca ahí la versión más ligera para \u003cem\u003emobile\u003c/em\u003e y agrega alt descriptivo.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eEn móviles, se usa la imagen por defecto.\u003c/li\u003e\\n\u003cli\u003eAl crecer el ancho, se activan los source según media.\u003c/li\u003e\\n\u003cli\u003eBeneficio: \u003cstrong\u003econtrol explícito\u003c/strong\u003e por dispositivo.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Qué atributos mejoran el rendimiento de imágenes?\u003c/h2\u003e\\n\u003cp\u003eAjusta la descarga y el procesamiento para mejorar la \u003cstrong\u003evelocidad\u003c/strong\u003e y la \u003cstrong\u003efluidez\u003c/strong\u003e. loading y decoding ayudan a evitar bloqueos; width y height evitan saltos de diseño.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo funcionan loading lazy y decoding async?\u003c/h3\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/producto-600.jpg\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Producto destacado\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003esrcset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/producto-300.jpg 300w, img/producto-600.jpg 600w\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003esizes\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;(max-width: 600px) 100vw, 600px\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eloading\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;lazy\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003edecoding\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;async\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003ewidth\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;600\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eheight\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;400\u0026quot;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eloading=\\\"lazy\\\": descarga \u003cstrong\u003esolo cuando te acercas\u003c/strong\u003e al elemento al hacer scroll.\u003c/li\u003e\\n\u003cli\u003edecoding=\\\"async\\\": \u003cstrong\u003eprocesa sin bloquear\u003c/strong\u003e el renderizado, manteniendo la página fluida.\u003c/li\u003e\\n\u003cli\u003eClave: mejora de \u003cstrong\u003eperformance\u003c/strong\u003e y percepción de velocidad.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Por qué definir width y height?\u003c/h3\u003e\\n\u003cp\u003eEstablecer dimensiones evita cambios de layout inesperados mientras las imágenes cargan.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003ewidth y height reservan espacio exacto.\u003c/li\u003e\\n\u003cli\u003eMenos reflujo y mejor \u003cstrong\u003eexperiencia de usuario\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eCoherencia en diseños \u003cem\u003eresponsive\u003c/em\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003eHabilidades y conceptos que pones en práctica:\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eConfigurar img con src, alt, srcset y sizes.\u003c/li\u003e\\n\u003cli\u003eUsar picture y source con media para \u003cem\u003edesktop\u003c/em\u003e, \u003cem\u003etablet\u003c/em\u003e y \u003cem\u003emobile\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003eAplicar loading lazy y decoding async para mejor \u003cstrong\u003erendimiento\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eDiseñar reglas por ancho real del dispositivo y del \u003cem\u003eviewport\u003c/em\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003e¿Te gustaría ver un ejemplo con tus propias imágenes y breakpoints? Cuéntame tu caso en los comentarios y lo afinamos juntos.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false},{\"id\":84739,\"title\":\"Integración de video y audio en HTML5 con controles y compatibilidad\",\"url\":\"https://platzi.com/cursos/html/integracion-de-video-y-audio-en-html5-co/\",\"material_ty"])</script><script>self.__next_f.push([1,"pe\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1e3c24246306a24ffbc8_68dc1e3c24246306a24ffbdc_105s.jpg\",\"duration\":1054,\"index\":14,\"content\":\"\u003cp\u003eAprende a integrar videos y audios en HTML5 con buenas prácticas, accesibilidad y rendimiento. Aquí verás cómo usar etiquetas, atributos clave y compatibilidad de formatos para que tus usuarios disfruten una experiencia fluida y confiable.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo insertar videos HTML5 con controles y dimensiones?\u003c/h2\u003e\\n\u003cp\u003ePara empezar, la etiqueta \u003cvideo\u003e carga un archivo con el atributo src. Sin embargo, sin más atributos el video no tiene controles ni tamaño manejable. Agrega controles y dimensiones con los atributos adecuados.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- Variante sencilla --\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003evideo\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;multimedia/video.mp4\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtrols\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ewidth\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;600\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eheight\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;400\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003evideo\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eUsa el atributo \u003cstrong\u003econtrols\u003c/strong\u003e para mostrar el reproductor con play, pausa y barra de progreso.\u003c/li\u003e\\n\u003cli\u003eDefine \u003cstrong\u003ewidth\u003c/strong\u003e y \u003cstrong\u003eheight\u003c/strong\u003e para un tamaño manejable.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003ePara mejorar la carga y la percepción del usuario, utiliza \u003cstrong\u003eposter\u003c/strong\u003e y \u003cstrong\u003epreload\u003c/strong\u003e:\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003evideo\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtrols\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ewidth\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;600\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eheight\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;400\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eposter\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;IMG/banner.jpg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003epreload\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;metadata\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esource\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;multimedia/video.mp4\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;video/mp4\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esource\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;multimedia/video.mov\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;video/mov\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n Tu navegador no soporta formatos de video.\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003evideo\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003eposter\u003c/strong\u003e: muestra una imagen previa mientras carga el video; mejora el rendimiento y la percepción de \u003cem\u003eperformance\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003epreload\u003c/strong\u003e: controla la precarga. Valores útiles: none (no carga nada), metadata (duración y dimensiones, aprox. 300 KB), auto (carga todo o lo posible antes del play).\u003c/li\u003e\\n\u003cli\u003eTexto por defecto: si ningún formato es soportado, aparece un mensaje claro para el usuario.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué formatos y etiquetas usar para compatibilidad?\u003c/h3\u003e\\n\u003cp\u003eNo todos los navegadores soportan lo mismo. \u003cstrong\u003eMP4\u003c/strong\u003e tiene amplio soporte; \u003cstrong\u003eMOV\u003c/strong\u003e no en todos; \u003cstrong\u003eWebM\u003c/strong\u003e suele estar bien soportado. La estrategia es delegar al navegador con múltiples \u003csource\u003e y \u003cstrong\u003etype\u003c/strong\u003e correcto.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eUsa \u003cstrong\u003e\u003csource\u003e\u003c/strong\u003e dentro de \u003cvideo\u003e para listar alternativas.\u003c/li\u003e\\n\u003cli\u003eEspecifica \u003cstrong\u003etype\u003c/strong\u003e como video/mp4, video/mov, etc., para que el navegador elija.\u003c/li\u003e\\n\u003cli\u003eSi no hay so"])</script><script>self.__next_f.push([1,"porte, muestra un mensaje estándar en el contenido del \u003cvideo\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo reproducir audio con controles y múltiples formatos?\u003c/h2\u003e\\n\u003cp\u003eLa etiqueta \u003caudio\u003e funciona de forma similar a \u003cvideo\u003e. Sin controles, el audio puede no ser visible (por estilos como display: none). Agrega \u003cstrong\u003econtrols\u003c/strong\u003e para mostrar el reproductor y usa \u003cstrong\u003epreload\u003c/strong\u003e según necesidad de datos.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eaudio\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtrols\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003epreload\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;none\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esource\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;multimedia/audio.mp3\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;audio/mpeg\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n Tu navegador no soporta audio HTML5.\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eaudio\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003econtrols\u003c/strong\u003e: hace visible y usable el reproductor.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003epreload\u003c/strong\u003e: none para ahorrar datos móviles; auto para mejorar la sensación de carga.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003etype\u003c/strong\u003e en audio: para MP3 usa audio/mpeg.\u003c/li\u003e\\n\u003cli\u003eIgual que en video, puedes listar varios \u003csource\u003e (por ejemplo, OGG, MPG) para mayor compatibilidad.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo cuidar la experiencia del usuario y el rendimiento?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eDefine tamaño con \u003cstrong\u003ewidth\u003c/strong\u003e y \u003cstrong\u003eheight\u003c/strong\u003e para evitar saltos de diseño.\u003c/li\u003e\\n\u003cli\u003eMuestra \u003cstrong\u003eposter\u003c/strong\u003e para anticipar contenido y evitar pantallas en blanco.\u003c/li\u003e\\n\u003cli\u003eAjusta \u003cstrong\u003epreload\u003c/strong\u003e a tu contexto: none si quieres ahorrar datos; metadata como equilibrio; auto si necesitas inicios más rápidos.\u003c/li\u003e\\n\u003cli\u003eIncluye mensajes de fallback para accesibilidad y claridad.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo embeber videos de YouTube con \u003cem\u003eiframe\u003c/em\u003e y parámetros útiles?\u003c/h2\u003e\\n\u003cp\u003eYouTube ofrece un código de insertar desde Compartir \u0026gt; Embeber. Ese \u003cem\u003eiframe\u003c/em\u003e trae atributos clave para accesibilidad y control del reproductor. Puedes indicar el segundo de inicio con el parámetro \u003cem\u003estart\u003c/em\u003e.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eiframe\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;https://www.youtube.com/embed/VIDEO_ID?start=60\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Título descriptivo del video\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eframeborder\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;0\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eallow\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;autoplay; accelerometer\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eallowfullscreen\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eiframe\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003estart\u003c/strong\u003e: define el segundo inicial de reproducción (por ejemplo, 60).\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003etitle\u003c/strong\u003e: mejora accesibilidad y SEO; es lo que leen los lectores de pantalla.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eframeborder\u003c/strong\u003e: evita el borde del marco.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eallow\u003c/strong\u003e: habilita capacidades como \u003cem\u003eautoplay\u003c/em\u003e o acelerómetro en orientación.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eallowfullscreen\u003c/strong\u003e: permite ver en pantalla completa.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué buenas prácticas conviene aplicar?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eOfrece varias fuentes con \u003cstrong\u003e\u003csource\u003e\u003c/strong\u003e y \u003cstrong\u003etype\u003c/strong\u003e correcto para video y audio.\u003c/li\u003e\\n\u003cli\u003eAgrega \u003cstrong\u003econtrols\u003c/strong\u003e siempre para usabilidad y accesibilidad.\u003c/li\u003e\\n\u003cli\u003eProporciona texto alternativo dentro de \u003cvideo\u003e/\u003caudio\u003e cuando no hay soporte.\u003c/li\u003e\\n\u003cli\u003eAjusta \u003cstrong\u003epreload\u003c/strong\u003e según el contexto y plan de datos de tu audiencia.\u003c/li\u003e\\n\u003cli\u003eUsa \u003cstrong\u003eposte"])</script><script>self.__next_f.push([1,"r\u003c/strong\u003e para mejorar la percepción visual y tiempos de espera.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003e¿Tienes dudas sobre \u003cem\u003eiframe\u003c/em\u003e, \u003cem\u003epreload\u003c/em\u003e o formatos como MP4, MOV u OGG? Comparte tu pregunta y cuéntame qué caso de uso quieres resolver.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false}],\"quiz\":{\"id\":31716,\"active\":true,\"title\":\"quiz de Contenido Multimedia\"}},{\"id\":24624,\"title\":\"Accesibilidad Web Y SEO\",\"materials\":[{\"id\":84740,\"title\":\"Atributos ARIA para accesibilidad web con lectores de pantalla\",\"url\":\"https://platzi.com/cursos/html/atributos-aria-para-accesibilidad-web-co/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1e343e36d605d0ac2162_68dc1e343e36d605d0ac2176_81s.jpg\",\"duration\":805,\"index\":15,\"content\":\"\u003cp\u003eLa accesibilidad web comienza con \u003cstrong\u003eHTML semántico\u003c/strong\u003e y se potencia con \u003cstrong\u003eatributos \u003cem\u003eARIA\u003c/em\u003e\u003c/strong\u003e. Aprender a describir acciones, roles y mensajes para \u003cstrong\u003electores de pantalla\u003c/strong\u003e transforma la experiencia de usuarios y hace tu interfaz más clara. Aquí verás cómo usar aria-label, aria-describedby y role tal como se muestra en ejemplos prácticos.\u003c/p\u003e\\n\u003ch2\u003e¿Qué es ARIA y por qué importa en accesibilidad web?\u003c/h2\u003e\\n\u003cp\u003e\u003cem\u003eARIA\u003c/em\u003e proviene de \u003cem\u003eAccessibility Rich Internet Application\u003c/em\u003e y añade atributos a las etiquetas para \u003cstrong\u003edar contexto adicional\u003c/strong\u003e que HTML por sí solo no ofrece. Un lector de pantalla entiende mejor qué es cada elemento y qué acción o descripción comunicar al usuario.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003eHTML semántico primero.\u003c/strong\u003e Proporciona una base sólida para la lectura y estructura.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eARIA como capa extra.\u003c/strong\u003e Aporta descripciones, propósitos y roles cuando la semántica no alcanza.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eMejora la comprensión.\u003c/strong\u003e Indica qué hacer y dónde moverse en la interfaz.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo aplicar aria-label, aria-describedby y role en casos reales?\u003c/h2\u003e\\n\u003cp\u003eA partir de ejemplos sencillos, se muestran patrones útiles que puedes replicar tal cual. La habilidad clave: \u003cstrong\u003eelegir el atributo adecuado\u003c/strong\u003e según si necesitas propósito, descripción o rol.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo clarificar acciones en botones y navegación?\u003c/h3\u003e\\n\u003cp\u003eCuando el icono o texto no explican la acción, usa aria-label para explicitar el propósito.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eBotón de cierre con “X”. La X no dice “cerrar”, el atributo sí.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebutton\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;cerrar ventana\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eX\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebutton\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eNavegación sin título visible. Si hay varias barras de menú, nómbralas.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Menú principal\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eInicio\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/productos\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eProductos\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eClaves prácticas:\\n- Usa aria-label cuando necesites una \u003cstrong\u003edescripción breve del propósito\u003c/strong\u003e.\\n- Mantén los textos \u003cstrong\u003eclaros y específicos\u003c/strong\u003e.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo describ"])</script><script>self.__next_f.push([1,"ir formularios y campos de búsqueda?\u003c/h3\u003e\\n\u003cp\u003eEn inputs, aria-label y aria-describedby orientan acción e instrucciones.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eBuscador con propósito explícito.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;search\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Buscador de productos\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eContraseña con reglas de formato. El texto de ayuda se asocia mediante aria-describedby.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;password\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eContraseña\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;password\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;password\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-describedby\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;password-help\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esmall\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;password-help\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMínimo ocho caracteres, incluyen números y letras.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esmall\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eClaves prácticas:\\n- aria-label: describe \u003cstrong\u003equé hace\u003c/strong\u003e el campo.\\n- aria-describedby: enlaza \u003cstrong\u003einstrucciones o ayudas\u003c/strong\u003e ya visibles en el DOM.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo enriquecer imágenes y contenedores sin semántica?\u003c/h3\u003e\\n\u003cp\u003eCuando el alt se queda corto, complementa con aria-describedby. Y si usas contenedores genéricos, define roles.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eImagen con descripción extendida.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;grafica.png\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Ventas 2024\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-describedby\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;grafica-descripcion\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;grafica-descripcion\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eLas ventas aumentaron un 40 % en el Q1.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eContenedor comodín con roles semánticos.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erole\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;main\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh3\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eSección principal\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh3\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eContenido del área principal.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erole\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;alert\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003csp"])</script><script>self.__next_f.push([1,"an class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eEste es un mensaje de alerta.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eClaves prácticas:\\n- alt: breve y directo; aria-describedby: \u003cstrong\u003edetalle adicional\u003c/strong\u003e cuando hace falta.\\n- role: aporta \u003cstrong\u003esemántica\u003c/strong\u003e a divs cuando no puedes usar etiquetas como header o nav.\u003c/p\u003e\\n\u003ch2\u003e¿Qué buenas prácticas y próximos pasos se recomiendan?\u003c/h2\u003e\\n\u003cp\u003eLa prioridad es que todas las personas comprendan la interfaz y sus acciones. ARIA es amplio y hay más atributos que pueden ser útiles según el caso.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eConstruye con \u003cstrong\u003eHTML semántico\u003c/strong\u003e y añade \u003cem\u003eARIA\u003c/em\u003e solo para cubrir vacíos.\u003c/li\u003e\\n\u003cli\u003eEmplea aria-label para \u003cstrong\u003epropósito corto\u003c/strong\u003e y aria-describedby para \u003cstrong\u003einstrucciones\u003c/strong\u003e existentes.\u003c/li\u003e\\n\u003cli\u003eUsa role para \u003cstrong\u003edefinir el contexto\u003c/strong\u003e en contenedores genéricos.\u003c/li\u003e\\n\u003cli\u003eConsulta recursos para \u003cstrong\u003eprofundizar en otros atributos de ARIA\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eRecuerda: \u003cstrong\u003eaccesibilidad es para todos\u003c/strong\u003e y es una buena práctica esencial.\u003c/li\u003e\\n\u003cli\u003ePróximo tema: \u003cstrong\u003ebuenas prácticas y SEO\u003c/strong\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003e¿Te quedó alguna duda o quieres compartir cómo aplicarías estos atributos en tu proyecto? Escribe en los comentarios y continuemos la conversación.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false},{\"id\":84741,\"title\":\"Estructura semántica y meta tags para mejorar posicionamiento web\",\"url\":\"https://platzi.com/cursos/html/estructura-semantica-y-meta-tags-para-me/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1e36af2b38b3b2b5a38c_68dc1e36af2b38b3b2b5a3a0_95s.jpg\",\"duration\":949,\"index\":16,\"content\":\"\u003cp\u003eSEO bien aplicado impulsa el alcance orgánico de un sitio sin pagar anuncios. Aquí verás cómo combinar \u003cstrong\u003esemántica HTML\u003c/strong\u003e, \u003cstrong\u003eaccesibilidad\u003c/strong\u003e, \u003cstrong\u003emeta tags\u003c/strong\u003e, estructura clara y optimización de medios para lograr una mejor calificación en buscadores. No es un código único: son prácticas y estrategias coherentes que trabajan juntas.\u003c/p\u003e\\n\u003ch2\u003e¿Qué es SEO y cómo ayuda a crecer de forma orgánica?\u003c/h2\u003e\\n\u003cp\u003eSEO permite que los buscadores muestren tu contenido sin pago directo. Funciona cuando aplicas un \u003cstrong\u003econjunto de buenas prácticas\u003c/strong\u003e: semántica, accesibilidad, estructura correcta y optimización de recursos. Es dinámico y evoluciona; en la era de la AI, las reglas cambian, por lo que conviene mantenerse al día.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eEnfoque: llegar a más gente de forma orgánica.\u003c/li\u003e\\n\u003cli\u003eClave: una sola estrategia no basta; suma prácticas consistentes.\u003c/li\u003e\\n\u003cli\u003eEfecto: mejor calificación en buscadores y mayor visibilidad.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Por qué la semántica y la accesibilidad influyen en SEO?\u003c/h3\u003e\\n\u003cp\u003ePorque ayudan a los buscadores y a los lectores de pantalla a entender la página. Un HTML semántico claro, con roles y \u003cem\u003eARIA labels\u003c/em\u003e, mejora la interpretación del contenido y la experiencia de todos.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo optimizar el head con meta tags, título y \u003cem\u003eOpen Graph\u003c/em\u003e?\u003c/h2\u003e\\n\u003cp\u003eEl head define idioma, codificación, \u003cem\u003emobile first\u003c/em\u003e, título y metadatos que los buscadores y redes sociales usan para indexar y previsualizar tu sitio.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eIdioma con lang: indica el lenguaje principal del documento.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehtml\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003elang\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;es\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eCodificación con charset UTF-8: muestra bien caracteres en español.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003echarset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026qu"])</script><script>self.__next_f.push([1,"ot;UTF-8\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\u003cem\u003eViewport\u003c/em\u003e para \u003cem\u003emobile first\u003c/em\u003e: crítico en móviles y calificación SEO.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;viewport\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;width=device-width, initial-scale=1.0\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eTítulo optimizado: 50–60 caracteres, con palabras clave y único por página.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eGuía de SEO: semántica, accesibilidad y rendimiento\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eMeta description: texto que aparece bajo el título en Google; debe reflejar el contenido real.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;description\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Buenas prácticas de SEO con HTML semántico, accesibilidad y optimización para mejorar el posicionamiento orgánico.\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eMeta keywords: hoy tiene menos peso, pero puede incluirse.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;keywords\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;SEO, HTML semántico, accesibilidad, meta tags\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eAutor: atribuye el contenido a una persona o empresa.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;author\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Tu Empresa\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\u003cem\u003eRobots\u003c/em\u003e: indica a las arañas cómo tratar la página: \u003cem\u003eindex\u003c/em\u003e, \u003cem\u003efollow\u003c/em\u003e, \u003cem\u003enoindex\u003c/em\u003e, \u003cem\u003e\u003c/em\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;robots\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;index, follow\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eCanonical: evita contenido duplicado indicando la URL original.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elink\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erel\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;canonical\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;https://ejemplo.com/\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\u003cem\u003eOpen Graph\u003c/em\u003e para redes sociales: control de título, descripción, imagen y URL compartida.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eproperty\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;og:title\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Guía práctica de SEO en HTML\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\""])</script><script>self.__next_f.push([1,"\u003eproperty\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;og:description\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Semántica, accesibilidad y meta tags para posicionar.\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eproperty\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;og:image\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;https://ejemplo.com/og-image.jpg\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eproperty\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;og:url\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;https://ejemplo.com/\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eFavicon: refuerza la identidad visual en pestañas y dispositivos.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elink\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erel\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;icon\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/favicon.ico\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;image/x-icon\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch2\u003e¿Qué estructura semántica y accesible mejora tu calificación?\u003c/h2\u003e\\n\u003cp\u003eOrganiza el body con secciones claras, una jerarquía de encabezados correcta y enlaces descriptivos. Optimiza imágenes y videos para rendimiento y experiencia.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eHeader con logotipo enlazando al \u003cem\u003ehome\u003c/em\u003e y aria-label descriptivo.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eheader\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Ir al inicio\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/logo.svg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Logotipo de la empresa\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ewidth\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;120\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eheight\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;40\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eheader\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eNavegación principal con nav y aria-label.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Navegación principal\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eul\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#inicio\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eInicio\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#servicios\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eServicios\u003cspan class=\\\"p\\\"\u003e\u0026lt"])</script><script>self.__next_f.push([1,";/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#productos\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eProductos\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#sobre-nosotros\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eSobre nosotros\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#blog\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eBlog\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#contacto\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eContacto\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eul\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eMain con un único H1 por página: regla de oro; H2/H3 para secciones.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emain\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh1\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eSEO con HTML semántico y accesible\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh1\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003earticle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh2\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eBuenas prácticas de estructura\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh2\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eContenido introductorio.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003earticle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eImágenes optimizadas con alt, dimensiones y carga diferida.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/img/ejemplo.webp\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Descripción de la imagen\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ewidth\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;800\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eheight\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;500\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eloading\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;lazy\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eEnlaces internos descriptivos: evita “page” o “info”; explica el destino.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cs"])</script><script>self.__next_f.push([1,"pan class=\\\"s\\\"\u003e\u0026quot;/guia-completa-seo\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eGuía completa de SEO en HTML\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\\n\u003cp\u003eListas para agrupar puntos clave de forma clara.\u003c/p\u003e\\n\u003c/li\u003e\\n\u003cli\u003e\\n\u003cp\u003eVideo con múltiples formatos y atributos que mejoran rendimiento.\u003c/p\u003e\\n\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003evideo\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtrols\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003epreload\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;metadata\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ewidth\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;800\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esource\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/video/ejemplo.webm\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;video/webm\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esource\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/video/ejemplo.mp4\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;video/mp4\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n Tu navegador no soporta el elemento video.\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003evideo\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eAside para contenido secundario, no principal.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003easide\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh2\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eContenido relacionado\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh2\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eul\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/mejores-practicas\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMejores prácticas\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eul\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003easide\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eFooter con navegaciones adicionales y aria-label específico (por ejemplo, “Enlaces del pie” y “Redes sociales”).\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efooter\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Enlaces del pie\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e…\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Redes sociales\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e…\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efooter\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eHabilidades y conceptos aplicados: definición de SEO y alcance orgánico; HTML semántico con header, nav, main, article, section, aside y footer; uso correcto de H1 único; accesibilidad con \u003cem\u003eARIA labels\u003c/em\u003e; meta tags clave (lang, charset UTF-8, viewport, title, description, keywords con menor peso, author, robots, canonical); \u003cem\u003eOpen Graph\u003c/em\u003e para compartir en redes; favicons; optimización de im"])</script><script>self.__next_f.push([1,"ágenes con alt, dimensiones y \u003cem\u003elazy loading\u003c/em\u003e; enlaces internos descriptivos; videos con múltiples formatos. Todo suma para mejorar la calificación y el posicionamiento.\u003c/p\u003e\\n\u003cp\u003e¿Tienes dudas o un caso real que quieras optimizar? Coméntalo y afinamos juntos tu implementación.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false}],\"quiz\":{\"id\":31717,\"active\":true,\"title\":\"quiz de Accesibilidad Web Y SEO\"}},{\"id\":24625,\"title\":\"Proyecto final\",\"materials\":[{\"id\":84742,\"title\":\"Portafolio profesional con HTML semántico y SEO\",\"url\":\"https://platzi.com/cursos/html/portafolio-profesional-con-html-semantic/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1e33cfc42806e7b9a76d_68dc1e33cfc42806e7b9a781_48s.jpg\",\"duration\":481,\"index\":17,\"content\":\"\u003cp\u003eConstruye un portafolio profesional con \u003cstrong\u003eHTML semántico\u003c/strong\u003e, \u003cstrong\u003eaccesibilidad con ARIA\u003c/strong\u003e y \u003cstrong\u003eSEO\u003c/strong\u003e listo para compartir cuando busques trabajo. La guía resume cómo organizar la estructura, los metadatos y la navegación para presentar proyectos, descargar tu CV y optimizar tu presencia en redes sociales.\u003c/p\u003e\\n\u003ch2\u003e¿Qué incluye el proyecto final de portafolio HTML semántico y SEO?\u003c/h2\u003e\\n\u003cp\u003eEste proyecto es tu \u003cstrong\u003eperfil personal\u003c/strong\u003e: una página estática con secciones claras, navegación accesible y metadatos bien configurados. La idea es personalizarlo con tu contenido, no solo copiar y pegar.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003eDatos esenciales\u003c/strong\u003e en el head: título, descripción y codificación.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eSEO básico\u003c/strong\u003e: metadatos y estructura semántica comprensible por buscadores.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003e“Orphan graphs” para redes sociales\u003c/strong\u003e y graphs para Twitter, hoy aún llamado Twitter.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eURLs canónicas\u003c/strong\u003e para evitar contenido duplicado.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eFavicons\u003c/strong\u003e para identidad visual en pestañas y dispositivos.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué metadatos SEO, canonical y favicons configurar?\u003c/h3\u003e\\n\u003cp\u003eConfigura atributos mínimos en el head para buscadores y navegadores.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003echarset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;utf-8\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMi perfil personal\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;description\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Portafolio de proyectos y experiencia.\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elink\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erel\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;canonical\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;https://midominio.com/\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elink\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erel\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;icon\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/favicon.ico\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esizes\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;any\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elink\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erel\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;icon\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/icon.svg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;image/svg+xml\u0026quot;\u003c/span\u003e \u003cspan cl"])</script><script>self.__next_f.push([1,"ass=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elink\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erel\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;apple-touch-icon\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/apple-touch-icon.png\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch3\u003e¿Cómo añadir graphs para redes sociales y Twitter?\u003c/h3\u003e\\n\u003cp\u003eIncluye metadatos para compartir correctamente en redes y en Twitter.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- graphs para redes sociales --\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eproperty\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;og:title\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Mi portafolio\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eproperty\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;og:description\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Proyectos destacados y experiencia.\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eproperty\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;og:image\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;https://midominio.com/cover.jpg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eproperty\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;og:url\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;https://midominio.com/\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\\n\u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- graphs para Twitter --\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;twitter:card\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;summary_large_image\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;twitter:title\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Mi portafolio\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;twitter:description\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Proyectos y CV para descarga.\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;twitter:image\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;https://midominio.com/cover.jpg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch2\u003e¿Cómo estructurar el header, navegación y CTA con ARIA?\u003c/h2\u003e\\n\u003cp\u003eEl \u003cem\u003eheader\u003c/em\u003e superior integra logotipo/ícono, tu nombre y el título de la página (por ejemplo, “Mi portafolio”). La \u003cstrong\u003enavegación principal\u003c/strong\u003e usa ARIA para mejorar la accesibilidad con lectores de software. Incluye \u003cstrong\u003eacciones rápidas\u003c/strong\u003e como la descarga de tu CV.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo usar el atributo download y aria-label en enlaces?\u003c/h3\u003e\\n\u003cp\u003ePermite que el CV se descargue directo con un enlace accesible.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Navegació"])</script><script>self.__next_f.push([1,"n principal\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/docs/CV.pdf\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003edownload\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Descarga el CV en PDF\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eDescargar CV\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch3\u003e¿Cómo preparar un selector de idioma con JavaScript?\u003c/h3\u003e\\n\u003cp\u003eEl selector se maqueta ahora y se habilita después con \u003cem\u003eJavaScript\u003c/em\u003e para traducir contenido.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;lang\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Cambiar idioma\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eIdioma\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eselect\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;lang\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;lang\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-controls\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;contenido\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eoption\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003evalue\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;es\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eEspañol\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eoption\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eoption\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003evalue\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;en\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eEnglish\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eoption\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eselect\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch2\u003e¿Cómo organizar el main, hero y enlaces internos en una landing?\u003c/h2\u003e\\n\u003cp\u003eEl contenido principal vive en el elemento semántico \u003cstrong\u003emain\u003c/strong\u003e. El \u003cem\u003ehero\u003c/em\u003e presenta mensajes y \u003cem\u003ecall to action\u003c/em\u003e. Además, puedes mover al usuario a secciones específicas de la misma \u003cem\u003elanding\u003c/em\u003e usando IDs en enlaces.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo enlazar secciones con IDs en una landing?\u003c/h3\u003e\\n\u003cp\u003eCrea anclas internas que desplacen a áreas como “Proyectos destacados”.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emain\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erole\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;main\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esection\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Hero\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#proyectos-destacados\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eVer mis proyectos\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esection\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esection\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;proyectos-destacados\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Proyectos destacados\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- Tarjetas de proyectos --\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\""])</script><script>self.__next_f.push([1,"nt\\\"\u003esection\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emain\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eUsa el atributo id en la sección destino.\u003c/li\u003e\\n\u003cli\u003eEnlaza con href=\\\"#id\\\" para el desplazamiento interno.\u003c/li\u003e\\n\u003cli\u003eMantén los CTA claros y descriptivos.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo usar div como comodines y roles semánticos?\u003c/h3\u003e\\n\u003cp\u003eCuando no exista una etiqueta específica, usa div como contenedor y agrega roles o ARIA si aporta claridad.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esection\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Estadísticas rápidas\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erole\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;group\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Logros\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e+10 proyectos.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e3 productos lanzados.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esection\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch3\u003e¿Cómo optimizar imágenes con picture, source y figure?\u003c/h3\u003e\\n\u003cp\u003eSirve imágenes por formato y tamaño, con texto alternativo y un pie explicativo.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efigure\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003epicture\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esource\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;image/avif\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrcset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/img/desk.avif\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esource\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;image/webp\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrcset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/img/desk.webp\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/img/desk.jpg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Diego De Granda en su espacio de trabajo\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003epicture\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efigcaption\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003etitle caption: foto en el espacio de trabajo.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efigcaption\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efigure\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eUsa figure y figcaption para contexto visual.\u003c/li\u003e\\n\u003cli\u003eEmplea picture y source para formatos modernos.\u003c/li\u003e\\n\u003cli\u003eDefine alt descriptivo y conciso.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo presentar “Sobre mí”, valores y enlaces?\u003c/h3\u003e\\n\u003cp\u003eOrganiza un section con H2 y subsecciones con H3 para valores, citas y una tabla simple.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eIncluye texto y quotes para tu voz personal.\u003c/li\u003e\\n\u003cli\u003eAñade enlaces externos a más información.\u003c/li\u003e\\n\u003cli\u003eMantén la jerarquía: H2 para secciones, H3 para detalles.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003ePor último, agrega estilos con \u003cstrong\u003eCSS\u003c/strong\u003e cuando termines la "])</script><script>self.__next_f.push([1,"estructura. Será una \u003cstrong\u003epágina estática\u003c/strong\u003e lista para compartir; no requiere interacción para mostrar tu información, imágenes y texto. Es una \u003cstrong\u003ebase completa\u003c/strong\u003e con HTML semántico, accesible y con un porcentaje de \u003cstrong\u003eSEO\u003c/strong\u003e que facilita que la gente llegue a tu contenido. Como nota inspiradora: Diego De Granda comparte que tiene más de quince años en desarrollo de software y producto, y en años recientes ha trabajado en productos base con inteligencia artificial.\u003c/p\u003e\\n\u003cp\u003e¿Tienes dudas o quieres mostrar tu versión personalizada? Deja un comentario y comparte tu portafolio.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false}],\"quiz\":null}],\"materialInfo\":{\"freeAccess\":false,\"id\":84728,\"courseTitle\":\"Curso de HTML\",\"courseDescription\":\"Domina la estructura esencial de las páginas web con HTML. Aprende a escribir código limpio, jerarquizado y funcional. Comprende el rol de HTML en la web moderna y cómo su estructura impacta la accesibilidad, el SEO y la mantenibilidad del sitio.\",\"courseCategory\":\"Desarrollo e Ingeniería\",\"courseOpenGraphImage\":\"https://static.platzi.com/media/courses/Piezas-Curso-HTML_OG.jpg\",\"courseBadge\":\"https://static.platzi.com/media/achievements/piezas-curso-html-badge-80b94b6a-d39d-44d8-9218-f14ca1e4764e.png\",\"courseUrl\":\"/cursos/html/\",\"teacherName\":\"Diego De Granda\",\"teacherUrl\":\"/profesores/degranda/\",\"teacherAvatar\":\"https://static.platzi.com/media/avatars/avatars/degranda_d2a604a7-53bb-44b7-a517-002c63043563.jpg\",\"type\":\"video\",\"commentsNumber\":0,\"discussionsNumber\":0,\"name\":\"Configuración de VSCode y estructura HTML5 básica\",\"duration\":828,\"content\":\"\u003cp\u003eCrear tu primer sitio en HTML5 es más simple de lo que parece. Aquí verás cómo configurar \u003cem\u003eVSCode\u003c/em\u003e, usar el navegador con el inspector de elementos, generar la estructura base con un atajo y renderizar tu primer Hola mundo con buenas prácticas. Todo paso a paso y con conceptos clave explicados de forma clara.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo preparar las herramientas para HTML con VSCode y navegador?\u003c/h2\u003e\\n\u003cp\u003ePara escribir y visualizar código necesitas dos piezas: un editor de texto y un navegador. El editor recomendado es \u003cem\u003eVSCode\u003c/em\u003e. El navegador es esencial porque ahí verás cómo se renderiza el HTML y porque incluye el inspector de elementos.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eInstala \u003cem\u003eVSCode\u003c/em\u003e y ábrelo. Sigue el instalador según tu sistema operativo.\u003c/li\u003e\\n\u003cli\u003eUsa un navegador moderno con inspector de elementos. Te permitirá ver el HTML real y \u003cstrong\u003edebuggear\u003c/strong\u003e con feedback en tiempo real.\u003c/li\u003e\\n\u003cli\u003eCrea una carpeta raíz llamada \\\"Curso HTML\\\". Allí guardarás todo el contenido, clase por clase.\u003c/li\u003e\\n\u003cli\u003eDentro, crea \\\"uno_Fundamentos_HTML\\\" para el módulo y luego \\\"clase uno\\\" como subcarpeta.\u003c/li\u003e\\n\u003cli\u003eEvita acentos y espacios en nombres. Usa guion medio, guion bajo o \u003cem\u003ecamel case\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003eEn \\\"clase uno\\\", crea el archivo index.html.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Para qué sirve el inspector de elementos?\u003c/h3\u003e\\n\u003cp\u003eEl inspector muestra el árbol real de etiquetas: html, head y body. Permite identificar errores, probar cambios rápidos y entender qué se está renderizando. Es clave para \u003cstrong\u003edebuggear\u003c/strong\u003e y para recibir \u003cstrong\u003efeedback en tiempo real\u003c/strong\u003e antes de llevar los cambios al editor.\u003c/p\u003e\\n\u003ch2\u003e¿Qué incluye la estructura básica de HTML5 y por qué importa?\u003c/h2\u003e\\n\u003cp\u003eEn index.html puedes generar la base con un atajo: escribe ! y presiona tab. Esto crea el esqueleto HTML5 con etiquetas contenedoras que abren y cierran. Es importante comprender cada línea para que después te enfoques en el contenido dentro de body.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"cp\\\"\u003e\u0026lt;!DOCTYPE html\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehtml\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003elang\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;en\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003e"])</script><script>self.__next_f.push([1,"meta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003echarset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;UTF-8\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;viewport\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;width=device-width, initial-scale=1.0\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003edocument\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehtml\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eLas etiquetas contenedoras se abren y se cierran con slash. El contenido va dentro del par.\u003c/li\u003e\\n\u003cli\u003eTodo lo visible en el navegador está dentro de body. Lo de head son instrucciones para el navegador.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué hacen doctype html y el atributo lang?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u0026lt;!DOCTYPE html\u0026gt; le indica al navegador: esto es \u003cstrong\u003eHTML5\u003c/strong\u003e. Así usas el estándar vigente y sus etiquetas.\u003c/li\u003e\\n\u003cli\u003eEn \u003chtml lang=\\\"en\\\"\u003e defines el idioma del contenido. El navegador puede ofrecer traducción automática si tu idioma local difiere, por ejemplo con \u003cem\u003eGoogle Translator\u003c/em\u003e mediante un pequeño \u003cem\u003eprompt\u003c/em\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué hace meta charset y meta viewport?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cmeta charset=\\\"UTF-8\\\"\u003e habilita \u003cstrong\u003ecaracteres especiales y emojis\u003c/strong\u003e. Sin esto, acentos y símbolos pueden verse como códigos extraños.\u003c/li\u003e\\n\u003cli\u003e\u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"\u003e mejora la visualización en \u003cstrong\u003edispositivos móviles\u003c/strong\u003e. Usa el \u003cstrong\u003eancho real del dispositivo\u003c/strong\u003e y evita un \u003cstrong\u003ezoom inicial\u003c/strong\u003e que distorsione el diseño.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Dónde va el contenido visible: body?\u003c/h3\u003e\\n\u003cp\u003eTodo lo que agregues dentro de body se renderiza. El head aloja reglas y metadatos: estilos, configuración del documento y el \u003ctitle\u003e, que define el texto de la pestaña del navegador.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo crear y visualizar tu primer HTML: h1 y párrafo?\u003c/h2\u003e\\n\u003cp\u003eAbre index.html con \u003cem\u003eOpen with Live Server\u003c/em\u003e desde el clic derecho en el explorador de archivos. Verás en la URL que se sirve desde local, con la ruta de tus carpetas y el index.html. En el inspector podrás verificar doctype, html, head y body.\u003c/p\u003e\\n\u003cp\u003eAgrega contenido dentro de body:\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh1\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eHola mundo\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh1\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eEs mi primer sitio web.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eBuenas prácticas y recordatorios.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eGuarda y revisa en el navegador para ver cómo se renderiza el cambio.\u003c/li\u003e\\n\u003cli\u003eVerifica en el inspector que h1 y p aparezcan dentro de body.\u003c/li\u003e\\n\u003cli\u003eCambia el \u003ctitle\u003e para ajustar el texto de la pestaña.\u003c/li\u003e\\n\u003cli\u003eUsa el atajo ! + tab para generar la estructura base rápidamente.\u003c/li\u003e\\n\u003cli\u003eNombres de archivos y carpetas sin acentos ni espacios. Usa guion medio, guion bajo o \u003cem\u003ecamel case\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003eRecuerda que las etiquetas contenedoras se cierran con slash.\u003c/li\u003e\\n\u003cli\u003eMantén meta charset=\\\"UTF-8\\\" y meta viewport para compatibilidad y móviles.\u003c/li\u003e\\n\u003c"])</script><script>self.__next_f.push([1,"li\u003eUsa el inspector para \u003cstrong\u003edebuggear\u003c/strong\u003e errores y aplicar correcciones informadas.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003e¿Tienes dudas o quieres compartir cómo nombraste tus carpetas y qué viste en el inspector? Deja un comentario y seguimos construyendo juntos.\u003c/p\u003e\",\"contentSeo\":\"Crear tu primer sitio en HTML5 es más simple de lo que parece. Aquí verás cómo configurar VSCode, usar el navegador con el inspector de elementos, generar la estructura base con un atajo y renderizar tu primer Hola mundo con buenas prácticas. Todo paso a paso y con conceptos clave explicados de forma clara.¿Cómo preparar las herramientas para HTML con VSCode y navegador?Para escribir y visualizar código necesitas dos piezas: un editor de texto y un navegador. El editor recomendado es VSCode. El navegador es esencial porque ahí verás cómo se renderiza el HTML y porque incluye el inspector de elementos.Instala VSCode y ábrelo. Sigue el instalador según tu sistema operativo.Usa un navegador moderno con inspector de elementos. Te permitirá ver el HTML real y debuggear con feedback en tiempo real.Crea una carpeta raíz llamada 'Curso HTML'. Allí guardarás todo el contenido, clase por clase.Dentro, crea 'uno_Fundamentos_HTML' para el módulo y luego 'clase uno' como subcarpeta.Evita acentos y espacios en nombres. Usa guion medio, guion bajo o camel case.En 'clase uno', crea el archivo index.html.¿Para qué sirve el inspector de elementos?El inspector muestra el árbol real de etiquetas: html, head y body. Permite identificar errores, probar cambios rápidos y entender qué se está renderizando. Es clave para debuggear y para recibir feedback en tiempo real antes de llevar los cambios al editor.¿Qué incluye la estructura básica de HTML5 y por qué importa?En index.html puedes generar la base con un atajo: escribe ! y presiona tab. Esto crea el esqueleto HTML5 con etiquetas contenedoras que abren y cierran. Es importante comprender cada línea para que después te enfoques en el contenido dentro de body.document Las etiquetas contenedoras se abren y se cierran con slash. El contenido va dentro del par.Todo lo visible en el navegador está dentro de body. Lo de head son instrucciones para el navegador.¿Qué hacen doctype html y el atributo lang? le indica al navegador: esto es HTML5. Así usas el estándar vigente y sus etiquetas.En defines el idioma del contenido. El navegador puede ofrecer traducción automática si tu idioma local difiere, por ejemplo con Google Translator mediante un pequeño prompt.¿Qué hace meta charset y meta viewport? habilita caracteres especiales y emojis. Sin esto, acentos y símbolos pueden verse como códigos extraños. mejora la visualización en dispositivos móviles. Usa el ancho real del dispositivo y evita un zoom inicial que distorsione el diseño.¿Dónde va el contenido visible: body?Todo lo que agregues dentro de body se renderiza. El head aloja reglas y metadatos: estilos, configuración del documento y el , que define el texto de la pestaña del navegador.¿Cómo crear y visualizar tu primer HTML: h1 y párrafo?Abre index.html con Open with Live Server desde el clic derecho en el explorador de archivos. Verás en la URL que se sirve desde local, con la ruta de tus carpetas y el index.html. En el inspector podrás verificar doctype, html, head y body.Agrega contenido dentro de body: Hola mundoEs mi primer sitio web.Buenas prácticas y recordatorios.Guarda y revisa en el navegador para ver cómo se renderiza el cambio.Verifica en el inspector que h1 y p aparezcan dentro de body.Cambia el para ajustar el texto de la pestaña.Usa el atajo ! + tab para generar la estructura base rápidamente.Nombres de archivos y carpetas sin acentos ni espacios. Usa guion medio, guion bajo o camel case.Recuerda que las etiquetas contenedoras se cierran con slash.Mantén meta charset='UTF-8' y meta viewport para compatibilidad y móviles.Usa el inspector para debuggear errores y aplicar correcciones informadas.¿Tienes dudas o quieres compartir cómo nombraste tus carpetas y qué viste en el inspector? Deja un"])</script><script>self.__next_f.push([1," comentario y seguimos construyendo juntos.\",\"materialParams\":{\"totalMaterial\":17,\"actualMaterial\":3,\"nextMaterialUrl\":\"/cursos/html/etiquetas-de-texto-y-jerarquia-en-html/\",\"nextMaterialName\":\"Etiquetas de texto y jerarquía en HTML\",\"previousMaterialUrl\":\"/cursos/html/como-funciona-la-web-desde-url-hasta-pag/\",\"previousMaterialName\":\"Cómo funciona la web desde URL hasta página renderizada\",\"isFirst\":false,\"isLast\":false,\"nextIsQuiz\":false,\"prevIsQuiz\":false,\"isNextMaterialPaid\":true},\"video\":{\"iframes\":[],\"servers\":{\"serverC\":{\"id\":\"serverC\",\"hls\":\"https://api.platzi.com/mdstrm/v1/video/68dc1cdae738b5b94215cc55.m3u8\"},\"serverM\":{\"id\":\"serverM\",\"hls\":\"https://api.platzi.com/mdstrm/v1/video/68dc1cdae738b5b94215cc55.m3u8?fallback=origin\"}},\"player\":{\"currentTime\":0,\"autoplay\":true,\"defaultServer\":\"serverC\"},\"movin\":{\"subtitles\":[],\"admin-url\":null}},\"seoTitle\":\"Fundamentos y estructura básica de HTML - Platzi\",\"seoDescription\":null,\"urlCanonical\":\"https://platzi.com/cursos/html/configuracion-de-vscode-y-estructura-htm/\",\"indexedClass\":true,\"thumbnail\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1cdae738b5b94215cc55_68dc1cdae738b5b94215cc69_83s.jpg\",\"datePublished\":\"2025-09-30T19:00:00+00:00\",\"dateModified\":\"2025-09-30T19:58:02.889052+00:00\",\"isoDuration\":\"P0DT00H13M48S\",\"iframeSrc\":null,\"markdownContent\":\"Crear tu primer sitio en HTML5 es más simple de lo que parece. Aquí verás cómo configurar *VSCode*, usar el navegador con el inspector de elementos, generar la estructura base con un atajo y renderizar tu primer Hola mundo con buenas prácticas. Todo paso a paso y con conceptos clave explicados de forma clara.\\n\\n## ¿Cómo preparar las herramientas para HTML con VSCode y navegador?\\nPara escribir y visualizar código necesitas dos piezas: un editor de texto y un navegador. El editor recomendado es *VSCode*. El navegador es esencial porque ahí verás cómo se renderiza el HTML y porque incluye el inspector de elementos.\\n\\n- Instala *VSCode* y ábrelo. Sigue el instalador según tu sistema operativo.\\n- Usa un navegador moderno con inspector de elementos. Te permitirá ver el HTML real y **debuggear** con feedback en tiempo real.\\n- Crea una carpeta raíz llamada \\\"Curso HTML\\\". Allí guardarás todo el contenido, clase por clase.\\n- Dentro, crea \\\"uno_Fundamentos_HTML\\\" para el módulo y luego \\\"clase uno\\\" como subcarpeta.\\n- Evita acentos y espacios en nombres. Usa guion medio, guion bajo o *camel case*.\\n- En \\\"clase uno\\\", crea el archivo index.html.\\n\\n### ¿Para qué sirve el inspector de elementos?\\nEl inspector muestra el árbol real de etiquetas: html, head y body. Permite identificar errores, probar cambios rápidos y entender qué se está renderizando. Es clave para **debuggear** y para recibir **feedback en tiempo real** antes de llevar los cambios al editor.\\n\\n## ¿Qué incluye la estructura básica de HTML5 y por qué importa?\\nEn index.html puedes generar la base con un atajo: escribe ! y presiona tab. Esto crea el esqueleto HTML5 con etiquetas contenedoras que abren y cierran. Es importante comprender cada línea para que después te enfoques en el contenido dentro de body.\\n\\n```html\\n\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"en\\\"\u003e\\n \u003chead\u003e\\n \u003cmeta charset=\\\"UTF-8\\\" /\u003e\\n \u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\" /\u003e\\n \u003ctitle\u003edocument\u003c/title\u003e\\n \u003c/head\u003e\\n \u003cbody\u003e\\n \u003c/body\u003e\\n\u003c/html\u003e\\n```\\n\\n- Las etiquetas contenedoras se abren y se cierran con slash. El contenido va dentro del par.\\n- Todo lo visible en el navegador está dentro de body. Lo de head son instrucciones para el navegador.\\n\\n### ¿Qué hacen doctype html y el atributo lang?\\n- \u003c!DOCTYPE html\u003e le indica al navegador: esto es **HTML5**. Así usas el estándar vigente y sus etiquetas.\\n- En \u003chtml lang=\\\"en\\\"\u003e defines el idioma del contenido. El navegador puede ofrecer traducción automática si tu idioma local difiere, por ejemplo con *Google Translator* mediante un pequeño *prompt*.\\n\\n### ¿Qué hace meta charset y meta viewport?\\n- \u003cmeta charset=\\\"UTF-8\\\"\u003e habilita **carac"])</script><script>self.__next_f.push([1,"teres especiales y emojis**. Sin esto, acentos y símbolos pueden verse como códigos extraños.\\n- \u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"\u003e mejora la visualización en **dispositivos móviles**. Usa el **ancho real del dispositivo** y evita un **zoom inicial** que distorsione el diseño.\\n\\n### ¿Dónde va el contenido visible: body?\\nTodo lo que agregues dentro de body se renderiza. El head aloja reglas y metadatos: estilos, configuración del documento y el \u003ctitle\u003e, que define el texto de la pestaña del navegador.\\n\\n## ¿Cómo crear y visualizar tu primer HTML: h1 y párrafo?\\nAbre index.html con *Open with Live Server* desde el clic derecho en el explorador de archivos. Verás en la URL que se sirve desde local, con la ruta de tus carpetas y el index.html. En el inspector podrás verificar doctype, html, head y body.\\n\\nAgrega contenido dentro de body:\\n\\n```html\\n\u003cbody\u003e\\n \u003ch1\u003eHola mundo\u003c/h1\u003e\\n \u003cp\u003eEs mi primer sitio web.\u003c/p\u003e\\n\u003c/body\u003e\\n```\\n\\nBuenas prácticas y recordatorios.\\n\\n- Guarda y revisa en el navegador para ver cómo se renderiza el cambio.\\n- Verifica en el inspector que h1 y p aparezcan dentro de body.\\n- Cambia el \u003ctitle\u003e para ajustar el texto de la pestaña.\\n- Usa el atajo ! + tab para generar la estructura base rápidamente.\\n- Nombres de archivos y carpetas sin acentos ni espacios. Usa guion medio, guion bajo o *camel case*.\\n- Recuerda que las etiquetas contenedoras se cierran con slash.\\n- Mantén meta charset=\\\"UTF-8\\\" y meta viewport para compatibilidad y móviles.\\n- Usa el inspector para **debuggear** errores y aplicar correcciones informadas.\\n\\n¿Tienes dudas o quieres compartir cómo nombraste tus carpetas y qué viste en el inspector? Deja un comentario y seguimos construyendo juntos.\",\"hasAccess\":false,\"isHidden\":false,\"courseType\":\"\"}}]}],[\"$\",\"div\",null,{\"className\":\"page_Classes__main__Q0XEp\",\"children\":[[[\"$\",\"$L21\",null,{}],[\"$\",\"$L22\",null,{\"courseId\":12341,\"freeAccess\":false,\"id\":84728,\"courseTitle\":\"Curso de HTML\",\"courseDescription\":\"Domina la estructura esencial de las páginas web con HTML. Aprende a escribir código limpio, jerarquizado y funcional. Comprende el rol de HTML en la web moderna y cómo su estructura impacta la accesibilidad, el SEO y la mantenibilidad del sitio.\",\"courseCategory\":\"Desarrollo e Ingeniería\",\"courseOpenGraphImage\":\"https://static.platzi.com/media/courses/Piezas-Curso-HTML_OG.jpg\",\"courseBadge\":\"https://static.platzi.com/media/achievements/piezas-curso-html-badge-80b94b6a-d39d-44d8-9218-f14ca1e4764e.png\",\"courseUrl\":\"/cursos/html/\",\"teacherName\":\"Diego De Granda\",\"teacherUrl\":\"/profesores/degranda/\",\"teacherAvatar\":\"https://static.platzi.com/media/avatars/avatars/degranda_d2a604a7-53bb-44b7-a517-002c63043563.jpg\",\"type\":\"video\",\"commentsNumber\":0,\"discussionsNumber\":0,\"name\":\"Configuración de VSCode y estructura HTML5 básica\",\"duration\":828,\"content\":\"\u003cp\u003eCrear tu primer sitio en HTML5 es más simple de lo que parece. Aquí verás cómo configurar \u003cem\u003eVSCode\u003c/em\u003e, usar el navegador con el inspector de elementos, generar la estructura base con un atajo y renderizar tu primer Hola mundo con buenas prácticas. Todo paso a paso y con conceptos clave explicados de forma clara.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo preparar las herramientas para HTML con VSCode y navegador?\u003c/h2\u003e\\n\u003cp\u003ePara escribir y visualizar código necesitas dos piezas: un editor de texto y un navegador. El editor recomendado es \u003cem\u003eVSCode\u003c/em\u003e. El navegador es esencial porque ahí verás cómo se renderiza el HTML y porque incluye el inspector de elementos.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eInstala \u003cem\u003eVSCode\u003c/em\u003e y ábrelo. Sigue el instalador según tu sistema operativo.\u003c/li\u003e\\n\u003cli\u003eUsa un navegador moderno con inspector de elementos. Te permitirá ver el HTML real y \u003cstrong\u003edebuggear\u003c/strong\u003e con feedback en tiempo real.\u003c/li\u003e\\n\u003cli\u003eCrea una carpeta raíz llamada \\\"Curso HTML\\\". Allí guardarás todo el contenido, clase por clase.\u003c/li\u003e\\n\u003cli\u003eDentro, crea \\\"uno_Fundamentos_HTML\\\" para el módulo y luego \\\"clase uno\\\" como subcarpeta.\u003c/li\u003e\\n\u003cli\u003eEvita acentos y espacios en nombres. Usa guion "])</script><script>self.__next_f.push([1,"medio, guion bajo o \u003cem\u003ecamel case\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003eEn \\\"clase uno\\\", crea el archivo index.html.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Para qué sirve el inspector de elementos?\u003c/h3\u003e\\n\u003cp\u003eEl inspector muestra el árbol real de etiquetas: html, head y body. Permite identificar errores, probar cambios rápidos y entender qué se está renderizando. Es clave para \u003cstrong\u003edebuggear\u003c/strong\u003e y para recibir \u003cstrong\u003efeedback en tiempo real\u003c/strong\u003e antes de llevar los cambios al editor.\u003c/p\u003e\\n\u003ch2\u003e¿Qué incluye la estructura básica de HTML5 y por qué importa?\u003c/h2\u003e\\n\u003cp\u003eEn index.html puedes generar la base con un atajo: escribe ! y presiona tab. Esto crea el esqueleto HTML5 con etiquetas contenedoras que abren y cierran. Es importante comprender cada línea para que después te enfoques en el contenido dentro de body.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"cp\\\"\u003e\u0026lt;!DOCTYPE html\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehtml\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003elang\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;en\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003echarset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;UTF-8\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;viewport\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;width=device-width, initial-scale=1.0\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003edocument\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehtml\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eLas etiquetas contenedoras se abren y se cierran con slash. El contenido va dentro del par.\u003c/li\u003e\\n\u003cli\u003eTodo lo visible en el navegador está dentro de body. Lo de head son instrucciones para el navegador.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué hacen doctype html y el atributo lang?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u0026lt;!DOCTYPE html\u0026gt; le indica al navegador: esto es \u003cstrong\u003eHTML5\u003c/strong\u003e. Así usas el estándar vigente y sus etiquetas.\u003c/li\u003e\\n\u003cli\u003eEn \u003chtml lang=\\\"en\\\"\u003e defines el idioma del contenido. El navegador puede ofrecer traducción automática si tu idioma local difiere, por ejemplo con \u003cem\u003eGoogle Translator\u003c/em\u003e mediante un pequeño \u003cem\u003eprompt\u003c/em\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué hace meta charset y meta viewport?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cmeta charset=\\\"UTF-8\\\"\u003e habilita \u003cstrong\u003ecaracteres especiales y emojis\u003c/strong\u003e. Sin esto, acentos y símbolos pueden verse como códigos extraños.\u003c/li\u003e\\n\u003cli\u003e\u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"\u003e mejora la visualización en \u003cstrong\u003edispositivos móviles\u003c/strong\u003e. Usa el \u003cstrong\u003eancho real del dispositivo\u003c/strong\u003e y evita un \u003cstrong\u003ezoom inicial\u003c/strong\u003e que distorsione el diseño.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Dónde va el contenido visible: body?\u003c/h3\u003e\\n\u003cp\u003eTodo lo que agregues dentro de body se renderiza. El head aloja reglas y metadatos: estilos, configuración del documento y el \u003ctitle\u003e, que define el texto de la pestaña del navegador.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo crear y visualizar tu primer HTML: h1 y párrafo?\u003c/h2\u003e\\n\u003cp\u003eAbre index.html con \u003cem\u003eOpen with Live Server\u003c/em\u003e desde el clic derecho en el explorador de archivos. Verás en la URL que se sirve desde local, con la ruta de tus carpetas y el index.html. En el inspector podrás verificar doctype, html, head y body.\u003c/p\u003e\\n\u003cp\u003eAgrega contenido dentro de body:\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003c"])</script><script>self.__next_f.push([1,"pre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh1\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eHola mundo\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh1\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eEs mi primer sitio web.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eBuenas prácticas y recordatorios.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eGuarda y revisa en el navegador para ver cómo se renderiza el cambio.\u003c/li\u003e\\n\u003cli\u003eVerifica en el inspector que h1 y p aparezcan dentro de body.\u003c/li\u003e\\n\u003cli\u003eCambia el \u003ctitle\u003e para ajustar el texto de la pestaña.\u003c/li\u003e\\n\u003cli\u003eUsa el atajo ! + tab para generar la estructura base rápidamente.\u003c/li\u003e\\n\u003cli\u003eNombres de archivos y carpetas sin acentos ni espacios. Usa guion medio, guion bajo o \u003cem\u003ecamel case\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003eRecuerda que las etiquetas contenedoras se cierran con slash.\u003c/li\u003e\\n\u003cli\u003eMantén meta charset=\\\"UTF-8\\\" y meta viewport para compatibilidad y móviles.\u003c/li\u003e\\n\u003cli\u003eUsa el inspector para \u003cstrong\u003edebuggear\u003c/strong\u003e errores y aplicar correcciones informadas.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003e¿Tienes dudas o quieres compartir cómo nombraste tus carpetas y qué viste en el inspector? Deja un comentario y seguimos construyendo juntos.\u003c/p\u003e\",\"contentSeo\":\"Crear tu primer sitio en HTML5 es más simple de lo que parece. Aquí verás cómo configurar VSCode, usar el navegador con el inspector de elementos, generar la estructura base con un atajo y renderizar tu primer Hola mundo con buenas prácticas. Todo paso a paso y con conceptos clave explicados de forma clara.¿Cómo preparar las herramientas para HTML con VSCode y navegador?Para escribir y visualizar código necesitas dos piezas: un editor de texto y un navegador. El editor recomendado es VSCode. El navegador es esencial porque ahí verás cómo se renderiza el HTML y porque incluye el inspector de elementos.Instala VSCode y ábrelo. Sigue el instalador según tu sistema operativo.Usa un navegador moderno con inspector de elementos. Te permitirá ver el HTML real y debuggear con feedback en tiempo real.Crea una carpeta raíz llamada 'Curso HTML'. Allí guardarás todo el contenido, clase por clase.Dentro, crea 'uno_Fundamentos_HTML' para el módulo y luego 'clase uno' como subcarpeta.Evita acentos y espacios en nombres. Usa guion medio, guion bajo o camel case.En 'clase uno', crea el archivo index.html.¿Para qué sirve el inspector de elementos?El inspector muestra el árbol real de etiquetas: html, head y body. Permite identificar errores, probar cambios rápidos y entender qué se está renderizando. Es clave para debuggear y para recibir feedback en tiempo real antes de llevar los cambios al editor.¿Qué incluye la estructura básica de HTML5 y por qué importa?En index.html puedes generar la base con un atajo: escribe ! y presiona tab. Esto crea el esqueleto HTML5 con etiquetas contenedoras que abren y cierran. Es importante comprender cada línea para que después te enfoques en el contenido dentro de body.document Las etiquetas contenedoras se abren y se cierran con slash. El contenido va dentro del par.Todo lo visible en el navegador está dentro de body. Lo de head son instrucciones para el navegador.¿Qué hacen doctype html y el atributo lang? le indica al navegador: esto es HTML5. Así usas el estándar vigente y sus etiquetas.En defines el idioma del contenido. El navegador puede ofrecer traducción automática si tu idioma local difiere, por ejemplo con Google Translator mediante un pequeño prompt.¿Qué hace meta charset y meta viewport? habilita caracteres especiales y emojis. Sin esto, acentos y símbolos pueden verse como códigos extraños. mejora la visualización en dispositivos móviles. Usa el ancho real del dispositivo y evita un zoom inicial que distorsione el diseño.¿Dónde va el contenido visible: bo"])</script><script>self.__next_f.push([1,"dy?Todo lo que agregues dentro de body se renderiza. El head aloja reglas y metadatos: estilos, configuración del documento y el , que define el texto de la pestaña del navegador.¿Cómo crear y visualizar tu primer HTML: h1 y párrafo?Abre index.html con Open with Live Server desde el clic derecho en el explorador de archivos. Verás en la URL que se sirve desde local, con la ruta de tus carpetas y el index.html. En el inspector podrás verificar doctype, html, head y body.Agrega contenido dentro de body: Hola mundoEs mi primer sitio web.Buenas prácticas y recordatorios.Guarda y revisa en el navegador para ver cómo se renderiza el cambio.Verifica en el inspector que h1 y p aparezcan dentro de body.Cambia el para ajustar el texto de la pestaña.Usa el atajo ! + tab para generar la estructura base rápidamente.Nombres de archivos y carpetas sin acentos ni espacios. Usa guion medio, guion bajo o camel case.Recuerda que las etiquetas contenedoras se cierran con slash.Mantén meta charset='UTF-8' y meta viewport para compatibilidad y móviles.Usa el inspector para debuggear errores y aplicar correcciones informadas.¿Tienes dudas o quieres compartir cómo nombraste tus carpetas y qué viste en el inspector? Deja un comentario y seguimos construyendo juntos.\",\"materialParams\":{\"totalMaterial\":17,\"actualMaterial\":3,\"nextMaterialUrl\":\"/cursos/html/etiquetas-de-texto-y-jerarquia-en-html/\",\"nextMaterialName\":\"Etiquetas de texto y jerarquía en HTML\",\"previousMaterialUrl\":\"/cursos/html/como-funciona-la-web-desde-url-hasta-pag/\",\"previousMaterialName\":\"Cómo funciona la web desde URL hasta página renderizada\",\"isFirst\":false,\"isLast\":false,\"nextIsQuiz\":false,\"prevIsQuiz\":false,\"isNextMaterialPaid\":true},\"video\":{\"iframes\":[],\"servers\":{\"serverC\":{\"id\":\"serverC\",\"hls\":\"https://api.platzi.com/mdstrm/v1/video/68dc1cdae738b5b94215cc55.m3u8\"},\"serverM\":{\"id\":\"serverM\",\"hls\":\"https://api.platzi.com/mdstrm/v1/video/68dc1cdae738b5b94215cc55.m3u8?fallback=origin\"}},\"player\":{\"currentTime\":0,\"autoplay\":true,\"defaultServer\":\"serverC\"},\"movin\":{\"subtitles\":[],\"admin-url\":null}},\"seoTitle\":\"Fundamentos y estructura básica de HTML - Platzi\",\"seoDescription\":null,\"urlCanonical\":\"https://platzi.com/cursos/html/configuracion-de-vscode-y-estructura-htm/\",\"indexedClass\":true,\"thumbnail\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1cdae738b5b94215cc55_68dc1cdae738b5b94215cc69_83s.jpg\",\"datePublished\":\"2025-09-30T19:00:00+00:00\",\"dateModified\":\"2025-09-30T19:58:02.889052+00:00\",\"isoDuration\":\"P0DT00H13M48S\",\"iframeSrc\":null,\"markdownContent\":\"Crear tu primer sitio en HTML5 es más simple de lo que parece. Aquí verás cómo configurar *VSCode*, usar el navegador con el inspector de elementos, generar la estructura base con un atajo y renderizar tu primer Hola mundo con buenas prácticas. Todo paso a paso y con conceptos clave explicados de forma clara.\\n\\n## ¿Cómo preparar las herramientas para HTML con VSCode y navegador?\\nPara escribir y visualizar código necesitas dos piezas: un editor de texto y un navegador. El editor recomendado es *VSCode*. El navegador es esencial porque ahí verás cómo se renderiza el HTML y porque incluye el inspector de elementos.\\n\\n- Instala *VSCode* y ábrelo. Sigue el instalador según tu sistema operativo.\\n- Usa un navegador moderno con inspector de elementos. Te permitirá ver el HTML real y **debuggear** con feedback en tiempo real.\\n- Crea una carpeta raíz llamada \\\"Curso HTML\\\". Allí guardarás todo el contenido, clase por clase.\\n- Dentro, crea \\\"uno_Fundamentos_HTML\\\" para el módulo y luego \\\"clase uno\\\" como subcarpeta.\\n- Evita acentos y espacios en nombres. Usa guion medio, guion bajo o *camel case*.\\n- En \\\"clase uno\\\", crea el archivo index.html.\\n\\n### ¿Para qué sirve el inspector de elementos?\\nEl inspector muestra el árbol real de etiquetas: html, head y body. Permite identificar errores, probar cambios rápidos y entender qué se está renderizando. Es clave para **debuggear** y para recibir **feedback en tiempo real** antes de llevar los cambios al editor."])</script><script>self.__next_f.push([1,"\\n\\n## ¿Qué incluye la estructura básica de HTML5 y por qué importa?\\nEn index.html puedes generar la base con un atajo: escribe ! y presiona tab. Esto crea el esqueleto HTML5 con etiquetas contenedoras que abren y cierran. Es importante comprender cada línea para que después te enfoques en el contenido dentro de body.\\n\\n```html\\n\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"en\\\"\u003e\\n \u003chead\u003e\\n \u003cmeta charset=\\\"UTF-8\\\" /\u003e\\n \u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\" /\u003e\\n \u003ctitle\u003edocument\u003c/title\u003e\\n \u003c/head\u003e\\n \u003cbody\u003e\\n \u003c/body\u003e\\n\u003c/html\u003e\\n```\\n\\n- Las etiquetas contenedoras se abren y se cierran con slash. El contenido va dentro del par.\\n- Todo lo visible en el navegador está dentro de body. Lo de head son instrucciones para el navegador.\\n\\n### ¿Qué hacen doctype html y el atributo lang?\\n- \u003c!DOCTYPE html\u003e le indica al navegador: esto es **HTML5**. Así usas el estándar vigente y sus etiquetas.\\n- En \u003chtml lang=\\\"en\\\"\u003e defines el idioma del contenido. El navegador puede ofrecer traducción automática si tu idioma local difiere, por ejemplo con *Google Translator* mediante un pequeño *prompt*.\\n\\n### ¿Qué hace meta charset y meta viewport?\\n- \u003cmeta charset=\\\"UTF-8\\\"\u003e habilita **caracteres especiales y emojis**. Sin esto, acentos y símbolos pueden verse como códigos extraños.\\n- \u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"\u003e mejora la visualización en **dispositivos móviles**. Usa el **ancho real del dispositivo** y evita un **zoom inicial** que distorsione el diseño.\\n\\n### ¿Dónde va el contenido visible: body?\\nTodo lo que agregues dentro de body se renderiza. El head aloja reglas y metadatos: estilos, configuración del documento y el \u003ctitle\u003e, que define el texto de la pestaña del navegador.\\n\\n## ¿Cómo crear y visualizar tu primer HTML: h1 y párrafo?\\nAbre index.html con *Open with Live Server* desde el clic derecho en el explorador de archivos. Verás en la URL que se sirve desde local, con la ruta de tus carpetas y el index.html. En el inspector podrás verificar doctype, html, head y body.\\n\\nAgrega contenido dentro de body:\\n\\n```html\\n\u003cbody\u003e\\n \u003ch1\u003eHola mundo\u003c/h1\u003e\\n \u003cp\u003eEs mi primer sitio web.\u003c/p\u003e\\n\u003c/body\u003e\\n```\\n\\nBuenas prácticas y recordatorios.\\n\\n- Guarda y revisa en el navegador para ver cómo se renderiza el cambio.\\n- Verifica en el inspector que h1 y p aparezcan dentro de body.\\n- Cambia el \u003ctitle\u003e para ajustar el texto de la pestaña.\\n- Usa el atajo ! + tab para generar la estructura base rápidamente.\\n- Nombres de archivos y carpetas sin acentos ni espacios. Usa guion medio, guion bajo o *camel case*.\\n- Recuerda que las etiquetas contenedoras se cierran con slash.\\n- Mantén meta charset=\\\"UTF-8\\\" y meta viewport para compatibilidad y móviles.\\n- Usa el inspector para **debuggear** errores y aplicar correcciones informadas.\\n\\n¿Tienes dudas o quieres compartir cómo nombraste tus carpetas y qué viste en el inspector? Deja un comentario y seguimos construyendo juntos.\",\"hasAccess\":false,\"isHidden\":false,\"courseType\":\"\"}]],[\"$\",\"$L23\",null,{\"shouldShowAiQuestion\":true,\"materialId\":\"84728\",\"courseId\":\"12341\",\"courseSlug\":\"html\",\"materialSlug\":\"configuracion-de-vscode-y-estructura-htm\",\"materialInfo\":{\"freeAccess\":false,\"id\":84728,\"courseTitle\":\"Curso de HTML\",\"courseDescription\":\"Domina la estructura esencial de las páginas web con HTML. Aprende a escribir código limpio, jerarquizado y funcional. Comprende el rol de HTML en la web moderna y cómo su estructura impacta la accesibilidad, el SEO y la mantenibilidad del sitio.\",\"courseCategory\":\"Desarrollo e Ingeniería\",\"courseOpenGraphImage\":\"https://static.platzi.com/media/courses/Piezas-Curso-HTML_OG.jpg\",\"courseBadge\":\"https://static.platzi.com/media/achievements/piezas-curso-html-badge-80b94b6a-d39d-44d8-9218-f14ca1e4764e.png\",\"courseUrl\":\"/cursos/html/\",\"teacherName\":\"Diego De Granda\",\"teacherUrl\":\"/profesores/degranda/\",\"teacherAvatar\":\"https://static.platzi.com/media/avatars/avatars/degranda_d2a604a7-53bb-44b7-a517-002c63043563.jpg\",\"type\":\"video\",\"commentsNumber\":0,\"di"])</script><script>self.__next_f.push([1,"scussionsNumber\":0,\"name\":\"Configuración de VSCode y estructura HTML5 básica\",\"duration\":828,\"content\":\"\u003cp\u003eCrear tu primer sitio en HTML5 es más simple de lo que parece. Aquí verás cómo configurar \u003cem\u003eVSCode\u003c/em\u003e, usar el navegador con el inspector de elementos, generar la estructura base con un atajo y renderizar tu primer Hola mundo con buenas prácticas. Todo paso a paso y con conceptos clave explicados de forma clara.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo preparar las herramientas para HTML con VSCode y navegador?\u003c/h2\u003e\\n\u003cp\u003ePara escribir y visualizar código necesitas dos piezas: un editor de texto y un navegador. El editor recomendado es \u003cem\u003eVSCode\u003c/em\u003e. El navegador es esencial porque ahí verás cómo se renderiza el HTML y porque incluye el inspector de elementos.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eInstala \u003cem\u003eVSCode\u003c/em\u003e y ábrelo. Sigue el instalador según tu sistema operativo.\u003c/li\u003e\\n\u003cli\u003eUsa un navegador moderno con inspector de elementos. Te permitirá ver el HTML real y \u003cstrong\u003edebuggear\u003c/strong\u003e con feedback en tiempo real.\u003c/li\u003e\\n\u003cli\u003eCrea una carpeta raíz llamada \\\"Curso HTML\\\". Allí guardarás todo el contenido, clase por clase.\u003c/li\u003e\\n\u003cli\u003eDentro, crea \\\"uno_Fundamentos_HTML\\\" para el módulo y luego \\\"clase uno\\\" como subcarpeta.\u003c/li\u003e\\n\u003cli\u003eEvita acentos y espacios en nombres. Usa guion medio, guion bajo o \u003cem\u003ecamel case\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003eEn \\\"clase uno\\\", crea el archivo index.html.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Para qué sirve el inspector de elementos?\u003c/h3\u003e\\n\u003cp\u003eEl inspector muestra el árbol real de etiquetas: html, head y body. Permite identificar errores, probar cambios rápidos y entender qué se está renderizando. Es clave para \u003cstrong\u003edebuggear\u003c/strong\u003e y para recibir \u003cstrong\u003efeedback en tiempo real\u003c/strong\u003e antes de llevar los cambios al editor.\u003c/p\u003e\\n\u003ch2\u003e¿Qué incluye la estructura básica de HTML5 y por qué importa?\u003c/h2\u003e\\n\u003cp\u003eEn index.html puedes generar la base con un atajo: escribe ! y presiona tab. Esto crea el esqueleto HTML5 con etiquetas contenedoras que abren y cierran. Es importante comprender cada línea para que después te enfoques en el contenido dentro de body.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"cp\\\"\u003e\u0026lt;!DOCTYPE html\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehtml\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003elang\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;en\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003echarset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;UTF-8\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;viewport\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;width=device-width, initial-scale=1.0\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003edocument\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehtml\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eLas etiquetas contenedoras se abren y se cierran con slash. El contenido va dentro del par.\u003c/li\u003e\\n\u003cli\u003eTodo lo visible en el navegador está dentro de body. Lo de head son instrucciones para el navegador.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué hacen doctype html y el atributo lang?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u0026lt;!DOCTYPE html\u0026gt; le indica al navegador: esto es \u003cstrong\u003eHTML5\u003c/strong\u003e. Así usas el estándar vigente y sus etiquetas.\u003c/li\u003e\\n\u003cli\u003eEn \u003chtml lang=\\\"en\\\"\u003e defines el idioma del contenido. El navegador puede ofrece"])</script><script>self.__next_f.push([1,"r traducción automática si tu idioma local difiere, por ejemplo con \u003cem\u003eGoogle Translator\u003c/em\u003e mediante un pequeño \u003cem\u003eprompt\u003c/em\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué hace meta charset y meta viewport?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cmeta charset=\\\"UTF-8\\\"\u003e habilita \u003cstrong\u003ecaracteres especiales y emojis\u003c/strong\u003e. Sin esto, acentos y símbolos pueden verse como códigos extraños.\u003c/li\u003e\\n\u003cli\u003e\u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"\u003e mejora la visualización en \u003cstrong\u003edispositivos móviles\u003c/strong\u003e. Usa el \u003cstrong\u003eancho real del dispositivo\u003c/strong\u003e y evita un \u003cstrong\u003ezoom inicial\u003c/strong\u003e que distorsione el diseño.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Dónde va el contenido visible: body?\u003c/h3\u003e\\n\u003cp\u003eTodo lo que agregues dentro de body se renderiza. El head aloja reglas y metadatos: estilos, configuración del documento y el \u003ctitle\u003e, que define el texto de la pestaña del navegador.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo crear y visualizar tu primer HTML: h1 y párrafo?\u003c/h2\u003e\\n\u003cp\u003eAbre index.html con \u003cem\u003eOpen with Live Server\u003c/em\u003e desde el clic derecho en el explorador de archivos. Verás en la URL que se sirve desde local, con la ruta de tus carpetas y el index.html. En el inspector podrás verificar doctype, html, head y body.\u003c/p\u003e\\n\u003cp\u003eAgrega contenido dentro de body:\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh1\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eHola mundo\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh1\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eEs mi primer sitio web.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eBuenas prácticas y recordatorios.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eGuarda y revisa en el navegador para ver cómo se renderiza el cambio.\u003c/li\u003e\\n\u003cli\u003eVerifica en el inspector que h1 y p aparezcan dentro de body.\u003c/li\u003e\\n\u003cli\u003eCambia el \u003ctitle\u003e para ajustar el texto de la pestaña.\u003c/li\u003e\\n\u003cli\u003eUsa el atajo ! + tab para generar la estructura base rápidamente.\u003c/li\u003e\\n\u003cli\u003eNombres de archivos y carpetas sin acentos ni espacios. Usa guion medio, guion bajo o \u003cem\u003ecamel case\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003eRecuerda que las etiquetas contenedoras se cierran con slash.\u003c/li\u003e\\n\u003cli\u003eMantén meta charset=\\\"UTF-8\\\" y meta viewport para compatibilidad y móviles.\u003c/li\u003e\\n\u003cli\u003eUsa el inspector para \u003cstrong\u003edebuggear\u003c/strong\u003e errores y aplicar correcciones informadas.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003e¿Tienes dudas o quieres compartir cómo nombraste tus carpetas y qué viste en el inspector? Deja un comentario y seguimos construyendo juntos.\u003c/p\u003e\",\"contentSeo\":\"Crear tu primer sitio en HTML5 es más simple de lo que parece. Aquí verás cómo configurar VSCode, usar el navegador con el inspector de elementos, generar la estructura base con un atajo y renderizar tu primer Hola mundo con buenas prácticas. Todo paso a paso y con conceptos clave explicados de forma clara.¿Cómo preparar las herramientas para HTML con VSCode y navegador?Para escribir y visualizar código necesitas dos piezas: un editor de texto y un navegador. El editor recomendado es VSCode. El navegador es esencial porque ahí verás cómo se renderiza el HTML y porque incluye el inspector de elementos.Instala VSCode y ábrelo. Sigue el instalador según tu sistema operativo.Usa un navegador moderno con inspector de elementos. Te permitirá ver el HTML real y debuggear con feedback en tiempo real.Crea una carpeta raíz llamada 'Curso HTML'. Allí guardarás todo el contenido, clase por clase.Dentro, crea 'uno_Fundamentos_HTML' para el módulo y luego 'clase uno' como subcarpeta.Evita acentos y espacios en nombres. Usa guion medio, guion bajo o camel case.En 'clase uno', crea el archivo index.html.¿Para qué sirve el inspector de elementos?El inspector muestra el árbol real de etiquetas: html, head y body. Permite identificar errores, probar cambios rápidos y entend"])</script><script>self.__next_f.push([1,"er qué se está renderizando. Es clave para debuggear y para recibir feedback en tiempo real antes de llevar los cambios al editor.¿Qué incluye la estructura básica de HTML5 y por qué importa?En index.html puedes generar la base con un atajo: escribe ! y presiona tab. Esto crea el esqueleto HTML5 con etiquetas contenedoras que abren y cierran. Es importante comprender cada línea para que después te enfoques en el contenido dentro de body.document Las etiquetas contenedoras se abren y se cierran con slash. El contenido va dentro del par.Todo lo visible en el navegador está dentro de body. Lo de head son instrucciones para el navegador.¿Qué hacen doctype html y el atributo lang? le indica al navegador: esto es HTML5. Así usas el estándar vigente y sus etiquetas.En defines el idioma del contenido. El navegador puede ofrecer traducción automática si tu idioma local difiere, por ejemplo con Google Translator mediante un pequeño prompt.¿Qué hace meta charset y meta viewport? habilita caracteres especiales y emojis. Sin esto, acentos y símbolos pueden verse como códigos extraños. mejora la visualización en dispositivos móviles. Usa el ancho real del dispositivo y evita un zoom inicial que distorsione el diseño.¿Dónde va el contenido visible: body?Todo lo que agregues dentro de body se renderiza. El head aloja reglas y metadatos: estilos, configuración del documento y el , que define el texto de la pestaña del navegador.¿Cómo crear y visualizar tu primer HTML: h1 y párrafo?Abre index.html con Open with Live Server desde el clic derecho en el explorador de archivos. Verás en la URL que se sirve desde local, con la ruta de tus carpetas y el index.html. En el inspector podrás verificar doctype, html, head y body.Agrega contenido dentro de body: Hola mundoEs mi primer sitio web.Buenas prácticas y recordatorios.Guarda y revisa en el navegador para ver cómo se renderiza el cambio.Verifica en el inspector que h1 y p aparezcan dentro de body.Cambia el para ajustar el texto de la pestaña.Usa el atajo ! + tab para generar la estructura base rápidamente.Nombres de archivos y carpetas sin acentos ni espacios. Usa guion medio, guion bajo o camel case.Recuerda que las etiquetas contenedoras se cierran con slash.Mantén meta charset='UTF-8' y meta viewport para compatibilidad y móviles.Usa el inspector para debuggear errores y aplicar correcciones informadas.¿Tienes dudas o quieres compartir cómo nombraste tus carpetas y qué viste en el inspector? Deja un comentario y seguimos construyendo juntos.\",\"materialParams\":{\"totalMaterial\":17,\"actualMaterial\":3,\"nextMaterialUrl\":\"/cursos/html/etiquetas-de-texto-y-jerarquia-en-html/\",\"nextMaterialName\":\"Etiquetas de texto y jerarquía en HTML\",\"previousMaterialUrl\":\"/cursos/html/como-funciona-la-web-desde-url-hasta-pag/\",\"previousMaterialName\":\"Cómo funciona la web desde URL hasta página renderizada\",\"isFirst\":false,\"isLast\":false,\"nextIsQuiz\":false,\"prevIsQuiz\":false,\"isNextMaterialPaid\":true},\"video\":{\"iframes\":[],\"servers\":{\"serverC\":{\"id\":\"serverC\",\"hls\":\"https://api.platzi.com/mdstrm/v1/video/68dc1cdae738b5b94215cc55.m3u8\"},\"serverM\":{\"id\":\"serverM\",\"hls\":\"https://api.platzi.com/mdstrm/v1/video/68dc1cdae738b5b94215cc55.m3u8?fallback=origin\"}},\"player\":{\"currentTime\":0,\"autoplay\":true,\"defaultServer\":\"serverC\"},\"movin\":{\"subtitles\":[],\"admin-url\":null}},\"seoTitle\":\"Fundamentos y estructura básica de HTML - Platzi\",\"seoDescription\":null,\"urlCanonical\":\"https://platzi.com/cursos/html/configuracion-de-vscode-y-estructura-htm/\",\"indexedClass\":true,\"thumbnail\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1cdae738b5b94215cc55_68dc1cdae738b5b94215cc69_83s.jpg\",\"datePublished\":\"2025-09-30T19:00:00+00:00\",\"dateModified\":\"2025-09-30T19:58:02.889052+00:00\",\"isoDuration\":\"P0DT00H13M48S\",\"iframeSrc\":null,\"markdownContent\":\"Crear tu primer sitio en HTML5 es más simple de lo que parece. Aquí verás cómo configurar *VSCode*, usar el navegador con el inspector de elementos, generar la estructura base con un atajo y renderizar tu prime"])</script><script>self.__next_f.push([1,"r Hola mundo con buenas prácticas. Todo paso a paso y con conceptos clave explicados de forma clara.\\n\\n## ¿Cómo preparar las herramientas para HTML con VSCode y navegador?\\nPara escribir y visualizar código necesitas dos piezas: un editor de texto y un navegador. El editor recomendado es *VSCode*. El navegador es esencial porque ahí verás cómo se renderiza el HTML y porque incluye el inspector de elementos.\\n\\n- Instala *VSCode* y ábrelo. Sigue el instalador según tu sistema operativo.\\n- Usa un navegador moderno con inspector de elementos. Te permitirá ver el HTML real y **debuggear** con feedback en tiempo real.\\n- Crea una carpeta raíz llamada \\\"Curso HTML\\\". Allí guardarás todo el contenido, clase por clase.\\n- Dentro, crea \\\"uno_Fundamentos_HTML\\\" para el módulo y luego \\\"clase uno\\\" como subcarpeta.\\n- Evita acentos y espacios en nombres. Usa guion medio, guion bajo o *camel case*.\\n- En \\\"clase uno\\\", crea el archivo index.html.\\n\\n### ¿Para qué sirve el inspector de elementos?\\nEl inspector muestra el árbol real de etiquetas: html, head y body. Permite identificar errores, probar cambios rápidos y entender qué se está renderizando. Es clave para **debuggear** y para recibir **feedback en tiempo real** antes de llevar los cambios al editor.\\n\\n## ¿Qué incluye la estructura básica de HTML5 y por qué importa?\\nEn index.html puedes generar la base con un atajo: escribe ! y presiona tab. Esto crea el esqueleto HTML5 con etiquetas contenedoras que abren y cierran. Es importante comprender cada línea para que después te enfoques en el contenido dentro de body.\\n\\n```html\\n\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"en\\\"\u003e\\n \u003chead\u003e\\n \u003cmeta charset=\\\"UTF-8\\\" /\u003e\\n \u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\" /\u003e\\n \u003ctitle\u003edocument\u003c/title\u003e\\n \u003c/head\u003e\\n \u003cbody\u003e\\n \u003c/body\u003e\\n\u003c/html\u003e\\n```\\n\\n- Las etiquetas contenedoras se abren y se cierran con slash. El contenido va dentro del par.\\n- Todo lo visible en el navegador está dentro de body. Lo de head son instrucciones para el navegador.\\n\\n### ¿Qué hacen doctype html y el atributo lang?\\n- \u003c!DOCTYPE html\u003e le indica al navegador: esto es **HTML5**. Así usas el estándar vigente y sus etiquetas.\\n- En \u003chtml lang=\\\"en\\\"\u003e defines el idioma del contenido. El navegador puede ofrecer traducción automática si tu idioma local difiere, por ejemplo con *Google Translator* mediante un pequeño *prompt*.\\n\\n### ¿Qué hace meta charset y meta viewport?\\n- \u003cmeta charset=\\\"UTF-8\\\"\u003e habilita **caracteres especiales y emojis**. Sin esto, acentos y símbolos pueden verse como códigos extraños.\\n- \u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"\u003e mejora la visualización en **dispositivos móviles**. Usa el **ancho real del dispositivo** y evita un **zoom inicial** que distorsione el diseño.\\n\\n### ¿Dónde va el contenido visible: body?\\nTodo lo que agregues dentro de body se renderiza. El head aloja reglas y metadatos: estilos, configuración del documento y el \u003ctitle\u003e, que define el texto de la pestaña del navegador.\\n\\n## ¿Cómo crear y visualizar tu primer HTML: h1 y párrafo?\\nAbre index.html con *Open with Live Server* desde el clic derecho en el explorador de archivos. Verás en la URL que se sirve desde local, con la ruta de tus carpetas y el index.html. En el inspector podrás verificar doctype, html, head y body.\\n\\nAgrega contenido dentro de body:\\n\\n```html\\n\u003cbody\u003e\\n \u003ch1\u003eHola mundo\u003c/h1\u003e\\n \u003cp\u003eEs mi primer sitio web.\u003c/p\u003e\\n\u003c/body\u003e\\n```\\n\\nBuenas prácticas y recordatorios.\\n\\n- Guarda y revisa en el navegador para ver cómo se renderiza el cambio.\\n- Verifica en el inspector que h1 y p aparezcan dentro de body.\\n- Cambia el \u003ctitle\u003e para ajustar el texto de la pestaña.\\n- Usa el atajo ! + tab para generar la estructura base rápidamente.\\n- Nombres de archivos y carpetas sin acentos ni espacios. Usa guion medio, guion bajo o *camel case*.\\n- Recuerda que las etiquetas contenedoras se cierran con slash.\\n- Mantén meta charset=\\\"UTF-8\\\" y meta viewport para compatibilidad y móviles.\\n- Usa el inspector"])</script><script>self.__next_f.push([1," para **debuggear** errores y aplicar correcciones informadas.\\n\\n¿Tienes dudas o quieres compartir cómo nombraste tus carpetas y qué viste en el inspector? Deja un comentario y seguimos construyendo juntos.\",\"hasAccess\":false,\"isHidden\":false,\"courseType\":\"\"}}]]}],[\"$\",\"$L24\",null,{\"shouldShowAiQuestion\":true,\"materialId\":\"84728\",\"courseId\":\"12341\"}],[\"$\",\"$L25\",null,{\"courseSlug\":\"html\",\"materialId\":\"84728\",\"materialSlug\":\"configuracion-de-vscode-y-estructura-htm\",\"materialInfo\":{\"freeAccess\":false,\"id\":84728,\"courseTitle\":\"Curso de HTML\",\"courseDescription\":\"Domina la estructura esencial de las páginas web con HTML. Aprende a escribir código limpio, jerarquizado y funcional. Comprende el rol de HTML en la web moderna y cómo su estructura impacta la accesibilidad, el SEO y la mantenibilidad del sitio.\",\"courseCategory\":\"Desarrollo e Ingeniería\",\"courseOpenGraphImage\":\"https://static.platzi.com/media/courses/Piezas-Curso-HTML_OG.jpg\",\"courseBadge\":\"https://static.platzi.com/media/achievements/piezas-curso-html-badge-80b94b6a-d39d-44d8-9218-f14ca1e4764e.png\",\"courseUrl\":\"/cursos/html/\",\"teacherName\":\"Diego De Granda\",\"teacherUrl\":\"/profesores/degranda/\",\"teacherAvatar\":\"https://static.platzi.com/media/avatars/avatars/degranda_d2a604a7-53bb-44b7-a517-002c63043563.jpg\",\"type\":\"video\",\"commentsNumber\":0,\"discussionsNumber\":0,\"name\":\"Configuración de VSCode y estructura HTML5 básica\",\"duration\":828,\"content\":\"\u003cp\u003eCrear tu primer sitio en HTML5 es más simple de lo que parece. Aquí verás cómo configurar \u003cem\u003eVSCode\u003c/em\u003e, usar el navegador con el inspector de elementos, generar la estructura base con un atajo y renderizar tu primer Hola mundo con buenas prácticas. Todo paso a paso y con conceptos clave explicados de forma clara.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo preparar las herramientas para HTML con VSCode y navegador?\u003c/h2\u003e\\n\u003cp\u003ePara escribir y visualizar código necesitas dos piezas: un editor de texto y un navegador. El editor recomendado es \u003cem\u003eVSCode\u003c/em\u003e. El navegador es esencial porque ahí verás cómo se renderiza el HTML y porque incluye el inspector de elementos.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eInstala \u003cem\u003eVSCode\u003c/em\u003e y ábrelo. Sigue el instalador según tu sistema operativo.\u003c/li\u003e\\n\u003cli\u003eUsa un navegador moderno con inspector de elementos. Te permitirá ver el HTML real y \u003cstrong\u003edebuggear\u003c/strong\u003e con feedback en tiempo real.\u003c/li\u003e\\n\u003cli\u003eCrea una carpeta raíz llamada \\\"Curso HTML\\\". Allí guardarás todo el contenido, clase por clase.\u003c/li\u003e\\n\u003cli\u003eDentro, crea \\\"uno_Fundamentos_HTML\\\" para el módulo y luego \\\"clase uno\\\" como subcarpeta.\u003c/li\u003e\\n\u003cli\u003eEvita acentos y espacios en nombres. Usa guion medio, guion bajo o \u003cem\u003ecamel case\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003eEn \\\"clase uno\\\", crea el archivo index.html.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Para qué sirve el inspector de elementos?\u003c/h3\u003e\\n\u003cp\u003eEl inspector muestra el árbol real de etiquetas: html, head y body. Permite identificar errores, probar cambios rápidos y entender qué se está renderizando. Es clave para \u003cstrong\u003edebuggear\u003c/strong\u003e y para recibir \u003cstrong\u003efeedback en tiempo real\u003c/strong\u003e antes de llevar los cambios al editor.\u003c/p\u003e\\n\u003ch2\u003e¿Qué incluye la estructura básica de HTML5 y por qué importa?\u003c/h2\u003e\\n\u003cp\u003eEn index.html puedes generar la base con un atajo: escribe ! y presiona tab. Esto crea el esqueleto HTML5 con etiquetas contenedoras que abren y cierran. Es importante comprender cada línea para que después te enfoques en el contenido dentro de body.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"cp\\\"\u003e\u0026lt;!DOCTYPE html\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehtml\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003elang\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;en\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003echarset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;UTF-8\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e"])</script><script>self.__next_f.push([1,"\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;viewport\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;width=device-width, initial-scale=1.0\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003edocument\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehtml\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eLas etiquetas contenedoras se abren y se cierran con slash. El contenido va dentro del par.\u003c/li\u003e\\n\u003cli\u003eTodo lo visible en el navegador está dentro de body. Lo de head son instrucciones para el navegador.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué hacen doctype html y el atributo lang?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u0026lt;!DOCTYPE html\u0026gt; le indica al navegador: esto es \u003cstrong\u003eHTML5\u003c/strong\u003e. Así usas el estándar vigente y sus etiquetas.\u003c/li\u003e\\n\u003cli\u003eEn \u003chtml lang=\\\"en\\\"\u003e defines el idioma del contenido. El navegador puede ofrecer traducción automática si tu idioma local difiere, por ejemplo con \u003cem\u003eGoogle Translator\u003c/em\u003e mediante un pequeño \u003cem\u003eprompt\u003c/em\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué hace meta charset y meta viewport?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cmeta charset=\\\"UTF-8\\\"\u003e habilita \u003cstrong\u003ecaracteres especiales y emojis\u003c/strong\u003e. Sin esto, acentos y símbolos pueden verse como códigos extraños.\u003c/li\u003e\\n\u003cli\u003e\u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"\u003e mejora la visualización en \u003cstrong\u003edispositivos móviles\u003c/strong\u003e. Usa el \u003cstrong\u003eancho real del dispositivo\u003c/strong\u003e y evita un \u003cstrong\u003ezoom inicial\u003c/strong\u003e que distorsione el diseño.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Dónde va el contenido visible: body?\u003c/h3\u003e\\n\u003cp\u003eTodo lo que agregues dentro de body se renderiza. El head aloja reglas y metadatos: estilos, configuración del documento y el \u003ctitle\u003e, que define el texto de la pestaña del navegador.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo crear y visualizar tu primer HTML: h1 y párrafo?\u003c/h2\u003e\\n\u003cp\u003eAbre index.html con \u003cem\u003eOpen with Live Server\u003c/em\u003e desde el clic derecho en el explorador de archivos. Verás en la URL que se sirve desde local, con la ruta de tus carpetas y el index.html. En el inspector podrás verificar doctype, html, head y body.\u003c/p\u003e\\n\u003cp\u003eAgrega contenido dentro de body:\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh1\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eHola mundo\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh1\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eEs mi primer sitio web.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eBuenas prácticas y recordatorios.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eGuarda y revisa en el navegador para ver cómo se renderiza el cambio.\u003c/li\u003e\\n\u003cli\u003eVerifica en el inspector que h1 y p aparezcan dentro de body.\u003c/li\u003e\\n\u003cli\u003eCambia el \u003ctitle\u003e para ajustar el texto de la pestaña.\u003c/li\u003e\\n\u003cli\u003eUsa el atajo ! + tab para generar la estructura base rápidamente.\u003c/li\u003e\\n\u003cli\u003eNombres de archivos y carpetas sin acentos ni espacios. Usa guion medio, guion bajo o \u003cem\u003ecamel case\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003eRecuerda que las etiquetas contenedoras se cierran con slash.\u003c/li\u003e\\n\u003cli\u003eMantén meta charset=\\\"UTF-8\\\" y meta viewport para compatibilidad y móviles.\u003c/li\u003e\\n\u003cli\u003eUsa el inspector para \u003cstrong\u003edebuggear\u003c/strong\u003e errores y aplicar correcciones informadas.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003e¿Tienes dudas o quieres compartir cómo nombraste tus carpetas y qué viste en el inspector? Deja un comentario y seguimos const"])</script><script>self.__next_f.push([1,"ruyendo juntos.\u003c/p\u003e\",\"contentSeo\":\"Crear tu primer sitio en HTML5 es más simple de lo que parece. Aquí verás cómo configurar VSCode, usar el navegador con el inspector de elementos, generar la estructura base con un atajo y renderizar tu primer Hola mundo con buenas prácticas. Todo paso a paso y con conceptos clave explicados de forma clara.¿Cómo preparar las herramientas para HTML con VSCode y navegador?Para escribir y visualizar código necesitas dos piezas: un editor de texto y un navegador. El editor recomendado es VSCode. El navegador es esencial porque ahí verás cómo se renderiza el HTML y porque incluye el inspector de elementos.Instala VSCode y ábrelo. Sigue el instalador según tu sistema operativo.Usa un navegador moderno con inspector de elementos. Te permitirá ver el HTML real y debuggear con feedback en tiempo real.Crea una carpeta raíz llamada 'Curso HTML'. Allí guardarás todo el contenido, clase por clase.Dentro, crea 'uno_Fundamentos_HTML' para el módulo y luego 'clase uno' como subcarpeta.Evita acentos y espacios en nombres. Usa guion medio, guion bajo o camel case.En 'clase uno', crea el archivo index.html.¿Para qué sirve el inspector de elementos?El inspector muestra el árbol real de etiquetas: html, head y body. Permite identificar errores, probar cambios rápidos y entender qué se está renderizando. Es clave para debuggear y para recibir feedback en tiempo real antes de llevar los cambios al editor.¿Qué incluye la estructura básica de HTML5 y por qué importa?En index.html puedes generar la base con un atajo: escribe ! y presiona tab. Esto crea el esqueleto HTML5 con etiquetas contenedoras que abren y cierran. Es importante comprender cada línea para que después te enfoques en el contenido dentro de body.document Las etiquetas contenedoras se abren y se cierran con slash. El contenido va dentro del par.Todo lo visible en el navegador está dentro de body. Lo de head son instrucciones para el navegador.¿Qué hacen doctype html y el atributo lang? le indica al navegador: esto es HTML5. Así usas el estándar vigente y sus etiquetas.En defines el idioma del contenido. El navegador puede ofrecer traducción automática si tu idioma local difiere, por ejemplo con Google Translator mediante un pequeño prompt.¿Qué hace meta charset y meta viewport? habilita caracteres especiales y emojis. Sin esto, acentos y símbolos pueden verse como códigos extraños. mejora la visualización en dispositivos móviles. Usa el ancho real del dispositivo y evita un zoom inicial que distorsione el diseño.¿Dónde va el contenido visible: body?Todo lo que agregues dentro de body se renderiza. El head aloja reglas y metadatos: estilos, configuración del documento y el , que define el texto de la pestaña del navegador.¿Cómo crear y visualizar tu primer HTML: h1 y párrafo?Abre index.html con Open with Live Server desde el clic derecho en el explorador de archivos. Verás en la URL que se sirve desde local, con la ruta de tus carpetas y el index.html. En el inspector podrás verificar doctype, html, head y body.Agrega contenido dentro de body: Hola mundoEs mi primer sitio web.Buenas prácticas y recordatorios.Guarda y revisa en el navegador para ver cómo se renderiza el cambio.Verifica en el inspector que h1 y p aparezcan dentro de body.Cambia el para ajustar el texto de la pestaña.Usa el atajo ! + tab para generar la estructura base rápidamente.Nombres de archivos y carpetas sin acentos ni espacios. Usa guion medio, guion bajo o camel case.Recuerda que las etiquetas contenedoras se cierran con slash.Mantén meta charset='UTF-8' y meta viewport para compatibilidad y móviles.Usa el inspector para debuggear errores y aplicar correcciones informadas.¿Tienes dudas o quieres compartir cómo nombraste tus carpetas y qué viste en el inspector? Deja un comentario y seguimos construyendo juntos.\",\"materialParams\":{\"totalMaterial\":17,\"actualMaterial\":3,\"nextMaterialUrl\":\"/cursos/html/etiquetas-de-texto-y-jerarquia-en-html/\",\"nextMaterialName\":\"Etiquetas de texto y jerarquía en HTML\",\"prev"])</script><script>self.__next_f.push([1,"iousMaterialUrl\":\"/cursos/html/como-funciona-la-web-desde-url-hasta-pag/\",\"previousMaterialName\":\"Cómo funciona la web desde URL hasta página renderizada\",\"isFirst\":false,\"isLast\":false,\"nextIsQuiz\":false,\"prevIsQuiz\":false,\"isNextMaterialPaid\":true},\"video\":{\"iframes\":[],\"servers\":{\"serverC\":{\"id\":\"serverC\",\"hls\":\"https://api.platzi.com/mdstrm/v1/video/68dc1cdae738b5b94215cc55.m3u8\"},\"serverM\":{\"id\":\"serverM\",\"hls\":\"https://api.platzi.com/mdstrm/v1/video/68dc1cdae738b5b94215cc55.m3u8?fallback=origin\"}},\"player\":{\"currentTime\":0,\"autoplay\":true,\"defaultServer\":\"serverC\"},\"movin\":{\"subtitles\":[],\"admin-url\":null}},\"seoTitle\":\"Fundamentos y estructura básica de HTML - Platzi\",\"seoDescription\":null,\"urlCanonical\":\"https://platzi.com/cursos/html/configuracion-de-vscode-y-estructura-htm/\",\"indexedClass\":true,\"thumbnail\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1cdae738b5b94215cc55_68dc1cdae738b5b94215cc69_83s.jpg\",\"datePublished\":\"2025-09-30T19:00:00+00:00\",\"dateModified\":\"2025-09-30T19:58:02.889052+00:00\",\"isoDuration\":\"P0DT00H13M48S\",\"iframeSrc\":null,\"markdownContent\":\"Crear tu primer sitio en HTML5 es más simple de lo que parece. Aquí verás cómo configurar *VSCode*, usar el navegador con el inspector de elementos, generar la estructura base con un atajo y renderizar tu primer Hola mundo con buenas prácticas. Todo paso a paso y con conceptos clave explicados de forma clara.\\n\\n## ¿Cómo preparar las herramientas para HTML con VSCode y navegador?\\nPara escribir y visualizar código necesitas dos piezas: un editor de texto y un navegador. El editor recomendado es *VSCode*. El navegador es esencial porque ahí verás cómo se renderiza el HTML y porque incluye el inspector de elementos.\\n\\n- Instala *VSCode* y ábrelo. Sigue el instalador según tu sistema operativo.\\n- Usa un navegador moderno con inspector de elementos. Te permitirá ver el HTML real y **debuggear** con feedback en tiempo real.\\n- Crea una carpeta raíz llamada \\\"Curso HTML\\\". Allí guardarás todo el contenido, clase por clase.\\n- Dentro, crea \\\"uno_Fundamentos_HTML\\\" para el módulo y luego \\\"clase uno\\\" como subcarpeta.\\n- Evita acentos y espacios en nombres. Usa guion medio, guion bajo o *camel case*.\\n- En \\\"clase uno\\\", crea el archivo index.html.\\n\\n### ¿Para qué sirve el inspector de elementos?\\nEl inspector muestra el árbol real de etiquetas: html, head y body. Permite identificar errores, probar cambios rápidos y entender qué se está renderizando. Es clave para **debuggear** y para recibir **feedback en tiempo real** antes de llevar los cambios al editor.\\n\\n## ¿Qué incluye la estructura básica de HTML5 y por qué importa?\\nEn index.html puedes generar la base con un atajo: escribe ! y presiona tab. Esto crea el esqueleto HTML5 con etiquetas contenedoras que abren y cierran. Es importante comprender cada línea para que después te enfoques en el contenido dentro de body.\\n\\n```html\\n\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"en\\\"\u003e\\n \u003chead\u003e\\n \u003cmeta charset=\\\"UTF-8\\\" /\u003e\\n \u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\" /\u003e\\n \u003ctitle\u003edocument\u003c/title\u003e\\n \u003c/head\u003e\\n \u003cbody\u003e\\n \u003c/body\u003e\\n\u003c/html\u003e\\n```\\n\\n- Las etiquetas contenedoras se abren y se cierran con slash. El contenido va dentro del par.\\n- Todo lo visible en el navegador está dentro de body. Lo de head son instrucciones para el navegador.\\n\\n### ¿Qué hacen doctype html y el atributo lang?\\n- \u003c!DOCTYPE html\u003e le indica al navegador: esto es **HTML5**. Así usas el estándar vigente y sus etiquetas.\\n- En \u003chtml lang=\\\"en\\\"\u003e defines el idioma del contenido. El navegador puede ofrecer traducción automática si tu idioma local difiere, por ejemplo con *Google Translator* mediante un pequeño *prompt*.\\n\\n### ¿Qué hace meta charset y meta viewport?\\n- \u003cmeta charset=\\\"UTF-8\\\"\u003e habilita **caracteres especiales y emojis**. Sin esto, acentos y símbolos pueden verse como códigos extraños.\\n- \u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"\u003e mejora la visualización en **dispositivos móviles**. Usa el **a"])</script><script>self.__next_f.push([1,"ncho real del dispositivo** y evita un **zoom inicial** que distorsione el diseño.\\n\\n### ¿Dónde va el contenido visible: body?\\nTodo lo que agregues dentro de body se renderiza. El head aloja reglas y metadatos: estilos, configuración del documento y el \u003ctitle\u003e, que define el texto de la pestaña del navegador.\\n\\n## ¿Cómo crear y visualizar tu primer HTML: h1 y párrafo?\\nAbre index.html con *Open with Live Server* desde el clic derecho en el explorador de archivos. Verás en la URL que se sirve desde local, con la ruta de tus carpetas y el index.html. En el inspector podrás verificar doctype, html, head y body.\\n\\nAgrega contenido dentro de body:\\n\\n```html\\n\u003cbody\u003e\\n \u003ch1\u003eHola mundo\u003c/h1\u003e\\n \u003cp\u003eEs mi primer sitio web.\u003c/p\u003e\\n\u003c/body\u003e\\n```\\n\\nBuenas prácticas y recordatorios.\\n\\n- Guarda y revisa en el navegador para ver cómo se renderiza el cambio.\\n- Verifica en el inspector que h1 y p aparezcan dentro de body.\\n- Cambia el \u003ctitle\u003e para ajustar el texto de la pestaña.\\n- Usa el atajo ! + tab para generar la estructura base rápidamente.\\n- Nombres de archivos y carpetas sin acentos ni espacios. Usa guion medio, guion bajo o *camel case*.\\n- Recuerda que las etiquetas contenedoras se cierran con slash.\\n- Mantén meta charset=\\\"UTF-8\\\" y meta viewport para compatibilidad y móviles.\\n- Usa el inspector para **debuggear** errores y aplicar correcciones informadas.\\n\\n¿Tienes dudas o quieres compartir cómo nombraste tus carpetas y qué viste en el inspector? Deja un comentario y seguimos construyendo juntos.\",\"hasAccess\":false,\"isHidden\":false,\"courseType\":\"\"},\"concepts\":[{\"id\":24620,\"title\":\"Fundamentos de HTML\",\"materials\":[{\"id\":84744,\"title\":\"Maquetación web con HTML semántico y accesible\",\"url\":\"https://platzi.com/cursos/html/maquetacion-web-con-html-semantico-y-acc/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc33f5fa4df65bc2b717cb_68dc33f5fa4df65bc2b717df_4s.jpg\",\"duration\":38,\"index\":1,\"content\":\"\u003cp\u003eAprende a construir páginas web desde cero con \u003cstrong\u003eHTML\u003c/strong\u003e, enfocándote en \u003cstrong\u003emaquetación semántica\u003c/strong\u003e, \u003cstrong\u003eaccesible\u003c/strong\u003e y con \u003cstrong\u003ebuenas prácticas para SEO\u003c/strong\u003e. Terminarás con el \u003cstrong\u003ecódigo base\u003c/strong\u003e de tu primer \u003cstrong\u003eportafolio profesional\u003c/strong\u003e, sin necesitar conocimientos de programación, solo ganas de iniciar tu camino como \u003cem\u003efrontend\u003c/em\u003e. Acompaña a \u003cstrong\u003eDiego de Granda\u003c/strong\u003e, profesional con \u003cstrong\u003emás de 15 años\u003c/strong\u003e en la industria de \u003cem\u003esoftware\u003c/em\u003e y desarrollo de producto.\u003c/p\u003e\\r\\n\u003ch2\u003e¿Qué aprenderás de HTML y maquetación semántica?\u003c/h2\u003e\\r\\n\u003cp\u003eLa ruta empieza por el primer paso: \u003cstrong\u003emaquetar con HTML\u003c/strong\u003e, uno de los tres lenguajes que entiende el navegador. El objetivo es construir estructura clara y preparada para crecer, cuidando la semántica desde el inicio.\u003c/p\u003e\\r\\n\u003ch3\u003e¿Cuál es el primer paso con HTML?\u003c/h3\u003e\\r\\n\u003cul\u003e\\r\\n\u003cli\u003eEntender que HTML es el lenguaje de maquetación del navegador.\u003c/li\u003e\\r\\n\u003cli\u003eOrganizar contenido con enfoque semántico desde el inicio.\u003c/li\u003e\\r\\n\u003cli\u003eTrabajar una base sólida para futuras mejoras.\u003c/li\u003e\\r\\n\u003c/ul\u003e\\r\\n\u003ch3\u003e¿Qué construirás al final del curso?\u003c/h3\u003e\\r\\n\u003cul\u003e\\r\\n\u003cli\u003eUn \u003cstrong\u003ecódigo base\u003c/strong\u003e listo para evolucionar.\u003c/li\u003e\\r\\n\u003cli\u003eEl inicio de tu \u003cstrong\u003eportafolio profesional\u003c/strong\u003e.\u003c/li\u003e\\r\\n\u003cli\u003eUn proyecto que demuestra maquetación semántica y accesible.\u003c/li\u003e\\r\\n\u003c/ul\u003e\\r\\n\u003ch2\u003e¿Cómo se relaciona con accesibilidad y SEO?\u003c/h2\u003e\\r\\n\u003cp\u003eLa \u003cstrong\u003emaquetación semántica\u003c/strong\u003e facilita que el navegador comprenda tu contenido y promueve una experiencia \u003cstrong\u003eaccesible\u003c/strong\u003e desde la base. Además, seguir \u003cstrong\u003ebuenas prácticas para SEO\u003c/strong\u003e te prepara para posicionar mejor tu sitio sin complejidad adicional.\u003c/p\u003e\\r\\n\u003ch3\u003e¿Qué enfoque tendrás para accesibilidad y SEO?\u003c/h3\u003e\\r\\n\u003cul\u003e\\r\\n\u003cli\u003eEstructura clara y comprensible para el navegador.\u003c/li\u003e\\r\\n\u003cli\u003eInclusión como principio del diseño accesible.\u003c/li\u003e\\r\\n\u003cli\u003ePrácticas alineadas con posicionamiento en buscadores.\u003c/li\u003e\\r\\n\u003c/ul\u003e\\r\\n\u003ch2\u003e"])</script><script>self.__next_f.push([1,"¿Quién es tu profesor y qué necesitas para iniciar?\u003c/h2\u003e\\r\\n\u003cp\u003eEl curso lo guía \u003cstrong\u003eDiego de Granda\u003c/strong\u003e, con \u003cstrong\u003emás de 15 años\u003c/strong\u003e de experiencia en la industria de \u003cem\u003esoftware\u003c/em\u003e y desarrollo de producto. No requieres experiencia previa en programación ni otros lenguajes.\u003c/p\u003e\\r\\n\u003ch3\u003e¿Qué requisitos y objetivos tendrás?\u003c/h3\u003e\\r\\n\u003cul\u003e\\r\\n\u003cli\u003eRequisitos: ninguna base de programación, solo motivación.\u003c/li\u003e\\r\\n\u003cli\u003eObjetivo: construir el \u003cstrong\u003ecódigo base\u003c/strong\u003e de tu portafolio.\u003c/li\u003e\\r\\n\u003cli\u003eCamino: iniciar tu perfil como \u003cem\u003efrontend\u003c/em\u003e con fundamentos claros.\u003c/li\u003e\\r\\n\u003c/ul\u003e\\r\\n\u003cp\u003e¿Listo para comenzar a maquetar con HTML y dar el primer paso hacia tu portafolio? Comparte en comentarios qué te motiva a construir tu sitio y en qué quieres enfocarte.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false},{\"id\":84727,\"title\":\"Cómo funciona la web desde URL hasta página renderizada\",\"url\":\"https://platzi.com/cursos/html/como-funciona-la-web-desde-url-hasta-pag/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1cc574333fb4a977b69e_68dc1cc574333fb4a977b6ad_63s.jpg\",\"duration\":632,\"index\":2,\"content\":\"\u003cp\u003eComprende, paso a paso y sin rodeos, cómo funciona la web desde que escribes una URL hasta que se renderiza una página. Aquí verás el modelo cliente-servidor, el rol del DNS y la IP, y por qué \u003cstrong\u003eHTML, CSS y JavaScript\u003c/strong\u003e son la base del navegador. Además, distinguirás \u003cstrong\u003epáginas estáticas y dinámicas\u003c/strong\u003e, y los perfiles de \u003cstrong\u003efrontend\u003c/strong\u003e y \u003cstrong\u003ebackend\u003c/strong\u003e, con las herramientas clave para empezar.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo se conecta el navegador con Internet y el servidor?\u003c/h2\u003e\\n\u003cp\u003eAntes de escribir la primera línea de HTML, conviene entender el flujo completo. Esa visión te ayuda a depurar mejor y a tomar decisiones desde el inicio.\u003c/p\u003e\\n\u003ch3\u003e¿Qué ocurre con un HTTP request cuando escribes una URL?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eAl teclear una dirección y presionar Enter, el navegador hace un \u003cstrong\u003eHTTP request\u003c/strong\u003e por Internet hacia el \u003cstrong\u003eservidor\u003c/strong\u003e que hospeda el proyecto.\u003c/li\u003e\\n\u003cli\u003eEl servidor localiza la URL, arma una \u003cstrong\u003erespuesta HTTP\u003c/strong\u003e con un paquete de archivos y la envía de vuelta al \u003cstrong\u003ecliente\u003c/strong\u003e: tu navegador.\u003c/li\u003e\\n\u003cli\u003eEjemplo de flujo mencionado: al ingresar a plachi.com, el servidor responde con el proyecto y el navegador empieza a interpretarlo.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo se relacionan DNS y la IP address?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eEl \u003cstrong\u003eDNS (Domain Name System)\u003c/strong\u003e traduce el dominio a una \u003cstrong\u003eIP address\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eEsa IP conecta con el servidor correcto para ubicar el proyecto solicitado.\u003c/li\u003e\\n\u003cli\u003eLa regla práctica: escribimos dominios fáciles de recordar y el sistema los transforma a números de IP para hacer la conexión.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué lenguajes entiende el navegador?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003eHTML\u003c/strong\u003e: estructura del contenido que aprenderás primero.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eCSS\u003c/strong\u003e: estilos para definir la apariencia.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eJavaScript\u003c/strong\u003e: interacción y dinamismo en la página.\u003c/li\u003e\\n\u003cli\u003eCon estos tres, puedes construir experiencias de lectura o páginas interactivas.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo lee y renderiza el navegador una página web?\u003c/h2\u003e\\n\u003cp\u003eEl navegador procesa de arriba hacia abajo y resuelve dependencias mientras interpreta. Este orden importa para evitar bloqueos y errores.\u003c/p\u003e\\n\u003ch3\u003e¿Qué es el DOM y el CSS Object Module?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003ePrimero descarga y analiza \u003cstrong\u003eHTML\u003c/strong\u003e, generando el \u003cstrong\u003eDOM (Document Object Model)\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eLuego, al encontrar estilos, descarga \u003cstrong\u003eCSS\u003c/strong\u003e y crea el \u003cstrong\u003eCSS Object Module\u003c/strong\u003e, similar al DOM pero solo de estilos.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo descarga recursos y ejecuta JavaScript?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eEl HTML indica recursos: \u003cstrong\u003eCSS\u003c/strong\u003e, \u003cstrong\u003eJavaScript\u003c/strong\u003e, imágenes y otros archivos.\u003c/li\u003e\\n\u003cli\u003eEl navegador descarga estilos, los interpreta y los aplica al DOM.\u003c/li\u003e\\n\u003cli\u003eC"])</script><script>self.__next_f.push([1,"uando el HTML requiere \u003cstrong\u003eJavaScript\u003c/strong\u003e, lo descarga, lo interpreta y ejecuta para lograr la interacción.\u003c/li\u003e\\n\u003cli\u003eCon HTML, CSS y JavaScript listos, el navegador \u003cstrong\u003erenderiza\u003c/strong\u003e la página.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿En qué se diferencian páginas estáticas y dinámicas?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003ePáginas estáticas\u003c/strong\u003e: contenido de consumo. Suelen usar HTML y CSS, rara vez JavaScript. No permiten acciones del usuario como comentar o dar like.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003ePáginas dinámicas (aplicaciones web)\u003c/strong\u003e: permiten acciones del usuario. Ejemplos mencionados: platzi.com para cursos, Facebook, Amazon, Gmail y sistemas bancarios. Tu perfil y resultados cambian según tus interacciones.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Qué roles, herramientas y siguientes pasos necesitas?\u003c/h2\u003e\\n\u003cp\u003eConocer responsabilidades te orienta en el aprendizaje y te prepara para construir proyectos funcionales.\u003c/p\u003e\\n\u003ch3\u003e¿Qué hace frontend y por dónde empezar?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003eFrontend\u003c/strong\u003e: todo lo visual que el navegador renderiza y con lo que el usuario interactúa.\u003c/li\u003e\\n\u003cli\u003eRuta sugerida: \u003cstrong\u003eHTML\u003c/strong\u003e primero, luego \u003cstrong\u003eCSS\u003c/strong\u003e, y después \u003cstrong\u003eJavaScript\u003c/strong\u003e para el dinamismo.\u003c/li\u003e\\n\u003cli\u003eMás adelante, podrás aprender frameworks como \u003cem\u003eReact\u003c/em\u003e, \u003cem\u003eVue\u003c/em\u003e o \u003cem\u003eAngular\u003c/em\u003e cuando domines HTML y CSS.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué hace backend y cómo trabaja con datos?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003eBackend\u003c/strong\u003e: todo lo que sucede en el \u003cstrong\u003eservidor\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eGestiona la lógica, atiende solicitudes del navegador y se conecta con \u003cstrong\u003ebases de datos\u003c/strong\u003e para entregar información.\u003c/li\u003e\\n\u003cli\u003eRequiere lenguajes de programación del lado del servidor y lenguajes para bases de datos.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué herramientas usar para construir y probar?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003eEditores de texto\u003c/strong\u003e: VSCode, Cursor u otros que faciliten escribir código.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eNavegadores web\u003c/strong\u003e: Chrome, Firefox, Safari o el de tu preferencia para visualizar y depurar.\u003c/li\u003e\\n\u003cli\u003eHabilidades que pondrás en práctica.\u003c/li\u003e\\n\u003cli\u003eComprender el flujo cliente-servidor y las respuestas HTTP.\u003c/li\u003e\\n\u003cli\u003eIdentificar el papel del DNS y la IP en la resolución de dominios.\u003c/li\u003e\\n\u003cli\u003eDistinguir entre HTML, CSS y JavaScript al renderizar.\u003c/li\u003e\\n\u003cli\u003eDiferenciar páginas estáticas y dinámicas según la interacción.\u003c/li\u003e\\n\u003cli\u003eReconocer responsabilidades de \u003cem\u003efrontend\u003c/em\u003e y \u003cem\u003ebackend\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003eUsar editores y navegadores para construir y probar.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003e¿Te gustaría profundizar en alguna parte del flujo, por ejemplo DOM o páginas dinámicas? Comparte tus dudas y experiencias en los comentarios.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false},{\"id\":84728,\"title\":\"Configuración de VSCode y estructura HTML5 básica\",\"url\":\"https://platzi.com/cursos/html/configuracion-de-vscode-y-estructura-htm/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1cdae738b5b94215cc55_68dc1cdae738b5b94215cc69_83s.jpg\",\"duration\":828,\"index\":3,\"content\":\"\u003cp\u003eCrear tu primer sitio en HTML5 es más simple de lo que parece. Aquí verás cómo configurar \u003cem\u003eVSCode\u003c/em\u003e, usar el navegador con el inspector de elementos, generar la estructura base con un atajo y renderizar tu primer Hola mundo con buenas prácticas. Todo paso a paso y con conceptos clave explicados de forma clara.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo preparar las herramientas para HTML con VSCode y navegador?\u003c/h2\u003e\\n\u003cp\u003ePara escribir y visualizar código necesitas dos piezas: un editor de texto y un navegador. El editor recomendado es \u003cem\u003eVSCode\u003c/em\u003e. El navegador es esencial porque ahí verás cómo se renderiza el HTML y porque incluye el inspector de elementos.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eInstala \u003cem\u003eVSCode\u003c/em\u003e y ábrelo. Sigue el instalador según tu sistema operativo.\u003c/li\u003e\\n\u003cli\u003eUsa un navegador moderno con inspector de elementos. Te permitirá ver el HTML real y \u003cstrong\u003edebuggear\u003c/strong\u003e con feedback en tiempo real.\u003c/li\u003e\\n\u003cli\u003eCrea una carpeta raíz llamada \\\"Curso HTML\\\". "])</script><script>self.__next_f.push([1,"Allí guardarás todo el contenido, clase por clase.\u003c/li\u003e\\n\u003cli\u003eDentro, crea \\\"uno_Fundamentos_HTML\\\" para el módulo y luego \\\"clase uno\\\" como subcarpeta.\u003c/li\u003e\\n\u003cli\u003eEvita acentos y espacios en nombres. Usa guion medio, guion bajo o \u003cem\u003ecamel case\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003eEn \\\"clase uno\\\", crea el archivo index.html.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Para qué sirve el inspector de elementos?\u003c/h3\u003e\\n\u003cp\u003eEl inspector muestra el árbol real de etiquetas: html, head y body. Permite identificar errores, probar cambios rápidos y entender qué se está renderizando. Es clave para \u003cstrong\u003edebuggear\u003c/strong\u003e y para recibir \u003cstrong\u003efeedback en tiempo real\u003c/strong\u003e antes de llevar los cambios al editor.\u003c/p\u003e\\n\u003ch2\u003e¿Qué incluye la estructura básica de HTML5 y por qué importa?\u003c/h2\u003e\\n\u003cp\u003eEn index.html puedes generar la base con un atajo: escribe ! y presiona tab. Esto crea el esqueleto HTML5 con etiquetas contenedoras que abren y cierran. Es importante comprender cada línea para que después te enfoques en el contenido dentro de body.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"cp\\\"\u003e\u0026lt;!DOCTYPE html\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehtml\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003elang\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;en\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003echarset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;UTF-8\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;viewport\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;width=device-width, initial-scale=1.0\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003edocument\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehtml\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eLas etiquetas contenedoras se abren y se cierran con slash. El contenido va dentro del par.\u003c/li\u003e\\n\u003cli\u003eTodo lo visible en el navegador está dentro de body. Lo de head son instrucciones para el navegador.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué hacen doctype html y el atributo lang?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u0026lt;!DOCTYPE html\u0026gt; le indica al navegador: esto es \u003cstrong\u003eHTML5\u003c/strong\u003e. Así usas el estándar vigente y sus etiquetas.\u003c/li\u003e\\n\u003cli\u003eEn \u003chtml lang=\\\"en\\\"\u003e defines el idioma del contenido. El navegador puede ofrecer traducción automática si tu idioma local difiere, por ejemplo con \u003cem\u003eGoogle Translator\u003c/em\u003e mediante un pequeño \u003cem\u003eprompt\u003c/em\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué hace meta charset y meta viewport?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cmeta charset=\\\"UTF-8\\\"\u003e habilita \u003cstrong\u003ecaracteres especiales y emojis\u003c/strong\u003e. Sin esto, acentos y símbolos pueden verse como códigos extraños.\u003c/li\u003e\\n\u003cli\u003e\u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"\u003e mejora la visualización en \u003cstrong\u003edispositivos móviles\u003c/strong\u003e. Usa el \u003cstrong\u003eancho real del dispositivo\u003c/strong\u003e y evita un \u003cstrong\u003ezoom inicial\u003c/strong\u003e que distorsione el diseño.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Dónde va el contenido visible: body?\u003c/h3\u003e\\n\u003cp\u003eTodo lo que agregues dentro de body se renderiza. El head aloja reglas y metadatos: estilos, configuración del documento y el \u003ctitle\u003e, que define el texto de la pestaña del navegador.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo crear y visualizar tu primer HTML: h1 y párrafo?\u003c/h2\u003e\\n\u003cp\u003eAbre index.html con \u003cem\u003eOpen with Live Server\u003c/em\u003e desde el clic derecho en el explorador de archivos. Verás en "])</script><script>self.__next_f.push([1,"la URL que se sirve desde local, con la ruta de tus carpetas y el index.html. En el inspector podrás verificar doctype, html, head y body.\u003c/p\u003e\\n\u003cp\u003eAgrega contenido dentro de body:\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh1\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eHola mundo\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh1\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eEs mi primer sitio web.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eBuenas prácticas y recordatorios.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eGuarda y revisa en el navegador para ver cómo se renderiza el cambio.\u003c/li\u003e\\n\u003cli\u003eVerifica en el inspector que h1 y p aparezcan dentro de body.\u003c/li\u003e\\n\u003cli\u003eCambia el \u003ctitle\u003e para ajustar el texto de la pestaña.\u003c/li\u003e\\n\u003cli\u003eUsa el atajo ! + tab para generar la estructura base rápidamente.\u003c/li\u003e\\n\u003cli\u003eNombres de archivos y carpetas sin acentos ni espacios. Usa guion medio, guion bajo o \u003cem\u003ecamel case\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003eRecuerda que las etiquetas contenedoras se cierran con slash.\u003c/li\u003e\\n\u003cli\u003eMantén meta charset=\\\"UTF-8\\\" y meta viewport para compatibilidad y móviles.\u003c/li\u003e\\n\u003cli\u003eUsa el inspector para \u003cstrong\u003edebuggear\u003c/strong\u003e errores y aplicar correcciones informadas.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003e¿Tienes dudas o quieres compartir cómo nombraste tus carpetas y qué viste en el inspector? Deja un comentario y seguimos construyendo juntos.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false},{\"id\":84729,\"title\":\"Etiquetas de texto y jerarquía en HTML\",\"url\":\"https://platzi.com/cursos/html/etiquetas-de-texto-y-jerarquia-en-html/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1cc8b0782cb9a7f3d5f8_68dc1cc8b0782cb9a7f3d60c_41s.jpg\",\"duration\":411,\"index\":4,\"content\":\"\u003cp\u003eAprende a organizar texto en HTML con una \u003cstrong\u003ejerarquía clara\u003c/strong\u003e. Usar bien \u003cstrong\u003eH1 a H6\u003c/strong\u003e, \u003cstrong\u003epárrafos\u003c/strong\u003e, \u003cstrong\u003estrong\u003c/strong\u003e y \u003cstrong\u003eblockquote\u003c/strong\u003e mejora la lectura y guía al navegador sobre lo más importante. Verás cómo crear la estructura base, cambiar el \u003cstrong\u003etítulo de la pestaña\u003c/strong\u003e y abrir el archivo en el navegador para validar resultados.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo estructurar HTML y cambiar el título de la pestaña?\u003c/h2\u003e\\n\u003cp\u003eComienza generando la \u003cstrong\u003eestructura básica de HTML\u003c/strong\u003e y ajusta el \u003cstrong\u003etítulo\u003c/strong\u003e para identificar tu proyecto como “Práctica texto”. Abre el archivo en el navegador para confirmar que el título aparece en la pestaña y que el contenido se renderiza con estilos por defecto.\u003c/p\u003e\\n\u003ch3\u003e¿Qué código base usar?\u003c/h3\u003e\\n\u003cp\u003eUsa un archivo index.html con la estructura mínima y el título configurado.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"cp\\\"\u003e\u0026lt;!DOCTYPE html\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehtml\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003elang\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;es\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003echarset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;UTF-8\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003ePráctica texto\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- Contenido --\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003csp"])</script><script>self.__next_f.push([1,"an class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehtml\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eGenera la estructura con tu atajo de “símbolo de alineación” y tab.\u003c/li\u003e\\n\u003cli\u003eCambia el título a “Práctica texto”.\u003c/li\u003e\\n\u003cli\u003eAbre en el navegador y ajusta el zoom si lo necesitas.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Qué jerarquía de encabezados H1 a H6 conviene?\u003c/h2\u003e\\n\u003cp\u003eLos encabezados vienen con \u003cstrong\u003eestilos por defecto\u003c/strong\u003e que muestran su jerarquía visual. \u003cstrong\u003eH1\u003c/strong\u003e es el más grande e importante. \u003cstrong\u003eH2\u003c/strong\u003e es secundario. \u003cstrong\u003eH3\u003c/strong\u003e funciona como \u003cstrong\u003esubsecciones\u003c/strong\u003e dentro de un H2. \u003cstrong\u003eH4 a H6\u003c/strong\u003e siguen en menor importancia.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh1\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eTítulo uno\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh1\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh2\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eTítulo dos\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh2\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh3\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eSubsección del H2\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh3\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch3\u003e¿Cuántos H1, H2 y H3 por archivo?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eUn solo \u003cstrong\u003eH1\u003c/strong\u003e por archivo es buena práctica.\u003c/li\u003e\\n\u003cli\u003ePuedes tener varios \u003cstrong\u003eH2\u003c/strong\u003e según tu estructura.\u003c/li\u003e\\n\u003cli\u003eUsa \u003cstrong\u003eH3\u003c/strong\u003e para subdividir contenido dentro de un H2.\u003c/li\u003e\\n\u003cli\u003e\\n\u003cp\u003eEvita usar H4, H5 o H6 para texto común si necesitas párrafos.\u003c/p\u003e\\n\u003c/li\u003e\\n\u003cli\u003e\\n\u003cp\u003eBeneficio clave. El navegador entiende qué es lo más importante y el lector también.\u003c/p\u003e\\n\u003c/li\u003e\\n\u003cli\u003eSeñal visual. El tamaño refuerza la jerarquía al renderizar el documento.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo escribir párrafos, dar énfasis y citar?\u003c/h2\u003e\\n\u003cp\u003ePara texto de explicación usa la etiqueta \u003cstrong\u003ep\u003c/strong\u003e. No uses encabezados para contenido que debe ser un párrafo. Si necesitas \u003cstrong\u003eresaltar\u003c/strong\u003e una parte del texto dentro del párrafo, emplea \u003cstrong\u003estrong\u003c/strong\u003e. Para \u003cstrong\u003ecitas\u003c/strong\u003e o fragmentos destacados utiliza \u003cstrong\u003eblockquote\u003c/strong\u003e, que se muestra con un estilo distinto al párrafo.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo resaltar con strong sin cambiar la semántica?\u003c/h3\u003e\\n\u003cp\u003eDentro del párrafo, rodea la parte relevante con strong para darle énfasis visual.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eSoy un texto, pero \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003estrong\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eesto es más importante\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003estrong\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eÚsalo para marcar énfasis en una frase.\u003c/li\u003e\\n\u003cli\u003eNo implica que el resto del párrafo sea menos importante en el significado, solo lo resalta a nivel visual.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cuándo usar blockquote e inspeccionar estilos?\u003c/h3\u003e\\n\u003cp\u003eEmplea \u003cstrong\u003eblockquote\u003c/strong\u003e para citar texto o palabras específicas.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eblockquote\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eCurso de HTML\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eblockquote\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eSe renderiza con estilo distinto al párrafo.\u003c/li\u003e\\n\u003cli\u003eÚtil para citas o extractos destacados.\u003c/li\u003e\\n\u003cli\u003eCon el \u003cstrong\u003einspector de elementos\u003c/strong\u003e puedes ver cómo el navegador aplica estilos distintos a blockquote y p.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué habilidades prácticas se refuerzan?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eCrear la estructura básica de HTML en un index.html.\u003c/li\u003e\\n\u003cli\u003eCambiar el \u003cstrong\u003etítulo de la pestaña\u003c/strong\u003e a “Práctica"])</script><script>self.__next_f.push([1," texto”.\u003c/li\u003e\\n\u003cli\u003eEntender la \u003cstrong\u003ejerarquía de encabezados\u003c/strong\u003e H1 a H6.\u003c/li\u003e\\n\u003cli\u003eRespetar la regla de \u003cstrong\u003eun H1 por archivo\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eEscribir texto con \u003cstrong\u003ep\u003c/strong\u003e en lugar de encabezados.\u003c/li\u003e\\n\u003cli\u003eDar énfasis con \u003cstrong\u003estrong\u003c/strong\u003e cuando haga falta.\u003c/li\u003e\\n\u003cli\u003eCitar con \u003cstrong\u003eblockquote\u003c/strong\u003e y validar estilos en el \u003cstrong\u003einspector de elementos\u003c/strong\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003e¿Te quedaron dudas o tienes un ejemplo que quieras revisar? Comenta qué estructura de encabezados planeas usar y qué parte del texto necesitas destacar.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false},{\"id\":84730,\"title\":\"Insertar imágenes en HTML con optimización y accesibilidad\",\"url\":\"https://platzi.com/cursos/html/insertar-imagenes-en-html-con-optimizaci/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1cdf74c8d2b8b3afdbb1_68dc1cdf74c8d2b8b3afdbc5_103s.jpg\",\"duration\":1034,\"index\":5,\"content\":\"\u003cp\u003eInsertar imágenes en HTML es más que mostrar una foto: es construir una \u003cstrong\u003eestructura semántica\u003c/strong\u003e, con \u003cstrong\u003eaccesibilidad\u003c/strong\u003e y \u003cstrong\u003erendimiento\u003c/strong\u003e. Aquí aprenderás a usar la etiqueta img, el atributo src para rutas, el alt para describir, y a optimizar archivos para que tu sitio cargue rápido.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo insertar imágenes en HTML con la etiqueta img?\u003c/h2\u003e\\n\u003cp\u003eLa etiqueta \u003cstrong\u003eimg\u003c/strong\u003e renderiza imágenes directamente en el navegador. Es un elemento vacío: \u003cstrong\u003eno lleva etiqueta de cierre\u003c/strong\u003e. Debe colocarse dentro de body y necesita el atributo \u003cstrong\u003esrc\u003c/strong\u003e para apuntar a la ruta del archivo y \u003cstrong\u003ealt\u003c/strong\u003e para la descripción.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- Estructura básica --\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/paisaje.jpg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;paisajes montañosos.\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eimg es un elemento sin contenido interno: no se cierra con slash.\u003c/li\u003e\\n\u003cli\u003esrc define la ruta relativa al archivo HTML.\u003c/li\u003e\\n\u003cli\u003ealt aporta una descripción breve y útil.\u003c/li\u003e\\n\u003cli\u003eSin src no se muestra nada.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo referenciar rutas y renderizar en el navegador?\u003c/h3\u003e\\n\u003cp\u003eOrganiza una carpeta img y usa rutas relativas desde tu index.html. El editor suele autocompletar nombres de carpetas y archivos.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- Dentro de index.html, apuntando a /img --\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/montana-optimizada.jpg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;montañas con lago cristalino.\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eEstructura clara de proyecto.\u003c/li\u003e\\n\u003cli\u003eRuta coherente con carpetas.\u003c/li\u003e\\n\u003cli\u003eGuardar cambios y refrescar para ver el renderizado.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué diferencia tiene img respecto a otras etiquetas?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eEs de tipo vacío: \u003cstrong\u003eno lleva contenido entre etiquetas\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eSus valores viven en propiedades o atributos: src, alt, width, height.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo optimizar imágenes para la web y mejorar rendimiento?\u003c/h2\u003e\\n\u003cp\u003eLas imágenes grandes ralentizan la carga. La buena práctica es \u003cstrong\u003ereducir el peso del archivo\u003c/strong\u003e antes de usarlo. Se mostró el uso de TinyPNG para comprimir imágenes pesadas y reemplazar versiones “original” por versiones optimizadas.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eRegla práctica: alrededor de \u003cstrong\u003e200 KB\u003c/strong\u003e por imagen para carga ágil.\u003c/li\u003e\\n\u003cli\u003eEvitar imágenes de \u003cstrong\u003emegabytes\u003c/strong\u003e: son muy pesadas.\u003c/li\u003e\\n\u003cli\u003eEjemplo: de ~3 MB a \u003cstrong\u003e863 KB\u003c/strong\u003e, y luego hasta \u003cstrong\u003e26 KB\u003c/s"])</script><script>self.__next_f.push([1,"trong\u003e tras optimización adicional.\u003c/li\u003e\\n\u003cli\u003eVerifica el peso real en las herramientas del navegador: pestaña \u003cem\u003eNetwork\u003c/em\u003e muestra los KB/MB descargados.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003eSugerencias aplicadas en el flujo:\\n- Mantener dos archivos cuando convenga: nombre “original” y versión optimizada.\\n- Reemplazar en src la versión “original” por la \u003cstrong\u003eoptimizada\u003c/strong\u003e.\\n- Probar la carga y el tamaño en \u003cem\u003eNetwork\u003c/em\u003e para validar la mejora.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- Evitar cargar el archivo pesado --\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/foco.original.jpg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;vista de focos.\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n\u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- Usar la versión optimizada --\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/foco.jpg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;vista de focos.\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch2\u003e¿Cómo mejorar accesibilidad y semántica con alt, width, height, figure y figcaption?\u003c/h2\u003e\\n\u003cp\u003eEl atributo \u003cstrong\u003ealt\u003c/strong\u003e es clave para \u003cstrong\u003eaccesibilidad\u003c/strong\u003e: si la imagen falla, el usuario ve el texto alternativo y los lectores de pantalla lo anuncian. Además, puedes ajustar dimensiones con \u003cstrong\u003ewidth\u003c/strong\u003e y \u003cstrong\u003eheight\u003c/strong\u003e cuando la imagen optimizada sigue siendo grande.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- Dimensiones controladas en pixeles --\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/foco.jpg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;vista de focos.\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ewidth\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;200\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eheight\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;150\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003ealt describe el contenido visual de forma concreta.\u003c/li\u003e\\n\u003cli\u003ewidth y height ajustan el tamaño en el layout.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003ePara descripciones visibles bajo la imagen, utiliza \u003cstrong\u003efigure\u003c/strong\u003e y \u003cstrong\u003efigcaption\u003c/strong\u003e. Es una solución semántica superior a usar img + p dentro de un \u003cem\u003ediv\u003c/em\u003e.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efigure\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/montana-optimizada.jpg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;montañas con lago cristalino.\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efigcaption\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003evista panorámica de los Alpes suizos.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efigcaption\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efigure\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003efigure agrupa imagen y su contexto.\u003c/li\u003e\\n\u003cli\u003efigcaption muestra una \u003cstrong\u003edescripción visible\u003c/strong\u003e asociada.\u003c/li\u003e\\n\u003cli\u003eMejora la semántica y la comprensión del contenido.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003e¿Tienes dudas sobre rutas, pesos en \u003cem\u003eKB\u003c/em\u003e o el uso de figure y figcaption? Cuéntamelo en los comentarios y revisamos tu caso paso a paso.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false}],\"quiz\":{\"id\":31713,\"active\":true,\"title\":\"quiz de Fundamentos de HTML\"}},{\"id\":24621,\"title\":\"Listas y Enlaces\",\"materials\":[{\"id\":84731,\"title\":\"Creación d"])</script><script>self.__next_f.push([1,"e listas desordenadas, ordenadas y enlaces en HTML\",\"url\":\"https://platzi.com/cursos/html/creacion-de-listas-desordenadas-ordenada/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1cd4bc24ceb871a97533_68dc1cd4bc24ceb871a97547_80s.jpg\",\"duration\":802,\"index\":6,\"content\":\"\u003cp\u003eAprende a estructurar contenido con \u003cstrong\u003elistas HTML\u003c/strong\u003e y a conectar páginas y acciones con \u003cstrong\u003eenlaces\u003c/strong\u003e. Verás cómo usar \u003cstrong\u003eUL\u003c/strong\u003e, \u003cstrong\u003eOL\u003c/strong\u003e y \u003cstrong\u003eLI\u003c/strong\u003e para organizar información, y cómo trabajar con \u003cstrong\u003eA\u003c/strong\u003e, \u003cstrong\u003ehref\u003c/strong\u003e, \u003cstrong\u003etarget\u003c/strong\u003e, \u003cstrong\u003emailto\u003c/strong\u003e y \u003cstrong\u003etel\u003c/strong\u003e para crear experiencias útiles y claras. Todo con ejemplos prácticos y listos para el navegador.\u003c/p\u003e\\n\u003ch2\u003e¿Qué son las listas en HTML y cuándo usarlas?\u003c/h2\u003e\\n\u003cp\u003eLas listas permiten organizar elementos relacionados. Con \u003cstrong\u003elistas desordenadas\u003c/strong\u003e presentas ítems sin prioridad. Con \u003cstrong\u003elistas ordenadas\u003c/strong\u003e defines un orden de pasos que sí importa. Así, eliges la estructura correcta según el objetivo: compras sin orden o instrucciones con secuencia.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo crear una lista desordenada con ul y li?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eUsa \u003cstrong\u003eUL\u003c/strong\u003e para una lista sin prioridad.\u003c/li\u003e\\n\u003cli\u003eAñade cada elemento con \u003cstrong\u003eLI\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eEl navegador muestra viñetas automáticamente.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eul\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eLeche\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003ePan\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eVerduras\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eul\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eClaves: \u003cstrong\u003eUL\u003c/strong\u003e (\u003cem\u003eunordered list\u003c/em\u003e) y \u003cstrong\u003eLI\u003c/strong\u003e (\u003cem\u003elist item\u003c/em\u003e). Son ideales cuando el orden no afecta el resultado.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo crear una lista ordenada con ol y li?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eUsa \u003cstrong\u003eOL\u003c/strong\u003e cuando el orden sí influye.\u003c/li\u003e\\n\u003cli\u003eCada \u003cstrong\u003eLI\u003c/strong\u003e se numera automáticamente.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eol\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eHervir agua\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eAgregar café\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eServir en taza\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eol\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eLa prioridad la marca el número. Cambiar el orden cambia el resultado.\u003c/p\u003e\\n\u003ch3\u003e¿Por qué importar el orden según el caso?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eCompras: el orden no importa, usa \u003cstrong\u003eUL\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eRecetas o pasos: el orden importa, usa \u003cstrong\u003eOL\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eLa elección correcta mejora claridad y experiencia.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo personalizar listas con type y start?\u003c/h2\u003e\\n\u003cp\u003eHTML permite ajustar la apariencia y la continuidad de listas ordenadas. Así comunicas mejor la prioridad y mantienes coherencia cuando hay contenido intermedio.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo usar números romanos o letras con type?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eEn \u003cstrong\u003eOL\u003c/strong\u003e, el atributo \u003c"])</script><script>self.__next_f.push([1,"strong\u003etype\u003c/strong\u003e cambia el estilo de numeración.\u003c/li\u003e\\n\u003cli\u003eOpciones: números romanos en mayúscula o minúscula, letras alfabéticas y números.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eol\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;I\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003ePaso uno\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003ePaso dos\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eol\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eol\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;a\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eOpción A\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eOpción B\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eol\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eResultado: I, II, III… o a, b, c… según el caso.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo continuar numeración con start?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eCada \u003cstrong\u003eOL\u003c/strong\u003e comienza en 1 por defecto.\u003c/li\u003e\\n\u003cli\u003ePara continuar después de una lista previa separada por contenido, usa \u003cstrong\u003estart\u003c/strong\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eol\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eTexto\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eImágenes\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMultimedia\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eol\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eContenido intermedio…\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eol\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003estart\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;4\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eAccesibilidad\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eSEO\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eDespliegue\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eol\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eBeneficio: mantienes la secuencia 1–6 aunque haya bloques intermedios.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo crear enlaces en HTML con a, href y target?\u003c/h2\u003e\\n\u003cp\u003eUn \u003cstrong\u003eenlace\u003c/strong\u003e se define con \u003cstrong\u003eA\u003c/strong\u003e y el destino con \u003cstrong\u003ehref\u003c/strong\u003e. El texto entre apertura y cierre es el que verá la persona. El navegador lo muestra con subrayado, color y cursor de mano para indicar que es interactivo.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo abrir en nueva pestaña"])</script><script>self.__next_f.push([1," con target?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003etarget\u003c/strong\u003e controla dónde se abre el enlace.\u003c/li\u003e\\n\u003cli\u003eUsa \u003cstrong\u003etarget=\\\"_blank\\\"\u003c/strong\u003e para abrir en otra pestaña y conservar la actual.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;https://platzi.com\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etarget\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;_blank\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eplatzi\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eÚtil cuando no quieres perder el contexto de navegación.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo enviar emails con mailto?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eCon \u003cstrong\u003emailto:\u003c/strong\u003e abres el cliente de correo con datos prellenados.\u003c/li\u003e\\n\u003cli\u003ePuedes definir \u003cstrong\u003esubject\u003c/strong\u003e y \u003cstrong\u003ebody\u003c/strong\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;mailto:info@ejemplo.com?subject=consulta\u0026amp;body=hola\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eenviar email\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eVentaja: facilita contactar sin copiar y pegar direcciones.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo llamar con tel?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eCon \u003cstrong\u003etel:\u003c/strong\u003e inicias una llamada desde móviles o apps compatibles.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;tel:3412345678\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eLlamar +34 12345678\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eEn móvil, abre el marcador y completa el número automáticamente.\u003c/p\u003e\\n\u003cp\u003e¿Tienes dudas o ejemplos que quieras probar con \u003cstrong\u003eUL\u003c/strong\u003e, \u003cstrong\u003eOL\u003c/strong\u003e, \u003cstrong\u003eLI\u003c/strong\u003e o \u003cstrong\u003eA\u003c/strong\u003e? Comenta qué estructura necesitas y lo afinamos juntos.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false},{\"id\":84732,\"title\":\"Etiquetas semánticas HTML5: header, main, nav, article y footer\",\"url\":\"https://platzi.com/cursos/html/etiquetas-semanticas-html5-header-main-n/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1ce0f4aae2065e64aa11_68dc1ce0f4aae2065e64aa25_66s.jpg\",\"duration\":660,\"index\":7,\"content\":\"\u003cp\u003eLa semántica en HTML5 define una estructura clara que mejora la comprensión del contenido por personas, navegadores y lectores de pantalla. Usar etiquetas con significado aporta orden, \u003cstrong\u003efacilita el trabajo en equipo\u003c/strong\u003e, \u003cstrong\u003emejora la accesibilidad\u003c/strong\u003e y \u003cstrong\u003eayuda al SEO\u003c/strong\u003e al permitir que Google indexe mejor cada sección.\u003c/p\u003e\\n\u003ch2\u003e¿Qué es la semántica en HTML5 y por qué importa?\u003c/h2\u003e\\n\u003cp\u003eLa semántica asigna significado a las secciones del documento mediante etiquetas específicas. No cambia el diseño por sí misma, pero \u003cstrong\u003eindica qué es cada parte\u003c/strong\u003e del proyecto y \u003cstrong\u003ecómo debe ser interpretada\u003c/strong\u003e.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eDiferencia clave: head vs header. El head contiene lo que el navegador necesita para cargar el proyecto; el header es el encabezado visible del contenido. \u003c/li\u003e\\n\u003cli\u003eEl body es el cuerpo que se renderiza en pantalla. \u003c/li\u003e\\n\u003cli\u003eEtiquetas como header, main y footer delimitan secciones principales con propósito claro. \u003c/li\u003e\\n\u003cli\u003eBeneficio directo: los lectores de contenido pueden anunciar “estás en el header con una barra de navegación” y guiar a usuarios con baja visión. \u003c/li\u003e\\n\u003cli\u003eBeneficio técnico: Google puede \u003cstrong\u003eindexar\u003c/strong\u003e mejor las secciones cuando el documento utiliza etiquetas semánticas correctas. \u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo se estructura una página con etiquetas semánticas?\u003c/h2\u003e\\n\u003cp\u003eUna base semántica típica separ"])</script><script>self.__next_f.push([1,"a el encabezado, el contenido principal y el cierre. Además, incorpora navegación y organización interna del contenido con etiquetas como nav, section, article y aside.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo se ve el código base?\u003c/h3\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"cp\\\"\u003e\u0026lt;!DOCTYPE html\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehtml\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003elang\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;es\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003echarset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;UTF-8\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;viewport\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;width=device-width, initial-scale=1.0\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMi sitio web\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eheader\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh1\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMi sitio web\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh1\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eul\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#inicio\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eInicio\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#servicios\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eServicios\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#contacto\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eContacto\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eul\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eheader\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emain\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esection\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;articulos\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003earticle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh2\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eTítulo del artículo\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh2\u003c/spa"])</script><script>self.__next_f.push([1,"n\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eContenido del artículo dentro de la sección principal.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003earticle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- Puedes repetir más \u0026lt;article\u0026gt; según el contenido --\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esection\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003easide\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eBarra lateral con opciones o enlaces relacionados.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003easide\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emain\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efooter\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eCopyright 2025 Mi sitio. Todos los derechos reservados.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efooter\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehtml\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch3\u003e¿Qué hace cada etiqueta?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003ehead: metadatos y recursos necesarios para cargar el proyecto. \u003c/li\u003e\\n\u003cli\u003eheader: encabezado visible; suele incluir logotipo, título y barra de navegación. \u003c/li\u003e\\n\u003cli\u003enav: la navegación principal; se implementa con una \u003cem\u003eunorganized list\u003c/em\u003e (ul), \u003cem\u003elist items\u003c/em\u003e (li) y enlaces \u003cem\u003eanchor\u003c/em\u003e (a). \u003c/li\u003e\\n\u003cli\u003emain: contenido relevante que el usuario viene a consumir. \u003c/li\u003e\\n\u003cli\u003esection: agrupa bloques temáticos dentro del main. \u003c/li\u003e\\n\u003cli\u003earticle: pieza de contenido independiente, como entradas de un blog. \u003c/li\u003e\\n\u003cli\u003easide: barra lateral que complementa o filtra el contenido principal. \u003c/li\u003e\\n\u003cli\u003efooter: cierre con información secundaria, como derechos o enlaces menos densos. \u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003eConsejos prácticos:\\n- Usa \u003cstrong\u003eetiquetas semánticas\u003c/strong\u003e para que cualquier integrante del equipo identifique rápido la sección que debe modificar. \\n- Mantén la navegación en nav para que lectores de pantalla y buscadores la detecten con precisión. \\n- Inserta contenidos repetibles en article y organízalos por section cuando corresponda. \u003c/p\u003e\\n\u003ch2\u003e¿Cómo mejora la accesibilidad y el SEO con semántica?\u003c/h2\u003e\\n\u003cp\u003eLa semántica crea un mapa comprensible del contenido para tecnologías de asistencia y motores de búsqueda.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eAccesibilidad: lectores de pantalla anuncian secciones como header, nav, main y footer, guiando la lectura. \u003c/li\u003e\\n\u003cli\u003eSEO: Google indexa mejor páginas con estructura clara, lo que optimiza la posibilidad de aparecer ante búsquedas relevantes. \u003c/li\u003e\\n\u003cli\u003eMantenibilidad: el equipo entiende dónde está cada parte del proyecto al leer el HTML. \u003c/li\u003e\\n\u003cli\u003eFuturo con CSS: podrás \u003cstrong\u003eaplicar estilos\u003c/strong\u003e apuntando a secciones específicas con precisión. \u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003e¿Tienes dudas sobre cómo organizar tu estructura semántica o tu menú de navegación? Comparte tus preguntas y ejemplos para revisarlos juntos.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false}],\"quiz\":{\"id\":31714,\"active\":true,\"title\":\"quiz de Listas y Enlaces\"}},{\"id\":24622,\"title\":\"Formularios y Tablas\",\"materials\":[{\"id\":84733,\"title\":\"Formularios HTML con validación nativa del navegador\",\"url\":\"https://platzi.com/cursos/html/formularios-html-con-validacion-nativa-d/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thu"])</script><script>self.__next_f.push([1,"mbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1d8c6a2459b36e85d621_68dc1d8c6a2459b36e85d635_94s.jpg\",\"duration\":940,\"index\":8,\"content\":\"\u003cp\u003eLos formularios en HTML son la vía directa para que una persona comparta datos con un proyecto web. Con una estructura correcta, el navegador ofrece autocompletado y validación nativa que simplifican el llenado y mejoran la experiencia, desde un \u003cem\u003elogin\u003c/em\u003e hasta un comentario en una red social.\u003c/p\u003e\\n\u003ch2\u003e¿Por qué los formularios son la base de la interacción en HTML?\u003c/h2\u003e\\n\u003cp\u003eLos formularios permiten enviar información al servidor para ejecutar acciones concretas. Ejemplos como iniciar sesión o comentar un contenido dependen de esta estructura. Además, el navegador puede ayudar con el autocompletado y ciertas validaciones si usamos las etiquetas y atributos adecuados.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eEvita formularios largos sin guardado intermedio: generan frustración.\u003c/li\u003e\\n\u003cli\u003eDiseña formularios sencillos y claros: mejor experiencia.\u003c/li\u003e\\n\u003cli\u003eAprovecha la validación nativa del navegador: menos código adicional.\u003c/li\u003e\\n\u003cli\u003eUsa estructura semántica y atributos correctos: autocompletado más efectivo.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo estructurar un formulario con form, action y method?\u003c/h2\u003e\\n\u003cp\u003eLa etiqueta \u003ccode\u003eform\u003c/code\u003e no es decorativa: informa al navegador que habrá interacción y activa funciones útiles. Define dos atributos clave: \u003cstrong\u003eaction\u003c/strong\u003e indica a dónde se envían los datos y \u003cstrong\u003emethod\u003c/strong\u003e define cómo se envían usando verbos HTTP como \u003cem\u003eget\u003c/em\u003e y \u003cem\u003epost\u003c/em\u003e.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eform\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eaction\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003emethod\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;post\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- Campos del formulario --\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eform\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003eaction\u003c/strong\u003e: destino de los datos; puede ser una URL o un \u003cem\u003eendpoint\u003c/em\u003e de un \u003cem\u003eAPI\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003emethod\u003c/strong\u003e: forma de envío; se usan verbos HTTP como \u003cem\u003eget\u003c/em\u003e y \u003cem\u003epost\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003ePresionar Enter o un botón de envío intenta enviar el formulario.\u003c/li\u003e\\n\u003cli\u003eUsar \u003ccode\u003eform\u003c/code\u003e habilita validaciones del navegador en campos como correos.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo enviar los datos con un botón submit?\u003c/h3\u003e\\n\u003cp\u003eEl formulario se completa con un botón de tipo \u003ccode\u003esubmit\u003c/code\u003e, que dispara el envío al destino definido en \u003ccode\u003eaction\u003c/code\u003e usando el \u003ccode\u003emethod\u003c/code\u003e indicado.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebutton\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;submit\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eEnviar\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebutton\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\u003ccode\u003etype=\\\"submit\\\"\u003c/code\u003e: indica que el botón envía el formulario.\u003c/li\u003e\\n\u003cli\u003eSi \u003ccode\u003eaction\u003c/code\u003e es \u003ccode\u003e#\u003c/code\u003e, la página se refresca sin una acción real.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo etiquetar y capturar datos con label, input y textarea?\u003c/h2\u003e\\n\u003cp\u003ePara mejorar la accesibilidad, el autocompletado y el envío correcto, se combinan \u003ccode\u003elabel\u003c/code\u003e, \u003ccode\u003einput\u003c/code\u003e y, cuando corresponde, \u003ccode\u003etextarea\u003c/code\u003e. La clave es vincular cada \u003ccode\u003elabel\u003c/code\u003e con su campo y nombrar adecuadamente los datos que se enviarán.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo vincular label e input con for e id?\u003c/h3\u003e\\n\u003cp\u003e\u003ccode\u003elabel\u003c/code\u003e describe el propósito del campo y se asocia al \u003ccode\u003einput\u003c/code\u003e mediante \u003ccode\u003efor\u003c/code\u003e e \u003ccode\u003eid\u003c/code\u003e iguales. Así, un clic en la etiqueta activa el campo y el navegador reconoce mejor el dato.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\"])</script><script>self.__next_f.push([1,"\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;nombre\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eNombre:\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;nombre\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;nombre\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\u003ccode\u003efor\u003c/code\u003e en \u003ccode\u003elabel\u003c/code\u003e debe coincidir con el \u003ccode\u003eid\u003c/code\u003e del \u003ccode\u003einput\u003c/code\u003e.\u003c/li\u003e\\n\u003cli\u003e\u003ccode\u003ename\u003c/code\u003e define la clave con la que el dato viaja al servidor.\u003c/li\u003e\\n\u003cli\u003e\u003ccode\u003ediv\u003c/code\u003e puede usarse como contenedor para separar campos cuando no hay una etiqueta semántica específica.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo capturar correos con input type=email?\u003c/h3\u003e\\n\u003cp\u003ePara correos, el navegador ofrece validación básica y autocompletado cuando el \u003ccode\u003einput\u003c/code\u003e usa \u003ccode\u003etype=\\\"email\\\"\u003c/code\u003e y está correctamente etiquetado.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;email\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eCorreo electrónico:\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;email\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;email\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;email\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\u003ccode\u003etype=\\\"email\\\"\u003c/code\u003e: activa validaciones nativas para formato de correo.\u003c/li\u003e\\n\u003cli\u003eCon datos guardados, el navegador sugiere completar el campo.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cuándo usar textarea con filas y columnas?\u003c/h3\u003e\\n\u003cp\u003eCuando se requiere texto largo (por ejemplo, un mensaje), \u003ccode\u003etextarea\u003c/code\u003e ofrece un área ampliada y redimensionable. Se vincula igual que un \u003ccode\u003einput\u003c/code\u003e con \u003ccode\u003elabel\u003c/code\u003e.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;mensaje\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMensaje:\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etextarea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;mensaje\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;mensaje\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erows\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;4\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ecols\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;40\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etextarea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\u003ccode\u003erows\u003c/code\u003e y \u003ccode\u003ecols\u003c/code\u003e: altura y ancho iniciales visibles.\u003c/li\u003e\\n\u003cli\u003ePermite saltos de línea y mayor comodidad al escribir textos extensos.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eform\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eaction\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#\u0026quot;\u003c/"])</script><script>self.__next_f.push([1,"span\u003e \u003cspan class=\\\"na\\\"\u003emethod\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;post\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;nombre\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eNombre:\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;nombre\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;nombre\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;email\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eCorreo electrónico:\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;email\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;email\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;email\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;mensaje\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMensaje:\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etextarea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;mensaje\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;mensaje\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erows\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;4\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ecols\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;40\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etextarea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebutton\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;submit\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eEnviar\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebutton\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eform\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eCombina \u003ccode\u003eform\u003c/code\u003e con \u003ccode\u003eaction\u003c/code\u003e y \u003ccode\u003emethod\u003c/code\u003e para definir destino y envío.\u003c/li\u003e\\n\u003cli\u003eVincula \u003ccode\u003elabel\u003c/code\u003e y campos con \u003ccode\u003efor\u003c/code\u003e/\u003ccode\u003eid\u003c/code\u003e y nombra datos con \u003ccode\u003ename\u003c/code\u003e.\u003c/li\u003e\\n\u003cli\u003eCierra con \u003ccode\u003ebutton type=\\\"submit\\\"\u003c/code\u003e para enviar al servidor.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003e¿Tienes dudas sobre qué campos pedir o cómo nombrarlos con \u003ccode\u003ename\u003c/code\u003e para tu \u003cem\u003eendpoint\u003c/em\u003e de \u003cem\u003elogin\u003c/em\u003e o un comentario? Comparte tu caso en los comentarios y afinamos la estructura juntos.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false},{\"id\":84734,\"title\":\"Tipos de inputs HTML para formularios avanzados\",\"url\":\"https://platzi.com/cursos/html/tipos-de-inputs-html-para-formularios-av/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/"])</script><script>self.__next_f.push([1,"thumb_68dc1d8794db30b44237a203_68dc1d8794db30b44237a217_85s.jpg\",\"duration\":853,\"index\":9,\"content\":\"\u003cp\u003eAprende a ampliar y validar datos en formularios HTML con inputs nativos y buenas prácticas. Aquí verás cómo usar password, number con min y max, date con calendario, color con selector y radio agrupado con \u003cem\u003efieldset\u003c/em\u003e y \u003cem\u003elegend\u003c/em\u003e. Todo con etiquetas label, for, id y name bien enlazadas para accesibilidad y envío correcto.\u003c/p\u003e\\n\u003ch2\u003e¿Qué inputs de formulario amplían la recolección de datos?\u003c/h2\u003e\\n\u003cp\u003eLos inputs adecuados mejoran la experiencia y la calidad de los datos. Con HTML puedes pedir contraseñas con privacidad, números validados, fechas con calendario y colores con un selector visual.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo capturar contraseñas con privacidad?\u003c/h3\u003e\\n\u003cp\u003eEl input type=\\\"password\\\" oculta los caracteres con puntos o asteriscos. Es una mejora de \u003cstrong\u003eprivacidad\u003c/strong\u003e, no de \u003cstrong\u003eseguridad\u003c/strong\u003e. La seguridad depende de enviar por \u003cstrong\u003eHTTPS\u003c/strong\u003e.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eUsa label, for, id y name para accesibilidad y envío correcto.\u003c/li\u003e\\n\u003cli\u003eLos navegadores y el \u003cem\u003epassword manager\u003c/em\u003e pueden sugerir autocompletado.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eform\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003emethod\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;post\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eaction\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;password\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eContraseña:\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;password\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;password\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;password\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eform\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch3\u003e¿Cómo pedir colores con un selector nativo?\u003c/h3\u003e\\n\u003cp\u003eEl input type=\\\"color\\\" abre un \u003cem\u003ecolor picker\u003c/em\u003e para elegir un valor hexadecimal.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;color\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eColor:\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;color\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;color\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;color\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eSelección visual y precisa del color.\u003c/li\u003e\\n\u003cli\u003eEnvío directo del valor al servidor.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo validar números y fechas en HTML sin complicarse?\u003c/h2\u003e\\n\u003cp\u003ePara datos numéricos y fechas, los inputs nativos aportan validación y controles del navegador. Evitas errores comunes y mejoras la usabilidad.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo limitar rangos con min y max?\u003c/h3\u003e\\n\u003cp\u003eCon type=\\\"number\\\" puedes aceptar solo números y definir límites con min y max. Útil, por ejemplo, para una \u003cstr"])</script><script>self.__next_f.push([1,"ong\u003eedad\u003c/strong\u003e entre 18 y 70.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;edad\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eEdad:\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;number\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;edad\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;edad\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003emin\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;18\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003emax\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;70\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eSolo valores numéricos válidos.\u003c/li\u003e\\n\u003cli\u003eImpide bajar de 18 o subir de 70.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo seleccionar fechas con el calendario nativo?\u003c/h3\u003e\\n\u003cp\u003eEl input type=\\\"date\\\" muestra un calendario para elegir día, mes y año.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;fecha\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eFecha:\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;date\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;fecha\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;fecha\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eReduce errores de formato de fecha.\u003c/li\u003e\\n\u003cli\u003eInterfaz familiar del navegador.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo agrupar opciones con radio para enviar un solo valor?\u003c/h2\u003e\\n\u003cp\u003eCuando hay varias opciones y solo una respuesta válida, usa type=\\\"radio\\\" con el mismo name para cada opción. Agrupa semánticamente con \u003cem\u003efieldset\u003c/em\u003e y titula el grupo con \u003cem\u003elegend\u003c/em\u003e.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efieldset\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elegend\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eGénero\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elegend\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;radio\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;masculino\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;genero\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003evalue\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;M\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;masculino\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMasculino\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;radio\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;femenino\u0026quot;\u003c/span\u003e \u003c"])</script><script>self.__next_f.push([1,"span class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;genero\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003evalue\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;F\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;femenino\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eFemenino\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efieldset\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eEl mismo name garantiza que solo se seleccione una opción.\u003c/li\u003e\\n\u003cli\u003eEl atributo value envía el dato útil: M o F.\u003c/li\u003e\\n\u003cli\u003e\u003cem\u003eFieldset\u003c/em\u003e y \u003cem\u003elegend\u003c/em\u003e agrupan y describen el conjunto de opciones.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003eConsejos rápidos.\\n- Usa name para definir cómo viaja el dato al servidor.\\n- Enlaza label con for y el id correspondiente.\\n- Recuerda: el input password mejora la privacidad visual, pero la seguridad exige usar \u003cstrong\u003eHTTPS\u003c/strong\u003e.\u003c/p\u003e\\n\u003cp\u003e¿Quieres practicar con \u003cem\u003echeckbox\u003c/em\u003e y listas de \u003cem\u003eoptions\u003c/em\u003e para países u otras categorías? Comenta qué casos de uso tienes y qué inputs necesitas implementar.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false},{\"id\":84735,\"title\":\"Checkbox y select en formularios HTML\",\"url\":\"https://platzi.com/cursos/html/checkbox-y-select-en-formularios-html/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1d79bc24ceb871a97b0e_68dc1d7abc24ceb871a97b22_38s.jpg\",\"duration\":382,\"index\":10,\"content\":\"\u003cp\u003eLos formularios en HTML pueden ser más claros y fáciles de completar si agrupas opciones correctamente y defines bien cómo se envían los datos. Aquí aprenderás a usar \u003cstrong\u003einputs tipo \u003cem\u003echeckbox\u003c/em\u003e\u003c/strong\u003e para múltiples selecciones y la etiqueta \u003cstrong\u003eselect con \u003cem\u003eoption\u003c/em\u003e\u003c/strong\u003e para listas desplegables, conectando todo con \u003cem\u003elabel\u003c/em\u003e, \u003cem\u003ename\u003c/em\u003e, \u003cem\u003eid\u003c/em\u003e y \u003cem\u003evalue\u003c/em\u003e para que el servidor reciba exactamente lo que necesitas.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo usar checkbox con fieldset y label en HTML?\u003c/h2\u003e\\n\u003cp\u003eAgrupa opciones relacionadas con un \u003cstrong\u003e\u003cfieldset\u003e\u003c/strong\u003e y titúlalas con \u003cstrong\u003e\u003clegend\u003e\u003c/strong\u003e. Los \u003cem\u003echeckbox\u003c/em\u003e permiten elegir \u003cstrong\u003emás de una opción\u003c/strong\u003e (a diferencia de los \u003cem\u003eradio buttons\u003c/em\u003e). Usa el mismo atributo \u003cstrong\u003ename\u003c/strong\u003e para todas las casillas del grupo y un \u003cstrong\u003evalue\u003c/strong\u003e distinto por opción para identificar qué se seleccionó. Vincula cada casilla con su \u003cstrong\u003elabel\u003c/strong\u003e mediante \u003cstrong\u003eid\u003c/strong\u003e y \u003cstrong\u003efor\u003c/strong\u003e para mejorar accesibilidad y clicabilidad.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003eMúltiple selección\u003c/strong\u003e con \u003cem\u003echeckbox\u003c/em\u003e del mismo name.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eAgrupación semántica\u003c/strong\u003e con \u003cem\u003efieldset\u003c/em\u003e y \u003cem\u003elegend\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eAsociación accesible\u003c/strong\u003e: \u003cem\u003elabel\u003c/em\u003e for ↔ \u003cem\u003eid\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eEnvío claro\u003c/strong\u003e al servidor: usa \u003cem\u003evalue\u003c/em\u003e específico por opción.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efieldset\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elegend\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eIntereses\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elegend\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;checkbox\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;intereses\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;deportes\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003evalue\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;deportes\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor"])</script><script>self.__next_f.push([1,"\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;deportes\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eDeportes\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;checkbox\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;intereses\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;musica\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003evalue\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;música\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;musica\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMúsica\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efieldset\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch3\u003e¿Qué datos se envían con name y value?\u003c/h3\u003e\\n\u003cp\u003eAl enviar el formulario, el servidor recibe un par por cada opción marcada. Con el ejemplo anterior, si se marcan ambas, se envía: \u003cstrong\u003eintereses=deportes\u003c/strong\u003e e \u003cstrong\u003eintereses=música\u003c/strong\u003e. Así se conserva la agrupación y se conocen las selecciones exactas.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo crear una lista desplegable con select y option?\u003c/h2\u003e\\n\u003cp\u003eCuando necesitas que la persona elija una sola alternativa de una lista (por ejemplo, \u003cstrong\u003ePaís\u003c/strong\u003e), utiliza \u003cstrong\u003e\u003cselect\u003e\u003c/strong\u003e. Esta etiqueta contenedora incluye varias \u003cstrong\u003e\u003coption\u003e\u003c/strong\u003e, donde el texto visible puede coincidir con el \u003cstrong\u003evalue\u003c/strong\u003e que se enviará. Conecta el \u003cem\u003elabel\u003c/em\u003e al \u003cem\u003eselect\u003c/em\u003e con \u003cem\u003eid\u003c/em\u003e y usa \u003cem\u003ename\u003c/em\u003e para el campo que recibirá el servidor.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003eSelect es contenedor\u003c/strong\u003e: incluye múltiples \u003cem\u003eoption\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eOption define\u003c/strong\u003e el \u003cem\u003evalue\u003c/em\u003e que viaja al servidor.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eLabel asociado\u003c/strong\u003e mejora la usabilidad.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eDiv como contenedor comodín\u003c/strong\u003e cuando no hay \u003cem\u003efieldset\u003c/em\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;pais\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003ePaís\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eselect\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;pais\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;pais\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eoption\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003evalue\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;México\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMéxico\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eoption\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eoption\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003evalue\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Colombia\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eColombia\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eoption\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eoption\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003evalue\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Argentina\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eArgentina\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eoption\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eselect\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003c"])</script><script>self.__next_f.push([1,"h3\u003e¿Qué diferencia hay con inputs al agrupar datos?\u003c/h3\u003e\\n\u003cp\u003eCon \u003cem\u003echeckbox\u003c/em\u003e, usas el mismo \u003cstrong\u003ename\u003c/strong\u003e para varias casillas y cambias \u003cstrong\u003evalue\u003c/strong\u003e por opción, permitiendo múltiples selecciones. Con \u003cstrong\u003eselect\u003c/strong\u003e, eliges una sola \u003cstrong\u003eoption\u003c/strong\u003e por defecto, y se envía el \u003cstrong\u003ename\u003c/strong\u003e del select con el \u003cstrong\u003evalue\u003c/strong\u003e de la opción elegida.\u003c/p\u003e\\n\u003ch2\u003e¿Qué rol jugarán las validaciones del navegador?\u003c/h2\u003e\\n\u003cp\u003eSe menciona que el navegador puede \u003cstrong\u003eayudar con validaciones\u003c/strong\u003e para hacer los formularios más seguros y fáciles de rellenar. Esto complementa el uso correcto de \u003cem\u003echeckbox\u003c/em\u003e, \u003cem\u003eselect\u003c/em\u003e, \u003cem\u003elabel\u003c/em\u003e, \u003cem\u003ename\u003c/em\u003e, \u003cem\u003eid\u003c/em\u003e y \u003cem\u003evalue\u003c/em\u003e para una experiencia completa.\u003c/p\u003e\\n\u003cp\u003e¿Te gustaría ver más ejemplos con validaciones nativas y personalizadas? Deja tus preguntas y comenta qué casos te gustaría cubrir.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false},{\"id\":84736,\"title\":\"Validaciones de formularios HTML con atributos nativos\",\"url\":\"https://platzi.com/cursos/html/validaciones-de-formularios-html-con-atr/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1d84af2b38b3b2b59d1c_68dc1d84af2b38b3b2b59d30_73s.jpg\",\"duration\":731,\"index\":11,\"content\":\"\u003cp\u003eCrear formularios confiables empieza por dominar las validaciones nativas de HTML. Con atributos como \u003cstrong\u003erequire\u003c/strong\u003e, \u003cstrong\u003eplaceholder\u003c/strong\u003e, \u003cstrong\u003epattern\u003c/strong\u003e, \u003cstrong\u003emin\u003c/strong\u003e, \u003cstrong\u003emax\u003c/strong\u003e, \u003cstrong\u003estep\u003c/strong\u003e y \u003cstrong\u003emin length\u003c/strong\u003e, el navegador hace gran parte del trabajo por ti, asegurando datos completos y con el formato correcto.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo validar formularios HTML con atributos nativos?\u003c/h2\u003e\\n\u003cp\u003eUsar la \u003cstrong\u003eetiqueta form\u003c/strong\u003e y los tipos de input adecuados activa \u003cstrong\u003evalidaciones del navegador\u003c/strong\u003e que evitan envíos incompletos o con formatos inválidos. Así reduces errores y mejoras la experiencia desde el primer intento.\u003c/p\u003e\\n\u003ch3\u003e¿Qué hace el navegador al usar form y tipos de input?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eComprueba formato de \u003cstrong\u003eemail\u003c/strong\u003e al enviar: falta de arroba dispara un aviso.\u003c/li\u003e\\n\u003cli\u003eMuestra mensajes contextuales cuando algo no coincide con lo esperado.\u003c/li\u003e\\n\u003cli\u003eImpide el envío si un campo \u003cstrong\u003erequire\u003c/strong\u003e está vacío.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003eEjemplo de correo con guía visual usando \u003cstrong\u003eplaceholder\u003c/strong\u003e y obligatoriedad con \u003cstrong\u003erequire\u003c/strong\u003e:\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;email\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;correo\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;correo\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003erequired\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eplaceholder\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;usuario@ejemplos.com\u0026quot;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003ePuntos clave:\\n- \u003cstrong\u003erequire\u003c/strong\u003e obliga a completar el campo antes de enviar.\\n- \u003cstrong\u003eplaceholder\u003c/strong\u003e muestra el formato esperado (por ejemplo, usuario@ejemplos.com).\\n- El navegador valida el patrón básico del correo al momento de enviar.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo restringir un teléfono con pattern y expresión regular?\u003c/h3\u003e\\n\u003cp\u003ePara evitar texto en un teléfono, usa \u003cstrong\u003epattern\u003c/strong\u003e con una \u003cstrong\u003eexpresión regular\u003c/strong\u003e que permita solo dígitos y una longitud exacta.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;text\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;telefono\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;telefono\u0026quot;"])</script><script>self.__next_f.push([1,"\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Ingresa nueve dígitos\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eplaceholder\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;000000000\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003epattern\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;[0-9]{9}\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003erequired\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eClaves prácticas:\\n- \u003ccode\u003e[0-9]{9}\u003c/code\u003e indica: solo números del 0 al 9 y exactamente 9 caracteres.\\n- \u003cstrong\u003etitle\u003c/strong\u003e muestra una pista al pasar el cursor: “Ingresa nueve dígitos”.\\n- Si el valor no hace “match” con el \u003cstrong\u003epattern\u003c/strong\u003e, el navegador bloquea el envío.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo limitar números, fechas y contraseñas con min, max, step y min length?\u003c/h2\u003e\\n\u003cp\u003eControlar rangos y longitudes evita valores fuera de regla. Con \u003cstrong\u003emin\u003c/strong\u003e, \u003cstrong\u003emax\u003c/strong\u003e, \u003cstrong\u003estep\u003c/strong\u003e y \u003cstrong\u003emin length\u003c/strong\u003e puedes definir límites claros sin JavaScript adicional.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo controlar cantidad con number, min, max y step?\u003c/h3\u003e\\n\u003cp\u003ePara cantidades numéricas, el input de número ya valida que no haya letras. Además, puedes acotar rango y saltos:\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;number\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;cantidad\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;cantidad\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003emin\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;1\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003emax\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;100\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003estep\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;5\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003evalue\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;10\u0026quot;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eBuenas prácticas:\\n- \u003cstrong\u003emin\u003c/strong\u003e y \u003cstrong\u003emax\u003c/strong\u003e fijan el rango permitido (ejemplo: del 1 al 100).\\n- \u003cstrong\u003estep\u003c/strong\u003e define saltos (ejemplo: 1, 6, 11, 16...).\\n- El \u003cstrong\u003evalue\u003c/strong\u003e enviado corresponde al número seleccionado; puede sincronizarse con JavaScript si es necesario.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo acotar fechas con date, min y max?\u003c/h3\u003e\\n\u003cp\u003eLimita el calendario a un período válido usando \u003cstrong\u003emin\u003c/strong\u003e y \u003cstrong\u003emax\u003c/strong\u003e. Útil para rangos de edad o periodos de registro.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;date\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;fecha\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;fecha\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003emin\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;2024-01-01\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003emax\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;2024-12-31\u0026quot;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eVentajas:\\n- Solo se puede seleccionar dentro del rango definido.\\n- El calendario inicia en el mínimo y bloquea años fuera del intervalo.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo fortalecer contraseñas con require y min length?\u003c/h3\u003e\\n\u003cp\u003ePara forzar contraseñas más robustas, combina obligatoriedad y longitud mínima.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;password\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;contrasena\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;contrasena\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003erequ"])</script><script>self.__next_f.push([1,"ired\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eminlength\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;8\u0026quot;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eAspectos clave:\\n- \u003cstrong\u003erequire\u003c/strong\u003e evita que quede vacío.\\n- \u003cstrong\u003emin length\u003c/strong\u003e de 8 caracteres impide claves demasiado cortas.\\n- Al intentar enviar con menos de 8, el navegador muestra el error correspondiente.\u003c/p\u003e\\n\u003cp\u003e¿Tienes otros patrones útiles o rangos que te funcionen mejor en tus formularios? Comparte ejemplos y dudas en los comentarios.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false},{\"id\":84737,\"title\":\"Estructura de tablas HTML con thead, tbody y tfoot\",\"url\":\"https://platzi.com/cursos/html/estructura-de-tablas-html-con-thead-tbod/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1d850b0985b9c734ef66_68dc1d850b0985b9c734ef7a_50s.jpg\",\"duration\":504,\"index\":12,\"content\":\"\u003cp\u003eAprende a construir \u003cstrong\u003etablas HTML semánticas\u003c/strong\u003e paso a paso: usa el contenedor table, organiza encabezados con thead, datos con tbody y totales con tfoot. Define filas con tr, títulos con th y celdas con td. Aprovecha colspan para combinar columnas y mostrar un total claro.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo crear una tabla HTML semántica?\u003c/h2\u003e\\n\u003cp\u003eLas tablas fueron clave en los inicios de HTML para dar formato, pero hoy se reservan para \u003cstrong\u003emostrar datos estructurados\u003c/strong\u003e. Aun así, siguen siendo útiles cuando necesitas \u003cstrong\u003ecolumnas, filas y encabezados\u003c/strong\u003e bien definidos. La semántica correcta mejora la claridad del código y el mantenimiento.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eUsa la etiqueta table como contenedor principal.\u003c/li\u003e\\n\u003cli\u003eCrea una fila tr con th para los encabezados.\u003c/li\u003e\\n\u003cli\u003eEnvuelve los encabezados en thead.\u003c/li\u003e\\n\u003cli\u003eColoca el contenido en tbody con td.\u003c/li\u003e\\n\u003cli\u003eCierra con tfoot para el total o resumen.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etable\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ethead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etr\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eth\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eProducto\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eth\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eth\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003ePrecio\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eth\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eth\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eCantidad\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eth\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etr\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ethead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etbody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etr\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eLaptop\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e45 USD\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e2\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etr\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etr\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMouse\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan clas"])</script><script>self.__next_f.push([1,"s=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e12 USD\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e5\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etr\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etr\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eTeclado\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e10 USD\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e3\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etd\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etr\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etbody\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etfoot\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etr\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eth\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eTotal\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eth\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eth\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ecolspan\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;2\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e67 USD\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eth\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etr\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etfoot\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etable\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch2\u003e¿Qué etiquetas y atributos usar en tablas?\u003c/h2\u003e\\n\u003cp\u003eLa estructura semántica divide el contenido en \u003cstrong\u003ethead, tbody y tfoot\u003c/strong\u003e. Las \u003cstrong\u003efilas\u003c/strong\u003e se crean con tr y, dentro de ellas, usas th para encabezados y td para datos. La tabla alinea columnas de forma automática y suele mostrar \u003cstrong\u003eseparadores por defecto\u003c/strong\u003e, lo que facilita la lectura incluso sin estilos.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo definir encabezados y filas?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eCrea una fila tr inicial para los encabezados.\u003c/li\u003e\\n\u003cli\u003eUsa th para marcar títulos como Producto, Precio y Cantidad.\u003c/li\u003e\\n\u003cli\u003eAñade más filas con tr para cada producto.\u003c/li\u003e\\n\u003cli\u003eInserta datos con td en el mismo orden de los encabezados.\u003c/li\u003e\\n\u003cli\u003eRecuerda: tr es la \u003cem\u003etable row\u003c/em\u003e, th es el \u003cem\u003etable head\u003c/em\u003e y td es la \u003cem\u003etable data\u003c/em\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo mostrar datos y totales con colspan?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eColoca el resumen en tfoot para separar visualmente el total.\u003c/li\u003e\\n\u003cli\u003eUsa th también en el pie para resaltar el total en \u003cstrong\u003enegritas\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eAplica el atributo colspan=\\\"2\\\" cuando una celda deba ocupar dos columnas.\u003c/li\u003e\\n\u003cli\u003eEjemplo: Total y 67 USD ocupando dos columnas para alinear con Precio y Cantidad.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Qué flujo práctico seguir al construir la tabla?\u003c/h2\u003e\\n\u003cp\u003eEmpieza por el contenedor table, suma thead con encabezados claros, agrega tbody con filas de datos reales y cierra con tfoot para el total. En el ejemplo, se cargan productos como Laptop, Mouse y Teclado, con precios en USD y cantidades que pueden considerarse \u003cem\u003estock\u003c/em\u003e disponible. Al avanzar, el navegador muestra alineación y separadores sin necesidad de estilos adicionales.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eDefine columnas primero: encabezados en thead.\u003c/li\u003e\\n\u003cli\u003eInserta filas en tbody con el mismo orden de columnas.\u003c/li"])</script><script>self.__next_f.push([1,"\u003e\\n\u003cli\u003eCalcula y muestra el total en tfoot con colspan cuando corresponda.\u003c/li\u003e\\n\u003cli\u003eAprovecha la semántica para mantener el código claro y escalable.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003e¿Tienes dudas o quieres compartir tu ejemplo de tabla con thead, tbody, tfoot y colspan? Comenta y conversemos.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false}],\"quiz\":{\"id\":31715,\"active\":true,\"title\":\"quiz de Formularios y Tablas\"}},{\"id\":24623,\"title\":\"Contenido Multimedia\",\"materials\":[{\"id\":84738,\"title\":\"Imágenes responsivas con srcset y picture para mejor rendimiento\",\"url\":\"https://platzi.com/cursos/html/imagenes-responsivas-con-srcset-y-pictur/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1d96f77365b4cb2d588e_68dc1d96f77365b4cb2d58a2_140s.jpg\",\"duration\":1399,\"index\":13,\"content\":\"\u003cp\u003eOptimiza tus páginas con \u003cstrong\u003eimágenes responsivas\u003c/strong\u003e que cargan rápido, mantienen la \u003cstrong\u003eaccesibilidad\u003c/strong\u003e y mejoran la \u003cstrong\u003eexperiencia de usuario\u003c/strong\u003e. Aquí verás cómo usar img con srcset y sizes, cuándo elegir picture y cómo sumar atributos de \u003cstrong\u003erendimiento\u003c/strong\u003e como loading lazy y decoding async para un \u003cem\u003eresponsive design\u003c/em\u003e sólido.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo usar imágenes responsivas con img y srcset?\u003c/h2\u003e\\n\u003cp\u003eLa etiqueta img es la base para mostrar fotografías en la web. Con \u003cstrong\u003esrcset\u003c/strong\u003e indicas varias versiones por ancho y con \u003cstrong\u003esizes\u003c/strong\u003e describes cómo se mostrará según el \u003cem\u003eviewport\u003c/em\u003e. El \u003cstrong\u003enavegador decide\u003c/strong\u003e qué archivo descargar según el ancho disponible y tus reglas.\u003c/p\u003e\\n\u003ch3\u003e¿Qué rol cumplen src y alt en accesibilidad?\u003c/h3\u003e\\n\u003cp\u003eEl atributo src apunta al archivo, y \u003cstrong\u003ealt\u003c/strong\u003e ofrece una descripción breve si no carga o para lectores de pantalla.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eUsa descripciones claras y concisas.\u003c/li\u003e\\n\u003cli\u003eMejora la \u003cstrong\u003eaccesibilidad\u003c/strong\u003e y la comprensión del contenido.\u003c/li\u003e\\n\u003cli\u003eAporta contexto si la imagen falla.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo definir srcset por ancho?\u003c/h3\u003e\\n\u003cp\u003eEjemplo con variantes de un hero pensado para \u003cem\u003emobile\u003c/em\u003e, \u003cem\u003etablet\u003c/em\u003e y \u003cem\u003edesktop\u003c/em\u003e:\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/hero-400.jpg\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Vista panorámica\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003esrcset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;\u003c/span\u003e\\n\u003cspan class=\\\"s\\\"\u003e img/hero-400.jpg 400w,\u003c/span\u003e\\n\u003cspan class=\\\"s\\\"\u003e img/hero-800.jpg 800w,\u003c/span\u003e\\n\u003cspan class=\\\"s\\\"\u003e img/hero-1200.jpg 1200w\u003c/span\u003e\\n\u003cspan class=\\\"s\\\"\u003e \u0026quot;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e400w, 800w, 1200w: anchos reales de cada archivo.\u003c/li\u003e\\n\u003cli\u003eEl navegador elige la más adecuada según el ancho disponible.\u003c/li\u003e\\n\u003cli\u003eBeneficio: \u003cstrong\u003emejor calidad con menor peso\u003c/strong\u003e en cada dispositivo.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo controlar el tamaño con sizes?\u003c/h3\u003e\\n\u003cp\u003eDescribe el espacio que ocupará la imagen según el ancho de pantalla. Ejemplo: 100 % hasta 600 px; luego 50 %.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/hero-400.jpg\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Vista panorámica\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003esrcset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;\u003c/span\u003e\\n\u003cspan class=\\\"s\\\"\u003e img/hero-400.jpg 400w,\u003c/span\u003e\\n\u003cspan class=\\\"s\\\"\u003e img/hero-800.jpg 800w,\u003c/span\u003e\\n\u003cspan class=\\\"s\\\"\u003e img/hero-1200.jpg 1200w\u003c/span\u003e\\n\u003cspan class=\\\"s\\\"\u003e \u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003esizes\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;(max-width: 600px) 100vw, 50vw\u0026quot;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e(max-width: 600px)"])</script><script>self.__next_f.push([1," 100vw: ocupa todo el ancho del \u003cem\u003eviewport\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003e50vw: a partir de 600 px, usa la mitad del \u003cem\u003eviewport\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003eBeneficio: \u003cstrong\u003edescargas más precisas\u003c/strong\u003e según el diseño efectivo.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cuándo aplicar picture y source con media queries?\u003c/h2\u003e\\n\u003cp\u003eCuando necesitas \u003cstrong\u003earchivos distintos por dispositivo\u003c/strong\u003e con reglas claras, usa picture con source y media. Define una imagen para \u003cem\u003edesktop/laptop\u003c/em\u003e, otra para \u003cem\u003etablet\u003c/em\u003e y una por defecto para \u003cem\u003emobile\u003c/em\u003e dentro de img.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo escribir reglas media para desktop y tablet?\u003c/h3\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003epicture\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esource\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003emedia\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;(min-width: 768px)\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrcset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/banner-desktop.jpg\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esource\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003emedia\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;(min-width: 480px)\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrcset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/banner-tablet-600x300.jpg\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/banner-mobile.jpg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Paisajes naturales\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003epicture\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e(min-width: 768px): carga la versión de \u003cstrong\u003edesktop/laptop\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003e(min-width: 480px): prioriza la versión \u003cstrong\u003etablet\u003c/strong\u003e si no se cumple la primera.\u003c/li\u003e\\n\u003cli\u003eFallback img: versión \u003cstrong\u003emobile\u003c/strong\u003e por defecto.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué imagen cargar por defecto en mobile?\u003c/h3\u003e\\n\u003cp\u003eDentro de picture, la etiqueta img es el \u003cstrong\u003efallback\u003c/strong\u003e. Coloca ahí la versión más ligera para \u003cem\u003emobile\u003c/em\u003e y agrega alt descriptivo.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eEn móviles, se usa la imagen por defecto.\u003c/li\u003e\\n\u003cli\u003eAl crecer el ancho, se activan los source según media.\u003c/li\u003e\\n\u003cli\u003eBeneficio: \u003cstrong\u003econtrol explícito\u003c/strong\u003e por dispositivo.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Qué atributos mejoran el rendimiento de imágenes?\u003c/h2\u003e\\n\u003cp\u003eAjusta la descarga y el procesamiento para mejorar la \u003cstrong\u003evelocidad\u003c/strong\u003e y la \u003cstrong\u003efluidez\u003c/strong\u003e. loading y decoding ayudan a evitar bloqueos; width y height evitan saltos de diseño.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo funcionan loading lazy y decoding async?\u003c/h3\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/producto-600.jpg\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Producto destacado\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003esrcset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;img/producto-300.jpg 300w, img/producto-600.jpg 600w\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003esizes\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;(max-width: 600px) 100vw, 600px\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eloading\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;lazy\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003edecoding\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;async\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003ewidth\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;600\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eheight\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;400\u0026quot;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eloading=\\\"lazy\\\": descarga \u003cstrong\u003esolo cuando te acercas\u003c/strong\u003e al elemento al hacer scroll.\u003c/li\u003e\\n\u003cli\u003edecoding=\\\"async\\\": \u003cstrong\u003eproce"])</script><script>self.__next_f.push([1,"sa sin bloquear\u003c/strong\u003e el renderizado, manteniendo la página fluida.\u003c/li\u003e\\n\u003cli\u003eClave: mejora de \u003cstrong\u003eperformance\u003c/strong\u003e y percepción de velocidad.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Por qué definir width y height?\u003c/h3\u003e\\n\u003cp\u003eEstablecer dimensiones evita cambios de layout inesperados mientras las imágenes cargan.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003ewidth y height reservan espacio exacto.\u003c/li\u003e\\n\u003cli\u003eMenos reflujo y mejor \u003cstrong\u003eexperiencia de usuario\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eCoherencia en diseños \u003cem\u003eresponsive\u003c/em\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003eHabilidades y conceptos que pones en práctica:\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eConfigurar img con src, alt, srcset y sizes.\u003c/li\u003e\\n\u003cli\u003eUsar picture y source con media para \u003cem\u003edesktop\u003c/em\u003e, \u003cem\u003etablet\u003c/em\u003e y \u003cem\u003emobile\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003eAplicar loading lazy y decoding async para mejor \u003cstrong\u003erendimiento\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eDiseñar reglas por ancho real del dispositivo y del \u003cem\u003eviewport\u003c/em\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003e¿Te gustaría ver un ejemplo con tus propias imágenes y breakpoints? Cuéntame tu caso en los comentarios y lo afinamos juntos.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false},{\"id\":84739,\"title\":\"Integración de video y audio en HTML5 con controles y compatibilidad\",\"url\":\"https://platzi.com/cursos/html/integracion-de-video-y-audio-en-html5-co/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1e3c24246306a24ffbc8_68dc1e3c24246306a24ffbdc_105s.jpg\",\"duration\":1054,\"index\":14,\"content\":\"\u003cp\u003eAprende a integrar videos y audios en HTML5 con buenas prácticas, accesibilidad y rendimiento. Aquí verás cómo usar etiquetas, atributos clave y compatibilidad de formatos para que tus usuarios disfruten una experiencia fluida y confiable.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo insertar videos HTML5 con controles y dimensiones?\u003c/h2\u003e\\n\u003cp\u003ePara empezar, la etiqueta \u003cvideo\u003e carga un archivo con el atributo src. Sin embargo, sin más atributos el video no tiene controles ni tamaño manejable. Agrega controles y dimensiones con los atributos adecuados.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- Variante sencilla --\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003evideo\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;multimedia/video.mp4\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtrols\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ewidth\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;600\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eheight\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;400\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003evideo\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eUsa el atributo \u003cstrong\u003econtrols\u003c/strong\u003e para mostrar el reproductor con play, pausa y barra de progreso.\u003c/li\u003e\\n\u003cli\u003eDefine \u003cstrong\u003ewidth\u003c/strong\u003e y \u003cstrong\u003eheight\u003c/strong\u003e para un tamaño manejable.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003ePara mejorar la carga y la percepción del usuario, utiliza \u003cstrong\u003eposter\u003c/strong\u003e y \u003cstrong\u003epreload\u003c/strong\u003e:\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003evideo\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtrols\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ewidth\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;600\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eheight\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;400\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eposter\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;IMG/banner.jpg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003epreload\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;metadata\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esource\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;multimedia/video.mp4\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;video/mp4\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esource\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;multimedia/video.mov\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\""])</script><script>self.__next_f.push([1,"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;video/mov\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n Tu navegador no soporta formatos de video.\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003evideo\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003eposter\u003c/strong\u003e: muestra una imagen previa mientras carga el video; mejora el rendimiento y la percepción de \u003cem\u003eperformance\u003c/em\u003e.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003epreload\u003c/strong\u003e: controla la precarga. Valores útiles: none (no carga nada), metadata (duración y dimensiones, aprox. 300 KB), auto (carga todo o lo posible antes del play).\u003c/li\u003e\\n\u003cli\u003eTexto por defecto: si ningún formato es soportado, aparece un mensaje claro para el usuario.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué formatos y etiquetas usar para compatibilidad?\u003c/h3\u003e\\n\u003cp\u003eNo todos los navegadores soportan lo mismo. \u003cstrong\u003eMP4\u003c/strong\u003e tiene amplio soporte; \u003cstrong\u003eMOV\u003c/strong\u003e no en todos; \u003cstrong\u003eWebM\u003c/strong\u003e suele estar bien soportado. La estrategia es delegar al navegador con múltiples \u003csource\u003e y \u003cstrong\u003etype\u003c/strong\u003e correcto.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eUsa \u003cstrong\u003e\u003csource\u003e\u003c/strong\u003e dentro de \u003cvideo\u003e para listar alternativas.\u003c/li\u003e\\n\u003cli\u003eEspecifica \u003cstrong\u003etype\u003c/strong\u003e como video/mp4, video/mov, etc., para que el navegador elija.\u003c/li\u003e\\n\u003cli\u003eSi no hay soporte, muestra un mensaje estándar en el contenido del \u003cvideo\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo reproducir audio con controles y múltiples formatos?\u003c/h2\u003e\\n\u003cp\u003eLa etiqueta \u003caudio\u003e funciona de forma similar a \u003cvideo\u003e. Sin controles, el audio puede no ser visible (por estilos como display: none). Agrega \u003cstrong\u003econtrols\u003c/strong\u003e para mostrar el reproductor y usa \u003cstrong\u003epreload\u003c/strong\u003e según necesidad de datos.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eaudio\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtrols\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003epreload\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;none\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esource\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;multimedia/audio.mp3\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;audio/mpeg\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n Tu navegador no soporta audio HTML5.\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eaudio\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003econtrols\u003c/strong\u003e: hace visible y usable el reproductor.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003epreload\u003c/strong\u003e: none para ahorrar datos móviles; auto para mejorar la sensación de carga.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003etype\u003c/strong\u003e en audio: para MP3 usa audio/mpeg.\u003c/li\u003e\\n\u003cli\u003eIgual que en video, puedes listar varios \u003csource\u003e (por ejemplo, OGG, MPG) para mayor compatibilidad.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo cuidar la experiencia del usuario y el rendimiento?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eDefine tamaño con \u003cstrong\u003ewidth\u003c/strong\u003e y \u003cstrong\u003eheight\u003c/strong\u003e para evitar saltos de diseño.\u003c/li\u003e\\n\u003cli\u003eMuestra \u003cstrong\u003eposter\u003c/strong\u003e para anticipar contenido y evitar pantallas en blanco.\u003c/li\u003e\\n\u003cli\u003eAjusta \u003cstrong\u003epreload\u003c/strong\u003e a tu contexto: none si quieres ahorrar datos; metadata como equilibrio; auto si necesitas inicios más rápidos.\u003c/li\u003e\\n\u003cli\u003eIncluye mensajes de fallback para accesibilidad y claridad.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo embeber videos de YouTube con \u003cem\u003eiframe\u003c/em\u003e y parámetros útiles?\u003c/h2\u003e\\n\u003cp\u003eYouTube ofrece un código de insertar desde Compartir \u0026gt; Embeber. Ese \u003cem\u003eiframe\u003c/em\u003e trae atributos clave para accesibilidad y control del reproductor. Puedes indicar el segundo de inicio con el parámetro \u003cem\u003estart\u003c/em\u003e.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eiframe\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;https://www.youtube.com/embed/VIDEO_ID?start=60\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Título descriptivo del video\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eframeborder\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e"])</script><script>self.__next_f.push([1,"=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;0\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eallow\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;autoplay; accelerometer\u0026quot;\u003c/span\u003e\\n \u003cspan class=\\\"na\\\"\u003eallowfullscreen\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eiframe\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003estart\u003c/strong\u003e: define el segundo inicial de reproducción (por ejemplo, 60).\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003etitle\u003c/strong\u003e: mejora accesibilidad y SEO; es lo que leen los lectores de pantalla.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eframeborder\u003c/strong\u003e: evita el borde del marco.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eallow\u003c/strong\u003e: habilita capacidades como \u003cem\u003eautoplay\u003c/em\u003e o acelerómetro en orientación.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eallowfullscreen\u003c/strong\u003e: permite ver en pantalla completa.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué buenas prácticas conviene aplicar?\u003c/h3\u003e\\n\u003cul\u003e\\n\u003cli\u003eOfrece varias fuentes con \u003cstrong\u003e\u003csource\u003e\u003c/strong\u003e y \u003cstrong\u003etype\u003c/strong\u003e correcto para video y audio.\u003c/li\u003e\\n\u003cli\u003eAgrega \u003cstrong\u003econtrols\u003c/strong\u003e siempre para usabilidad y accesibilidad.\u003c/li\u003e\\n\u003cli\u003eProporciona texto alternativo dentro de \u003cvideo\u003e/\u003caudio\u003e cuando no hay soporte.\u003c/li\u003e\\n\u003cli\u003eAjusta \u003cstrong\u003epreload\u003c/strong\u003e según el contexto y plan de datos de tu audiencia.\u003c/li\u003e\\n\u003cli\u003eUsa \u003cstrong\u003eposter\u003c/strong\u003e para mejorar la percepción visual y tiempos de espera.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003e¿Tienes dudas sobre \u003cem\u003eiframe\u003c/em\u003e, \u003cem\u003epreload\u003c/em\u003e o formatos como MP4, MOV u OGG? Comparte tu pregunta y cuéntame qué caso de uso quieres resolver.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false}],\"quiz\":{\"id\":31716,\"active\":true,\"title\":\"quiz de Contenido Multimedia\"}},{\"id\":24624,\"title\":\"Accesibilidad Web Y SEO\",\"materials\":[{\"id\":84740,\"title\":\"Atributos ARIA para accesibilidad web con lectores de pantalla\",\"url\":\"https://platzi.com/cursos/html/atributos-aria-para-accesibilidad-web-co/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1e343e36d605d0ac2162_68dc1e343e36d605d0ac2176_81s.jpg\",\"duration\":805,\"index\":15,\"content\":\"\u003cp\u003eLa accesibilidad web comienza con \u003cstrong\u003eHTML semántico\u003c/strong\u003e y se potencia con \u003cstrong\u003eatributos \u003cem\u003eARIA\u003c/em\u003e\u003c/strong\u003e. Aprender a describir acciones, roles y mensajes para \u003cstrong\u003electores de pantalla\u003c/strong\u003e transforma la experiencia de usuarios y hace tu interfaz más clara. Aquí verás cómo usar aria-label, aria-describedby y role tal como se muestra en ejemplos prácticos.\u003c/p\u003e\\n\u003ch2\u003e¿Qué es ARIA y por qué importa en accesibilidad web?\u003c/h2\u003e\\n\u003cp\u003e\u003cem\u003eARIA\u003c/em\u003e proviene de \u003cem\u003eAccessibility Rich Internet Application\u003c/em\u003e y añade atributos a las etiquetas para \u003cstrong\u003edar contexto adicional\u003c/strong\u003e que HTML por sí solo no ofrece. Un lector de pantalla entiende mejor qué es cada elemento y qué acción o descripción comunicar al usuario.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003eHTML semántico primero.\u003c/strong\u003e Proporciona una base sólida para la lectura y estructura.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eARIA como capa extra.\u003c/strong\u003e Aporta descripciones, propósitos y roles cuando la semántica no alcanza.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eMejora la comprensión.\u003c/strong\u003e Indica qué hacer y dónde moverse en la interfaz.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch2\u003e¿Cómo aplicar aria-label, aria-describedby y role en casos reales?\u003c/h2\u003e\\n\u003cp\u003eA partir de ejemplos sencillos, se muestran patrones útiles que puedes replicar tal cual. La habilidad clave: \u003cstrong\u003eelegir el atributo adecuado\u003c/strong\u003e según si necesitas propósito, descripción o rol.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo clarificar acciones en botones y navegación?\u003c/h3\u003e\\n\u003cp\u003eCuando el icono o texto no explican la acción, usa aria-label para explicitar el propósito.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eBotón de cierre con “X”. La X no dice “cerrar”, el atributo sí.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebutton\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;cerrar ventana\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eX\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ebutton\u003c/"])</script><script>self.__next_f.push([1,"span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eNavegación sin título visible. Si hay varias barras de menú, nómbralas.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Menú principal\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eInicio\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/productos\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eProductos\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eClaves prácticas:\\n- Usa aria-label cuando necesites una \u003cstrong\u003edescripción breve del propósito\u003c/strong\u003e.\\n- Mantén los textos \u003cstrong\u003eclaros y específicos\u003c/strong\u003e.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo describir formularios y campos de búsqueda?\u003c/h3\u003e\\n\u003cp\u003eEn inputs, aria-label y aria-describedby orientan acción e instrucciones.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eBuscador con propósito explícito.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;search\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Buscador de productos\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eContraseña con reglas de formato. El texto de ayuda se asocia mediante aria-describedby.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;password\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eContraseña\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003einput\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;password\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;password\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-describedby\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;password-help\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esmall\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;password-help\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMínimo ocho caracteres, incluyen números y letras.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esmall\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eClaves prácticas:\\n- aria-label: describe \u003cstrong\u003equé hace\u003c/strong\u003e el campo.\\n- aria-describedby: enlaza \u003cstrong\u003einstrucciones o ayudas\u003c/strong\u003e ya visibles en el DOM.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo enriquecer imágenes y contenedores sin semántica?\u003c/h3\u003e\\n\u003cp\u003eCuando el alt se queda corto, complementa con aria-describedby. Y si usas contenedores genéricos, define roles.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eImagen con descripción extendida.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;grafica.png\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Ventas 2024\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-describedby\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;grafica-descripcion\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\""])</script><script>self.__next_f.push([1,"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;grafica-descripcion\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eLas ventas aumentaron un 40 % en el Q1.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eContenedor comodín con roles semánticos.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erole\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;main\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh3\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eSección principal\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh3\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eContenido del área principal.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erole\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;alert\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eEste es un mensaje de alerta.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eClaves prácticas:\\n- alt: breve y directo; aria-describedby: \u003cstrong\u003edetalle adicional\u003c/strong\u003e cuando hace falta.\\n- role: aporta \u003cstrong\u003esemántica\u003c/strong\u003e a divs cuando no puedes usar etiquetas como header o nav.\u003c/p\u003e\\n\u003ch2\u003e¿Qué buenas prácticas y próximos pasos se recomiendan?\u003c/h2\u003e\\n\u003cp\u003eLa prioridad es que todas las personas comprendan la interfaz y sus acciones. ARIA es amplio y hay más atributos que pueden ser útiles según el caso.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eConstruye con \u003cstrong\u003eHTML semántico\u003c/strong\u003e y añade \u003cem\u003eARIA\u003c/em\u003e solo para cubrir vacíos.\u003c/li\u003e\\n\u003cli\u003eEmplea aria-label para \u003cstrong\u003epropósito corto\u003c/strong\u003e y aria-describedby para \u003cstrong\u003einstrucciones\u003c/strong\u003e existentes.\u003c/li\u003e\\n\u003cli\u003eUsa role para \u003cstrong\u003edefinir el contexto\u003c/strong\u003e en contenedores genéricos.\u003c/li\u003e\\n\u003cli\u003eConsulta recursos para \u003cstrong\u003eprofundizar en otros atributos de ARIA\u003c/strong\u003e.\u003c/li\u003e\\n\u003cli\u003eRecuerda: \u003cstrong\u003eaccesibilidad es para todos\u003c/strong\u003e y es una buena práctica esencial.\u003c/li\u003e\\n\u003cli\u003ePróximo tema: \u003cstrong\u003ebuenas prácticas y SEO\u003c/strong\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003e¿Te quedó alguna duda o quieres compartir cómo aplicarías estos atributos en tu proyecto? Escribe en los comentarios y continuemos la conversación.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false},{\"id\":84741,\"title\":\"Estructura semántica y meta tags para mejorar posicionamiento web\",\"url\":\"https://platzi.com/cursos/html/estructura-semantica-y-meta-tags-para-me/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1e36af2b38b3b2b5a38c_68dc1e36af2b38b3b2b5a3a0_95s.jpg\",\"duration\":949,\"index\":16,\"content\":\"\u003cp\u003eSEO bien aplicado impulsa el alcance orgánico de un sitio sin pagar anuncios. Aquí verás cómo combinar \u003cstrong\u003esemántica HTML\u003c/strong\u003e, \u003cstrong\u003eaccesibilidad\u003c/strong\u003e, \u003cstrong\u003emeta tags\u003c/strong\u003e, estructura clara y optimización de medios para lograr una mejor calificación en buscadores. No es un código único: son prácticas y estrategias coherentes que trabajan juntas.\u003c/p\u003e\\n\u003ch2\u003e¿Qué es SEO y cómo ayuda a crecer de forma orgánica?\u003c/h2\u003e\\n\u003cp\u003eSEO permite que los buscadores muestren tu contenido sin pago directo. Funciona cuando aplicas un \u003cstrong\u003econjunto de buenas prácticas\u003c/strong\u003e: semántica, accesibilidad, estructura correcta y optimización de recursos. Es dinámico y evoluciona; en la era de la AI, las reglas cambian, por lo que conviene mantenerse al día.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eEnfoque: llegar a más gente de forma orgánica.\u003c/li\u003e\\n\u003cli\u003eClave: una sola estrategia no b"])</script><script>self.__next_f.push([1,"asta; suma prácticas consistentes.\u003c/li\u003e\\n\u003cli\u003eEfecto: mejor calificación en buscadores y mayor visibilidad.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Por qué la semántica y la accesibilidad influyen en SEO?\u003c/h3\u003e\\n\u003cp\u003ePorque ayudan a los buscadores y a los lectores de pantalla a entender la página. Un HTML semántico claro, con roles y \u003cem\u003eARIA labels\u003c/em\u003e, mejora la interpretación del contenido y la experiencia de todos.\u003c/p\u003e\\n\u003ch2\u003e¿Cómo optimizar el head con meta tags, título y \u003cem\u003eOpen Graph\u003c/em\u003e?\u003c/h2\u003e\\n\u003cp\u003eEl head define idioma, codificación, \u003cem\u003emobile first\u003c/em\u003e, título y metadatos que los buscadores y redes sociales usan para indexar y previsualizar tu sitio.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eIdioma con lang: indica el lenguaje principal del documento.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehtml\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003elang\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;es\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eCodificación con charset UTF-8: muestra bien caracteres en español.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003echarset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;UTF-8\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\u003cem\u003eViewport\u003c/em\u003e para \u003cem\u003emobile first\u003c/em\u003e: crítico en móviles y calificación SEO.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;viewport\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;width=device-width, initial-scale=1.0\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eTítulo optimizado: 50–60 caracteres, con palabras clave y único por página.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eGuía de SEO: semántica, accesibilidad y rendimiento\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eMeta description: texto que aparece bajo el título en Google; debe reflejar el contenido real.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;description\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Buenas prácticas de SEO con HTML semántico, accesibilidad y optimización para mejorar el posicionamiento orgánico.\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eMeta keywords: hoy tiene menos peso, pero puede incluirse.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;keywords\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;SEO, HTML semántico, accesibilidad, meta tags\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eAutor: atribuye el contenido a una persona o empresa.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;author\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Tu Empresa\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\u003cem\u003eRobots\u003c/em\u003e: indica a las arañas cómo tratar la página: \u003cem\u003eindex\u003c/em\u003e, \u003cem\u003efollow\u003c/em\u003e, \u003cem\u003enoindex\u003c/em\u003e, \u003cem\u003e\u003c/em\u003e.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"n"])</script><script>self.__next_f.push([1,"a\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;robots\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;index, follow\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eCanonical: evita contenido duplicado indicando la URL original.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elink\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erel\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;canonical\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;https://ejemplo.com/\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\u003cem\u003eOpen Graph\u003c/em\u003e para redes sociales: control de título, descripción, imagen y URL compartida.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eproperty\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;og:title\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Guía práctica de SEO en HTML\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eproperty\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;og:description\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Semántica, accesibilidad y meta tags para posicionar.\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eproperty\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;og:image\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;https://ejemplo.com/og-image.jpg\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eproperty\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;og:url\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;https://ejemplo.com/\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eFavicon: refuerza la identidad visual en pestañas y dispositivos.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elink\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erel\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;icon\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/favicon.ico\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;image/x-icon\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch2\u003e¿Qué estructura semántica y accesible mejora tu calificación?\u003c/h2\u003e\\n\u003cp\u003eOrganiza el body con secciones claras, una jerarquía de encabezados correcta y enlaces descriptivos. Optimiza imágenes y videos para rendimiento y experiencia.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eHeader con logotipo enlazando al \u003cem\u003ehome\u003c/em\u003e y aria-label descriptivo.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eheader\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Ir al inicio\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/logo.svg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Logotipo de la empresa\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ewidth\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;120\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eheight\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;40\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c"])</script><script>self.__next_f.push([1,"/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eheader\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eNavegación principal con nav y aria-label.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Navegación principal\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eul\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#inicio\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eInicio\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#servicios\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eServicios\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#productos\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eProductos\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#sobre-nosotros\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eSobre nosotros\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#blog\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eBlog\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#contacto\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eContacto\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eul\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eMain con un único H1 por página: regla de oro; H2/H3 para secciones.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emain\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh1\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eSEO con HTML semántico y accesible\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh1\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003earticle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh2\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eBuenas prácticas de estructura\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh2\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\""])</script><script>self.__next_f.push([1,"p\\\"\u003e\u0026gt;\u003c/span\u003eContenido introductorio.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ep\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003earticle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eImágenes optimizadas con alt, dimensiones y carga diferida.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/img/ejemplo.webp\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Descripción de la imagen\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ewidth\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;800\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eheight\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;500\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eloading\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;lazy\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eEnlaces internos descriptivos: evita “page” o “info”; explica el destino.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/guia-completa-seo\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eGuía completa de SEO en HTML\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003e\\n\u003cp\u003eListas para agrupar puntos clave de forma clara.\u003c/p\u003e\\n\u003c/li\u003e\\n\u003cli\u003e\\n\u003cp\u003eVideo con múltiples formatos y atributos que mejoran rendimiento.\u003c/p\u003e\\n\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003evideo\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtrols\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003epreload\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;metadata\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ewidth\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;800\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esource\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/video/ejemplo.webm\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;video/webm\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esource\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/video/ejemplo.mp4\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;video/mp4\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n Tu navegador no soporta el elemento video.\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003evideo\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eAside para contenido secundario, no principal.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003easide\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh2\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eContenido relacionado\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eh2\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eul\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/mejores-practicas\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMejores prácticas\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eli\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eul\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003easide\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eFooter con navegaciones adicionales y aria-label específico (por ejemplo, “Enlaces del pie” y “Redes soci"])</script><script>self.__next_f.push([1,"ales”).\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efooter\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Enlaces del pie\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e…\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Redes sociales\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e…\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efooter\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cp\u003eHabilidades y conceptos aplicados: definición de SEO y alcance orgánico; HTML semántico con header, nav, main, article, section, aside y footer; uso correcto de H1 único; accesibilidad con \u003cem\u003eARIA labels\u003c/em\u003e; meta tags clave (lang, charset UTF-8, viewport, title, description, keywords con menor peso, author, robots, canonical); \u003cem\u003eOpen Graph\u003c/em\u003e para compartir en redes; favicons; optimización de imágenes con alt, dimensiones y \u003cem\u003elazy loading\u003c/em\u003e; enlaces internos descriptivos; videos con múltiples formatos. Todo suma para mejorar la calificación y el posicionamiento.\u003c/p\u003e\\n\u003cp\u003e¿Tienes dudas o un caso real que quieras optimizar? Coméntalo y afinamos juntos tu implementación.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false}],\"quiz\":{\"id\":31717,\"active\":true,\"title\":\"quiz de Accesibilidad Web Y SEO\"}},{\"id\":24625,\"title\":\"Proyecto final\",\"materials\":[{\"id\":84742,\"title\":\"Portafolio profesional con HTML semántico y SEO\",\"url\":\"https://platzi.com/cursos/html/portafolio-profesional-con-html-semantic/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1e33cfc42806e7b9a76d_68dc1e33cfc42806e7b9a781_48s.jpg\",\"duration\":481,\"index\":17,\"content\":\"\u003cp\u003eConstruye un portafolio profesional con \u003cstrong\u003eHTML semántico\u003c/strong\u003e, \u003cstrong\u003eaccesibilidad con ARIA\u003c/strong\u003e y \u003cstrong\u003eSEO\u003c/strong\u003e listo para compartir cuando busques trabajo. La guía resume cómo organizar la estructura, los metadatos y la navegación para presentar proyectos, descargar tu CV y optimizar tu presencia en redes sociales.\u003c/p\u003e\\n\u003ch2\u003e¿Qué incluye el proyecto final de portafolio HTML semántico y SEO?\u003c/h2\u003e\\n\u003cp\u003eEste proyecto es tu \u003cstrong\u003eperfil personal\u003c/strong\u003e: una página estática con secciones claras, navegación accesible y metadatos bien configurados. La idea es personalizarlo con tu contenido, no solo copiar y pegar.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003e\u003cstrong\u003eDatos esenciales\u003c/strong\u003e en el head: título, descripción y codificación.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eSEO básico\u003c/strong\u003e: metadatos y estructura semántica comprensible por buscadores.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003e“Orphan graphs” para redes sociales\u003c/strong\u003e y graphs para Twitter, hoy aún llamado Twitter.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eURLs canónicas\u003c/strong\u003e para evitar contenido duplicado.\u003c/li\u003e\\n\u003cli\u003e\u003cstrong\u003eFavicons\u003c/strong\u003e para identidad visual en pestañas y dispositivos.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Qué metadatos SEO, canonical y favicons configurar?\u003c/h3\u003e\\n\u003cp\u003eConfigura atributos mínimos en el head para buscadores y navegadores.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003echarset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;utf-8\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eMi perfil personal\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003etitle\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class="])</script><script>self.__next_f.push([1,"\\\"s\\\"\u003e\u0026quot;description\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Portafolio de proyectos y experiencia.\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elink\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erel\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;canonical\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;https://midominio.com/\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elink\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erel\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;icon\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/favicon.ico\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esizes\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;any\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elink\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erel\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;icon\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/icon.svg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;image/svg+xml\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elink\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erel\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;apple-touch-icon\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/apple-touch-icon.png\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ehead\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch3\u003e¿Cómo añadir graphs para redes sociales y Twitter?\u003c/h3\u003e\\n\u003cp\u003eIncluye metadatos para compartir correctamente en redes y en Twitter.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- graphs para redes sociales --\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eproperty\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;og:title\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Mi portafolio\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eproperty\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;og:description\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Proyectos destacados y experiencia.\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eproperty\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;og:image\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;https://midominio.com/cover.jpg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eproperty\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;og:url\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;https://midominio.com/\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\\n\u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- graphs para Twitter --\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;twitter:card\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;summary_large_image\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;twitter:title\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Mi portafolio\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003csp"])</script><script>self.__next_f.push([1,"an class=\\\"s\\\"\u003e\u0026quot;twitter:description\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Proyectos y CV para descarga.\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emeta\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;twitter:image\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003econtent\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;https://midominio.com/cover.jpg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch2\u003e¿Cómo estructurar el header, navegación y CTA con ARIA?\u003c/h2\u003e\\n\u003cp\u003eEl \u003cem\u003eheader\u003c/em\u003e superior integra logotipo/ícono, tu nombre y el título de la página (por ejemplo, “Mi portafolio”). La \u003cstrong\u003enavegación principal\u003c/strong\u003e usa ARIA para mejorar la accesibilidad con lectores de software. Incluye \u003cstrong\u003eacciones rápidas\u003c/strong\u003e como la descarga de tu CV.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo usar el atributo download y aria-label en enlaces?\u003c/h3\u003e\\n\u003cp\u003ePermite que el CV se descargue directo con un enlace accesible.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Navegación principal\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/docs/CV.pdf\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003edownload\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Descarga el CV en PDF\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eDescargar CV\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003enav\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch3\u003e¿Cómo preparar un selector de idioma con JavaScript?\u003c/h3\u003e\\n\u003cp\u003eEl selector se maqueta ahora y se habilita después con \u003cem\u003eJavaScript\u003c/em\u003e para traducir contenido.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003efor\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;lang\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Cambiar idioma\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eIdioma\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003elabel\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eselect\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;lang\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ename\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;lang\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-controls\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;contenido\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eoption\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003evalue\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;es\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eEspañol\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eoption\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eoption\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003evalue\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;en\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eEnglish\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eoption\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eselect\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch2\u003e¿Cómo organizar el main, hero y enlaces internos en una landing?\u003c/h2\u003e\\n\u003cp\u003eEl contenido principal vive en el elemento semántico \u003cstrong\u003emain\u003c/strong\u003e. El \u003cem\u003ehero\u003c/em\u003e presenta mensajes y \u003cem\u003ecall to action\u003c/em\u003e. Además, puedes mover al usuario a secciones específicas de la misma \u003cem\u003elanding\u003c/em\u003e usando IDs en enlaces.\u003c/p\u003e\\n\u003ch3\u003e¿Cómo enlazar secciones con IDs en una landing?\u003c/h3\u003e\\n\u003cp\u003eCrea anclas internas que desplacen a áreas como “Proyectos destacados”.\u003c/p"])</script><script>self.__next_f.push([1,"\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emain\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erole\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;main\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esection\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Hero\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ehref\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;#proyectos-destacados\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003eVer mis proyectos\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ea\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esection\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esection\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003eid\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;proyectos-destacados\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Proyectos destacados\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"cm\\\"\u003e\u0026lt;!-- Tarjetas de proyectos --\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esection\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003emain\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eUsa el atributo id en la sección destino.\u003c/li\u003e\\n\u003cli\u003eEnlaza con href=\\\"#id\\\" para el desplazamiento interno.\u003c/li\u003e\\n\u003cli\u003eMantén los CTA claros y descriptivos.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo usar div como comodines y roles semánticos?\u003c/h3\u003e\\n\u003cp\u003eCuando no exista una etiqueta específica, usa div como contenedor y agrega roles o ARIA si aporta claridad.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esection\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Estadísticas rápidas\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003erole\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;group\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003earia-label\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Logros\u0026quot;\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e+10 proyectos.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e3 productos lanzados.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003ediv\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esection\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003ch3\u003e¿Cómo optimizar imágenes con picture, source y figure?\u003c/h3\u003e\\n\u003cp\u003eSirve imágenes por formato y tamaño, con texto alternativo y un pie explicativo.\u003c/p\u003e\\n\u003cdiv class=\\\"codehilite\\\"\u003e\u003cpre\u003e\u003cspan\u003e\u003c/span\u003e\u003ccode\u003e\u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efigure\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003epicture\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esource\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;image/avif\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrcset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/img/desk.avif\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003esource\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003etype\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;image/webp\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrcset\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/img/desk.webp\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003eimg\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003esrc\u003c/span\u003e\u003cspa"])</script><script>self.__next_f.push([1,"n class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;/img/desk.jpg\u0026quot;\u003c/span\u003e \u003cspan class=\\\"na\\\"\u003ealt\u003c/span\u003e\u003cspan class=\\\"o\\\"\u003e=\u003c/span\u003e\u003cspan class=\\\"s\\\"\u003e\u0026quot;Diego De Granda en su espacio de trabajo\u0026quot;\u003c/span\u003e \u003cspan class=\\\"p\\\"\u003e/\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003epicture\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n \u003cspan class=\\\"p\\\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efigcaption\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003etitle caption: foto en el espacio de trabajo.\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efigcaption\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003cspan class=\\\"p\\\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\\\"nt\\\"\u003efigure\u003c/span\u003e\u003cspan class=\\\"p\\\"\u003e\u0026gt;\u003c/span\u003e\\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\\n\\n\u003cul\u003e\\n\u003cli\u003eUsa figure y figcaption para contexto visual.\u003c/li\u003e\\n\u003cli\u003eEmplea picture y source para formatos modernos.\u003c/li\u003e\\n\u003cli\u003eDefine alt descriptivo y conciso.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003ch3\u003e¿Cómo presentar “Sobre mí”, valores y enlaces?\u003c/h3\u003e\\n\u003cp\u003eOrganiza un section con H2 y subsecciones con H3 para valores, citas y una tabla simple.\u003c/p\u003e\\n\u003cul\u003e\\n\u003cli\u003eIncluye texto y quotes para tu voz personal.\u003c/li\u003e\\n\u003cli\u003eAñade enlaces externos a más información.\u003c/li\u003e\\n\u003cli\u003eMantén la jerarquía: H2 para secciones, H3 para detalles.\u003c/li\u003e\\n\u003c/ul\u003e\\n\u003cp\u003ePor último, agrega estilos con \u003cstrong\u003eCSS\u003c/strong\u003e cuando termines la estructura. Será una \u003cstrong\u003epágina estática\u003c/strong\u003e lista para compartir; no requiere interacción para mostrar tu información, imágenes y texto. Es una \u003cstrong\u003ebase completa\u003c/strong\u003e con HTML semántico, accesible y con un porcentaje de \u003cstrong\u003eSEO\u003c/strong\u003e que facilita que la gente llegue a tu contenido. Como nota inspiradora: Diego De Granda comparte que tiene más de quince años en desarrollo de software y producto, y en años recientes ha trabajado en productos base con inteligencia artificial.\u003c/p\u003e\\n\u003cp\u003e¿Tienes dudas o quieres mostrar tu versión personalizada? Deja un comentario y comparte tu portafolio.\u003c/p\u003e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false}],\"quiz\":null}]}]]}],[\"$\",\"$L26\",null,{\"isAccountless\":true,\"url\":\"https://platzi.com/cursos/html/configuracion-de-vscode-y-estructura-htm/\"}]]}],[\"$\",\"script\",null,{\"async\":true,\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@graph\\\":[{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"Organization\\\",\\\"name\\\":\\\"Platzi\\\",\\\"url\\\":\\\"https://platzi.com/\\\",\\\"description\\\":\\\"Aprende desde cero a crear el futuro de la web. Cursos en línea de desarrollo, inteligencia artificial, diseño, marketing y negocios.\\\",\\\"foundingDate\\\":\\\"2013-01-01T00:00:00Z\\\",\\\"founders\\\":[{\\\"@type\\\":\\\"Person\\\",\\\"name\\\":\\\"John Freddy Vega\\\"},{\\\"@type\\\":\\\"Person\\\",\\\"name\\\":\\\"Christian Van Der Henst\\\"}],\\\"sameAs\\\":[\\\"https://www.facebook.com/platzi/\\\",\\\"https://twitter.com/Platzi\\\",\\\"https://www.youtube.com/channel/UC55-mxUj5Nj3niXFReG44OQ\\\",\\\"https://www.linkedin.com/school/2822346\\\"]},{\\\"@context\\\":\\\"http://schema.org\\\",\\\"@type\\\":\\\"BreadcrumbList\\\",\\\"itemListElement\\\":[{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":1,\\\"item\\\":{\\\"@id\\\":\\\"https://platzi.com/\\\",\\\"name\\\":\\\"🚀 Platzi: ‎Cursos Online Profesionales de Tecnología\\\"}}]},{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"VideoObject\\\",\\\"name\\\":\\\"Configuración de VSCode y estructura HTML5 básica\\\",\\\"description\\\":\\\"Crear tu primer sitio en HTML5 es más simple de lo que parece. Aquí verás cómo configurar VSCode, usar el navegador con el inspector de elementos, gen\\\",\\\"thumbnailUrl\\\":[\\\"https://static.platzi.com/media/courses/Piezas-Curso-HTML_OG.jpg\\\"],\\\"uploadDate\\\":\\\"2025-09-30T19:00:00+00:00\\\",\\\"duration\\\":\\\"P0DT00H13M48S\\\",\\\"embedUrl\\\":\\\"https://platzi.com/cursos/html/configuracion-de-vscode-y-estructura-htm/\\\"}]}\"}}]]}]\n"])</script></body></html><script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'987deb08190ac6f8',t:'MTc1OTM0MjI0MS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>