Configuración de VSCode y estructura HTML5 básica
Clase 3 de 17 • Curso de HTML
Contenido del curso
Listas y Enlaces
Formularios y Tablas
Contenido Multimedia
Accesibilidad Web Y SEO
Proyecto final
Resumen
, 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><div class="page_Classes__tabs__W4KeQ"><div class="MaterialTabs_MaterialTabsDesktop__VkqER"><div class="MaterialTabs_MaterialTabs__OzF1d"><div class="MaterialTabs_MaterialTabs__TabContent___cxIl"><aside class="MateriaComments_MaterialComments__32QWu"><div class="MateriaComments_MaterialComments__StickyHeader__DG_i1"><!--$!--><template data-dgst="BAILOUT_TO_CLIENT_SIDE_RENDERING"></template><!--/$--><div class="MateriaComments_MaterialComments__Filters__2tmcs"><div role="group" dir="ltr" class="CommentsTypeSelector_CommentsTypeSelector__iIaqB" aria-label="Filtrar comentarios" tabindex="-1" style="outline:none"><button type="button" data-state="on" role="radio" aria-checked="true" class="CommentsTypeSelector_CommentsTypeSelector__Item__foGkc" aria-label="Más votados" tabindex="-1" data-radix-collection-item="">Más votados</button><button type="button" data-state="off" role="radio" aria-checked="false" class="CommentsTypeSelector_CommentsTypeSelector__Item__foGkc" aria-label="Nuevos" tabindex="-1" data-radix-collection-item="">Nuevos</button><button type="button" data-state="off" role="radio" aria-checked="false" class="CommentsTypeSelector_CommentsTypeSelector__Item__foGkc" aria-label="Favoritos" tabindex="-1" data-radix-collection-item="">Favoritos</button></div></div></div><ul class="Comments_Comments__3_G_x"><!--$--><article class="CommentLayout-module_CommentLayout__CYa1n Comment-module_Comment__tcd1t Comment-module_Comment--has-replies__jacm7" style="--last-item-height:unset"><img class="Comment-module_Comment__Avatar__f5cUu" src="https://static.platzi.com/media/avatars/avatars/Valentina0296_dfb61fb0-51a4-404e-8306-8f8620a7f663.jpg" alt="Valentina Hernández" width="24" height="24"/><header class="CommentLayout-module_CommentLayout__Content__fCbVx"><div class="CommentLayout-module_CommentLayout__Header__YNglM"><div class="CommentHeader-module_CommentHeader__TdgfD"><div class="CommentHeader-module_CommentHeader__Title__2fcdC"><div class="CommentHeader-module_CommentHeader__Author__SyM1G"><p class="CommentHeader-module_CommentHeader__Name__lpA03">Valentina Hernández</p></div><div class="CommentHeader-module_CommentHeader__Info__FqvJx">student<span>•</span><a href="/comentario/5441672/"><div class="Tooltip-module_Tooltip__3RyoA"><span class="CommentHeader-module_CommentHeader__Time__aL32o">hace 3 meses</span></div></a></div></div></div></div><div><!--$--><div class="Markdown_Markdown__m6wuK"><p>Tip: dale click en el icono de nuevo archivo, sobre la misma linea escribes el nombre de la carpeta pones / y luego el nombre del archivo con su extension te genera los 2 en un solo paso.</p>
<p>Intentenlo y me comenta...!!</p>
<div class="Markdown_Markdown-image__falyV"><button class="ButtonLayout-module_ButtonLayout__eaqR3 ButtonLayout-module_ButtonLayout--sm__hFh7H ButtonLayout-module_ButtonLayout--basic--sm__Y--Zl Markdown_Markdown-fullScreen__AGaht Button-module_Button__uBoYP Button-module_Button--sm__kiOL- Button-module_Button--ghost__F8JSX" aria-label="Abrir preview" data-id="atomic-ui-button-layout"><span class=""><svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" fill-rule="evenodd" d="M21 13.75a.75.75 0 0 1 .75.75v2A3.75 3.75 0 0 1 18 20.25h-2a.75.75 0 0 1 0-1.5h2a2.25 2.25 0 0 0 2.25-2.25v-2a.75.75 0 0 1 .75-.75M15.25 4.5a.75.75 0 0 1 .75-.75h2a3.75 3.75 0 0 1 3.75 3.75v2a.75.75 0 0 1-1.5 0v-2A2.25 2.25 0 0 0 18 5.25h-2a.75.75 0 0 1-.75-.75M3 13.75a.75.75 0 0 1 .75.75v2A2.25 2.25 0 0 0 6 18.75h2a.75.75 0 0 1 0 1.5H6a3.75 3.75 0 0 1-3.75-3.75v-2a.75.75 0 0 1 .75-.75m3-8.5A2.25 2.25 0 0 0 3.75 7.5v2a.75.75 0 0 1-1.5 0v-2A3.75 3.75 0 0 1 6 3.75h2a.75.75 0 0 1 0 1.5z" clip-rule="evenodd"></path></svg></span></button><img alt="" loading="lazy" width="20" height="20" decoding="async" data-nimg="1" style="color:transparent" srcSet="https://static.platzi.com/media/user_upload/upload-64debb7a-5b25-4e21-bb1b-5c18a0706560.jpg 1x, https://static.platzi.com/media/user_upload/upload-64debb7a-5b25-4e21-bb1b-5c18a0706560.jpg 2x" src="https://static.platzi.com/media/user_upload/upload-64debb7a-5b25-4e21-bb1b-5c18a0706560.jpg"/></div>
<p>P.D. Tip de Juan Diego(Like si sabes en que curso lo dio) 💚💚</p></div><!--/$--></div></header><div class="CommentLike-module_CommentLike__XERrD"><button class="ButtonLayout-module_ButtonLayout__eaqR3 ButtonLayout-module_ButtonLayout--sm__hFh7H ButtonLayout-module_ButtonLayout--basic--sm__Y--Zl Button-module_Button__uBoYP Button-module_Button--sm__kiOL- Button-module_Button--ghost__F8JSX" aria-label="Dar Like" data-id="atomic-ui-button-layout"><span class=""><div class="Like-module_Like__eUwmV"><div><svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" fill-rule="evenodd" d="M18.962 7.04a4.38 4.38 0 0 0-5.973-.219l-.498.432a.75.75 0 0 1-.982 0l-.498-.431a4.38 4.38 0 0 0-5.973.218 4.423 4.423 0 0 0 .234 6.459l6.566 5.69a.246.246 0 0 0 .324 0l6.565-5.69a4.424 4.424 0 0 0 .235-6.459m1.064-1.058a5.88 5.88 0 0 0-8.02-.294L12 5.694l-.006-.006a5.88 5.88 0 0 0-8.02.294 5.923 5.923 0 0 0 .315 8.65l6.566 5.69c.657.57 1.633.57 2.29 0l6.565-5.69a5.924 5.924 0 0 0 .316-8.65" clip-rule="evenodd"></path></svg></div><span>16</span></div></span></button></div><footer class="CommentLayout-module_CommentLayout__Footer__EKW1g"></footer><div class="CommentReplies-module_CommentReplies__5A1Mx"><ul class="CommentReplies-module_CommentReplies__List__pJRE3"><div class="CommentReplyLineContainer-module_CommentReplyLineContainer__JsbTS" data-id="comment-reply-line-container"><article class="CommentLayout-module_CommentLayout__CYa1n" data-id="comment-ui-reply"><img class="Comment-module_Comment__Avatar__f5cUu" src="https://static.platzi.com/media/avatars/dario.mendoza_7fcbc871-415d-44b8-98b9-fdb30e951cf5.jpg" alt="Dario Mendoza" width="24" height="24"/><header class="CommentLayout-module_CommentLayout__Content__fCbVx"><div class="CommentLayout-module_CommentLayout__Header__YNglM"><div class="CommentHeader-module_CommentHeader__TdgfD"><div class="CommentHeader-module_CommentHeader__Title__2fcdC"><div class="CommentHeader-module_CommentHeader__Author__SyM1G"><p class="CommentHeader-module_CommentHeader__Name__lpA03">Dario Mendoza</p></div><div class="CommentHeader-module_CommentHeader__Info__FqvJx">student<span>•</span><a href="/comentario/5447170/"><div class="Tooltip-module_Tooltip__3RyoA"><span class="CommentHeader-module_CommentHeader__Time__aL32o">hace 3 meses</span></div></a><span>•</span><div class="Tooltip-module_Tooltip__3RyoA"><span class="CommentHeader-module_CommentHeader__Edited__e1V7C">editado</span></div></div></div></div></div><div><!--$--><div class="Markdown_Markdown__m6wuK"><div class="Markdown_Markdown-image__falyV"><button class="ButtonLayout-module_ButtonLayout__eaqR3 ButtonLayout-module_ButtonLayout--sm__hFh7H ButtonLayout-module_ButtonLayout--basic--sm__Y--Zl Markdown_Markdown-fullScreen__AGaht Button-module_Button__uBoYP Button-module_Button--sm__kiOL- Button-module_Button--ghost__F8JSX" aria-label="Abrir preview" data-id="atomic-ui-button-layout"><span class=""><svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" fill-rule="evenodd" d="M21 13.75a.75.75 0 0 1 .75.75v2A3.75 3.75 0 0 1 18 20.25h-2a.75.75 0 0 1 0-1.5h2a2.25 2.25 0 0 0 2.25-2.25v-2a.75.75 0 0 1 .75-.75M15.25 4.5a.75.75 0 0 1 .75-.75h2a3.75 3.75 0 0 1 3.75 3.75v2a.75.75 0 0 1-1.5 0v-2A2.25 2.25 0 0 0 18 5.25h-2a.75.75 0 0 1-.75-.75M3 13.75a.75.75 0 0 1 .75.75v2A2.25 2.25 0 0 0 6 18.75h2a.75.75 0 0 1 0 1.5H6a3.75 3.75 0 0 1-3.75-3.75v-2a.75.75 0 0 1 .75-.75m3-8.5A2.25 2.25 0 0 0 3.75 7.5v2a.75.75 0 0 1-1.5 0v-2A3.75 3.75 0 0 1 6 3.75h2a.75.75 0 0 1 0 1.5z" clip-rule="evenodd"></path></svg></span></button><img alt="" loading="lazy" width="20" height="20" decoding="async" data-nimg="1" style="color:transparent" srcSet="https://static.platzi.com/media/user_upload/upload-e0622a76-b770-44f8-a855-c1b4a6b0e4e3.png 1x, https://static.platzi.com/media/user_upload/upload-e0622a76-b770-44f8-a855-c1b4a6b0e4e3.png 2x" src="https://static.platzi.com/media/user_upload/upload-e0622a76-b770-44f8-a855-c1b4a6b0e4e3.png"/></div></div><!--/$--></div></header><div class="CommentLike-module_CommentLike__XERrD"><button class="ButtonLayout-module_ButtonLayout__eaqR3 ButtonLayout-module_ButtonLayout--sm__hFh7H ButtonLayout-module_ButtonLayout--basic--sm__Y--Zl Button-module_Button__uBoYP Button-module_Button--sm__kiOL- Button-module_Button--ghost__F8JSX" aria-label="Dar Like" data-id="atomic-ui-button-layout"><span class=""><div class="Like-module_Like__eUwmV"><div><svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" fill-rule="evenodd" d="M18.962 7.04a4.38 4.38 0 0 0-5.973-.219l-.498.432a.75.75 0 0 1-.982 0l-.498-.431a4.38 4.38 0 0 0-5.973.218 4.423 4.423 0 0 0 .234 6.459l6.566 5.69a.246.246 0 0 0 .324 0l6.565-5.69a4.424 4.424 0 0 0 .235-6.459m1.064-1.058a5.88 5.88 0 0 0-8.02-.294L12 5.694l-.006-.006a5.88 5.88 0 0 0-8.02.294 5.923 5.923 0 0 0 .315 8.65l6.566 5.69c.657.57 1.633.57 2.29 0l6.565-5.69a5.924 5.924 0 0 0 .316-8.65" clip-rule="evenodd"></path></svg></div><span>9</span></div></span></button></div><footer class="CommentLayout-module_CommentLayout__Footer__EKW1g"><div class="CommentReply-module_CommentReply__Actions__s0W-0"></div></footer></article></div></ul></div></article><!--/$--><!--$--><article class="CommentLayout-module_CommentLayout__CYa1n Comment-module_Comment__tcd1t Comment-module_Comment--has-replies__jacm7" style="--last-item-height:unset"><img class="Comment-module_Comment__Avatar__f5cUu" src="https://static.platzi.com/media/avatars/avatars/huggosanchezcalderon_42e59a32-1eb9-438b-8332-60c9c96a203e" alt="Hugo Alberto Sánchez Calderón" width="24" height="24"/><header class="CommentLayout-module_CommentLayout__Content__fCbVx"><div class="CommentLayout-module_CommentLayout__Header__YNglM"><div class="CommentHeader-module_CommentHeader__TdgfD"><div class="CommentHeader-module_CommentHeader__Title__2fcdC"><div class="CommentHeader-module_CommentHeader__Author__SyM1G"><p class="CommentHeader-module_CommentHeader__Name__lpA03">Hugo Alberto Sánchez Calderón</p></div><div class="CommentHeader-module_CommentHeader__Info__FqvJx">student<span>•</span><a href="/comentario/5448418/"><div class="Tooltip-module_Tooltip__3RyoA"><span class="CommentHeader-module_CommentHeader__Time__aL32o">hace 2 meses</span></div></a></div></div></div></div><div><!--$--><div class="Markdown_Markdown__m6wuK"><p>Deberías dejar una lista de las extensiones que usas en COD para los que no conocemos tanto este IDE</p>
<p>Dejo las que use:</p>
<p>Live Server</p>
<p>Material Icon Theme</p>
<p>EditorConfig for VS Code</p>
<p>Con esto ya les queda el editor como el del profe</p></div><!--/$--></div></header><div class="CommentLike-module_CommentLike__XERrD"><button class="ButtonLayout-module_ButtonLayout__eaqR3 ButtonLayout-module_ButtonLayout--sm__hFh7H ButtonLayout-module_ButtonLayout--basic--sm__Y--Zl Button-module_Button__uBoYP Button-module_Button--sm__kiOL- Button-module_Button--ghost__F8JSX" aria-label="Dar Like" data-id="atomic-ui-button-layout"><span class=""><div class="Like-module_Like__eUwmV"><div><svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" fill-rule="evenodd" d="M18.962 7.04a4.38 4.38 0 0 0-5.973-.219l-.498.432a.75.75 0 0 1-.982 0l-.498-.431a4.38 4.38 0 0 0-5.973.218 4.423 4.423 0 0 0 .234 6.459l6.566 5.69a.246.246 0 0 0 .324 0l6.565-5.69a4.424 4.424 0 0 0 .235-6.459m1.064-1.058a5.88 5.88 0 0 0-8.02-.294L12 5.694l-.006-.006a5.88 5.88 0 0 0-8.02.294 5.923 5.923 0 0 0 .315 8.65l6.566 5.69c.657.57 1.633.57 2.29 0l6.565-5.69a5.924 5.924 0 0 0 .316-8.65" clip-rule="evenodd"></path></svg></div><span>10</span></div></span></button></div><footer class="CommentLayout-module_CommentLayout__Footer__EKW1g"></footer><div class="CommentReplies-module_CommentReplies__5A1Mx"><ul class="CommentReplies-module_CommentReplies__List__pJRE3"><div class="CommentReplyLineContainer-module_CommentReplyLineContainer__JsbTS" data-id="comment-reply-line-container"><article class="CommentLayout-module_CommentLayout__CYa1n" data-id="comment-ui-reply"><img class="Comment-module_Comment__Avatar__f5cUu" src="https://static.platzi.com/media/avatars/avatars/aariasv97_d68474c2-648b-4d3a-b8d8-69694cba36ac" alt="Andrés Arias Varela " width="24" height="24"/><header class="CommentLayout-module_CommentLayout__Content__fCbVx"><div class="CommentLayout-module_CommentLayout__Header__YNglM"><div class="CommentHeader-module_CommentHeader__TdgfD"><div class="CommentHeader-module_CommentHeader__Title__2fcdC"><div class="CommentHeader-module_CommentHeader__Author__SyM1G"><p class="CommentHeader-module_CommentHeader__Name__lpA03">Andrés Arias Varela </p></div><div class="CommentHeader-module_CommentHeader__Info__FqvJx">student<span>•</span><a href="/comentario/5469389/"><div class="Tooltip-module_Tooltip__3RyoA"><span class="CommentHeader-module_CommentHeader__Time__aL32o">hace un mes</span></div></a></div></div></div></div><div><!--$--><div class="Markdown_Markdown__m6wuK"><p>mil gracias estaba super perdido</p></div><!--/$--></div></header><div class="CommentLike-module_CommentLike__XERrD"><button class="ButtonLayout-module_ButtonLayout__eaqR3 ButtonLayout-module_ButtonLayout--sm__hFh7H ButtonLayout-module_ButtonLayout--basic--sm__Y--Zl Button-module_Button__uBoYP Button-module_Button--sm__kiOL- Button-module_Button--ghost__F8JSX" aria-label="Dar Like" data-id="atomic-ui-button-layout"><span class=""><div class="Like-module_Like__eUwmV"><div><svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" fill-rule="evenodd" d="M18.962 7.04a4.38 4.38 0 0 0-5.973-.219l-.498.432a.75.75 0 0 1-.982 0l-.498-.431a4.38 4.38 0 0 0-5.973.218 4.423 4.423 0 0 0 .234 6.459l6.566 5.69a.246.246 0 0 0 .324 0l6.565-5.69a4.424 4.424 0 0 0 .235-6.459m1.064-1.058a5.88 5.88 0 0 0-8.02-.294L12 5.694l-.006-.006a5.88 5.88 0 0 0-8.02.294 5.923 5.923 0 0 0 .315 8.65l6.566 5.69c.657.57 1.633.57 2.29 0l6.565-5.69a5.924 5.924 0 0 0 .316-8.65" clip-rule="evenodd"></path></svg></div><span>2</span></div></span></button></div><footer class="CommentLayout-module_CommentLayout__Footer__EKW1g"><div class="CommentReply-module_CommentReply__Actions__s0W-0"></div></footer></article></div></ul></div></article><!--/$--><!--$--><article class="CommentLayout-module_CommentLayout__CYa1n Comment-module_Comment__tcd1t Comment-module_Comment--has-replies__jacm7" style="--last-item-height:unset"><img class="Comment-module_Comment__Avatar__f5cUu" src="https://static.platzi.com/static/website/v2/images/avatar_default.7516253fc982.png" alt="Charles Drawarkewis Bernal Calderin" width="24" height="24"/><header class="CommentLayout-module_CommentLayout__Content__fCbVx"><div class="CommentLayout-module_CommentLayout__Header__YNglM"><div class="CommentHeader-module_CommentHeader__TdgfD"><div class="CommentHeader-module_CommentHeader__Title__2fcdC"><div class="CommentHeader-module_CommentHeader__Author__SyM1G"><p class="CommentHeader-module_CommentHeader__Name__lpA03">Charles Drawarkewis Bernal Calderin</p></div><div class="CommentHeader-module_CommentHeader__Info__FqvJx">student<span>•</span><a href="/comentario/5468372/"><div class="Tooltip-module_Tooltip__3RyoA"><span class="CommentHeader-module_CommentHeader__Time__aL32o">hace un mes</span></div></a><span>•</span><div class="Tooltip-module_Tooltip__3RyoA"><span class="CommentHeader-module_CommentHeader__Edited__e1V7C">editado</span></div></div></div></div></div><div><!--$--><div class="Markdown_Markdown__m6wuK"><p>Siento que este profesor se salta muchos pasos al explicar, estoy viendo su clase y no ha explicado que son las etiquetas, no explica que si no te apareció la opción para abrir el html en el navegador, tienes que descargar la extensión, va demasiado rápido y según él al inicio del curso dijo que no se necesitaba experiencia previa, él habla como si estuviera asumiendo que nosotros sabemos esos detalles básicos.</p></div><!--/$--></div></header><div class="CommentLike-module_CommentLike__XERrD"><button class="ButtonLayout-module_ButtonLayout__eaqR3 ButtonLayout-module_ButtonLayout--sm__hFh7H ButtonLayout-module_ButtonLayout--basic--sm__Y--Zl Button-module_Button__uBoYP Button-module_Button--sm__kiOL- Button-module_Button--ghost__F8JSX" aria-label="Dar Like" data-id="atomic-ui-button-layout"><span class=""><div class="Like-module_Like__eUwmV"><div><svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" fill-rule="evenodd" d="M18.962 7.04a4.38 4.38 0 0 0-5.973-.219l-.498.432a.75.75 0 0 1-.982 0l-.498-.431a4.38 4.38 0 0 0-5.973.218 4.423 4.423 0 0 0 .234 6.459l6.566 5.69a.246.246 0 0 0 .324 0l6.565-5.69a4.424 4.424 0 0 0 .235-6.459m1.064-1.058a5.88 5.88 0 0 0-8.02-.294L12 5.694l-.006-.006a5.88 5.88 0 0 0-8.02.294 5.923 5.923 0 0 0 .315 8.65l6.566 5.69c.657.57 1.633.57 2.29 0l6.565-5.69a5.924 5.924 0 0 0 .316-8.65" clip-rule="evenodd"></path></svg></div><span>4</span></div></span></button></div><footer class="CommentLayout-module_CommentLayout__Footer__EKW1g"></footer><div class="CommentReplies-module_CommentReplies__5A1Mx"><ul class="CommentReplies-module_CommentReplies__List__pJRE3"><div class="CommentReplyLineContainer-module_CommentReplyLineContainer__JsbTS" data-id="comment-reply-line-container"><article class="CommentLayout-module_CommentLayout__CYa1n" data-id="comment-ui-reply"><img class="Comment-module_Comment__Avatar__f5cUu" src="https://static.platzi.com/media/avatars/dfgm1216_25cbf154-a04e-4d30-a935-6c14abc9f63d.jpg" alt="Daniel Felipe Gomez Marin" width="24" height="24"/><header class="CommentLayout-module_CommentLayout__Content__fCbVx"><div class="CommentLayout-module_CommentLayout__Header__YNglM"><div class="CommentHeader-module_CommentHeader__TdgfD"><div class="CommentHeader-module_CommentHeader__Title__2fcdC"><div class="CommentHeader-module_CommentHeader__Author__SyM1G"><p class="CommentHeader-module_CommentHeader__Name__lpA03">Daniel Felipe Gomez Marin</p></div><div class="CommentHeader-module_CommentHeader__Info__FqvJx">student<span>•</span><a href="/comentario/5471480/"><div class="Tooltip-module_Tooltip__3RyoA"><span class="CommentHeader-module_CommentHeader__Time__aL32o">hace un mes</span></div></a></div></div></div></div><div><!--$--><div class="Markdown_Markdown__m6wuK"><p>Es verdad lo que dices, son pequeños detalles que se salta que son necesarios y luego uno debe buscar que hacer, igual es un autoaprendizaje.</p></div><!--/$--></div></header><div class="CommentLike-module_CommentLike__XERrD"><button class="ButtonLayout-module_ButtonLayout__eaqR3 ButtonLayout-module_ButtonLayout--sm__hFh7H ButtonLayout-module_ButtonLayout--basic--sm__Y--Zl Button-module_Button__uBoYP Button-module_Button--sm__kiOL- Button-module_Button--ghost__F8JSX" aria-label="Dar Like" data-id="atomic-ui-button-layout"><span class=""><div class="Like-module_Like__eUwmV"><div><svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" fill-rule="evenodd" d="M18.962 7.04a4.38 4.38 0 0 0-5.973-.219l-.498.432a.75.75 0 0 1-.982 0l-.498-.431a4.38 4.38 0 0 0-5.973.218 4.423 4.423 0 0 0 .234 6.459l6.566 5.69a.246.246 0 0 0 .324 0l6.565-5.69a4.424 4.424 0 0 0 .235-6.459m1.064-1.058a5.88 5.88 0 0 0-8.02-.294L12 5.694l-.006-.006a5.88 5.88 0 0 0-8.02.294 5.923 5.923 0 0 0 .315 8.65l6.566 5.69c.657.57 1.633.57 2.29 0l6.565-5.69a5.924 5.924 0 0 0 .316-8.65" clip-rule="evenodd"></path></svg></div><span>2</span></div></span></button></div><footer class="CommentLayout-module_CommentLayout__Footer__EKW1g"><div class="CommentReply-module_CommentReply__Actions__s0W-0"></div></footer></article></div></ul></div></article><!--/$--><!--$--><article class="CommentLayout-module_CommentLayout__CYa1n Comment-module_Comment__tcd1t" style="--last-item-height:unset"><img class="Comment-module_Comment__Avatar__f5cUu" src="https://static.platzi.com/static/website/v2/images/avatar_default.7516253fc982.png" alt="Laura Mariela Lopez" width="24" height="24"/><header class="CommentLayout-module_CommentLayout__Content__fCbVx"><div class="CommentLayout-module_CommentLayout__Header__YNglM"><div class="CommentHeader-module_CommentHeader__TdgfD"><div class="CommentHeader-module_CommentHeader__Title__2fcdC"><div class="CommentHeader-module_CommentHeader__Author__SyM1G"><p class="CommentHeader-module_CommentHeader__Name__lpA03">Laura Mariela Lopez</p></div><div class="CommentHeader-module_CommentHeader__Info__FqvJx">student<span>•</span><a href="/comentario/5451708/"><div class="Tooltip-module_Tooltip__3RyoA"><span class="CommentHeader-module_CommentHeader__Time__aL32o">hace 2 meses</span></div></a></div></div></div></div><div><!--$--><div class="Markdown_Markdown__m6wuK"><p>Para establecer el idioma español en Visual Studio Code (VSCode), debes seguir estos pasos:</p>
<ol>
<li>Abre VSCode.</li>
<li>Ve a "View" (Ver) en la barra de menú.</li>
<li>Selecciona "Command Palette" (Paleta de Comandos) o usa el atajo <code class="Markdown_Markdown-codeLine__QIC2v">Ctrl+Shift+P</code>.</li>
<li>Escribe "Configure Display Language" (Configurar idioma de visualización) y selecciona esa opción.</li>
<li>En la lista que aparece, elige <code class="Markdown_Markdown-codeLine__QIC2v">es</code> para español.</li>
<li>Reinicia VSCode para aplicar los cambios.</li>
</ol>
<p>Así podrás trabajar en español en tu entorno de desarrollo.</p></div><!--/$--></div></header><div class="CommentLike-module_CommentLike__XERrD"><button class="ButtonLayout-module_ButtonLayout__eaqR3 ButtonLayout-module_ButtonLayout--sm__hFh7H ButtonLayout-module_ButtonLayout--basic--sm__Y--Zl Button-module_Button__uBoYP Button-module_Button--sm__kiOL- Button-module_Button--ghost__F8JSX" aria-label="Dar Like" data-id="atomic-ui-button-layout"><span class=""><div class="Like-module_Like__eUwmV"><div><svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" fill-rule="evenodd" d="M18.962 7.04a4.38 4.38 0 0 0-5.973-.219l-.498.432a.75.75 0 0 1-.982 0l-.498-.431a4.38 4.38 0 0 0-5.973.218 4.423 4.423 0 0 0 .234 6.459l6.566 5.69a.246.246 0 0 0 .324 0l6.565-5.69a4.424 4.424 0 0 0 .235-6.459m1.064-1.058a5.88 5.88 0 0 0-8.02-.294L12 5.694l-.006-.006a5.88 5.88 0 0 0-8.02.294 5.923 5.923 0 0 0 .315 8.65l6.566 5.69c.657.57 1.633.57 2.29 0l6.565-5.69a5.924 5.924 0 0 0 .316-8.65" clip-rule="evenodd"></path></svg></div><span>4</span></div></span></button></div><footer class="CommentLayout-module_CommentLayout__Footer__EKW1g"></footer></article><!--/$--><!--$--><article class="CommentLayout-module_CommentLayout__CYa1n Comment-module_Comment__tcd1t Comment-module_Comment--has-replies__jacm7" style="--last-item-height:unset"><img class="Comment-module_Comment__Avatar__f5cUu" src="https://static.platzi.com/media/avatars/raulsanchez92_577c936b-adbc-40ea-98e6-5ec0a1589b16" alt="Raúl Adolfo Sánchez Rodríguez" width="24" height="24"/><header class="CommentLayout-module_CommentLayout__Content__fCbVx"><div class="CommentLayout-module_CommentLayout__Header__YNglM"><div class="CommentHeader-module_CommentHeader__TdgfD"><div class="CommentHeader-module_CommentHeader__Title__2fcdC"><div class="CommentHeader-module_CommentHeader__Author__SyM1G"><p class="CommentHeader-module_CommentHeader__Name__lpA03">Raúl Adolfo Sánchez Rodríguez</p></div><div class="CommentHeader-module_CommentHeader__Info__FqvJx">student<span>•</span><a href="/comentario/5442605/"><div class="Tooltip-module_Tooltip__3RyoA"><span class="CommentHeader-module_CommentHeader__Time__aL32o">hace 3 meses</span></div></a></div></div></div></div><div><!--$--><div class="Markdown_Markdown__m6wuK"><div class="Markdown_Markdown-image__falyV"><button class="ButtonLayout-module_ButtonLayout__eaqR3 ButtonLayout-module_ButtonLayout--sm__hFh7H ButtonLayout-module_ButtonLayout--basic--sm__Y--Zl Markdown_Markdown-fullScreen__AGaht Button-module_Button__uBoYP Button-module_Button--sm__kiOL- Button-module_Button--ghost__F8JSX" aria-label="Abrir preview" data-id="atomic-ui-button-layout"><span class=""><svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" fill-rule="evenodd" d="M21 13.75a.75.75 0 0 1 .75.75v2A3.75 3.75 0 0 1 18 20.25h-2a.75.75 0 0 1 0-1.5h2a2.25 2.25 0 0 0 2.25-2.25v-2a.75.75 0 0 1 .75-.75M15.25 4.5a.75.75 0 0 1 .75-.75h2a3.75 3.75 0 0 1 3.75 3.75v2a.75.75 0 0 1-1.5 0v-2A2.25 2.25 0 0 0 18 5.25h-2a.75.75 0 0 1-.75-.75M3 13.75a.75.75 0 0 1 .75.75v2A2.25 2.25 0 0 0 6 18.75h2a.75.75 0 0 1 0 1.5H6a3.75 3.75 0 0 1-3.75-3.75v-2a.75.75 0 0 1 .75-.75m3-8.5A2.25 2.25 0 0 0 3.75 7.5v2a.75.75 0 0 1-1.5 0v-2A3.75 3.75 0 0 1 6 3.75h2a.75.75 0 0 1 0 1.5z" clip-rule="evenodd"></path></svg></span></button><img alt="" loading="lazy" width="20" height="20" decoding="async" data-nimg="1" style="color:transparent" srcSet="https://static.platzi.com/media/user_upload/upload-138a6add-6d9b-4988-8a80-e96549e624df.png 1x, https://static.platzi.com/media/user_upload/upload-138a6add-6d9b-4988-8a80-e96549e624df.png 2x" src="https://static.platzi.com/media/user_upload/upload-138a6add-6d9b-4988-8a80-e96549e624df.png"/></div>
<p>___</p>
<div class="Markdown_Markdown-image__falyV"><button class="ButtonLayout-module_ButtonLayout__eaqR3 ButtonLayout-module_ButtonLayout--sm__hFh7H ButtonLayout-module_ButtonLayout--basic--sm__Y--Zl Markdown_Markdown-fullScreen__AGaht Button-module_Button__uBoYP Button-module_Button--sm__kiOL- Button-module_Button--ghost__F8JSX" aria-label="Abrir preview" data-id="atomic-ui-button-layout"><span class=""><svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" fill-rule="evenodd" d="M21 13.75a.75.75 0 0 1 .75.75v2A3.75 3.75 0 0 1 18 20.25h-2a.75.75 0 0 1 0-1.5h2a2.25 2.25 0 0 0 2.25-2.25v-2a.75.75 0 0 1 .75-.75M15.25 4.5a.75.75 0 0 1 .75-.75h2a3.75 3.75 0 0 1 3.75 3.75v2a.75.75 0 0 1-1.5 0v-2A2.25 2.25 0 0 0 18 5.25h-2a.75.75 0 0 1-.75-.75M3 13.75a.75.75 0 0 1 .75.75v2A2.25 2.25 0 0 0 6 18.75h2a.75.75 0 0 1 0 1.5H6a3.75 3.75 0 0 1-3.75-3.75v-2a.75.75 0 0 1 .75-.75m3-8.5A2.25 2.25 0 0 0 3.75 7.5v2a.75.75 0 0 1-1.5 0v-2A3.75 3.75 0 0 1 6 3.75h2a.75.75 0 0 1 0 1.5z" clip-rule="evenodd"></path></svg></span></button><img alt="" loading="lazy" width="20" height="20" decoding="async" data-nimg="1" style="color:transparent" srcSet="https://static.platzi.com/media/user_upload/upload-48722cf9-5c62-4c45-83be-0ba44f78a3e9.png 1x, https://static.platzi.com/media/user_upload/upload-48722cf9-5c62-4c45-83be-0ba44f78a3e9.png 2x" src="https://static.platzi.com/media/user_upload/upload-48722cf9-5c62-4c45-83be-0ba44f78a3e9.png"/></div></div><!--/$--></div></header><div class="CommentLike-module_CommentLike__XERrD"><button class="ButtonLayout-module_ButtonLayout__eaqR3 ButtonLayout-module_ButtonLayout--sm__hFh7H ButtonLayout-module_ButtonLayout--basic--sm__Y--Zl Button-module_Button__uBoYP Button-module_Button--sm__kiOL- Button-module_Button--ghost__F8JSX" aria-label="Dar Like" data-id="atomic-ui-button-layout"><span class=""><div class="Like-module_Like__eUwmV"><div><svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" fill-rule="evenodd" d="M18.962 7.04a4.38 4.38 0 0 0-5.973-.219l-.498.432a.75.75 0 0 1-.982 0l-.498-.431a4.38 4.38 0 0 0-5.973.218 4.423 4.423 0 0 0 .234 6.459l6.566 5.69a.246.246 0 0 0 .324 0l6.565-5.69a4.424 4.424 0 0 0 .235-6.459m1.064-1.058a5.88 5.88 0 0 0-8.02-.294L12 5.694l-.006-.006a5.88 5.88 0 0 0-8.02.294 5.923 5.923 0 0 0 .315 8.65l6.566 5.69c.657.57 1.633.57 2.29 0l6.565-5.69a5.924 5.924 0 0 0 .316-8.65" clip-rule="evenodd"></path></svg></div><span>4</span></div></span></button></div><footer class="CommentLayout-module_CommentLayout__Footer__EKW1g"></footer><div class="CommentReplies-module_CommentReplies__5A1Mx"><ul class="CommentReplies-module_CommentReplies__List__pJRE3"><div class="CommentReplyLineContainer-module_CommentReplyLineContainer__JsbTS" data-id="comment-reply-line-container"><article class="CommentLayout-module_CommentLayout__CYa1n" data-id="comment-ui-reply"><img class="Comment-module_Comment__Avatar__f5cUu" src="https://static.platzi.com/media/avatars/mateoangel_89acc51a-8088-4a48-95a5-6db1a5cd15e1" alt="Mateo Angel Vega" width="24" height="24"/><header class="CommentLayout-module_CommentLayout__Content__fCbVx"><div class="CommentLayout-module_CommentLayout__Header__YNglM"><div class="CommentHeader-module_CommentHeader__TdgfD"><div class="CommentHeader-module_CommentHeader__Title__2fcdC"><div class="CommentHeader-module_CommentHeader__Author__SyM1G"><p class="CommentHeader-module_CommentHeader__Name__lpA03">Mateo Angel Vega</p></div><div class="CommentHeader-module_CommentHeader__Info__FqvJx">student<span>•</span><a href="/comentario/5466962/"><div class="Tooltip-module_Tooltip__3RyoA"><span class="CommentHeader-module_CommentHeader__Time__aL32o">hace un mes</span></div></a></div></div></div></div><div><!--$--><div class="Markdown_Markdown__m6wuK"><p>de donde son las imagenes?</p></div><!--/$--></div></header><div class="CommentLike-module_CommentLike__XERrD"><button class="ButtonLayout-module_ButtonLayout__eaqR3 ButtonLayout-module_ButtonLayout--sm__hFh7H ButtonLayout-module_ButtonLayout--basic--sm__Y--Zl Button-module_Button__uBoYP Button-module_Button--sm__kiOL- Button-module_Button--ghost__F8JSX" aria-label="Dar Like" data-id="atomic-ui-button-layout"><span class=""><div class="Like-module_Like__eUwmV"><div><svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" fill-rule="evenodd" d="M18.962 7.04a4.38 4.38 0 0 0-5.973-.219l-.498.432a.75.75 0 0 1-.982 0l-.498-.431a4.38 4.38 0 0 0-5.973.218 4.423 4.423 0 0 0 .234 6.459l6.566 5.69a.246.246 0 0 0 .324 0l6.565-5.69a4.424 4.424 0 0 0 .235-6.459m1.064-1.058a5.88 5.88 0 0 0-8.02-.294L12 5.694l-.006-.006a5.88 5.88 0 0 0-8.02.294 5.923 5.923 0 0 0 .315 8.65l6.566 5.69c.657.57 1.633.57 2.29 0l6.565-5.69a5.924 5.924 0 0 0 .316-8.65" clip-rule="evenodd"></path></svg></div><span>1</span></div></span></button></div><footer class="CommentLayout-module_CommentLayout__Footer__EKW1g"><div class="CommentReply-module_CommentReply__Actions__s0W-0"></div></footer></article></div></ul></div></article><!--/$--><!--$--><article class="CommentLayout-module_CommentLayout__CYa1n Comment-module_Comment__tcd1t" style="--last-item-height:unset"><img class="Comment-module_Comment__Avatar__f5cUu" src="https://static.platzi.com/media/avatars/avatars/dycardenass_333d3c15-eaaa-4513-8f26-601fd86f2344.png" alt="Daniel Yesid Cárdenas Sandoval" width="24" height="24"/><header class="CommentLayout-module_CommentLayout__Content__fCbVx"><div class="CommentLayout-module_CommentLayout__Header__YNglM"><div class="CommentHeader-module_CommentHeader__TdgfD"><div class="CommentHeader-module_CommentHeader__Title__2fcdC"><div class="CommentHeader-module_CommentHeader__Author__SyM1G"><p class="CommentHeader-module_CommentHeader__Name__lpA03">Daniel Yesid Cárdenas Sandoval</p></div><div class="CommentHeader-module_CommentHeader__Info__FqvJx">student<span>•</span><a href="/comentario/5459846/"><div class="Tooltip-module_Tooltip__3RyoA"><span class="CommentHeader-module_CommentHeader__Time__aL32o">hace 2 meses</span></div></a></div></div></div></div><div><!--$--><div class="Markdown_Markdown__m6wuK"><p>El resumen de la clase esta incompleto</p></div><!--/$--></div></header><div class="CommentLike-module_CommentLike__XERrD"><button class="ButtonLayout-module_ButtonLayout__eaqR3 ButtonLayout-module_ButtonLayout--sm__hFh7H ButtonLayout-module_ButtonLayout--basic--sm__Y--Zl Button-module_Button__uBoYP Button-module_Button--sm__kiOL- Button-module_Button--ghost__F8JSX" aria-label="Dar Like" data-id="atomic-ui-button-layout"><span class=""><div class="Like-module_Like__eUwmV"><div><svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" fill-rule="evenodd" d="M18.962 7.04a4.38 4.38 0 0 0-5.973-.219l-.498.432a.75.75 0 0 1-.982 0l-.498-.431a4.38 4.38 0 0 0-5.973.218 4.423 4.423 0 0 0 .234 6.459l6.566 5.69a.246.246 0 0 0 .324 0l6.565-5.69a4.424 4.424 0 0 0 .235-6.459m1.064-1.058a5.88 5.88 0 0 0-8.02-.294L12 5.694l-.006-.006a5.88 5.88 0 0 0-8.02.294 5.923 5.923 0 0 0 .315 8.65l6.566 5.69c.657.57 1.633.57 2.29 0l6.565-5.69a5.924 5.924 0 0 0 .316-8.65" clip-rule="evenodd"></path></svg></div><span>3</span></div></span></button></div><footer class="CommentLayout-module_CommentLayout__Footer__EKW1g"></footer></article><!--/$--><!--$--><article class="CommentLayout-module_CommentLayout__CYa1n Comment-module_Comment__tcd1t" style="--last-item-height:unset"><img class="Comment-module_Comment__Avatar__f5cUu" src="https://static.platzi.com/media/avatars/eliecer2104_87345182-5948-4291-bf0d-9a303da44e8b" alt="Eliecer Baron" width="24" height="24"/><header class="CommentLayout-module_CommentLayout__Content__fCbVx"><div class="CommentLayout-module_CommentLayout__Header__YNglM"><div class="CommentHeader-module_CommentHeader__TdgfD"><div class="CommentHeader-module_CommentHeader__Title__2fcdC"><div class="CommentHeader-module_CommentHeader__Author__SyM1G"><p class="CommentHeader-module_CommentHeader__Name__lpA03">Eliecer Baron</p></div><div class="CommentHeader-module_CommentHeader__Info__FqvJx">student<span>•</span><a href="/comentario/5444050/"><div class="Tooltip-module_Tooltip__3RyoA"><span class="CommentHeader-module_CommentHeader__Time__aL32o">hace 3 meses</span></div></a></div></div></div></div><div><!--$--><div class="Markdown_Markdown__m6wuK"><p>sugiero el curso de programación basica, en este curso aprendemos HTM, CSS, JS, es muy chebre</p>
<p>AQUÍ EL LINK:</p>
<p><a target="_blank" rel="noopener noreferrer" href="https://platzi.com/cursos/programacion-basica/que-es-platzi/">https://platzi.com/cursos/programacion-basica/que-es-platzi/</a></p></div><!--/$--></div></header><div class="CommentLike-module_CommentLike__XERrD"><button class="ButtonLayout-module_ButtonLayout__eaqR3 ButtonLayout-module_ButtonLayout--sm__hFh7H ButtonLayout-module_ButtonLayout--basic--sm__Y--Zl Button-module_Button__uBoYP Button-module_Button--sm__kiOL- Button-module_Button--ghost__F8JSX" aria-label="Dar Like" data-id="atomic-ui-button-layout"><span class=""><div class="Like-module_Like__eUwmV"><div><svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" fill-rule="evenodd" d="M18.962 7.04a4.38 4.38 0 0 0-5.973-.219l-.498.432a.75.75 0 0 1-.982 0l-.498-.431a4.38 4.38 0 0 0-5.973.218 4.423 4.423 0 0 0 .234 6.459l6.566 5.69a.246.246 0 0 0 .324 0l6.565-5.69a4.424 4.424 0 0 0 .235-6.459m1.064-1.058a5.88 5.88 0 0 0-8.02-.294L12 5.694l-.006-.006a5.88 5.88 0 0 0-8.02.294 5.923 5.923 0 0 0 .315 8.65l6.566 5.69c.657.57 1.633.57 2.29 0l6.565-5.69a5.924 5.924 0 0 0 .316-8.65" clip-rule="evenodd"></path></svg></div><span>3</span></div></span></button></div><footer class="CommentLayout-module_CommentLayout__Footer__EKW1g"></footer></article><!--/$--><!--$--><article class="CommentLayout-module_CommentLayout__CYa1n Comment-module_Comment__tcd1t" style="--last-item-height:unset"><img class="Comment-module_Comment__Avatar__f5cUu" src="https://static.platzi.com/media/avatars/soyjesuslevano_4a9381dd-4fda-4b3b-9045-a7c1f17b55dd.jpg" alt="Jesús Ynuma" width="24" height="24"/><header class="CommentLayout-module_CommentLayout__Content__fCbVx"><div class="CommentLayout-module_CommentLayout__Header__YNglM"><div class="CommentHeader-module_CommentHeader__TdgfD"><div class="CommentHeader-module_CommentHeader__Title__2fcdC"><div class="CommentHeader-module_CommentHeader__Author__SyM1G"><p class="CommentHeader-module_CommentHeader__Name__lpA03">Jesús Ynuma</p></div><div class="CommentHeader-module_CommentHeader__Info__FqvJx">student<span>•</span><a href="/comentario/5472852/"><div class="Tooltip-module_Tooltip__3RyoA"><span class="CommentHeader-module_CommentHeader__Time__aL32o">hace un mes</span></div></a></div></div></div></div><div><!--$--><div class="Markdown_Markdown__m6wuK"><p>Para quienes no ven el código actualizado automáticamente en el navegador, hay que instalar una extensión llamada <strong>Live Server</strong>.</p>
<p class="Markdown_Markdown-heading-3__RM6K5" role="heading" aria-level="4">🛠️ Pasos para Instalar la Extensión:</p>
<ol>
<li>Esta extensión se instala desde el mismo Visual Studio Code, yendo a <strong>View</strong> (Ver).</li>
<li>Busca y haz clic en <strong>Extensiones</strong>.</li>
<li>Ahí, busca <strong>Live Server</strong>.</li>
<li>Deben seleccionar el que está con el propietario de <strong>Ritwick Dey</strong>.</li>
<li>Le dan clic a <strong>Instalar</strong> y ya está.</li>
</ol>
<p>Ahora pueden ver el código en el navegador.</p></div><!--/$--></div></header><div class="CommentLike-module_CommentLike__XERrD"><button class="ButtonLayout-module_ButtonLayout__eaqR3 ButtonLayout-module_ButtonLayout--sm__hFh7H ButtonLayout-module_ButtonLayout--basic--sm__Y--Zl Button-module_Button__uBoYP Button-module_Button--sm__kiOL- Button-module_Button--ghost__F8JSX" aria-label="Dar Like" data-id="atomic-ui-button-layout"><span class=""><div class="Like-module_Like__eUwmV"><div><svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" fill-rule="evenodd" d="M18.962 7.04a4.38 4.38 0 0 0-5.973-.219l-.498.432a.75.75 0 0 1-.982 0l-.498-.431a4.38 4.38 0 0 0-5.973.218 4.423 4.423 0 0 0 .234 6.459l6.566 5.69a.246.246 0 0 0 .324 0l6.565-5.69a4.424 4.424 0 0 0 .235-6.459m1.064-1.058a5.88 5.88 0 0 0-8.02-.294L12 5.694l-.006-.006a5.88 5.88 0 0 0-8.02.294 5.923 5.923 0 0 0 .315 8.65l6.566 5.69c.657.57 1.633.57 2.29 0l6.565-5.69a5.924 5.924 0 0 0 .316-8.65" clip-rule="evenodd"></path></svg></div><span>2</span></div></span></button></div><footer class="CommentLayout-module_CommentLayout__Footer__EKW1g"></footer></article><!--/$--><!--$--><article class="CommentLayout-module_CommentLayout__CYa1n Comment-module_Comment__tcd1t" style="--last-item-height:unset"><img class="Comment-module_Comment__Avatar__f5cUu" src="https://static.platzi.com/media/avatars/avatars/inafie_f809aea3-7d47-4981-aba9-26ba82e689db" alt="Inés Nafie" width="24" height="24"/><header class="CommentLayout-module_CommentLayout__Content__fCbVx"><div class="CommentLayout-module_CommentLayout__Header__YNglM"><div class="CommentHeader-module_CommentHeader__TdgfD"><div class="CommentHeader-module_CommentHeader__Title__2fcdC"><div class="CommentHeader-module_CommentHeader__Author__SyM1G"><p class="CommentHeader-module_CommentHeader__Name__lpA03">Inés Nafie</p></div><div class="CommentHeader-module_CommentHeader__Info__FqvJx">student<span>•</span><a href="/comentario/5471457/"><div class="Tooltip-module_Tooltip__3RyoA"><span class="CommentHeader-module_CommentHeader__Time__aL32o">hace un mes</span></div></a></div></div></div></div><div><!--$--><div class="Markdown_Markdown__m6wuK"><p>nombres carpetas y archivos sin espacios ni acentos, luego para mencionar archivos es un problema.</p>
<p>.html es lo que le indica al archivo que vamos a usar este codigo. </p>
<p>DOCTYPE html es lo que le está indicando al navegador que lo que viene abajo es html5. </p>
<p>las etiquetas contenedoras abren y cierran, y el contenido va en su interior.</p>
<p>open with live server significa abrir el proyecto en el navegador desde local.</p>
<p>Todo lo que esté dentro de body es lo que se va a ver. Lo que esté dentro de head es lo que necesita el navegador para renderizar el proyecto.</p>
<p>lang="en" - significa el idioma del contenido que va a venir dentro del body. En es inglés. Y es lo que permite al navegador saber si estás en un navegador español viendo una pag en ingles, lo que le hace reconocerlo y preguntarte si quieres traducirlo. </p>
<p>meta charset="UTF-82 es para poder usar caracteres especiales, como acentos, la ñ, etc.</p>
<p>name viewport es el que permite que la web sea multidispositivo, sea responsive. content_"width=devide-width, le está diciendo usa el tamaño real del dispositivo. Y la initial-scale=1.0" significa que siempre lo veamos a escala 1, que no lo haga más pequeño o más grande.</p>
<p><title>Document</title> es el titulo del documento, es lo que va a aparecer como titulo en la pestaña del navegador.</p>
<p>Todo lo que está en body se va a renderizar en el navegador.</p>
<p><h1> </h1> Es una etiqueta contenedora de titulo.</p>
<p><p> </p> es una etiqueta contenedora de párrafo común.</p></div><!--/$--></div></header><div class="CommentLike-module_CommentLike__XERrD"><button class="ButtonLayout-module_ButtonLayout__eaqR3 ButtonLayout-module_ButtonLayout--sm__hFh7H ButtonLayout-module_ButtonLayout--basic--sm__Y--Zl Button-module_Button__uBoYP Button-module_Button--sm__kiOL- Button-module_Button--ghost__F8JSX" aria-label="Dar Like" data-id="atomic-ui-button-layout"><span class=""><div class="Like-module_Like__eUwmV"><div><svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" fill-rule="evenodd" d="M18.962 7.04a4.38 4.38 0 0 0-5.973-.219l-.498.432a.75.75 0 0 1-.982 0l-.498-.431a4.38 4.38 0 0 0-5.973.218 4.423 4.423 0 0 0 .234 6.459l6.566 5.69a.246.246 0 0 0 .324 0l6.565-5.69a4.424 4.424 0 0 0 .235-6.459m1.064-1.058a5.88 5.88 0 0 0-8.02-.294L12 5.694l-.006-.006a5.88 5.88 0 0 0-8.02.294 5.923 5.923 0 0 0 .315 8.65l6.566 5.69c.657.57 1.633.57 2.29 0l6.565-5.69a5.924 5.924 0 0 0 .316-8.65" clip-rule="evenodd"></path></svg></div><span>2</span></div></span></button></div><footer class="CommentLayout-module_CommentLayout__Footer__EKW1g"></footer></article><!--/$--><!--$--><article class="CommentLayout-module_CommentLayout__CYa1n Comment-module_Comment__tcd1t" style="--last-item-height:unset"><img class="Comment-module_Comment__Avatar__f5cUu" src="https://static.platzi.com/static/website/v2/images/avatar_default.7516253fc982.png" alt="Luis Ramirez" width="24" height="24"/><header class="CommentLayout-module_CommentLayout__Content__fCbVx"><div class="CommentLayout-module_CommentLayout__Header__YNglM"><div class="CommentHeader-module_CommentHeader__TdgfD"><div class="CommentHeader-module_CommentHeader__Title__2fcdC"><div class="CommentHeader-module_CommentHeader__Author__SyM1G"><p class="CommentHeader-module_CommentHeader__Name__lpA03">Luis Ramirez</p></div><div class="CommentHeader-module_CommentHeader__Info__FqvJx">student<span>•</span><a href="/comentario/5451026/"><div class="Tooltip-module_Tooltip__3RyoA"><span class="CommentHeader-module_CommentHeader__Time__aL32o">hace 2 meses</span></div></a></div></div></div></div><div><!--$--><div class="Markdown_Markdown__m6wuK"><p>Para abrir tu proyecto en Chrome en lugar de Firefox al usar "Open with Live Server" en VS Code, debes cambiar la configuración predeterminada del navegador. Esto se hace de la siguiente manera:</p>
<ol>
<li>Abre VS Code y ve a la configuración (File > Preferences > Settings).</li>
<li>Busca "Live Server: Custom Browser".</li>
<li>Establece el valor en <code class="Markdown_Markdown-codeLine__QIC2v">"chrome"</code>.</li>
</ol>
<p>Esto permitirá que Live Server use Chrome como navegador predeterminado. Si deseas abrir en otro navegador, simplemente reemplaza "chrome" por el nombre correspondiente del navegador (por ejemplo, "edge" para Microsoft Edge).</p></div><!--/$--></div></header><div class="CommentLike-module_CommentLike__XERrD"><button class="ButtonLayout-module_ButtonLayout__eaqR3 ButtonLayout-module_ButtonLayout--sm__hFh7H ButtonLayout-module_ButtonLayout--basic--sm__Y--Zl Button-module_Button__uBoYP Button-module_Button--sm__kiOL- Button-module_Button--ghost__F8JSX" aria-label="Dar Like" data-id="atomic-ui-button-layout"><span class=""><div class="Like-module_Like__eUwmV"><div><svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" fill-rule="evenodd" d="M18.962 7.04a4.38 4.38 0 0 0-5.973-.219l-.498.432a.75.75 0 0 1-.982 0l-.498-.431a4.38 4.38 0 0 0-5.973.218 4.423 4.423 0 0 0 .234 6.459l6.566 5.69a.246.246 0 0 0 .324 0l6.565-5.69a4.424 4.424 0 0 0 .235-6.459m1.064-1.058a5.88 5.88 0 0 0-8.02-.294L12 5.694l-.006-.006a5.88 5.88 0 0 0-8.02.294 5.923 5.923 0 0 0 .315 8.65l6.566 5.69c.657.57 1.633.57 2.29 0l6.565-5.69a5.924 5.924 0 0 0 .316-8.65" clip-rule="evenodd"></path></svg></div><span>2</span></div></span></button></div><footer class="CommentLayout-module_CommentLayout__Footer__EKW1g"></footer></article><!--/$--><!--$--><article class="CommentLayout-module_CommentLayout__CYa1n Comment-module_Comment__tcd1t" style="--last-item-height:unset"><img class="Comment-module_Comment__Avatar__f5cUu" src="https://static.platzi.com/media/avatars/avatars/Valentina0296_dfb61fb0-51a4-404e-8306-8f8620a7f663.jpg" alt="Valentina Hernández" width="24" height="24"/><header class="CommentLayout-module_CommentLayout__Content__fCbVx"><div class="CommentLayout-module_CommentLayout__Header__YNglM"><div class="CommentHeader-module_CommentHeader__TdgfD"><div class="CommentHeader-module_CommentHeader__Title__2fcdC"><div class="CommentHeader-module_CommentHeader__Author__SyM1G"><p class="CommentHeader-module_CommentHeader__Name__lpA03">Valentina Hernández</p></div><div class="CommentHeader-module_CommentHeader__Info__FqvJx">student<span>•</span><a href="/comentario/5441693/"><div class="Tooltip-module_Tooltip__3RyoA"><span class="CommentHeader-module_CommentHeader__Time__aL32o">hace 3 meses</span></div></a></div></div></div></div><div><!--$--><div class="Markdown_Markdown__m6wuK"><blockquote>
<p><strong><html></html></strong> : contenedor padre o principal
<strong>lang = "es":</strong> es un atributo especial que indica el lenguaje.
<strong><head></head></strong> : todo lo que es importante, para poder cargar el proyecto, como dependencias, librerial, css etc.
<strong><body></body></strong> :Texto, videos, imagenes o cosas interactivas, head y body son contenedores hermanos.
<strong>meta charset=</strong>"UTF-8" : ayuda a que el navegador entienda caracteres especiales.
<strong>meta name</strong>="viewport" content : te la la descripción de la página en el navegador a la hora de buscarla.
<strong>meta name</strong>="robots" : sirve para autorizarle a los robots a acomodar la pagina para el tipo de busquedas, es decir posicionar la pagina dependiendo la busqueda.</p>
</blockquote>
<p><strong>Etiqueta contenido:</strong> llevaran texto, imagenes, videos que se puedan randerizar.</p>
<p><strong>Etiqueta contenedor</strong>a: llevaran etiquetas dentro.</p></div><!--/$--></div></header><div class="CommentLike-module_CommentLike__XERrD"><button class="ButtonLayout-module_ButtonLayout__eaqR3 ButtonLayout-module_ButtonLayout--sm__hFh7H ButtonLayout-module_ButtonLayout--basic--sm__Y--Zl Button-module_Button__uBoYP Button-module_Button--sm__kiOL- Button-module_Button--ghost__F8JSX" aria-label="Dar Like" data-id="atomic-ui-button-layout"><span class=""><div class="Like-module_Like__eUwmV"><div><svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" fill-rule="evenodd" d="M18.962 7.04a4.38 4.38 0 0 0-5.973-.219l-.498.432a.75.75 0 0 1-.982 0l-.498-.431a4.38 4.38 0 0 0-5.973.218 4.423 4.423 0 0 0 .234 6.459l6.566 5.69a.246.246 0 0 0 .324 0l6.565-5.69a4.424 4.424 0 0 0 .235-6.459m1.064-1.058a5.88 5.88 0 0 0-8.02-.294L12 5.694l-.006-.006a5.88 5.88 0 0 0-8.02.294 5.923 5.923 0 0 0 .315 8.65l6.566 5.69c.657.57 1.633.57 2.29 0l6.565-5.69a5.924 5.924 0 0 0 .316-8.65" clip-rule="evenodd"></path></svg></div><span>2</span></div></span></button></div><footer class="CommentLayout-module_CommentLayout__Footer__EKW1g"></footer></article><!--/$--><!--$--><article class="CommentLayout-module_CommentLayout__CYa1n Comment-module_Comment__tcd1t" style="--last-item-height:unset"><img class="Comment-module_Comment__Avatar__f5cUu" src="https://static.platzi.com/media/avatars/avatars/johanandrei345_04a7bd3a-2cb0-4b3a-a1a2-c626885d7540" alt="Johan Andrey Fonseca Flechas" width="24" height="24"/><header class="CommentLayout-module_CommentLayout__Content__fCbVx"><div class="CommentLayout-module_CommentLayout__Header__YNglM"><div class="CommentHeader-module_CommentHeader__TdgfD"><div class="CommentHeader-module_CommentHeader__Title__2fcdC"><div class="CommentHeader-module_CommentHeader__Author__SyM1G"><p class="CommentHeader-module_CommentHeader__Name__lpA03">Johan Andrey Fonseca Flechas</p></div><div class="CommentHeader-module_CommentHeader__Info__FqvJx">student<span>•</span><a href="/comentario/5488620/"><div class="Tooltip-module_Tooltip__3RyoA"><span class="CommentHeader-module_CommentHeader__Time__aL32o">hace 9 días</span></div></a><span>•</span><div class="Tooltip-module_Tooltip__3RyoA"><span class="CommentHeader-module_CommentHeader__Edited__e1V7C">editado</span></div></div></div></div></div><div><!--$--><div class="Markdown_Markdown__m6wuK"><p><strong><html lang="en">:</strong> Es la etiqueta que contiene el documento HTML y tiene una etiqueta que especifica el lenguaje en el que se escribió el contenido.</p>
<p><strong><head>:</strong> Contiene los metadatos, es decir, información sobre el documento (no visible para los usuarios) que le indica al navegador cómo debe mostrarse el sitio.</p>
<ul>
<li><meta charset="UTF-8">: Indica al navegador la codificación de caracteres a utilizar, permitiéndonos usar tildes, ñ, símbolos y emojis. Si no lo usamos, los acentos y caracteres especiales no cargarían o se imprimirían caracteres extraños.</li>
<li><meta name="viewport" content="width=device-width, initial-scale=1.0": Controla cómo se ve la página en dipositivos móviles.</li>
<li><title>: Es el título de la página que aparece en la pestaña del navegador.</li>
</ul>
<p><strong><body>:</strong> Es la parte visible de la página web y con la que el usuario interactúa. Todo el contenido en body se renderiza en el navegador.</p>
<ul>
<li>h1: Título principal</li>
<li>p: Párrafo</li>
</ul></div><!--/$--></div></header><div class="CommentLike-module_CommentLike__XERrD"><button class="ButtonLayout-module_ButtonLayout__eaqR3 ButtonLayout-module_ButtonLayout--sm__hFh7H ButtonLayout-module_ButtonLayout--basic--sm__Y--Zl Button-module_Button__uBoYP Button-module_Button--sm__kiOL- Button-module_Button--ghost__F8JSX" aria-label="Dar Like" data-id="atomic-ui-button-layout"><span class=""><div class="Like-module_Like__eUwmV"><div><svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" fill-rule="evenodd" d="M18.962 7.04a4.38 4.38 0 0 0-5.973-.219l-.498.432a.75.75 0 0 1-.982 0l-.498-.431a4.38 4.38 0 0 0-5.973.218 4.423 4.423 0 0 0 .234 6.459l6.566 5.69a.246.246 0 0 0 .324 0l6.565-5.69a4.424 4.424 0 0 0 .235-6.459m1.064-1.058a5.88 5.88 0 0 0-8.02-.294L12 5.694l-.006-.006a5.88 5.88 0 0 0-8.02.294 5.923 5.923 0 0 0 .315 8.65l6.566 5.69c.657.57 1.633.57 2.29 0l6.565-5.69a5.924 5.924 0 0 0 .316-8.65" clip-rule="evenodd"></path></svg></div><span>1</span></div></span></button></div><footer class="CommentLayout-module_CommentLayout__Footer__EKW1g"></footer></article><!--/$--><!--$--><article class="CommentLayout-module_CommentLayout__CYa1n Comment-module_Comment__tcd1t" style="--last-item-height:unset"><img class="Comment-module_Comment__Avatar__f5cUu" src="https://static.platzi.com/static/website/v2/images/avatar_default.7516253fc982.png" alt="jesus david cabas bravo" width="24" height="24"/><header class="CommentLayout-module_CommentLayout__Content__fCbVx"><div class="CommentLayout-module_CommentLayout__Header__YNglM"><div class="CommentHeader-module_CommentHeader__TdgfD"><div class="CommentHeader-module_CommentHeader__Title__2fcdC"><div class="CommentHeader-module_CommentHeader__Author__SyM1G"><p class="CommentHeader-module_CommentHeader__Name__lpA03">jesus david cabas bravo</p></div><div class="CommentHeader-module_CommentHeader__Info__FqvJx">student<span>•</span><a href="/comentario/5481469/"><div class="Tooltip-module_Tooltip__3RyoA"><span class="CommentHeader-module_CommentHeader__Time__aL32o">hace 16 días</span></div></a></div></div></div></div><div><!--$--><div class="Markdown_Markdown__m6wuK"><p>falto decir la extencion live server para poder usar open live server y faltaria unas extenciones </p></div><!--/$--></div></header><div class="CommentLike-module_CommentLike__XERrD"><button class="ButtonLayout-module_ButtonLayout__eaqR3 ButtonLayout-module_ButtonLayout--sm__hFh7H ButtonLayout-module_ButtonLayout--basic--sm__Y--Zl Button-module_Button__uBoYP Button-module_Button--sm__kiOL- Button-module_Button--ghost__F8JSX" aria-label="Dar Like" data-id="atomic-ui-button-layout"><span class=""><div class="Like-module_Like__eUwmV"><div><svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" fill-rule="evenodd" d="M18.962 7.04a4.38 4.38 0 0 0-5.973-.219l-.498.432a.75.75 0 0 1-.982 0l-.498-.431a4.38 4.38 0 0 0-5.973.218 4.423 4.423 0 0 0 .234 6.459l6.566 5.69a.246.246 0 0 0 .324 0l6.565-5.69a4.424 4.424 0 0 0 .235-6.459m1.064-1.058a5.88 5.88 0 0 0-8.02-.294L12 5.694l-.006-.006a5.88 5.88 0 0 0-8.02.294 5.923 5.923 0 0 0 .315 8.65l6.566 5.69c.657.57 1.633.57 2.29 0l6.565-5.69a5.924 5.924 0 0 0 .316-8.65" clip-rule="evenodd"></path></svg></div><span>1</span></div></span></button></div><footer class="CommentLayout-module_CommentLayout__Footer__EKW1g"></footer></article><!--/$--><!--$--><article class="CommentLayout-module_CommentLayout__CYa1n Comment-module_Comment__tcd1t Comment-module_Comment--has-replies__jacm7" style="--last-item-height:unset"><img class="Comment-module_Comment__Avatar__f5cUu" src="https://static.platzi.com/media/avatars/mayramoramrd_6e28787a-b428-4c2c-b048-eff37381bb2a.jpg" alt="Mayra Alejandra Mora Márquez" width="24" height="24"/><header class="CommentLayout-module_CommentLayout__Content__fCbVx"><div class="CommentLayout-module_CommentLayout__Header__YNglM"><div class="CommentHeader-module_CommentHeader__TdgfD"><div class="CommentHeader-module_CommentHeader__Title__2fcdC"><div class="CommentHeader-module_CommentHeader__Author__SyM1G"><p class="CommentHeader-module_CommentHeader__Name__lpA03">Mayra Alejandra Mora Márquez</p></div><div class="CommentHeader-module_CommentHeader__Info__FqvJx">student<span>•</span><a href="/comentario/5471864/"><div class="Tooltip-module_Tooltip__3RyoA"><span class="CommentHeader-module_CommentHeader__Time__aL32o">hace un mes</span></div></a></div></div></div></div><div><!--$--><div class="Markdown_Markdown__m6wuK"><div class="Markdown_Markdown-image__falyV"><button class="ButtonLayout-module_ButtonLayout__eaqR3 ButtonLayout-module_ButtonLayout--sm__hFh7H ButtonLayout-module_ButtonLayout--basic--sm__Y--Zl Markdown_Markdown-fullScreen__AGaht Button-module_Button__uBoYP Button-module_Button--sm__kiOL- Button-module_Button--ghost__F8JSX" aria-label="Abrir preview" data-id="atomic-ui-button-layout"><span class=""><svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" fill-rule="evenodd" d="M21 13.75a.75.75 0 0 1 .75.75v2A3.75 3.75 0 0 1 18 20.25h-2a.75.75 0 0 1 0-1.5h2a2.25 2.25 0 0 0 2.25-2.25v-2a.75.75 0 0 1 .75-.75M15.25 4.5a.75.75 0 0 1 .75-.75h2a3.75 3.75 0 0 1 3.75 3.75v2a.75.75 0 0 1-1.5 0v-2A2.25 2.25 0 0 0 18 5.25h-2a.75.75 0 0 1-.75-.75M3 13.75a.75.75 0 0 1 .75.75v2A2.25 2.25 0 0 0 6 18.75h2a.75.75 0 0 1 0 1.5H6a3.75 3.75 0 0 1-3.75-3.75v-2a.75.75 0 0 1 .75-.75m3-8.5A2.25 2.25 0 0 0 3.75 7.5v2a.75.75 0 0 1-1.5 0v-2A3.75 3.75 0 0 1 6 3.75h2a.75.75 0 0 1 0 1.5z" clip-rule="evenodd"></path></svg></span></button><img alt="" loading="lazy" width="20" height="20" decoding="async" data-nimg="1" style="color:transparent" srcSet="https://static.platzi.com/media/user_upload/upload-0d98eb5a-3fe5-45fa-83b9-7d97695ebf04.png 1x, https://static.platzi.com/media/user_upload/upload-0d98eb5a-3fe5-45fa-83b9-7d97695ebf04.png 2x" src="https://static.platzi.com/media/user_upload/upload-0d98eb5a-3fe5-45fa-83b9-7d97695ebf04.png"/></div>Ya hice lo de live server , pero aún no me sale <div class="Markdown_Markdown-image__falyV"><button class="ButtonLayout-module_ButtonLayout__eaqR3 ButtonLayout-module_ButtonLayout--sm__hFh7H ButtonLayout-module_ButtonLayout--basic--sm__Y--Zl Markdown_Markdown-fullScreen__AGaht Button-module_Button__uBoYP Button-module_Button--sm__kiOL- Button-module_Button--ghost__F8JSX" aria-label="Abrir preview" data-id="atomic-ui-button-layout"><span class=""><svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" fill-rule="evenodd" d="M21 13.75a.75.75 0 0 1 .75.75v2A3.75 3.75 0 0 1 18 20.25h-2a.75.75 0 0 1 0-1.5h2a2.25 2.25 0 0 0 2.25-2.25v-2a.75.75 0 0 1 .75-.75M15.25 4.5a.75.75 0 0 1 .75-.75h2a3.75 3.75 0 0 1 3.75 3.75v2a.75.75 0 0 1-1.5 0v-2A2.25 2.25 0 0 0 18 5.25h-2a.75.75 0 0 1-.75-.75M3 13.75a.75.75 0 0 1 .75.75v2A2.25 2.25 0 0 0 6 18.75h2a.75.75 0 0 1 0 1.5H6a3.75 3.75 0 0 1-3.75-3.75v-2a.75.75 0 0 1 .75-.75m3-8.5A2.25 2.25 0 0 0 3.75 7.5v2a.75.75 0 0 1-1.5 0v-2A3.75 3.75 0 0 1 6 3.75h2a.75.75 0 0 1 0 1.5z" clip-rule="evenodd"></path></svg></span></button><img alt="" loading="lazy" width="20" height="20" decoding="async" data-nimg="1" style="color:transparent" srcSet="https://static.platzi.com/media/user_upload/upload-94d0aeab-16da-47cb-9dae-cc153b5a196b.png 1x, https://static.platzi.com/media/user_upload/upload-94d0aeab-16da-47cb-9dae-cc153b5a196b.png 2x" src="https://static.platzi.com/media/user_upload/upload-94d0aeab-16da-47cb-9dae-cc153b5a196b.png"/></div></div><!--/$--></div></header><div class="CommentLike-module_CommentLike__XERrD"><button class="ButtonLayout-module_ButtonLayout__eaqR3 ButtonLayout-module_ButtonLayout--sm__hFh7H ButtonLayout-module_ButtonLayout--basic--sm__Y--Zl Button-module_Button__uBoYP Button-module_Button--sm__kiOL- Button-module_Button--ghost__F8JSX" aria-label="Dar Like" data-id="atomic-ui-button-layout"><span class=""><div class="Like-module_Like__eUwmV"><div><svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" fill-rule="evenodd" d="M18.962 7.04a4.38 4.38 0 0 0-5.973-.219l-.498.432a.75.75 0 0 1-.982 0l-.498-.431a4.38 4.38 0 0 0-5.973.218 4.423 4.423 0 0 0 .234 6.459l6.566 5.69a.246.246 0 0 0 .324 0l6.565-5.69a4.424 4.424 0 0 0 .235-6.459m1.064-1.058a5.88 5.88 0 0 0-8.02-.294L12 5.694l-.006-.006a5.88 5.88 0 0 0-8.02.294 5.923 5.923 0 0 0 .315 8.65l6.566 5.69c.657.57 1.633.57 2.29 0l6.565-5.69a5.924 5.924 0 0 0 .316-8.65" clip-rule="evenodd"></path></svg></div><span>1</span></div></span></button></div><footer class="CommentLayout-module_CommentLayout__Footer__EKW1g"></footer><div class="CommentReplies-module_CommentReplies__5A1Mx"><ul class="CommentReplies-module_CommentReplies__List__pJRE3"><div class="CommentReplyLineContainer-module_CommentReplyLineContainer__JsbTS" data-id="comment-reply-line-container"><article class="CommentLayout-module_CommentLayout__CYa1n" data-id="comment-ui-reply"><img class="Comment-module_Comment__Avatar__f5cUu" src="https://static.platzi.com/media/avatars/avatars/al2223041907_36c588fa-db60-4129-8ac8-53dabb759c75" alt="JORGE LUIS HERNANDEZ RUIZ" width="24" height="24"/><header class="CommentLayout-module_CommentLayout__Content__fCbVx"><div class="CommentLayout-module_CommentLayout__Header__YNglM"><div class="CommentHeader-module_CommentHeader__TdgfD"><div class="CommentHeader-module_CommentHeader__Title__2fcdC"><div class="CommentHeader-module_CommentHeader__Author__SyM1G"><p class="CommentHeader-module_CommentHeader__Name__lpA03">JORGE LUIS HERNANDEZ RUIZ</p></div><div class="CommentHeader-module_CommentHeader__Info__FqvJx">student<span>•</span><a href="/comentario/5473586/"><div class="Tooltip-module_Tooltip__3RyoA"><span class="CommentHeader-module_CommentHeader__Time__aL32o">hace un mes</span></div></a></div></div></div></div><div><!--$--><div class="Markdown_Markdown__m6wuK"><p>Hola compañera, buena noche, las extensiones que hablan otros compañeros se instalan dentro del VS Code, no en el navegador como tal, tienes que ir en la barra de la izquierda donde está la sección de files, buscar, etc, y ahi sale un cuadrado con cuatro cuadrados, (te adjunto una foto de la barra que te menciono) una vez que le des a la penúltima opción que sale en mi captura, te sale la barra de extensiones, ahí es donde buscas las extensiones que otros compañeros mencionan, las mas importantes usadas en el video: </p>
<p>Live Server</p>
<p>Material Icon Theme</p>
<p>Saludos</p>
<p> <div class="Markdown_Markdown-image__falyV"><button class="ButtonLayout-module_ButtonLayout__eaqR3 ButtonLayout-module_ButtonLayout--sm__hFh7H ButtonLayout-module_ButtonLayout--basic--sm__Y--Zl Markdown_Markdown-fullScreen__AGaht Button-module_Button__uBoYP Button-module_Button--sm__kiOL- Button-module_Button--ghost__F8JSX" aria-label="Abrir preview" data-id="atomic-ui-button-layout"><span class=""><svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" fill-rule="evenodd" d="M21 13.75a.75.75 0 0 1 .75.75v2A3.75 3.75 0 0 1 18 20.25h-2a.75.75 0 0 1 0-1.5h2a2.25 2.25 0 0 0 2.25-2.25v-2a.75.75 0 0 1 .75-.75M15.25 4.5a.75.75 0 0 1 .75-.75h2a3.75 3.75 0 0 1 3.75 3.75v2a.75.75 0 0 1-1.5 0v-2A2.25 2.25 0 0 0 18 5.25h-2a.75.75 0 0 1-.75-.75M3 13.75a.75.75 0 0 1 .75.75v2A2.25 2.25 0 0 0 6 18.75h2a.75.75 0 0 1 0 1.5H6a3.75 3.75 0 0 1-3.75-3.75v-2a.75.75 0 0 1 .75-.75m3-8.5A2.25 2.25 0 0 0 3.75 7.5v2a.75.75 0 0 1-1.5 0v-2A3.75 3.75 0 0 1 6 3.75h2a.75.75 0 0 1 0 1.5z" clip-rule="evenodd"></path></svg></span></button><img alt="" loading="lazy" width="20" height="20" decoding="async" data-nimg="1" style="color:transparent" srcSet="https://static.platzi.com/media/user_upload/upload-c0ddf2a0-d9dd-49d6-9bd8-8dc55e6e207d.png 1x, https://static.platzi.com/media/user_upload/upload-c0ddf2a0-d9dd-49d6-9bd8-8dc55e6e207d.png 2x" src="https://static.platzi.com/media/user_upload/upload-c0ddf2a0-d9dd-49d6-9bd8-8dc55e6e207d.png"/></div></p></div><!--/$--></div></header><div class="CommentLike-module_CommentLike__XERrD"><button class="ButtonLayout-module_ButtonLayout__eaqR3 ButtonLayout-module_ButtonLayout--sm__hFh7H ButtonLayout-module_ButtonLayout--basic--sm__Y--Zl Button-module_Button__uBoYP Button-module_Button--sm__kiOL- Button-module_Button--ghost__F8JSX" aria-label="Dar Like" data-id="atomic-ui-button-layout"><span class=""><div class="Like-module_Like__eUwmV"><div><svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" fill-rule="evenodd" d="M18.962 7.04a4.38 4.38 0 0 0-5.973-.219l-.498.432a.75.75 0 0 1-.982 0l-.498-.431a4.38 4.38 0 0 0-5.973.218 4.423 4.423 0 0 0 .234 6.459l6.566 5.69a.246.246 0 0 0 .324 0l6.565-5.69a4.424 4.424 0 0 0 .235-6.459m1.064-1.058a5.88 5.88 0 0 0-8.02-.294L12 5.694l-.006-.006a5.88 5.88 0 0 0-8.02.294 5.923 5.923 0 0 0 .315 8.65l6.566 5.69c.657.57 1.633.57 2.29 0l6.565-5.69a5.924 5.924 0 0 0 .316-8.65" clip-rule="evenodd"></path></svg></div><span>3</span></div></span></button></div><footer class="CommentLayout-module_CommentLayout__Footer__EKW1g"><div class="CommentReply-module_CommentReply__Actions__s0W-0"></div></footer></article></div><div class="CommentReplyLineContainer-module_CommentReplyLineContainer__JsbTS" data-id="comment-reply-line-container"><article class="CommentLayout-module_CommentLayout__CYa1n" data-id="comment-ui-reply"><img class="Comment-module_Comment__Avatar__f5cUu" src="https://static.platzi.com/media/avatars/mayramoramrd_6e28787a-b428-4c2c-b048-eff37381bb2a.jpg" alt="Mayra Alejandra Mora Márquez" width="24" height="24"/><header class="CommentLayout-module_CommentLayout__Content__fCbVx"><div class="CommentLayout-module_CommentLayout__Header__YNglM"><div class="CommentHeader-module_CommentHeader__TdgfD"><div class="CommentHeader-module_CommentHeader__Title__2fcdC"><div class="CommentHeader-module_CommentHeader__Author__SyM1G"><p class="CommentHeader-module_CommentHeader__Name__lpA03">Mayra Alejandra Mora Márquez</p></div><div class="CommentHeader-module_CommentHeader__Info__FqvJx">student<span>•</span><a href="/comentario/5473717/"><div class="Tooltip-module_Tooltip__3RyoA"><span class="CommentHeader-module_CommentHeader__Time__aL32o">hace un mes</span></div></a></div></div></div></div><div><!--$--><div class="Markdown_Markdown__m6wuK"><p>Muchas gracias Jorge Luis.</p></div><!--/$--></div></header><div class="CommentLike-module_CommentLike__XERrD"><button class="ButtonLayout-module_ButtonLayout__eaqR3 ButtonLayout-module_ButtonLayout--sm__hFh7H ButtonLayout-module_ButtonLayout--basic--sm__Y--Zl Button-module_Button__uBoYP Button-module_Button--sm__kiOL- Button-module_Button--ghost__F8JSX" aria-label="Dar Like" data-id="atomic-ui-button-layout"><span class=""><div class="Like-module_Like__eUwmV"><div><svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" fill-rule="evenodd" d="M18.962 7.04a4.38 4.38 0 0 0-5.973-.219l-.498.432a.75.75 0 0 1-.982 0l-.498-.431a4.38 4.38 0 0 0-5.973.218 4.423 4.423 0 0 0 .234 6.459l6.566 5.69a.246.246 0 0 0 .324 0l6.565-5.69a4.424 4.424 0 0 0 .235-6.459m1.064-1.058a5.88 5.88 0 0 0-8.02-.294L12 5.694l-.006-.006a5.88 5.88 0 0 0-8.02.294 5.923 5.923 0 0 0 .315 8.65l6.566 5.69c.657.57 1.633.57 2.29 0l6.565-5.69a5.924 5.924 0 0 0 .316-8.65" clip-rule="evenodd"></path></svg></div><span>2</span></div></span></button></div><footer class="CommentLayout-module_CommentLayout__Footer__EKW1g"><div class="CommentReply-module_CommentReply__Actions__s0W-0"></div></footer></article></div></ul></div></article><!--/$--><!--$--><article class="CommentLayout-module_CommentLayout__CYa1n Comment-module_Comment__tcd1t Comment-module_Comment--has-replies__jacm7" style="--last-item-height:unset"><img class="Comment-module_Comment__Avatar__f5cUu" src="https://static.platzi.com/static/website/v2/images/avatar_default.7516253fc982.png" alt="Catalina Martinez" width="24" height="24"/><header class="CommentLayout-module_CommentLayout__Content__fCbVx"><div class="CommentLayout-module_CommentLayout__Header__YNglM"><div class="CommentHeader-module_CommentHeader__TdgfD"><div class="CommentHeader-module_CommentHeader__Title__2fcdC"><div class="CommentHeader-module_CommentHeader__Author__SyM1G"><p class="CommentHeader-module_CommentHeader__Name__lpA03">Catalina Martinez</p></div><div class="CommentHeader-module_CommentHeader__Info__FqvJx">student<span>•</span><a href="/comentario/5469399/"><div class="Tooltip-module_Tooltip__3RyoA"><span class="CommentHeader-module_CommentHeader__Time__aL32o">hace un mes</span></div></a></div></div></div></div><div><!--$--><div class="Markdown_Markdown__m6wuK"><p>Muero, no me sale nada y seguí los pasos tal cual. Le doy ! y Tab y no sale el codigo</p></div><!--/$--></div></header><div class="CommentLike-module_CommentLike__XERrD"><button class="ButtonLayout-module_ButtonLayout__eaqR3 ButtonLayout-module_ButtonLayout--sm__hFh7H ButtonLayout-module_ButtonLayout--basic--sm__Y--Zl Button-module_Button__uBoYP Button-module_Button--sm__kiOL- Button-module_Button--ghost__F8JSX" aria-label="Dar Like" data-id="atomic-ui-button-layout"><span class=""><div class="Like-module_Like__eUwmV"><div><svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" fill-rule="evenodd" d="M18.962 7.04a4.38 4.38 0 0 0-5.973-.219l-.498.432a.75.75 0 0 1-.982 0l-.498-.431a4.38 4.38 0 0 0-5.973.218 4.423 4.423 0 0 0 .234 6.459l6.566 5.69a.246.246 0 0 0 .324 0l6.565-5.69a4.424 4.424 0 0 0 .235-6.459m1.064-1.058a5.88 5.88 0 0 0-8.02-.294L12 5.694l-.006-.006a5.88 5.88 0 0 0-8.02.294 5.923 5.923 0 0 0 .315 8.65l6.566 5.69c.657.57 1.633.57 2.29 0l6.565-5.69a5.924 5.924 0 0 0 .316-8.65" clip-rule="evenodd"></path></svg></div><span>1</span></div></span></button></div><footer class="CommentLayout-module_CommentLayout__Footer__EKW1g"></footer><div class="CommentReplies-module_CommentReplies__5A1Mx"><ul class="CommentReplies-module_CommentReplies__List__pJRE3"><div class="CommentReplyLineContainer-module_CommentReplyLineContainer__JsbTS" data-id="comment-reply-line-container"><article class="CommentLayout-module_CommentLayout__CYa1n" data-id="comment-ui-reply"><img class="Comment-module_Comment__Avatar__f5cUu" src="https://static.platzi.com/media/avatars/avatars/rosasmorillojersonerick_a1b0c217-3cc5-4da1-92cc-bc6a246a4e5d" alt="Jerson erick Rosas morillo" width="24" height="24"/><header class="CommentLayout-module_CommentLayout__Content__fCbVx"><div class="CommentLayout-module_CommentLayout__Header__YNglM"><div class="CommentHeader-module_CommentHeader__TdgfD"><div class="CommentHeader-module_CommentHeader__Title__2fcdC"><div class="CommentHeader-module_CommentHeader__Author__SyM1G"><p class="CommentHeader-module_CommentHeader__Name__lpA03">Jerson erick Rosas morillo</p></div><div class="CommentHeader-module_CommentHeader__Info__FqvJx">student<span>•</span><a href="/comentario/5472846/"><div class="Tooltip-module_Tooltip__3RyoA"><span class="CommentHeader-module_CommentHeader__Time__aL32o">hace un mes</span></div></a></div></div></div></div><div><!--$--><div class="Markdown_Markdown__m6wuK"><p>hola debes renombrar tu carpeta puesto que tiene que terminar en index.html</p></div><!--/$--></div></header><div class="CommentLike-module_CommentLike__XERrD"><button class="ButtonLayout-module_ButtonLayout__eaqR3 ButtonLayout-module_ButtonLayout--sm__hFh7H ButtonLayout-module_ButtonLayout--basic--sm__Y--Zl Button-module_Button__uBoYP Button-module_Button--sm__kiOL- Button-module_Button--ghost__F8JSX" aria-label="Dar Like" data-id="atomic-ui-button-layout"><span class=""><div class="Like-module_Like__eUwmV"><div><svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" fill-rule="evenodd" d="M18.962 7.04a4.38 4.38 0 0 0-5.973-.219l-.498.432a.75.75 0 0 1-.982 0l-.498-.431a4.38 4.38 0 0 0-5.973.218 4.423 4.423 0 0 0 .234 6.459l6.566 5.69a.246.246 0 0 0 .324 0l6.565-5.69a4.424 4.424 0 0 0 .235-6.459m1.064-1.058a5.88 5.88 0 0 0-8.02-.294L12 5.694l-.006-.006a5.88 5.88 0 0 0-8.02.294 5.923 5.923 0 0 0 .315 8.65l6.566 5.69c.657.57 1.633.57 2.29 0l6.565-5.69a5.924 5.924 0 0 0 .316-8.65" clip-rule="evenodd"></path></svg></div><span>0</span></div></span></button></div><footer class="CommentLayout-module_CommentLayout__Footer__EKW1g"><div class="CommentReply-module_CommentReply__Actions__s0W-0"></div></footer></article></div></ul></div></article><!--/$--><!--$--><article class="CommentLayout-module_CommentLayout__CYa1n Comment-module_Comment__tcd1t" style="--last-item-height:unset"><img class="Comment-module_Comment__Avatar__f5cUu" src="https://static.platzi.com/media/avatars/mayramoramrd_6e28787a-b428-4c2c-b048-eff37381bb2a.jpg" alt="Mayra Alejandra Mora Márquez" width="24" height="24"/><header class="CommentLayout-module_CommentLayout__Content__fCbVx"><div class="CommentLayout-module_CommentLayout__Header__YNglM"><div class="CommentHeader-module_CommentHeader__TdgfD"><div class="CommentHeader-module_CommentHeader__Title__2fcdC"><div class="CommentHeader-module_CommentHeader__Author__SyM1G"><p class="CommentHeader-module_CommentHeader__Name__lpA03">Mayra Alejandra Mora Márquez</p></div><div class="CommentHeader-module_CommentHeader__Info__FqvJx">student<span>•</span><a href="/comentario/5471860/"><div class="Tooltip-module_Tooltip__3RyoA"><span class="CommentHeader-module_CommentHeader__Time__aL32o">hace un mes</span></div></a></div></div></div></div><div><!--$--><div class="Markdown_Markdown__m6wuK"><p>¡Genial, Mayra Alejandra! Recuerda que puedes ver la explicación detallada de cada etiqueta en la clase para entender mejor cómo construir tus archivos HTML. ¡Tú puedes!</p></div><!--/$--></div></header><div class="CommentLike-module_CommentLike__XERrD"><button class="ButtonLayout-module_ButtonLayout__eaqR3 ButtonLayout-module_ButtonLayout--sm__hFh7H ButtonLayout-module_ButtonLayout--basic--sm__Y--Zl Button-module_Button__uBoYP Button-module_Button--sm__kiOL- Button-module_Button--ghost__F8JSX" aria-label="Dar Like" data-id="atomic-ui-button-layout"><span class=""><div class="Like-module_Like__eUwmV"><div><svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" fill-rule="evenodd" d="M18.962 7.04a4.38 4.38 0 0 0-5.973-.219l-.498.432a.75.75 0 0 1-.982 0l-.498-.431a4.38 4.38 0 0 0-5.973.218 4.423 4.423 0 0 0 .234 6.459l6.566 5.69a.246.246 0 0 0 .324 0l6.565-5.69a4.424 4.424 0 0 0 .235-6.459m1.064-1.058a5.88 5.88 0 0 0-8.02-.294L12 5.694l-.006-.006a5.88 5.88 0 0 0-8.02.294 5.923 5.923 0 0 0 .315 8.65l6.566 5.69c.657.57 1.633.57 2.29 0l6.565-5.69a5.924 5.924 0 0 0 .316-8.65" clip-rule="evenodd"></path></svg></div><span>1</span></div></span></button></div><footer class="CommentLayout-module_CommentLayout__Footer__EKW1g"></footer></article><!--/$--></ul></aside></div></div></div></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":"Article","headline":"Configuración de VSCode y estructura HTML5 básica","image":"https://static.platzi.com/media/courses/Piezas-Curso-HTML_OG.jpg","datePublished":"2025-09-30T19:00:00+00:00","dateModified":"2025-09-30T19:58:02.889052+00:00","author":{"@type":"Person","name":"Diego De Granda","url":"https://platzi.com/profesores/degranda/"},"articleSection":"Curso de HTML","articleBody":"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.","url":"https://platzi.com/cursos/html/configuracion-de-vscode-y-estructura-htm/","wordCount":44,"publisher":{"@type":"Organization","name":"Platzi INC"}}]}</script><!--$--><!--/$--></main></div><footer class="Footer-module_Footer__uHyIX"><nav class="LinksSection-module_LinksSection__5wfhs" aria-label="Enlaces principales"><div class="LinksSection-module_LinksSection__container__vk6-Q"><div class="Logo-module_Logo__0x0Ov LinksSection-module_LinksSection__logo__ZJT-G"><a class="Logo-module_Link__PZ3Sy" href="/home/" aria-label="Platzi" title="Platzi"><svg width="1em" height="1em" fill="none" viewBox="0 0 92 32" xmlns="http://www.w3.org/2000/svg"><g fill="#0AE98A" clip-path="url(#platzi-logo-new_svg__a)"><path d="M25.334 25.135V6.106h8.77c1.897 0 3.355.555 4.386 1.663s1.546 2.606 1.546 4.473-.515 3.364-1.546 4.473c-1.03 1.108-2.499 1.662-4.385 1.662H28.63v6.748h-3.306zm3.306-9.675h5.26c.837 0 1.488-.214 1.965-.651q.7-.657.7-1.867v-1.39c0-.807-.234-1.44-.7-1.867-.467-.438-1.119-.652-1.965-.652h-5.26v6.437zm32.797 9.675c-.836 0-1.478-.243-1.935-.72-.447-.476-.72-1.088-.816-1.827h-.146c-.292.953-.827 1.682-1.604 2.168q-1.165.73-2.84.73-2.362-.001-3.646-1.226c-.856-.817-1.274-1.925-1.274-3.306 0-1.517.554-2.664 1.653-3.423q1.648-1.137 4.842-1.137h2.752V15.11q0-1.398-.758-2.168c-.506-.506-1.294-.759-2.373-.759q-1.34 0-2.197.584a5.2 5.2 0 0 0-1.43 1.488l-1.906-1.721c.506-.856 1.216-1.566 2.14-2.12.914-.554 2.12-.836 3.597-.836 1.974 0 3.481.457 4.531 1.37 1.05.915 1.576 2.237 1.576 3.948v7.633h1.604v2.606h-1.789zM55 23.055c.992 0 1.819-.224 2.46-.662.642-.437.963-1.03.963-1.77v-2.197H55.73c-2.207 0-3.306.68-3.306 2.052v.525c0 .68.233 1.196.69 1.536s1.09.515 1.887.515m18.689 2.08v-2.577l8.158-10.034h-7.895V9.879l11.668.039v2.46l-8.275 10.151h8.479v2.606zm-29.841.01a1.89 1.89 0 0 1-1.896-1.896V6.126h3.189v16.413h2.11v2.606zM89.11 8.022a1.896 1.896 0 1 0 0-3.792 1.896 1.896 0 0 0 0 3.792M63.499 9.889h-.282v2.645h2.44v9.305c0 1.05.282 1.867.846 2.44.564.574 1.4.866 2.519.866h2.78v-2.606h-2.955V12.534h3.189V9.889h-3.19V6.106h-2.868v1.887c0 1.04-.846 1.886-1.886 1.886h-.593zm24.017.039h3.19v15.207h-3.19z"></path><path fill-rule="evenodd" d="m9.65 4.803-8.07 8.07a3.81 3.81 0 0 0 0 5.388l8.08 8.08a3.81 3.81 0 0 0 5.387 0l2.693-2.694-2.693-2.693-2.694 2.693-8.08-8.08 8.07-8.07 5.387 5.387-5.387 5.386 2.694 2.694 5.387-5.387a3.81 3.81 0 0 0 0-5.387l-5.387-5.387a3.81 3.81 0 0 0-5.387 0" clip-rule="evenodd"></path></g><defs><clipPath id="platzi-logo-new_svg__a"><path fill="#fff" d="M.461 0h91.077v32H.461z"></path></clipPath></defs></svg></a></div><div class="LinksSection-module_LinksSection__links_container__NKKyv"><div class="Logo-module_Logo__0x0Ov LinksSection-module_LinksSection__logo__desktop__C-jVZ LinksSection-module_LinksSection__logo__ZJT-G"><a class="Logo-module_Link__PZ3Sy" href="/home/" aria-label="Platzi" title="Platzi"><svg width="1em" height="1em" fill="none" viewBox="0 0 92 32" xmlns="http://www.w3.org/2000/svg"><g fill="#0AE98A" clip-path="url(#platzi-logo-new_svg__a)"><path d="M25.334 25.135V6.106h8.77c1.897 0 3.355.555 4.386 1.663s1.546 2.606 1.546 4.473-.515 3.364-1.546 4.473c-1.03 1.108-2.499 1.662-4.385 1.662H28.63v6.748h-3.306zm3.306-9.675h5.26c.837 0 1.488-.214 1.965-.651q.7-.657.7-1.867v-1.39c0-.807-.234-1.44-.7-1.867-.467-.438-1.119-.652-1.965-.652h-5.26v6.437zm32.797 9.675c-.836 0-1.478-.243-1.935-.72-.447-.476-.72-1.088-.816-1.827h-.146c-.292.953-.827 1.682-1.604 2.168q-1.165.73-2.84.73-2.362-.001-3.646-1.226c-.856-.817-1.274-1.925-1.274-3.306 0-1.517.554-2.664 1.653-3.423q1.648-1.137 4.842-1.137h2.752V15.11q0-1.398-.758-2.168c-.506-.506-1.294-.759-2.373-.759q-1.34 0-2.197.584a5.2 5.2 0 0 0-1.43 1.488l-1.906-1.721c.506-.856 1.216-1.566 2.14-2.12.914-.554 2.12-.836 3.597-.836 1.974 0 3.481.457 4.531 1.37 1.05.915 1.576 2.237 1.576 3.948v7.633h1.604v2.606h-1.789zM55 23.055c.992 0 1.819-.224 2.46-.662.642-.437.963-1.03.963-1.77v-2.197H55.73c-2.207 0-3.306.68-3.306 2.052v.525c0 .68.233 1.196.69 1.536s1.09.515 1.887.515m18.689 2.08v-2.577l8.158-10.034h-7.895V9.879l11.668.039v2.46l-8.275 10.151h8.479v2.606zm-29.841.01a1.89 1.89 0 0 1-1.896-1.896V6.126h3.189v16.413h2.11v2.606zM89.11 8.022a1.896 1.896 0 1 0 0-3.792 1.896 1.896 0 0 0 0 3.792M63.499 9.889h-.282v2.645h2.44v9.305c0 1.05.282 1.867.846 2.44.564.574 1.4.866 2.519.866h2.78v-2.606h-2.955V12.534h3.189V9.889h-3.19V6.106h-2.868v1.887c0 1.04-.846 1.886-1.886 1.886h-.593zm24.017.039h3.19v15.207h-3.19z"></path><path fill-rule="evenodd" d="m9.65 4.803-8.07 8.07a3.81 3.81 0 0 0 0 5.388l8.08 8.08a3.81 3.81 0 0 0 5.387 0l2.693-2.694-2.693-2.693-2.694 2.693-8.08-8.08 8.07-8.07 5.387 5.387-5.387 5.386 2.694 2.694 5.387-5.387a3.81 3.81 0 0 0 0-5.387l-5.387-5.387a3.81 3.81 0 0 0-5.387 0" clip-rule="evenodd"></path></g><defs><clipPath id="platzi-logo-new_svg__a"><path fill="#fff" d="M.461 0h91.077v32H.461z"></path></clipPath></defs></svg></a></div><div class="LinksSection-module_LinksSection__single_container__XvXMc"><div><h3 class="LinkSection-module_LinkSection__title__SyO8P" data-trans="atomic-ui-footer-schools-title">Escuelas</h3><ul class="LinkSection-module_LinkSection__list__BfdZV LinkSection-module_LinkSection__list__columns__WoGIf"><li><div class="CollapsibleLink-module_CollapsibleLink__j7GQo"><div class="CollapsibleLink-module_CollapsibleLink__header__ArGJg"><a href="/escuela/web" class="CollapsibleLink-module_CollapsibleLink__link__iFSa-">Desarrollo Web<!-- --> <svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#C4C8CE" fill-rule="evenodd" d="M7.47 9.47a.75.75 0 0 1 1.06 0L12 12.94l3.47-3.47a.75.75 0 1 1 1.06 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path></svg></a></div><div class="CollapsibleLink-module_CollapsibleLink__content__xbqXA"><ul class="CollapsibleLink-module_CollapsibleLink__routesList__0qDa8"><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/intro-desarrollo-web/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-intro-desarrollo-web">Fundamentos del Desarrollo Web Profesional</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/diseno-desarrollo-frontend/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-diseno-desarrollo-frontend">Diseño y Desarrollo Frontend</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/desarollo-frontend-con-javascript/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-desarollo-frontend-con-javascript">Desarrollo Frontend con JavaScript</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/desarrollo-frontend-con-vuejs/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-desarrollo-frontend-con-vuejs">Desarrollo Frontend con Vue.js</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/desarrollo-frontend-angular/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-desarrollo-frontend-angular">Desarrollo Frontend con Angular</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/desarrollo-frontend-react-js/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-desarrollo-frontend-react-js">Desarrollo Frontend con React.js</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/desarrollo-backend-con-nodejs/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-desarrollo-backend-con-nodejs">Desarrollo Backend con Node.js</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/desarrollo-backend-con-python/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-desarrollo-backend-con-python">Desarrollo Backend con Python</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/desarrollo-backend-con-java/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-desarrollo-backend-con-java">Desarrollo Backend con Java</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/desarrollo-backend-con-php/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-desarrollo-backend-con-php">Desarrollo Backend con PHP</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/desarrollo-backend-con-ruby/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-desarrollo-backend-con-ruby">Desarrollo Backend con Ruby</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/bases-de-datos-para-web/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-bases-de-datos-para-web">Bases de Datos para Web</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/seguridad-web-api/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-seguridad-web-api">Seguridad Web & API</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/testing-automatizado-y-qa-para-web/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-testing-automatizado-y-qa-para-web">Testing Automatizado y QA para Web</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/arquitecturas-web-modernas-y-escalabilidad/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-arquitecturas-web-modernas-y-escalabilidad">Arquitecturas Web Modernas y Escalabilidad</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/devops-y-cloud-para-desarrolladores-web/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-devops-y-cloud-para-desarrolladores-web">DevOps y Cloud para Desarrolladores Web</a></li></ul></div></div></li><li><div class="CollapsibleLink-module_CollapsibleLink__j7GQo"><div class="CollapsibleLink-module_CollapsibleLink__header__ArGJg"><a href="/escuela/ingles/" class="CollapsibleLink-module_CollapsibleLink__link__iFSa-">English Academy<!-- --> <svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#C4C8CE" fill-rule="evenodd" d="M7.47 9.47a.75.75 0 0 1 1.06 0L12 12.94l3.47-3.47a.75.75 0 1 1 1.06 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path></svg></a></div><div class="CollapsibleLink-module_CollapsibleLink__content__xbqXA"><ul class="CollapsibleLink-module_CollapsibleLink__routesList__0qDa8"><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/beginner-core/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-beginner-core">Inglés Básico A1</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/beginner-core2/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-beginner-core2">Inglés Básico A2</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/intermediate-core/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-intermediate-core">Inglés Intermedio B1</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/intermediate-core2/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-intermediate-core2">Inglés Intermedio Alto B2</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/advanced-core/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-advanced-core">Inglés Avanzado C1</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/complementary/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-complementary">Inglés para Propósitos Específicos</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/ingles-negocios/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-ingles-negocios">Inglés de Negocios</a></li></ul></div></div></li><li><div class="CollapsibleLink-module_CollapsibleLink__j7GQo"><div class="CollapsibleLink-module_CollapsibleLink__header__ArGJg"><a href="/escuela/marketing/" class="CollapsibleLink-module_CollapsibleLink__link__iFSa-">Marketing Digital<!-- --> <svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#C4C8CE" fill-rule="evenodd" d="M7.47 9.47a.75.75 0 0 1 1.06 0L12 12.94l3.47-3.47a.75.75 0 1 1 1.06 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path></svg></a></div><div class="CollapsibleLink-module_CollapsibleLink__content__xbqXA"><ul class="CollapsibleLink-module_CollapsibleLink__routesList__0qDa8"><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/fundamentos-de-marketing-digital/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-fundamentos-de-marketing-digital">Fundamentos de Marketing Digital</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/marketing-de-contenidos-y-redaccion-persuasiva/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-marketing-de-contenidos-y-redaccion-persuasiva">Marketing de Contenidos y Redacción Persuasiva</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/seo-y-posicionamiento-web/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-seo-y-posicionamiento-web">SEO y Posicionamiento Web</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/social-media-marketing-y-community-management/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-social-media-marketing-y-community-management">Social Media Marketing y Community Management</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/publicidad-digital-y-paid-media/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-publicidad-digital-y-paid-media">Publicidad Digital y Paid Media</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/analitica-digital-y-optimizacion-cro/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-analitica-digital-y-optimizacion-cro">Analítica Digital y Optimización (CRO)</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/estrategia-de-marketing-y-growth/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-estrategia-de-marketing-y-growth">Estrategia de Marketing y Growth</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/marketing-de-marca-branding-y-comunicacion-estrategica/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-marketing-de-marca-branding-y-comunicacion-estrategica">Marketing de Marca y Comunicación Estratégica</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/marketing-para-e-commerce/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-marketing-para-e-commerce">Marketing para E-commerce</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/marketing-b2b/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-marketing-b2b">Marketing B2B</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/inteligencia-artificial-aplicada-al-marketing/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-inteligencia-artificial-aplicada-al-marketing">Inteligencia Artificial Aplicada al Marketing</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/automatizacion-del-marketing/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-automatizacion-del-marketing">Automatización del Marketing</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/marca-personal-y-marketing-freelance/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-marca-personal-y-marketing-freelance">Marca Personal y Marketing Freelance</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/ventas-y-experiencia-del-cliente/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-ventas-y-experiencia-del-cliente">Ventas y Experiencia del Cliente</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/creacion-rrss/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-creacion-rrss">Creación de Contenido para Redes Sociales</a></li></ul></div></div></li><li><div class="CollapsibleLink-module_CollapsibleLink__j7GQo"><div class="CollapsibleLink-module_CollapsibleLink__header__ArGJg"><a href="/escuela/datos/" class="CollapsibleLink-module_CollapsibleLink__link__iFSa-">Inteligencia Artificial y Data Science<!-- --> <svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#C4C8CE" fill-rule="evenodd" d="M7.47 9.47a.75.75 0 0 1 1.06 0L12 12.94l3.47-3.47a.75.75 0 1 1 1.06 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path></svg></a></div><div class="CollapsibleLink-module_CollapsibleLink__content__xbqXA"><ul class="CollapsibleLink-module_CollapsibleLink__routesList__0qDa8"><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/fundamentos-de-data-science-y-ai/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-fundamentos-de-data-science-y-ai">Fundamentos de Data Science y AI</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/analisis-y-visualizacion-de-datos/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-analisis-y-visualizacion-de-datos">Análisis y Visualización de Datos</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/machine-learning-y-deep-learning/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-machine-learning-y-deep-learning">Machine Learning y Deep Learning</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/ingeniero-datos/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-ingeniero-datos">Data Engineer</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/inteligencia-artificial-para-la-productividad/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-inteligencia-artificial-para-la-productividad">Inteligencia Artificial para la Productividad</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/desarrollo-de-aplicaciones-con-ia/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-desarrollo-de-aplicaciones-con-ia">Desarrollo de Aplicaciones con IA</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/ai-software-engineer/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-ai-software-engineer">AI Software Engineer</a></li></ul></div></div></li><li><div class="CollapsibleLink-module_CollapsibleLink__j7GQo"><div class="CollapsibleLink-module_CollapsibleLink__header__ArGJg"><a href="/escuela/ciberseguridad/" class="CollapsibleLink-module_CollapsibleLink__link__iFSa-">Ciberseguridad<!-- --> <svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#C4C8CE" fill-rule="evenodd" d="M7.47 9.47a.75.75 0 0 1 1.06 0L12 12.94l3.47-3.47a.75.75 0 1 1 1.06 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path></svg></a></div><div class="CollapsibleLink-module_CollapsibleLink__content__xbqXA"><ul class="CollapsibleLink-module_CollapsibleLink__routesList__0qDa8"><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/fundamentos-de-ciberseguridad/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-fundamentos-de-ciberseguridad">Fundamentos de Ciberseguridad</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/hacking-etico-y-pentesting/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-hacking-etico-y-pentesting">Hacking Ético y Pentesting (Red Team)</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/analisis-de-malware-e-ingenieria-forense/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-analisis-de-malware-e-ingenieria-forense">Análisis de Malware e Ingeniería Forense</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/seguridad-defensiva-y-cumplimiento-blue-team/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-seguridad-defensiva-y-cumplimiento-blue-team">Seguridad Defensiva y Cumplimiento (Blue Team)</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/ciberseguridad-estrategica-y-gestion/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-ciberseguridad-estrategica-y-gestion">Ciberseguridad Estratégica</a></li></ul></div></div></li><li><div class="CollapsibleLink-module_CollapsibleLink__j7GQo"><div class="CollapsibleLink-module_CollapsibleLink__header__ArGJg"><a href="/xliderazgo-management/" class="CollapsibleLink-module_CollapsibleLink__link__iFSa-">Liderazgo y Habilidades Blandas<!-- --> <svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#C4C8CE" fill-rule="evenodd" d="M7.47 9.47a.75.75 0 0 1 1.06 0L12 12.94l3.47-3.47a.75.75 0 1 1 1.06 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path></svg></a></div><div class="CollapsibleLink-module_CollapsibleLink__content__xbqXA"><ul class="CollapsibleLink-module_CollapsibleLink__routesList__0qDa8"><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/fundamentos-habilidades-profesionales/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-fundamentos-habilidades-profesionales">Fundamentos de Habilidades Profesionales</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/liderazgo-gestion-equipos/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-liderazgo-gestion-equipos">Liderazgo y Gestión de Equipos</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/comunicacion-avanzada-oratoria/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-comunicacion-avanzada-oratoria">Comunicación Avanzada y Oratoria</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/negociacion-resolucion-conflictos/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-negociacion-resolucion-conflictos">Negociación y Resolución de Conflictos</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/inteligencia-emocional-autogestion/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-inteligencia-emocional-autogestion">Inteligencia Emocional y Autogestión</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/productividad-herramientas-digitales/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-productividad-herramientas-digitales">Productividad y Herramientas Digitales</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/gestion-proyectos-metodologias-agiles/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-gestion-proyectos-metodologias-agiles">Gestión de Proyectos y Metodologías Ágiles</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/desarrollo-carrera-marca-personal/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-desarrollo-carrera-marca-personal">Desarrollo de Carrera y Marca Personal</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/diversidad-inclusion-entorno-laboral-saludable/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-diversidad-inclusion-entorno-laboral-saludable">Diversidad, Inclusión y Entorno Laboral Saludable</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/filosofia-estrategia-lideres/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-filosofia-estrategia-lideres">Filosofía y Estrategia para Líderes</a></li></ul></div></div></li><li><div class="CollapsibleLink-module_CollapsibleLink__j7GQo"><div class="CollapsibleLink-module_CollapsibleLink__header__ArGJg"><a href="/escuela/producto/" class="CollapsibleLink-module_CollapsibleLink__link__iFSa-">Diseño de Producto y UX<!-- --> <svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#C4C8CE" fill-rule="evenodd" d="M7.47 9.47a.75.75 0 0 1 1.06 0L12 12.94l3.47-3.47a.75.75 0 1 1 1.06 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path></svg></a></div><div class="CollapsibleLink-module_CollapsibleLink__content__xbqXA"><ul class="CollapsibleLink-module_CollapsibleLink__routesList__0qDa8"><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/fundamentos-de-diseno-ux-ui/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-fundamentos-de-diseno-ux-ui">Fundamentos de Diseño UX/UI</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/investigacion-de-usuarios-ux-research/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-investigacion-de-usuarios-ux-research">Investigación de Usuarios (UX Research)</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/arquitectura-de-informacion-y-usabilidad/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-arquitectura-de-informacion-y-usabilidad">Arquitectura de Información y Usabilidad</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/diseno-de-interfaces-y-prototipado-ui-design/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-diseno-de-interfaces-y-prototipado-ui-design">Diseño de Interfaces y Prototipado (UI Design)</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/sistemas-de-diseno-y-designops/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-sistemas-de-diseno-y-designops">Sistemas de Diseño y DesignOps</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/redaccion-ux-ux-writing/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-redaccion-ux-ux-writing">Redacción UX (UX Writing)</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/creatividad-e-innovacion-en-diseno/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-creatividad-e-innovacion-en-diseno">Creatividad e Innovación en Diseño</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/diseno-accesible-e-inclusivo/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-diseno-accesible-e-inclusivo">Diseño Accesible e Inclusivo</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/diseno-asistido-por-inteligencia-artificial/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-diseno-asistido-por-inteligencia-artificial">Diseño Asistido por Inteligencia Artificial</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/gestion-de-producto-y-liderazgo-en-diseno/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-gestion-de-producto-y-liderazgo-en-diseno">Gestión de Producto y Liderazgo en Diseño</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/diseno-de-interacciones-emergentes-vui-vr/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-diseno-de-interacciones-emergentes-vui-vr">Diseño de Interacciones Emergentes (VUI/VR)</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/desarrollo-web-para-disenadores/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-desarrollo-web-para-disenadores">Desarrollo Web para Diseñadores</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/diseno-y-prototipado-no-code/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-diseno-y-prototipado-no-code">Diseño y Prototipado No-Code</a></li></ul></div></div></li><li><div class="CollapsibleLink-module_CollapsibleLink__j7GQo"><div class="CollapsibleLink-module_CollapsibleLink__header__ArGJg"><a href="/escuela/audiovisual/" class="CollapsibleLink-module_CollapsibleLink__link__iFSa-">Contenido Audiovisual<!-- --> <svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#C4C8CE" fill-rule="evenodd" d="M7.47 9.47a.75.75 0 0 1 1.06 0L12 12.94l3.47-3.47a.75.75 0 1 1 1.06 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path></svg></a></div><div class="CollapsibleLink-module_CollapsibleLink__content__xbqXA"><ul class="CollapsibleLink-module_CollapsibleLink__routesList__0qDa8"><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/fundamentos-de-produccion-audiovisual/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-fundamentos-de-produccion-audiovisual">Fundamentos de Producción Audiovisual</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/produccion-de-video-para-plataformas-digitales/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-produccion-de-video-para-plataformas-digitales">Producción de Video para Plataformas Digitales</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/produccion-de-audio-y-podcast/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-produccion-de-audio-y-podcast">Producción de Audio y Podcast</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/fotografia-y-diseno-grafico-para-contenido-digital/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-fotografia-y-diseno-grafico-para-contenido-digital">Fotografía y Diseño Gráfico para Contenido Digital</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/motion-graphics-y-animacion/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-motion-graphics-y-animacion">Motion Graphics y Animación</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/contenido-interactivo-y-realidad-aumentada/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-contenido-interactivo-y-realidad-aumentada">Contenido Interactivo y Realidad Aumentada</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/estrategia-marketing-y-monetizacion-de-contenidos/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-estrategia-marketing-y-monetizacion-de-contenidos">Estrategia, Marketing y Monetización de Contenidos</a></li></ul></div></div></li><li><div class="CollapsibleLink-module_CollapsibleLink__j7GQo"><div class="CollapsibleLink-module_CollapsibleLink__header__ArGJg"><a href="/escuela/desarrollo-movil/" class="CollapsibleLink-module_CollapsibleLink__link__iFSa-">Desarrollo Móvil<!-- --> <svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#C4C8CE" fill-rule="evenodd" d="M7.47 9.47a.75.75 0 0 1 1.06 0L12 12.94l3.47-3.47a.75.75 0 1 1 1.06 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path></svg></a></div><div class="CollapsibleLink-module_CollapsibleLink__content__xbqXA"><ul class="CollapsibleLink-module_CollapsibleLink__routesList__0qDa8"><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/fundamentos-de-desarrollo-movil/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-fundamentos-de-desarrollo-movil">Fundamentos de Desarrollo Móvil</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/desarrollo-nativo-android-con-kotlin/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-desarrollo-nativo-android-con-kotlin">Desarrollo Nativo Android con Kotlin</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/desarrollo-nativo-ios-con-swift/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-desarrollo-nativo-ios-con-swift">Desarrollo Nativo iOS con Swift</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/desarrollo-multiplataforma-con-react-native/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-desarrollo-multiplataforma-con-react-native">Desarrollo Multiplataforma con React Native</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/desarrollo-multiplataforma-con-flutter/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-desarrollo-multiplataforma-con-flutter">Desarrollo Multiplataforma con Flutter</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/arquitectura-y-patrones-de-diseno-movil/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-arquitectura-y-patrones-de-diseno-movil">Arquitectura y Patrones de Diseño Móvil</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/integracion-de-apis-y-persistencia-movil/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-integracion-de-apis-y-persistencia-movil">Integración de APIs y Persistencia Móvil</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/testing-y-despliegue-en-movil/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-testing-y-despliegue-en-movil">Testing y Despliegue en Móvil</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/diseno-ux-ui-para-moviles/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-diseno-ux-ui-para-moviles">Diseño UX/UI para Móviles</a></li></ul></div></div></li><li><div class="CollapsibleLink-module_CollapsibleLink__j7GQo"><div class="CollapsibleLink-module_CollapsibleLink__header__ArGJg"><a href="/escuela/diseno/" class="CollapsibleLink-module_CollapsibleLink__link__iFSa-">Diseño Gráfico y Arte Digital<!-- --> <svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#C4C8CE" fill-rule="evenodd" d="M7.47 9.47a.75.75 0 0 1 1.06 0L12 12.94l3.47-3.47a.75.75 0 1 1 1.06 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path></svg></a></div><div class="CollapsibleLink-module_CollapsibleLink__content__xbqXA"><ul class="CollapsibleLink-module_CollapsibleLink__routesList__0qDa8"><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/fundamentos-del-diseno-grafico-y-digital/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-fundamentos-del-diseno-grafico-y-digital">Fundamentos del Diseño Gráfico y Digital</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/diseno-de-identidad-visual-y-branding/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-diseno-de-identidad-visual-y-branding">Diseño de Identidad Visual y Branding</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/ilustracion-digital-y-arte-conceptual/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-ilustracion-digital-y-arte-conceptual">Ilustración Digital y Arte Conceptual</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/diseno-editorial-y-de-empaques/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-diseno-editorial-y-de-empaques">Diseño Editorial y de Empaques</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/motion-graphics-y-animacion-3d/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-motion-graphics-y-animacion-3d">Motion Graphics y Animación 3D</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/diseno-grafico-asistido-por-inteligencia-artificial/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-diseno-grafico-asistido-por-inteligencia-artificial">Diseño Gráfico Asistido por Inteligencia Artificial</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/creatividad-e-innovacion-en-diseno/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-creatividad-e-innovacion-en-diseno">Creatividad e Innovación en Diseño</a></li></ul></div></div></li><li><div class="CollapsibleLink-module_CollapsibleLink__j7GQo"><div class="CollapsibleLink-module_CollapsibleLink__header__ArGJg"><a href="/escuela/programacion/" class="CollapsibleLink-module_CollapsibleLink__link__iFSa-">Programación<!-- --> <svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#C4C8CE" fill-rule="evenodd" d="M7.47 9.47a.75.75 0 0 1 1.06 0L12 12.94l3.47-3.47a.75.75 0 1 1 1.06 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path></svg></a></div><div class="CollapsibleLink-module_CollapsibleLink__content__xbqXA"><ul class="CollapsibleLink-module_CollapsibleLink__routesList__0qDa8"><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/fundamentos-programacion-software/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-fundamentos-programacion-software">Fundamentos de Programación e Ingeniería de Software</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/herramientas-ia/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-herramientas-ia">Herramientas de IA para el trabajo</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/matematicas-para-programacion/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-matematicas-para-programacion">Matemáticas para Programación</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/programacion-python/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-programacion-python">Programación con Python</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/programacion-javascript/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-programacion-javascript">Programación con JavaScript</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/programacion-typescript/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-programacion-typescript">Programación con TypeScript</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/programacion-ooo-java/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-programacion-ooo-java">Programación Orientada a Objetos con Java</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/desarrollo-c-sharp-net/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-desarrollo-c-sharp-net">Desarrollo con C# y .NET</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/programacion-con-php/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-programacion-con-php">Programación con PHP</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/programacion-go-rust/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-programacion-go-rust">Programación con Go y Rust</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/programacion-swift-kotlin/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-programacion-swift-kotlin">Programación Móvil con Swift y Kotlin</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/programacion-c-c-plusplus/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-programacion-c-c-plusplus">Programación con C y C++</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/admin-basica-servidores-linux/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-admin-basica-servidores-linux">Administración Básica de Servidores Linux</a></li></ul></div></div></li><li><div class="CollapsibleLink-module_CollapsibleLink__j7GQo"><div class="CollapsibleLink-module_CollapsibleLink__header__ArGJg"><a href="/escuela/negocios/" class="CollapsibleLink-module_CollapsibleLink__link__iFSa-">Negocios<!-- --> <svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#C4C8CE" fill-rule="evenodd" d="M7.47 9.47a.75.75 0 0 1 1.06 0L12 12.94l3.47-3.47a.75.75 0 1 1 1.06 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path></svg></a></div><div class="CollapsibleLink-module_CollapsibleLink__content__xbqXA"><ul class="CollapsibleLink-module_CollapsibleLink__routesList__0qDa8"><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/fundamentos-de-negocios-y-emprendimiento/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-fundamentos-de-negocios-y-emprendimiento">Fundamentos de Negocios y Emprendimiento</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/estratgia-y-crecimiento-empresarial/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-estratgia-y-crecimiento-empresarial">Estrategia y Crecimiento Empresarial</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/finanzas-personales-y-corporativas/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-finanzas-personales-y-corporativas">Finanzas Personales y Corporativas</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/inversin-en-mercados-financieros/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-inversin-en-mercados-financieros">Inversión en Mercados Financieros</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/ventas-crm-y-experiencia-del-cliente/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-ventas-crm-y-experiencia-del-cliente">Ventas, CRM y Experiencia del Cliente</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/operaciones-logstica-y-e-commerce/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-operaciones-logstica-y-e-commerce">Operaciones, Logística y E-commerce</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/gestion-proyectos-metodologias-agiles/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-gestion-proyectos-metodologias-agiles">Gestión de Proyectos y Metodologías Ágiles</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/aspectos-legales-y-cumplimiento/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-aspectos-legales-y-cumplimiento">Aspectos Legales y Cumplimiento</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/habilidades-directivas-y-crecimiento-profesional/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-habilidades-directivas-y-crecimiento-profesional">Habilidades Directivas y Crecimiento Profesional</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/diversidad-e-inclusion-en-el-entorno-laboral/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-diversidad-e-inclusion-en-el-entorno-laboral">Diversidad e Inclusión en el Entorno Laboral</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/herramientas-digitales-y-automatizacion-para-negocios/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-herramientas-digitales-y-automatizacion-para-negocios">Herramientas Digitales y Automatización para Negocios</a></li></ul></div></div></li><li><div class="CollapsibleLink-module_CollapsibleLink__j7GQo"><div class="CollapsibleLink-module_CollapsibleLink__header__ArGJg"><a href="/escuela/blockchain/" class="CollapsibleLink-module_CollapsibleLink__link__iFSa-">Blockchain y Web3<!-- --> <svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#C4C8CE" fill-rule="evenodd" d="M7.47 9.47a.75.75 0 0 1 1.06 0L12 12.94l3.47-3.47a.75.75 0 1 1 1.06 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path></svg></a></div><div class="CollapsibleLink-module_CollapsibleLink__content__xbqXA"><ul class="CollapsibleLink-module_CollapsibleLink__routesList__0qDa8"><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/fundamentos-de-blockchain-y-web3/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-fundamentos-de-blockchain-y-web3">Fundamentos de Blockchain y Web3</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/desarrollo-de-smart-contracts-y-dapps/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-desarrollo-de-smart-contracts-y-dapps">Desarrollo de Smart Contracts y dApps</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/finanzas-descentralizadas-defi/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-finanzas-descentralizadas-defi">Finanzas Descentralizadas (DeFi)</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/nfts-y-economia-de-creadores/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-nfts-y-economia-de-creadores">NFTs y Economía de Creadores</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/seguridad-blockchain/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-seguridad-blockchain">Seguridad Blockchain</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/ecosistemas-blockchain-alternativos-no-evm/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-ecosistemas-blockchain-alternativos-no-evm">Ecosistemas Blockchain Alternativos (No-EVM)</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/producto-marketing-y-legal-en-web3/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-producto-marketing-y-legal-en-web3">Producto, Marketing y Legal en Web3</a></li></ul></div></div></li><li><div class="CollapsibleLink-module_CollapsibleLink__j7GQo"><div class="CollapsibleLink-module_CollapsibleLink__header__ArGJg"><a href="/escuela/recursos-humanos/" class="CollapsibleLink-module_CollapsibleLink__link__iFSa-">Recursos Humanos<!-- --> <svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#C4C8CE" fill-rule="evenodd" d="M7.47 9.47a.75.75 0 0 1 1.06 0L12 12.94l3.47-3.47a.75.75 0 1 1 1.06 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path></svg></a></div><div class="CollapsibleLink-module_CollapsibleLink__content__xbqXA"><ul class="CollapsibleLink-module_CollapsibleLink__routesList__0qDa8"><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/fundamentos-rrhh/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-fundamentos-rrhh">Fundamentos y Cultura Organizacional en RRHH</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/talent-acquisition/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-talent-acquisition">Atracción y Selección de Talento</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/cultura/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-cultura">Cultura y Employee Experience</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/desarrollo-talento/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-desarrollo-talento">Gestión y Desarrollo de Talento</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/desarrollo-liderazgo/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-desarrollo-liderazgo">Desarrollo y Evaluación de Liderazgo</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/dei/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-dei">Diversidad, Equidad e Inclusión</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/ai-hr/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-ai-hr">AI y Automatización en Recursos Humanos</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/tecnologia-automatizacion-en-recursos-humanos/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-tecnologia-automatizacion-en-recursos-humanos">Tecnología y Automatización en RRHH</a></li></ul></div></div></li><li><div class="CollapsibleLink-module_CollapsibleLink__j7GQo"><div class="CollapsibleLink-module_CollapsibleLink__header__ArGJg"><a href="/escuela/finanzas/" class="CollapsibleLink-module_CollapsibleLink__link__iFSa-">Finanzas e Inversiones<!-- --> <svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#C4C8CE" fill-rule="evenodd" d="M7.47 9.47a.75.75 0 0 1 1.06 0L12 12.94l3.47-3.47a.75.75 0 1 1 1.06 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path></svg></a></div><div class="CollapsibleLink-module_CollapsibleLink__content__xbqXA"><ul class="CollapsibleLink-module_CollapsibleLink__routesList__0qDa8"><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/fundamentos-de-finanzas-personales-y-corporativas/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-fundamentos-de-finanzas-personales-y-corporativas">Fundamentos de Finanzas Personales y Corporativas</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/analisis-y-valoracion-financiera/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-analisis-y-valoracion-financiera">Análisis y Valoración Financiera</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/inversion-y-mercados-de-capitales/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-inversion-y-mercados-de-capitales">Inversión y Mercados de Capitales</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/finanzas-descentralizadas-defi-y-criptoactivos/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-finanzas-descentralizadas-defi-y-criptoactivos">Finanzas Descentralizadas (DeFi) y Criptoactivos</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/finanzas-y-estrategia-para-startups/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-finanzas-y-estrategia-para-startups">Finanzas y Estrategia para Startups</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/inteligencia-artificial-aplicada-a-finanzas/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-inteligencia-artificial-aplicada-a-finanzas">Inteligencia Artificial Aplicada a Finanzas</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/domina-excel/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-domina-excel">Domina Excel</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/financial-analyst/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-financial-analyst">Financial Analyst</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/empleo-finanzas/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-empleo-finanzas">Conseguir trabajo en Finanzas e Inversiones</a></li></ul></div></div></li><li><div class="CollapsibleLink-module_CollapsibleLink__j7GQo"><div class="CollapsibleLink-module_CollapsibleLink__header__ArGJg"><a href="/escuela/startups/" class="CollapsibleLink-module_CollapsibleLink__link__iFSa-">Startups<!-- --> <svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#C4C8CE" fill-rule="evenodd" d="M7.47 9.47a.75.75 0 0 1 1.06 0L12 12.94l3.47-3.47a.75.75 0 1 1 1.06 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path></svg></a></div><div class="CollapsibleLink-module_CollapsibleLink__content__xbqXA"><ul class="CollapsibleLink-module_CollapsibleLink__routesList__0qDa8"><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/fundamentos-y-validacion-de-ideas/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-fundamentos-y-validacion-de-ideas">Fundamentos y Validación de Ideas</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/estrategia-de-negocio-y-product-market-fit/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-estrategia-de-negocio-y-product-market-fit">Estrategia de Negocio y Product-Market Fit</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/desarrollo-de-producto-y-operaciones-lean/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-desarrollo-de-producto-y-operaciones-lean">Desarrollo de Producto y Operaciones Lean</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/finanzas-legal-y-fundraising/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-finanzas-legal-y-fundraising">Finanzas, Legal y Fundraising</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/marketing-ventas-y-growth-para-startups/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-marketing-ventas-y-growth-para-startups">Marketing, Ventas y Growth para Startups</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/cultura-talento-y-liderazgo/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-cultura-talento-y-liderazgo">Cultura, Talento y Liderazgo</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/finanzas-y-operaciones-en-ecommerce/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-finanzas-y-operaciones-en-ecommerce">Finanzas y Operaciones en Ecommerce</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/startups-web3-y-blockchain/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-startups-web3-y-blockchain">Startups Web3 y Blockchain</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/startups-con-impacto-social/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-startups-con-impacto-social">Startups con Impacto Social</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/expansion-y-ecosistema-startup/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-expansion-y-ecosistema-startup">Expansión y Ecosistema Startup</a></li></ul></div></div></li><li><div class="CollapsibleLink-module_CollapsibleLink__j7GQo"><div class="CollapsibleLink-module_CollapsibleLink__header__ArGJg"><a href="/escuela/devops-cloud/" class="CollapsibleLink-module_CollapsibleLink__link__iFSa-">Cloud Computing y DevOps<!-- --> <svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#C4C8CE" fill-rule="evenodd" d="M7.47 9.47a.75.75 0 0 1 1.06 0L12 12.94l3.47-3.47a.75.75 0 1 1 1.06 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 0-1.06" clip-rule="evenodd"></path></svg></a></div><div class="CollapsibleLink-module_CollapsibleLink__content__xbqXA"><ul class="CollapsibleLink-module_CollapsibleLink__routesList__0qDa8"><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/fundamentos-de-cloud-y-devops/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-fundamentos-de-cloud-y-devops">Fundamentos de Cloud y DevOps</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/administracion-de-servidores-linux/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-administracion-de-servidores-linux">Administración de Servidores Linux</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/contenerizacion-y-orquestacion/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-contenerizacion-y-orquestacion">Contenerización y Orquestación</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/infraestructura-como-codigo-iac-y-ci-cd/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-infraestructura-como-codigo-iac-y-ci-cd">Infraestructura como Código (IaC) y CI/CD</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/plataforma-cloud-aws/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-plataforma-cloud-aws">Amazon Web Services</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/plataforma-cloud-azure/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-plataforma-cloud-azure">Microsoft Azure</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/serverless-y-observabilidad/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-serverless-y-observabilidad">Serverless y Observabilidad</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/certificaciones-cloud-preparacion/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-certificaciones-cloud-preparacion">Certificaciones Cloud (Preparación)</a></li><li class="CollapsibleLink-module_CollapsibleLink__routesList_item__CtaNX"><a href="/ruta/plataforma-cloud-gcp/" class="CollapsibleLink-module_CollapsibleLink__routeLink__zcaS7" target="_blank" rel="noopener noreferrer" data-trans="atomic-ui-footer-route-plataforma-cloud-gcp">Plataforma Cloud GCP</a></li></ul></div></div></li></ul></div></div><div class="LinksSection-module_LinksSection__groups_container__qXTO-"><div class="LinkGroup-module_LinkGroup__CUOCg"><div><h3 class="LinkSection-module_LinkSection__title__SyO8P" data-trans="atomic-ui-footer-platzi-community-title">Platzi y comunidad</h3><ul class="LinkSection-module_LinkSection__list__BfdZV"><li><a target="_self" rel="noopener noreferrer" href="/business" class="SimpleLink-module_SimpleLink__8Zr23">Platzi Business</a></li><li><a target="_self" rel="noopener noreferrer" href="/comunidad/" class="SimpleLink-module_SimpleLink__8Zr23">Live Classes</a></li><li><a target="_self" rel="noopener noreferrer" href="/agenda" class="SimpleLink-module_SimpleLink__8Zr23">Lanzamientos</a></li><li><a target="_self" rel="noopener noreferrer" href="/business/executive-program" class="SimpleLink-module_SimpleLink__8Zr23">Executive Program</a></li><li><a target="_self" rel="noopener noreferrer" href="/unete/careers/" class="SimpleLink-module_SimpleLink__8Zr23">Trabaja con nosotros</a></li><li><a target="_blank" rel="noopener noreferrer" href="/podcast-platzi/" class="SimpleLink-module_SimpleLink__8Zr23">Podcast</a></li></ul></div><div><h3 class="LinkSection-module_LinkSection__title__SyO8P" data-trans="atomic-ui-footer-resources-title">Recursos</h3><ul class="LinkSection-module_LinkSection__list__BfdZV"><li><a target="_blank" rel="noopener noreferrer" href="https://platziteam.notion.site/Co-Branding-702a81e452bf4a788f6d16a02ebdcf9a?source=copy_link" class="SimpleLink-module_SimpleLink__8Zr23">Manual de Marca</a></li></ul></div></div><div class="LinkGroup-module_LinkGroup__CUOCg"><div><h3 class="LinkSection-module_LinkSection__title__SyO8P" data-trans="atomic-ui-footer-support-title">Soporte</h3><ul class="LinkSection-module_LinkSection__list__BfdZV"><li><a target="_self" rel="noopener noreferrer" href="/precios/#faq" class="SimpleLink-module_SimpleLink__8Zr23">Preguntas Frecuentes</a></li><li><a target="_blank" rel="noopener noreferrer" href="https://api.whatsapp.com/send?phone=14153419905&text=Hola%2C%20quiero%20saber%20m%C3%A1s%20sobre%20Platzi" class="SimpleLink-module_SimpleLink__8Zr23">Contáctanos</a></li></ul></div><div><h3 class="LinkSection-module_LinkSection__title__SyO8P" data-trans="atomic-ui-footer-legal-title">Legal</h3><ul class="LinkSection-module_LinkSection__list__BfdZV"><li><a target="_self" rel="noopener noreferrer" href="/terminos" class="SimpleLink-module_SimpleLink__8Zr23">Términos y Condiciones</a></li><li><a target="_self" rel="noopener noreferrer" href="/privacidad" class="SimpleLink-module_SimpleLink__8Zr23">Privacidad</a></li><li><a target="_self" rel="noopener noreferrer" href="/tyc" class="SimpleLink-module_SimpleLink__8Zr23">Tyc promociones</a></li></ul></div></div></div></div></div></nav><div class="AwardsSection-module_AwardsSection__wJYan"><div class="AwardsSection-module_AwardsSection__container__G1Sjk"><span class="AwardsSection-module_AwardsSection__title__iv1h2">Reconocimientos</span><div class="AwardsSection-module_AwardsSection__awards_container__YMre9"><span class="AwardsSection-module_AwardsSection__title__desktop__aw3Te AwardsSection-module_AwardsSection__title__iv1h2">Reconocimientos</span><div class="AwardsSection-module_AwardsSection__award__hh-Y8"><img width="77" src="https://static.platzi.com/media/uploads/time_magazine_logo_be5a971d52.svg" alt="Logo reconocimiento" class="AwardsSection-module_AwardsSection__awardLogo__-MOJ8"/><span class="AwardsSection-module_AwardsSection__awardDesc__C1rjd">Top 40 Mejores EdTech del mundo · 2024</span></div><div class="AwardsSection-module_AwardsSection__award__hh-Y8"><img width="117" src="https://static.platzi.com/media/uploads/Y_combinator_logo_4x_75ecc1f58b.png" alt="Logo reconocimiento" class="AwardsSection-module_AwardsSection__awardLogo__-MOJ8"/><span class="AwardsSection-module_AwardsSection__awardDesc__C1rjd">Primera Startup Latina admitida en YC · 2014</span></div><div class="AwardsSection-module_AwardsSection__award__hh-Y8"><img width="33" src="https://static.platzi.com/media/uploads/ey_logo_ba480a38ab.svg" alt="Logo reconocimiento" class="AwardsSection-module_AwardsSection__awardLogo__-MOJ8"/><span class="AwardsSection-module_AwardsSection__awardDesc__C1rjd">Primera Startup EdTech · 2018</span></div><div class="AwardsSection-module_AwardsSection__award__hh-Y8"><img width="38" src="https://static.platzi.com/media/uploads/medal_education_logo_4x_74b356c26e.png" alt="Logo reconocimiento" class="AwardsSection-module_AwardsSection__awardLogo__-MOJ8"/><span class="AwardsSection-module_AwardsSection__awardDesc__C1rjd">CEO Ganador Medalla por la Educación T4 & HP · 2024</span></div><div class="AwardsSection-module_AwardsSection__award__hh-Y8"><img width="109" src="https://static.platzi.com/media/uploads/forbes_logo_84837fcfda.svg" alt="Logo reconocimiento" class="AwardsSection-module_AwardsSection__awardLogo__-MOJ8"/><span class="AwardsSection-module_AwardsSection__awardDesc__C1rjd">CEO Mejor Emprendedor del año · 2024</span></div></div></div></div><nav class="SocialSection-module_SocialSection__IiS-B" aria-label="Redes sociales"><div class="SocialSection-module_SocialSection__container__YsXFX"><span class="SocialSection-module_SocialSection__fromLatam__wSj7o">De LATAM con<svg width="1em" height="1em" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" d="M12.007 5.688a5.88 5.88 0 0 1 8.019.294 5.923 5.923 0 0 1-.316 8.65l-6.565 5.69c-.657.57-1.633.57-2.29 0l-6.566-5.69a5.923 5.923 0 0 1-.315-8.65 5.88 5.88 0 0 1 8.02-.294l.006.006z"></path></svg>para el mundo</span><div class="SocialSection-module_SocialSection__socials__vyTv-"><a href="https://www.youtube.com/@Platzi" class="SocialSection-module_SocialSection__socialLink__0VmtV" aria-label="Youtube" target="_blank" rel="noopener noreferrer"><span class="SocialSection-module_SocialSection__socialLabel__aw3PD">Youtube</span><svg width="1em" height="1em" fill="none" viewBox="0 0 29 21" xmlns="http://www.w3.org/2000/svg" class="SocialSection-module_SocialSection__socialLogo__KKEyx"><path fill="#fff" d="M14.715.927c.004 0 8.935 0 11.162.598a3.58 3.58 0 0 1 2.525 2.525c.595 2.227.598 6.877.598 6.877 0 .022-.002 4.655-.598 6.877a3.58 3.58 0 0 1-2.525 2.525c-2.227.598-11.158.598-11.162.598 0 0-8.935 0-11.162-.598a3.58 3.58 0 0 1-2.526-2.525C.431 15.582.43 10.949.43 10.927c0 0 0-4.65.597-6.877a3.58 3.58 0 0 1 2.526-2.525C5.78.927 14.715.927 14.715.927m-2.86 14.285 7.423-4.285-7.422-4.285z"></path></svg></a><a href="https://www.instagram.com/platzi/" class="SocialSection-module_SocialSection__socialLink__0VmtV" aria-label="Instagram" target="_blank" rel="noopener noreferrer"><span class="SocialSection-module_SocialSection__socialLabel__aw3PD">Instagram</span><svg width="1em" height="1em" fill="none" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg" class="SocialSection-module_SocialSection__socialLogo__KKEyx"><path fill="#fff" d="M15.73 4.627c-.6 0-1.2.5-1.2 1.2s.5 1.2 1.2 1.2 1.2-.5 1.2-1.2c-.1-.7-.6-1.2-1.2-1.2m-5.3 1.5c-2.7 0-4.9 2.2-4.9 4.9s2.2 4.9 4.9 4.9 4.9-2.2 4.9-4.9c.1-2.7-2.1-4.9-4.9-4.9m0 8.1c-1.7 0-3.2-1.4-3.2-3.2 0-1.7 1.4-3.2 3.2-3.2 1.7 0 3.2 1.4 3.2 3.2s-1.4 3.2-3.2 3.2"></path><path fill="#fff" d="M14.43.927h-8c-3.3 0-6 2.7-6 6v8c0 3.3 2.7 6 6 6h8c3.3 0 6-2.7 6-6v-8c0-3.3-2.7-6-6-6m4.1 14c0 2.3-1.9 4.1-4.1 4.1h-8c-2.3 0-4.1-1.9-4.1-4.1v-8c0-2.3 1.9-4.1 4.1-4.1h8c2.3 0 4.1 1.9 4.1 4.1z"></path></svg></a><a href="https://co.linkedin.com/school/platzi-inc/" class="SocialSection-module_SocialSection__socialLink__0VmtV" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer"><span class="SocialSection-module_SocialSection__socialLabel__aw3PD">LinkedIn</span><svg width="1em" height="1em" fill="none" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg" class="SocialSection-module_SocialSection__socialLogo__KKEyx"><path fill="#fff" d="M18.207.927c1.227 0 2.223.995 2.223 2.223v15.554a2.223 2.223 0 0 1-2.223 2.223H2.652A2.223 2.223 0 0 1 .43 18.704V3.15c0-1.228.995-2.223 2.222-2.223zM3.494 18.149h2.983v-9.63H3.494zm10.653-9.924c-2.044 0-2.904 1.592-2.904 1.592V8.519h-2.86v9.63h2.86v-5.055c0-1.354.623-2.16 1.817-2.16 1.096 0 1.624.774 1.624 2.16v5.055h2.967v-6.097c0-2.58-1.462-3.827-3.505-3.827M4.97 3.705a1.77 1.77 0 0 0-1.764 1.777c0 .98.79 1.776 1.764 1.776a1.77 1.77 0 0 0 1.763-1.776A1.77 1.77 0 0 0 4.97 3.704"></path></svg></a><a href="https://www.tiktok.com/@platzi" class="SocialSection-module_SocialSection__socialLink__0VmtV" aria-label="TikTok" target="_blank" rel="noopener noreferrer"><span class="SocialSection-module_SocialSection__socialLabel__aw3PD">TikTok</span><svg width="1em" height="1em" fill="none" viewBox="0 0 17 21" xmlns="http://www.w3.org/2000/svg" class="SocialSection-module_SocialSection__socialLogo__KKEyx"><path fill="#fff" d="M14.883 5.204a5 5 0 0 1-.386-.229 5.5 5.5 0 0 1-.992-.859 4.8 4.8 0 0 1-1.117-2.351h.004c-.085-.509-.05-.838-.045-.838H8.98v13.282q.002.267-.008.529l-.003.065-.002.03v.007a2.96 2.96 0 0 1-.436 1.34 2.9 2.9 0 0 1-1.003.974 2.77 2.77 0 0 1-1.394.375c-1.57 0-2.842-1.304-2.842-2.916s1.272-2.916 2.842-2.916a2.8 2.8 0 0 1 .875.14l.004-3.497a6.1 6.1 0 0 0-2.559.204A6.2 6.2 0 0 0 2.19 9.78a6.7 6.7 0 0 0-1.442 1.813c-.142.25-.679 1.255-.744 2.885-.04.925.232 1.884.362 2.28v.009c.081.233.398 1.03.914 1.7a6.9 6.9 0 0 0 1.46 1.404v-.008l.008.008c1.63 1.13 3.438 1.056 3.438 1.056.313-.013 1.362 0 2.553-.575 1.32-.638 2.072-1.589 2.072-1.589a6.6 6.6 0 0 0 1.13-1.913 7.3 7.3 0 0 0 .406-2.189V7.614c.041.025.585.392.585.392s.784.512 2.008.846c.878.238 2.06.288 2.06.288V5.73c-.414.046-1.256-.088-2.117-.526"></path></svg></a><a href="https://www.facebook.com/platzi" class="SocialSection-module_SocialSection__socialLink__0VmtV" aria-label="Facebook" target="_blank" rel="noopener noreferrer"><span class="SocialSection-module_SocialSection__socialLabel__aw3PD">Facebook</span><svg aria-hidden="true" data-icon="facebook-f" data-prefix="fab" viewBox="0 0 320 512" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" class="SocialSection-module_SocialSection__socialLogo__KKEyx"><path fill="currentColor" d="m279.1 288 14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.4 0 225.4 0c-73.22 0-121.1 44.38-121.1 124.7v70.62H22.89V288h81.39v224h100.2V288z"></path></svg></a><a href="https://x.com/platzi" class="SocialSection-module_SocialSection__socialLink__0VmtV" aria-label="X (Twitter)" target="_blank" rel="noopener noreferrer"><span class="SocialSection-module_SocialSection__socialLabel__aw3PD">X (Twitter)</span><svg width="1em" height="1em" fill="none" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg" class="SocialSection-module_SocialSection__socialLogo__KKEyx"><path fill="#fff" d="m12.334 9.397 7.447-8.47h-1.764L11.548 8.28 6.386.927H.43l7.808 11.12-7.808 8.88h1.764l6.826-7.766 5.454 7.766h5.956M2.83 2.229h2.71l12.476 17.46h-2.711"></path></svg></a><a href="https://www.threads.net/@platzi" class="SocialSection-module_SocialSection__socialLink__0VmtV" aria-label="Threads" target="_blank" rel="noopener noreferrer"><span class="SocialSection-module_SocialSection__socialLabel__aw3PD">Threads</span><svg width="1em" height="1em" fill="none" viewBox="0 0 18 21" xmlns="http://www.w3.org/2000/svg" class="SocialSection-module_SocialSection__socialLogo__KKEyx"><path fill="#fff" d="M13.658 10.197a7 7 0 0 0-.259-.12c-.152-2.844-1.688-4.472-4.267-4.49h-.035c-1.542 0-2.824.667-3.614 1.88l1.418.984c.59-.905 1.515-1.098 2.197-1.098h.024c.849.005 1.49.255 1.904.742q.453.534.604 1.464-1.13-.195-2.438-.12c-2.451.144-4.027 1.59-3.921 3.602a3.11 3.11 0 0 0 1.413 2.47c.726.485 1.66.722 2.63.668 1.283-.07 2.289-.566 2.99-1.471.533-.688.87-1.579 1.019-2.701.611.373 1.064.864 1.314 1.455.425 1.003.45 2.653-.88 3.997-1.164 1.178-2.565 1.688-4.681 1.703-2.347-.017-4.123-.78-5.277-2.265-1.08-1.39-1.64-3.399-1.66-5.97.02-2.571.58-4.58 1.66-5.97 1.154-1.486 2.93-2.248 5.277-2.265 2.364.017 4.17.783 5.37 2.275.587.732 1.03 1.653 1.322 2.726l1.662-.45c-.354-1.32-.911-2.458-1.67-3.402C14.225 1.928 11.978.947 9.083.927H9.07c-2.89.02-5.11 1.004-6.604 2.925C1.138 5.56.453 7.939.43 10.92v.014c.023 2.98.708 5.359 2.036 7.068 1.493 1.92 3.715 2.905 6.604 2.925h.012c2.569-.018 4.38-.699 5.87-2.207 1.952-1.974 1.894-4.447 1.25-5.966-.461-1.089-1.34-1.973-2.544-2.557m-4.435 4.22c-1.075.062-2.19-.427-2.246-1.472-.04-.775.545-1.64 2.312-1.743q.302-.018.596-.018c.641 0 1.242.063 1.787.184-.203 2.573-1.397 2.99-2.45 3.05"></path></svg></a></div></div></nav></footer><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-75b8447d736d735e.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n3:I[47132,[],\"\"]\n4:I[75082,[],\"\"]\n7:I[50700,[],\"OutletBoundary\"]\na:I[87748,[],\"AsyncMetadataOutlet\"]\nc:I[50700,[],\"ViewportBoundary\"]\ne:I[50700,[],\"MetadataBoundary\"]\n10:I[69699,[],\"\"]\n11:\"$Sreact.suspense\"\n12:I[87748,[],\"AsyncMetadata\"]\n14:I[81597,[\"9074\",\"static/chunks/9074-512461791a96f6fe.js\",\"1927\",\"static/chunks/1927-622d29926aa68161.js\",\"1722\",\"static/chunks/1722-0a32549291793d29.js\",\"3330\",\"static/chunks/3330-b5e0a3d0bd216ffe.js\",\"6465\",\"static/chunks/6465-7bce52dc71629cbb.js\",\"2118\",\"static/chunks/2118-4d9bc52fad63aaa3.js\",\"6514\",\"static/chunks/6514-f1fd2245c12d44f5.js\",\"7177\",\"static/chunks/app/layout-25b59525eefa61e6.js\"],\"VortexProvider\"]\n15:I[55983,[\"9074\",\"static/chunks/9074-512461791a96f6fe.js\",\"1927\",\"static/chunks/1927-622d29926aa68161.js\",\"2118\",\"static/chunks/2118-4d9bc52fad63aaa3.js\",\"8039\",\"static/chunks/app/error-a60a0c159ecd2ca3.js\"],\"default\"]\n17:I[97387,[\"7401\",\"static/chunks/baeaa4ff-bd98f1b57edb35fb.js\",\"4676\",\"static/chunks/9437edf3-bc576834b1b3c31c.js\",\"8751\",\"static/chunks/2849449d-aed28ed45c2cb396.js\",\"1459\",\"static/chunks/1459-4439e4327d65fe66.js\",\"9074\",\"static/chunks/9074-512461791a96f6fe.js\",\"1927\",\"static/chunks/1927-622d29926aa68161.js\",\"1722\",\"static/chunks/1722-0a32549291793d29.js\",\"898\",\"static/chunks/898-17c7ce72a5d12c6f.js\",\"3575\",\"static/chunks/3575-3bd1ab8b99f09e2d.js\",\"3970\",\"static/chunks/3970-42d50041e257f091.js\",\"3330\",\"static/chunks/3330-b5e0a3d0bd216ffe.js\",\"4672\",\"static/chunks/4672-a5cfb604a3e8c930.js\",\"929\",\"static/chunks/929-9a0257df42a7470f.js\",\"7453\",\"static/chunks/7453-4e1d3bed0a596f28.js\",\"887\",\"static/chunks/887-1cfa46bcbd16ae08.js\",\"7619\",\"static/chunks/7619-49b648aa557a4197.js\",\"6366\",\"static/chunks/6366-51331d1525c33f30.js\",\"6624\",\"static/chunks/6624-089bdca1d43fbfe7.js\",\"4556\",\"static/chunks/4556-46fcc4990abd44ae.js\",\"110\",\"static/chunks/110-3b4649928ab4e9b7.js\",\"4782\",\"static/chunks/4782-f922caab3f3a9b8d.js\",\"1152\",\"static/chunks/1152-acbf10528d0d8944.js\",\"1095\",\"static/chunks/1095-864fc386c556c419.js\",\"9363\",\"static/chunks/9363-50b1b3a3be68a02f.js\",\"6465\",\"static/chunks/6465-7bce52dc71629cbb.js\",\"6884\",\"static/chunks/6884-97157a03d18389ce.js\",\"6503\",\"static/chunks/6503-4f025edf3847b418.js\",\"2118\",\"static/chunks/2118-4d9bc52fad63aaa3.js\",\"6514\",\"static/chunks/6514-f1fd2245c12d44f5.js\",\"613\",\"static/chunks/613-51e47f7fc766f1ac.js\",\"4796\",\"static/chunks/4796-632f52eb0e87ff9e.js\",\"7810\",\"static/chunks/7810-9fedb2b371cc2489.js\",\"722\",\"static/chunks/722-04dec690b5da23c9.js\",\"6122\",\"static/chunks/6122-6a5a9936c1f1574b.js\",\"178\",\"static/chunks/app/(materialView)/cursos/%5BcourseSlug%5D/%5BmaterialSlug%5D/page-bf036e3c21a6916a.js\"],\"default\"]\n18:I[28134,[\"8897\",\"static/chunks/ef322330-44018ca68c6c08c9.js\",\"8658\",\"static/chunks/fa6cbe7e-ff32976cf0526f60.js\",\"9074\",\"static/chunks/9074-512461791a96f6fe.js\",\"1927\",\"static/chunks/1927-622d29926aa68161.js\",\"1722\",\"static/chunks/1722-0a32549291793d29.js\",\"898\",\"static/chunks/898-17c7ce72a5d12c6f.js\",\"3575\",\"static/chunks/3575-3bd1ab8b99f09e2d.js\",\"3970\",\"static/chunks/3970-42d50041e257f091.js\",\"3330\",\"static/chunks/3330-b5e0a3d0bd216ffe.js\",\"929\",\"static/chunks/929-9a0257df42a7470f.js\",\"887\",\"static/chunks/887-1cfa46bcbd16ae08.js\",\"7619\",\"static/chunks/7619-49b648aa557a4197.js\",\"8290\",\"static/chunks/8290-c97908eb19a53eed.js\",\"2118\",\"static/chunks/2118-4d9bc52fad63aaa3.js\",\"6514\",\"static/chunks/6514-f1fd2245c12d44f5.js\",\"613\",\"static/chunks/613-51e47f7fc766f1ac.js\",\"4796\",\"static/chunks/4796-632f52eb0e87ff9e.js\",\"722\",\"static/chunks/722-04dec690b5da23c9.js\",\"3806\",\"static/chunks/3806-e0e373739ecccd16.js\",\"1149\",\"static/chunks/app/(materialView)/cursos/%5BcourseSlug%5D/%5BmaterialSlug%5D/layout-4a38de06fdadda69.js\"],\"default\"]\n19:I[96979,[\"8897\",\"static/chunks/ef322330-44018ca68c6c08c9.js\",\"8658\",\"static/chunks/fa6cbe7e-ff32976cf0526f60.js\",\"9074\",\"static/chunks/9074-512461791a96f6fe.js\",\"1927\",\"static/chunks/1927-622d29926aa68161.js\",\"1722\",\"static/chunks/1722-0a32549291793d29.js\",\"898\",\"static/chunks/898-17c7ce72a5d12c6f.js\",\"3575\",\"static/chunks/3575-3bd1ab8b99f09e2d.js\",\"3970\",\"static/chunks/3970-42d"])</script><script>self.__next_f.push([1,"50041e257f091.js\",\"3330\",\"static/chunks/3330-b5e0a3d0bd216ffe.js\",\"929\",\"static/chunks/929-9a0257df42a7470f.js\",\"887\",\"static/chunks/887-1cfa46bcbd16ae08.js\",\"7619\",\"static/chunks/7619-49b648aa557a4197.js\",\"8290\",\"static/chunks/8290-c97908eb19a53eed.js\",\"2118\",\"static/chunks/2118-4d9bc52fad63aaa3.js\",\"6514\",\"static/chunks/6514-f1fd2245c12d44f5.js\",\"613\",\"static/chunks/613-51e47f7fc766f1ac.js\",\"4796\",\"static/chunks/4796-632f52eb0e87ff9e.js\",\"722\",\"static/chunks/722-04dec690b5da23c9.js\",\"3806\",\"static/chunks/3806-e0e373739ecccd16.js\",\"1149\",\"static/chunks/app/(materialView)/cursos/%5BcourseSlug%5D/%5BmaterialSlug%5D/layout-4a38de06fdadda69.js\"],\"PageViewTracker\"]\n1a:I[98401,[\"8897\",\"static/chunks/ef322330-44018ca68c6c08c9.js\",\"8658\",\"static/chunks/fa6cbe7e-ff32976cf0526f60.js\",\"9074\",\"static/chunks/9074-512461791a96f6fe.js\",\"1927\",\"static/chunks/1927-622d29926aa68161.js\",\"1722\",\"static/chunks/1722-0a32549291793d29.js\",\"898\",\"static/chunks/898-17c7ce72a5d12c6f.js\",\"3575\",\"static/chunks/3575-3bd1ab8b99f09e2d.js\",\"3970\",\"static/chunks/3970-42d50041e257f091.js\",\"3330\",\"static/chunks/3330-b5e0a3d0bd216ffe.js\",\"929\",\"static/chunks/929-9a0257df42a7470f.js\",\"887\",\"static/chunks/887-1cfa46bcbd16ae08.js\",\"7619\",\"static/chunks/7619-49b648aa557a4197.js\",\"8290\",\"static/chunks/8290-c97908eb19a53eed.js\",\"2118\",\"static/chunks/2118-4d9bc52fad63aaa3.js\",\"6514\",\"static/chunks/6514-f1fd2245c12d44f5.js\",\"613\",\"static/chunks/613-51e47f7fc766f1ac.js\",\"4796\",\"static/chunks/4796-632f52eb0e87ff9e.js\",\"722\",\"static/chunks/722-04dec690b5da23c9.js\",\"3806\",\"static/chunks/3806-e0e373739ecccd16.js\",\"1149\",\"static/chunks/app/(materialView)/cursos/%5BcourseSlug%5D/%5BmaterialSlug%5D/layout-4a38de06fdadda69.js\"],\"Layout\"]\n1b:I[64305,[\"9074\",\"static/chunks/9074-512461791a96f6fe.js\",\"1927\",\"static/chunks/1927-622d29926aa68161.js\",\"3575\",\"static/chunks/3575-3bd1ab8b99f09e2d.js\",\"2118\",\"static/chunks/2118-4d9bc52fad63aaa3.js\",\"5757\",\"static/chunks/app/(materialView)/cursos/%5BcourseSlug%5D/%5BmaterialSlug%5D/not-found-bbf4dffa179b71ef.js\"],\"default\"]\n1d:I[74295,[\"8897\",\"static/chunks/ef322330-44018ca68c6c08c9.js\",\"8658\",\"static/chunks/fa6cbe7e-ff32976cf0526f60.js\",\"9074\",\"static/chunks/9074-512461791a96f6fe.js\",\"1927\",\"static/chunks/1927-622d29926aa68161.js\",\"1722\",\"static/chunks/1722-0a32549291793d29.js\",\"898\",\"static/chunks/898-17c7ce72a5d12c6f.js\",\"3575\",\"static/chunks/3575-3bd1ab8b99f09e2d.js\",\"3970\",\"static/chunks/3970-42d50041e257f091.js\",\"3330\",\"static/chunks/3330-b5e0a3d0bd216ffe.js\",\"929\",\"static/chunks/929-9a0257df42a7470f.js\",\"887\",\"static/chunks/887-1cfa46bcbd16ae08.js\",\"7619\",\"static/chunks/7619-49b648aa557a4197.js\",\"8290\",\"static/chunks/8290-c97908eb19a53eed.js\",\"2118\",\"static/chunks/2118-4d9bc52fad63aaa3.js\",\"6514\",\"static/chunks/6514-f1fd2245c12d44f5.js\",\"613\",\"static/chunks/613-51e47f7fc766f1ac.js\",\"4796\",\"static/chunks/4796-632f52eb0e87ff9e.js\",\"722\",\"static/chunks/722-04dec690b5da23c9.js\",\"3806\",\"static/chunks/3806-e0e373739ecccd16.js\",\"1149\",\"static/chunks/app/(materialView)/cursos/%5BcourseSlug%5D/%5BmaterialSlug%5D/layout-4a38de06fdadda69.js\"],\"FooterClient\"]\n1e:I[39095,[\"8897\",\"static/chunks/ef322330-44018ca68c6c08c9.js\",\"8658\",\"static/chunks/fa6cbe7e-ff32976cf0526f60.js\",\"9074\",\"static/chunks/9074-512461791a96f6fe.js\",\"1927\",\"static/chunks/1927-622d29926aa68161.js\",\"1722\",\"static/chunks/1722-0a32549291793d29.js\",\"898\",\"static/chunks/898-17c7ce72a5d12c6f.js\",\"3575\",\"static/chunks/3575-3bd1ab8b99f09e2d.js\",\"3970\",\"static/chunks/3970-42d50041e257f091.js\",\"3330\",\"static/chunks/3330-b5e0a3d0bd216ffe.js\",\"929\",\"static/chunks/929-9a0257df42a7470f.js\",\"887\",\"static/chunks/887-1cfa46bcbd16ae08.js\",\"7619\",\"static/chunks/7619-49b648aa557a4197.js\",\"8290\",\"static/chunks/8290-c97908eb19a53eed.js\",\"2118\",\"static/chunks/2118-4d9bc52fad63aaa3.js\",\"6514\",\"static/chunks/6514-f1fd2245c12d44f5.js\",\"613\",\"static/chunks/613-51e47f7fc766f1ac.js\",\"4796\",\"static/chunks/4796-632f52eb0e87ff9e.js\",\"722\",\"static/chunks/722-04dec690b5da23c9.js\",\"3806\",\"static/chunks/3806-e0e373739ecccd16.js\",\"1149\",\"static/chunks/app/(materialView)/cursos/%5BcourseSlug%5D/%5BmaterialS"])</script><script>self.__next_f.push([1,"lug%5D/layout-4a38de06fdadda69.js\"],\"default\"]\n1f:I[57077,[\"8897\",\"static/chunks/ef322330-44018ca68c6c08c9.js\",\"8658\",\"static/chunks/fa6cbe7e-ff32976cf0526f60.js\",\"9074\",\"static/chunks/9074-512461791a96f6fe.js\",\"1927\",\"static/chunks/1927-622d29926aa68161.js\",\"1722\",\"static/chunks/1722-0a32549291793d29.js\",\"898\",\"static/chunks/898-17c7ce72a5d12c6f.js\",\"3575\",\"static/chunks/3575-3bd1ab8b99f09e2d.js\",\"3970\",\"static/chunks/3970-42d50041e257f091.js\",\"3330\",\"static/chunks/3330-b5e0a3d0bd216ffe.js\",\"929\",\"static/chunks/929-9a0257df42a7470f.js\",\"887\",\"static/chunks/887-1cfa46bcbd16ae08.js\",\"7619\",\"static/chunks/7619-49b648aa557a4197.js\",\"8290\",\"static/chunks/8290-c97908eb19a53eed.js\",\"2118\",\"static/chunks/2118-4d9bc52fad63aaa3.js\",\"6514\",\"static/chunks/6514-f1fd2245c12d44f5.js\",\"613\",\"static/chunks/613-51e47f7fc766f1ac.js\",\"4796\",\"static/chunks/4796-632f52eb0e87ff9e.js\",\"722\",\"static/chunks/722-04dec690b5da23c9.js\",\"3806\",\"static/chunks/3806-e0e373739ecccd16.js\",\"1149\",\"static/chunks/app/(materialView)/cursos/%5BcourseSlug%5D/%5BmaterialSlug%5D/layout-4a38de06fdadda69.js\"],\"NotificationPrompt\"]\n:HL[\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/4a74ff9446adf370.css\",\"style\"]\n:HL[\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/5739c4eaa88c7e0f.css\",\"style\"]\n:HL[\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/e26ebe28ad3fa85e.css\",\"style\"]\n:HL[\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/0f09b8df0fb8de68.css\",\"style\"]\n:HL[\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/c8a9861a6e45cae3.css\",\"style\"]\n:HL[\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/fdd76acc70e59987.css\",\"style\"]\n:HL[\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/d8863436aa50e2db.css\",\"style\"]\n:HL[\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/ec930add7f4717d5.css\",\"style\"]\n:HL[\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/28d5ec4ffda1d826.css\",\"style\"]\n:HL[\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/d691015d2f8ba021.css\",\"style\"]\n:HL[\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/9351cd820331c008.css\",\"style\"]\n:HL[\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/9fb43ff73b979380.css\",\"style\"]\n:HL[\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/79200dacf8b61a04.css\",\"style\"]\n:HL[\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/c87d16ce6a60250c.css\",\"style\"]\n:HL[\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/5a5e0087a7c90509.css\",\"style\"]\n:HL[\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/0dabbc32a18597a8.css\",\"style\"]\n:HL[\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/2fe376f45e20204e.css\",\"style\"]\n:HL[\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/66df30224c61bb19.css\",\"style\"]\n:HL[\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/436289d9e1c65046.css\",\"style\"]\n:HL[\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/56e4f2b55fbba909.css\",\"style\"]\n:HL[\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/96ac71cdb567033e.css\",\"style\"]\n:HL[\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/03919b247e8ba6aa.css\",\"style\"]\n0:{\"P\":null,\"b\":\"RDIbdC123l5lWqgib84k1\",\"p\":\"https://pages-production.static.platzi.com/radiance-experience\",\"c\":[\"\",\"cursos\",\"html\",\"configuracion-de-vscode-y-estructura-htm\",\"\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"(materialView)\",{\"children\":[\"cursos\",{\"children\":[[\"courseSlug\",\"html\",\"d\"],{\"children\":[[\"materialSlug\",\"configuracion-de-vscode-y-estructura-htm\",\"d\"],{\"children\":[\"__PAGE__\",{}]}]}]}]}]},\"$undefined\",\"$undefined\",true],[\"\""])</script><script>self.__next_f.push([1,",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/4a74ff9446adf370.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],\"$L2\"]}],{\"children\":[\"(materialView)\",[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"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.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[\"cursos\",[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"courseSlug\",\"html\",\"d\"],[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"materialSlug\",\"configuracion-de-vscode-y-estructura-htm\",\"d\"],[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/5739c4eaa88c7e0f.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/e26ebe28ad3fa85e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"2\",{\"rel\":\"stylesheet\",\"href\":\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/0f09b8df0fb8de68.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"3\",{\"rel\":\"stylesheet\",\"href\":\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/c8a9861a6e45cae3.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"4\",{\"rel\":\"stylesheet\",\"href\":\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/fdd76acc70e59987.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"5\",{\"rel\":\"stylesheet\",\"href\":\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/d8863436aa50e2db.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"6\",{\"rel\":\"stylesheet\",\"href\":\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/ec930add7f4717d5.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"7\",{\"rel\":\"stylesheet\",\"href\":\"https://pages-production.stat"])</script><script>self.__next_f.push([1,"ic.platzi.com/radiance-experience/_next/static/css/28d5ec4ffda1d826.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"8\",{\"rel\":\"stylesheet\",\"href\":\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/d691015d2f8ba021.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"9\",{\"rel\":\"stylesheet\",\"href\":\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/9351cd820331c008.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"10\",{\"rel\":\"stylesheet\",\"href\":\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/9fb43ff73b979380.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"11\",{\"rel\":\"stylesheet\",\"href\":\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/79200dacf8b61a04.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"12\",{\"rel\":\"stylesheet\",\"href\":\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/c87d16ce6a60250c.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],\"$L5\"]}],{\"children\":[\"__PAGE__\",[\"$\",\"$1\",\"c\",{\"children\":[\"$L6\",[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/5a5e0087a7c90509.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/0dabbc32a18597a8.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"2\",{\"rel\":\"stylesheet\",\"href\":\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/2fe376f45e20204e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"3\",{\"rel\":\"stylesheet\",\"href\":\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/66df30224c61bb19.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"4\",{\"rel\":\"stylesheet\",\"href\":\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/436289d9e1c65046.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"5\",{\"rel\":\"stylesheet\",\"href\":\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/56e4f2b55fbba909.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"6\",{\"rel\":\"stylesheet\",\"href\":\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/96ac71cdb567033e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"7\",{\"rel\":\"stylesheet\",\"href\":\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/03919b247e8ba6aa.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"$L7\",null,{\"children\":[\"$L8\",\"$L9\",[\"$\",\"$La\",null,{\"promise\":\"$@b\"}]]}]]}],{},null,false]},null,false]},null,false]},null,false]},null,false]},null,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$1\",\"UhGUJ2sSlCBDWGQCCrxfIv\",{\"children\":[[\"$\",\"$Lc\",null,{\"children\":\"$Ld\"}],null]}],[\"$\",\"$Le\",null,{\"children\":\"$Lf\"}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$10\",\"$undefined\"],\"s\":false,\"S\":false}\nf:[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$11\",null,{\"fallback\":null,\"children\":[\"$\",\"$L12\",null,{\"promise\":\"$@13\"}]}]}]\n9:null\nd:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n8:null\n2:[\"$\",\"html\",null,{\"lang\":\"es\",\"children\":[[\"$\",\"head\",null,{\"children\":[\"$\",\"link\",null,{\"rel\":\"manifest\",\"href\":\"/manifest.json\"}]}],[\"$\",\"body\",null,{\"children\":[\"$\",\"$L14\",null,{\"children\":[[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$15\",\"errorStyles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/e26ebe28ad3f"])</script><script>self.__next_f.push([1,"a85e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],\"errorScripts\":[],\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":\"$0:f:0:1:2:children:1:props:children:1:props:notFound:0:1:props:style\",\"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\":\"$0:f:0:1:2:children:1:props:children:1:props:notFound:0:1:props:children:props:children:1:props:style\",\"children\":404}],[\"$\",\"div\",null,{\"style\":\"$0:f:0:1:2:children:1:props:children:1:props:notFound:0:1:props:children:props:children:2:props:style\",\"children\":[\"$\",\"h2\",null,{\"style\":\"$0:f:0:1:2:children:1:props:children:1:props:notFound:0:1:props:children:props:children:2:props:children:props:style\",\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}],false]}]}]]}]\n5:[\"$\",\"section\",null,{\"children\":\"$L16\"}]\n16:[\"$\",\"$L17\",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\",\"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-"])</script><script>self.__next_f.push([1,"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 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"])</script><script>self.__next_f.push([1,"á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.)\",\"plans-student-counter-label\":\"Cantidad de estudiantes\",\"plans-groups-range\":\"{min}-50 estudiantes\",\"plans-calculating\":\"Calculando\",\"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\",\""])</script><script>self.__next_f.push([1,"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\":\"Invitar amigos\",\"micro-ui-header-menu-subscription\":\"Mi suscripción\",\"micro-ui-header-menu-search\":\"Buscar\",\"micro-ui-header-menu-receipts\":\"Mis Recibos\",\"micro-ui-header-menu-payments\":\"Mis Pagos\",\"micro-ui-header-login-cta\":\"Acceder\",\"micro-ui-syllabus-title\":\"Syllabus\",\"micro-ui-syllabus-take-exam\":\"Tomar examen\",\"micro-ui-syllabus-minutes-short\":\"min\",\"micro-ui-syllabus-watching-now\":\"Viendo ahora\",\"micro-ui-syllabus-completed\":\"Completado\",\"micro-ui-syllabus-delete-material-title\":\"Eliminar Material\",\"micro-ui-syllabus-delete-material-text\":\"¿Estás seguro de que deseas eliminar {title}? Esta acción no se puede deshacer.\",\"micro-ui-syllabus-delete-concept-title\":\"Eliminar Concepto\",\"micro-ui-syllabus-delete-concept-text\":\"¿Estás seguro de que deseas eliminar {title}? Esta acción no se puede deshacer.\",\"micro-ui-syllabus-cancel\":\"Cancelar\",\"micro-ui-syllabus-delete\":\"Eliminar\",\"micro-ui-syllabus-deleting\":\"Eliminando...\",\"micro-ui-syllabus-create-concept\":\"Crear concepto\",\"micro-ui-syllabus-create-concept-aria\":\"Crear concepto\",\"micro-ui-syllabus-create-material\":\"Crear clase\",\"micro-ui-syllabus-create-material-aria\":\"Crear material\",\"micro-ui-syllabus-reset-changes\":\"Cancelar\",\"micro-ui-syllabus-reset-changes-aria\":\"Restablecer cambios\",\"micro-ui-syllabus-save-changes\":\"Guardar cambios\",\"micro-ui-syllabus-save-changes-aria\":\"Guardar cambios\",\"micro-ui-syllabus-saving\":\"Guardando...\",\"micro-ui-syllabus-order-recording\":\"- Orden de grabación: {order}\",\"micro-ui-syllabus-description-id\":\"ID: {id}\",\"micro-ui-syllabus-edit-material\":\"Editar material\",\"micro-ui-syllabus-delete-material\":\"Eliminar material\",\"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\",\"header-menu-receipts\":\"Mis Recibos\",\"header-menu-payments\":\"Mis Pagos\",\"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\",\""])</script><script>self.__next_f.push([1,"main-menu-admin\":\"Administración\",\"main-menu-platzi-home\":\"Platzi Home\",\"main-menu-certificates\":\"Mis certificados\",\"main-menu-my-group\":\"Mi Grupo\",\"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\":\"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\""])</script><script>self.__next_f.push([1,":\"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\":\"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\",\"at"])</script><script>self.__next_f.push([1,"omic-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 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-my-group\":\"Mi Grupo\",\"atomic-ui-main-menu-billing-data\":\"Datos Fiscales\",\"atomic-ui-main-menu-my-receipts\":\"Mis Recibos\",\"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 si"])</script><script>self.__next_f.push([1,"n 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\":\"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-legal-tyc\":\"Tyc promociones\",\"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\",\"atomic-ui-profile-share-buttons-facebook\":\"Seguir en Facebook\",\"atomic-ui-profile-share-buttons-twitter\":\"Seguir en X\",\"atomic-ui-profile-share-buttons-linkedin\":\"Conectar en LinkedIn\",\"atomic-ui-profile-share-buttons-whatsapp\":\"Mensaje en WhatsApp\",\"atomic-ui-profile-share-buttons-github\":\"Seguir en GitHub\",\"atomic-ui-profile-share-buttons-website\":\"Visi"])</script><script>self.__next_f.push([1,"tar sitio web\",\"atomic-ui-profile-share-buttons-copy-link\":\"Copiar enlace del perfil\",\"atomic-ui-searchable-selector-placeholder\":\"Buscar...\",\"atomic-ui-searchable-selector-no-results\":\"No se encontraron resultados\",\"atomic-ui-searchable-selector-empty-state\":\"Comienza a buscar para ver resultados\",\"atomic-ui-footer-route-intro-desarrollo-web\":\"Fundamentos del Desarrollo Web Profesional\",\"atomic-ui-footer-route-diseno-desarrollo-frontend\":\"Diseño y Desarrollo Frontend\",\"atomic-ui-footer-route-desarollo-frontend-con-javascript\":\"Desarrollo Frontend con JavaScript\",\"atomic-ui-footer-route-desarrollo-frontend-con-vuejs\":\"Desarrollo Frontend con Vue.js\",\"atomic-ui-footer-route-desarrollo-frontend-angular\":\"Desarrollo Frontend con Angular\",\"atomic-ui-footer-route-desarrollo-frontend-react-js\":\"Desarrollo Frontend con React.js\",\"atomic-ui-footer-route-desarrollo-backend-con-nodejs\":\"Desarrollo Backend con Node.js\",\"atomic-ui-footer-route-desarrollo-backend-con-python\":\"Desarrollo Backend con Python\",\"atomic-ui-footer-route-desarrollo-backend-con-java\":\"Desarrollo Backend con Java\",\"atomic-ui-footer-route-desarrollo-backend-con-php\":\"Desarrollo Backend con PHP\",\"atomic-ui-footer-route-desarrollo-backend-con-ruby\":\"Desarrollo Backend con Ruby\",\"atomic-ui-footer-route-bases-de-datos-para-web\":\"Bases de Datos para Web\",\"atomic-ui-footer-route-seguridad-web-api\":\"Seguridad Web \u0026 API\",\"atomic-ui-footer-route-testing-automatizado-y-qa-para-web\":\"Testing Automatizado y QA para Web\",\"atomic-ui-footer-route-arquitecturas-web-modernas-y-escalabilidad\":\"Arquitecturas Web Modernas y Escalabilidad\",\"atomic-ui-footer-route-devops-y-cloud-para-desarrolladores-web\":\"DevOps y Cloud para Desarrolladores Web\",\"atomic-ui-footer-route-beginner-core\":\"Inglés Básico A1\",\"atomic-ui-footer-route-beginner-core2\":\"Inglés Básico A2\",\"atomic-ui-footer-route-intermediate-core\":\"Inglés Intermedio B1\",\"atomic-ui-footer-route-intermediate-core2\":\"Inglés Intermedio Alto B2\",\"atomic-ui-footer-route-advanced-core\":\"Inglés Avanzado C1\",\"atomic-ui-footer-route-complementary\":\"Inglés para Propósitos Específicos\",\"atomic-ui-footer-route-ingles-negocios\":\"Inglés de Negocios\",\"atomic-ui-footer-route-fundamentos-de-marketing-digital\":\"Fundamentos de Marketing Digital\",\"atomic-ui-footer-route-marketing-de-contenidos-y-redaccion-persuasiva\":\"Marketing de Contenidos y Redacción Persuasiva\",\"atomic-ui-footer-route-seo-y-posicionamiento-web\":\"SEO y Posicionamiento Web\",\"atomic-ui-footer-route-social-media-marketing-y-community-management\":\"Social Media Marketing y Community Management\",\"atomic-ui-footer-route-publicidad-digital-y-paid-media\":\"Publicidad Digital y Paid Media\",\"atomic-ui-footer-route-analitica-digital-y-optimizacion-cro\":\"Analítica Digital y Optimización (CRO)\",\"atomic-ui-footer-route-estrategia-de-marketing-y-growth\":\"Estrategia de Marketing y Growth\",\"atomic-ui-footer-route-marketing-de-marca-branding-y-comunicacion-estrategica\":\"Marketing de Marca y Comunicación Estratégica\",\"atomic-ui-footer-route-marketing-para-e-commerce\":\"Marketing para E-commerce\",\"atomic-ui-footer-route-marketing-b2b\":\"Marketing B2B\",\"atomic-ui-footer-route-inteligencia-artificial-aplicada-al-marketing\":\"Inteligencia Artificial Aplicada al Marketing\",\"atomic-ui-footer-route-automatizacion-del-marketing\":\"Automatización del Marketing\",\"atomic-ui-footer-route-marca-personal-y-marketing-freelance\":\"Marca Personal y Marketing Freelance\",\"atomic-ui-footer-route-ventas-y-experiencia-del-cliente\":\"Ventas y Experiencia del Cliente\",\"atomic-ui-footer-route-creacion-rrss\":\"Creación de Contenido para Redes Sociales\",\"atomic-ui-footer-route-fundamentos-de-data-science-y-ai\":\"Fundamentos de Data Science y AI\",\"atomic-ui-footer-route-analisis-y-visualizacion-de-datos\":\"Análisis y Visualización de Datos\",\"atomic-ui-footer-route-machine-learning-y-deep-learning\":\"Machine Learning y Deep Learning\",\"atomic-ui-footer-route-ingeniero-datos\":\"Data Engineer\",\"atomic-ui-footer-route-inteligencia-artificial-para-la-productividad\":\"Inteligencia Artificial para la Productividad\",\"atomic-ui"])</script><script>self.__next_f.push([1,"-footer-route-desarrollo-de-aplicaciones-con-ia\":\"Desarrollo de Aplicaciones con IA\",\"atomic-ui-footer-route-ai-software-engineer\":\"AI Software Engineer\",\"atomic-ui-footer-route-fundamentos-de-ciberseguridad\":\"Fundamentos de Ciberseguridad\",\"atomic-ui-footer-route-hacking-etico-y-pentesting\":\"Hacking Ético y Pentesting (Red Team)\",\"atomic-ui-footer-route-analisis-de-malware-e-ingenieria-forense\":\"Análisis de Malware e Ingeniería Forense\",\"atomic-ui-footer-route-seguridad-defensiva-y-cumplimiento-blue-team\":\"Seguridad Defensiva y Cumplimiento (Blue Team)\",\"atomic-ui-footer-route-ciberseguridad-estrategica-y-gestion\":\"Ciberseguridad Estratégica\",\"atomic-ui-footer-route-fundamentos-habilidades-profesionales\":\"Fundamentos de Habilidades Profesionales\",\"atomic-ui-footer-route-liderazgo-gestion-equipos\":\"Liderazgo y Gestión de Equipos\",\"atomic-ui-footer-route-comunicacion-avanzada-oratoria\":\"Comunicación Avanzada y Oratoria\",\"atomic-ui-footer-route-negociacion-resolucion-conflictos\":\"Negociación y Resolución de Conflictos\",\"atomic-ui-footer-route-inteligencia-emocional-autogestion\":\"Inteligencia Emocional y Autogestión\",\"atomic-ui-footer-route-productividad-herramientas-digitales\":\"Productividad y Herramientas Digitales\",\"atomic-ui-footer-route-gestion-proyectos-metodologias-agiles\":\"Gestión de Proyectos y Metodologías Ágiles\",\"atomic-ui-footer-route-desarrollo-carrera-marca-personal\":\"Desarrollo de Carrera y Marca Personal\",\"atomic-ui-footer-route-diversidad-inclusion-entorno-laboral-saludable\":\"Diversidad, Inclusión y Entorno Laboral Saludable\",\"atomic-ui-footer-route-filosofia-estrategia-lideres\":\"Filosofía y Estrategia para Líderes\",\"atomic-ui-footer-route-fundamentos-de-diseno-ux-ui\":\"Fundamentos de Diseño UX/UI\",\"atomic-ui-footer-route-investigacion-de-usuarios-ux-research\":\"Investigación de Usuarios (UX Research)\",\"atomic-ui-footer-route-arquitectura-de-informacion-y-usabilidad\":\"Arquitectura de Información y Usabilidad\",\"atomic-ui-footer-route-diseno-de-interfaces-y-prototipado-ui-design\":\"Diseño de Interfaces y Prototipado (UI Design)\",\"atomic-ui-footer-route-sistemas-de-diseno-y-designops\":\"Sistemas de Diseño y DesignOps\",\"atomic-ui-footer-route-redaccion-ux-ux-writing\":\"Redacción UX (UX Writing)\",\"atomic-ui-footer-route-creatividad-e-innovacion-en-diseno\":\"Creatividad e Innovación en Diseño\",\"atomic-ui-footer-route-diseno-accesible-e-inclusivo\":\"Diseño Accesible e Inclusivo\",\"atomic-ui-footer-route-diseno-asistido-por-inteligencia-artificial\":\"Diseño Asistido por Inteligencia Artificial\",\"atomic-ui-footer-route-gestion-de-producto-y-liderazgo-en-diseno\":\"Gestión de Producto y Liderazgo en Diseño\",\"atomic-ui-footer-route-diseno-de-interacciones-emergentes-vui-vr\":\"Diseño de Interacciones Emergentes (VUI/VR)\",\"atomic-ui-footer-route-desarrollo-web-para-disenadores\":\"Desarrollo Web para Diseñadores\",\"atomic-ui-footer-route-diseno-y-prototipado-no-code\":\"Diseño y Prototipado No-Code\",\"atomic-ui-footer-route-fundamentos-de-produccion-audiovisual\":\"Fundamentos de Producción Audiovisual\",\"atomic-ui-footer-route-produccion-de-video-para-plataformas-digitales\":\"Producción de Video para Plataformas Digitales\",\"atomic-ui-footer-route-produccion-de-audio-y-podcast\":\"Producción de Audio y Podcast\",\"atomic-ui-footer-route-fotografia-y-diseno-grafico-para-contenido-digital\":\"Fotografía y Diseño Gráfico para Contenido Digital\",\"atomic-ui-footer-route-motion-graphics-y-animacion\":\"Motion Graphics y Animación\",\"atomic-ui-footer-route-contenido-interactivo-y-realidad-aumentada\":\"Contenido Interactivo y Realidad Aumentada\",\"atomic-ui-footer-route-estrategia-marketing-y-monetizacion-de-contenidos\":\"Estrategia, Marketing y Monetización de Contenidos\",\"atomic-ui-footer-route-fundamentos-de-desarrollo-movil\":\"Fundamentos de Desarrollo Móvil\",\"atomic-ui-footer-route-desarrollo-nativo-android-con-kotlin\":\"Desarrollo Nativo Android con Kotlin\",\"atomic-ui-footer-route-desarrollo-nativo-ios-con-swift\":\"Desarrollo Nativo iOS con Swift\",\"atomic-ui-footer-route-desarrollo-multiplataforma-con-react-native\":\"De"])</script><script>self.__next_f.push([1,"sarrollo Multiplataforma con React Native\",\"atomic-ui-footer-route-desarrollo-multiplataforma-con-flutter\":\"Desarrollo Multiplataforma con Flutter\",\"atomic-ui-footer-route-arquitectura-y-patrones-de-diseno-movil\":\"Arquitectura y Patrones de Diseño Móvil\",\"atomic-ui-footer-route-integracion-de-apis-y-persistencia-movil\":\"Integración de APIs y Persistencia Móvil\",\"atomic-ui-footer-route-testing-y-despliegue-en-movil\":\"Testing y Despliegue en Móvil\",\"atomic-ui-footer-route-diseno-ux-ui-para-moviles\":\"Diseño UX/UI para Móviles\",\"atomic-ui-footer-route-fundamentos-del-diseno-grafico-y-digital\":\"Fundamentos del Diseño Gráfico y Digital\",\"atomic-ui-footer-route-diseno-de-identidad-visual-y-branding\":\"Diseño de Identidad Visual y Branding\",\"atomic-ui-footer-route-ilustracion-digital-y-arte-conceptual\":\"Ilustración Digital y Arte Conceptual\",\"atomic-ui-footer-route-diseno-editorial-y-de-empaques\":\"Diseño Editorial y de Empaques\",\"atomic-ui-footer-route-motion-graphics-y-animacion-3d\":\"Motion Graphics y Animación 3D\",\"atomic-ui-footer-route-diseno-grafico-asistido-por-inteligencia-artificial\":\"Diseño Gráfico Asistido por Inteligencia Artificial\",\"atomic-ui-footer-route-fundamentos-programacion-software\":\"Fundamentos de Programación e Ingeniería de Software\",\"atomic-ui-footer-route-herramientas-ia\":\"Herramientas de IA para el trabajo\",\"atomic-ui-footer-route-matematicas-para-programacion\":\"Matemáticas para Programación\",\"atomic-ui-footer-route-programacion-python\":\"Programación con Python\",\"atomic-ui-footer-route-programacion-javascript\":\"Programación con JavaScript\",\"atomic-ui-footer-route-programacion-typescript\":\"Programación con TypeScript\",\"atomic-ui-footer-route-programacion-ooo-java\":\"Programación Orientada a Objetos con Java\",\"atomic-ui-footer-route-desarrollo-c-sharp-net\":\"Desarrollo con C# y .NET\",\"atomic-ui-footer-route-programacion-con-php\":\"Programación con PHP\",\"atomic-ui-footer-route-programacion-go-rust\":\"Programación con Go y Rust\",\"atomic-ui-footer-route-programacion-swift-kotlin\":\"Programación Móvil con Swift y Kotlin\",\"atomic-ui-footer-route-programacion-c-c-plusplus\":\"Programación con C y C++\",\"atomic-ui-footer-route-admin-basica-servidores-linux\":\"Administración Básica de Servidores Linux\",\"atomic-ui-footer-route-fundamentos-de-negocios-y-emprendimiento\":\"Fundamentos de Negocios y Emprendimiento\",\"atomic-ui-footer-route-estratgia-y-crecimiento-empresarial\":\"Estrategia y Crecimiento Empresarial\",\"atomic-ui-footer-route-finanzas-personales-y-corporativas\":\"Finanzas Personales y Corporativas\",\"atomic-ui-footer-route-inversin-en-mercados-financieros\":\"Inversión en Mercados Financieros\",\"atomic-ui-footer-route-ventas-crm-y-experiencia-del-cliente\":\"Ventas, CRM y Experiencia del Cliente\",\"atomic-ui-footer-route-operaciones-logstica-y-e-commerce\":\"Operaciones, Logística y E-commerce\",\"atomic-ui-footer-route-aspectos-legales-y-cumplimiento\":\"Aspectos Legales y Cumplimiento\",\"atomic-ui-footer-route-habilidades-directivas-y-crecimiento-profesional\":\"Habilidades Directivas y Crecimiento Profesional\",\"atomic-ui-footer-route-diversidad-e-inclusion-en-el-entorno-laboral\":\"Diversidad e Inclusión en el Entorno Laboral\",\"atomic-ui-footer-route-herramientas-digitales-y-automatizacion-para-negocios\":\"Herramientas Digitales y Automatización para Negocios\",\"atomic-ui-footer-route-fundamentos-de-blockchain-y-web3\":\"Fundamentos de Blockchain y Web3\",\"atomic-ui-footer-route-desarrollo-de-smart-contracts-y-dapps\":\"Desarrollo de Smart Contracts y dApps\",\"atomic-ui-footer-route-finanzas-descentralizadas-defi\":\"Finanzas Descentralizadas (DeFi)\",\"atomic-ui-footer-route-nfts-y-economia-de-creadores\":\"NFTs y Economía de Creadores\",\"atomic-ui-footer-route-seguridad-blockchain\":\"Seguridad Blockchain\",\"atomic-ui-footer-route-ecosistemas-blockchain-alternativos-no-evm\":\"Ecosistemas Blockchain Alternativos (No-EVM)\",\"atomic-ui-footer-route-producto-marketing-y-legal-en-web3\":\"Producto, Marketing y Legal en Web3\",\"atomic-ui-footer-route-fundamentos-rrhh\":\"Fundamentos y Cultura Organizacional en RRHH\",\"atomic-ui-"])</script><script>self.__next_f.push([1,"footer-route-talent-acquisition\":\"Atracción y Selección de Talento\",\"atomic-ui-footer-route-cultura\":\"Cultura y Employee Experience\",\"atomic-ui-footer-route-desarrollo-talento\":\"Gestión y Desarrollo de Talento\",\"atomic-ui-footer-route-desarrollo-liderazgo\":\"Desarrollo y Evaluación de Liderazgo\",\"atomic-ui-footer-route-dei\":\"Diversidad, Equidad e Inclusión\",\"atomic-ui-footer-route-ai-hr\":\"AI y Automatización en Recursos Humanos\",\"atomic-ui-footer-route-tecnologia-automatizacion-en-recursos-humanos\":\"Tecnología y Automatización en RRHH\",\"atomic-ui-footer-route-fundamentos-de-finanzas-personales-y-corporativas\":\"Fundamentos de Finanzas Personales y Corporativas\",\"atomic-ui-footer-route-analisis-y-valoracion-financiera\":\"Análisis y Valoración Financiera\",\"atomic-ui-footer-route-inversion-y-mercados-de-capitales\":\"Inversión y Mercados de Capitales\",\"atomic-ui-footer-route-finanzas-descentralizadas-defi-y-criptoactivos\":\"Finanzas Descentralizadas (DeFi) y Criptoactivos\",\"atomic-ui-footer-route-finanzas-y-estrategia-para-startups\":\"Finanzas y Estrategia para Startups\",\"atomic-ui-footer-route-inteligencia-artificial-aplicada-a-finanzas\":\"Inteligencia Artificial Aplicada a Finanzas\",\"atomic-ui-footer-route-domina-excel\":\"Domina Excel\",\"atomic-ui-footer-route-financial-analyst\":\"Financial Analyst\",\"atomic-ui-footer-route-empleo-finanzas\":\"Conseguir trabajo en Finanzas e Inversiones\",\"atomic-ui-footer-route-fundamentos-y-validacion-de-ideas\":\"Fundamentos y Validación de Ideas\",\"atomic-ui-footer-route-estrategia-de-negocio-y-product-market-fit\":\"Estrategia de Negocio y Product-Market Fit\",\"atomic-ui-footer-route-desarrollo-de-producto-y-operaciones-lean\":\"Desarrollo de Producto y Operaciones Lean\",\"atomic-ui-footer-route-finanzas-legal-y-fundraising\":\"Finanzas, Legal y Fundraising\",\"atomic-ui-footer-route-marketing-ventas-y-growth-para-startups\":\"Marketing, Ventas y Growth para Startups\",\"atomic-ui-footer-route-cultura-talento-y-liderazgo\":\"Cultura, Talento y Liderazgo\",\"atomic-ui-footer-route-finanzas-y-operaciones-en-ecommerce\":\"Finanzas y Operaciones en Ecommerce\",\"atomic-ui-footer-route-startups-web3-y-blockchain\":\"Startups Web3 y Blockchain\",\"atomic-ui-footer-route-startups-con-impacto-social\":\"Startups con Impacto Social\",\"atomic-ui-footer-route-expansion-y-ecosistema-startup\":\"Expansión y Ecosistema Startup\",\"atomic-ui-footer-route-fundamentos-de-cloud-y-devops\":\"Fundamentos de Cloud y DevOps\",\"atomic-ui-footer-route-administracion-de-servidores-linux\":\"Administración de Servidores Linux\",\"atomic-ui-footer-route-contenerizacion-y-orquestacion\":\"Contenerización y Orquestación\",\"atomic-ui-footer-route-infraestructura-como-codigo-iac-y-ci-cd\":\"Infraestructura como Código (IaC) y CI/CD\",\"atomic-ui-footer-route-plataforma-cloud-aws\":\"Amazon Web Services\",\"atomic-ui-footer-route-plataforma-cloud-azure\":\"Microsoft Azure\",\"atomic-ui-footer-route-serverless-y-observabilidad\":\"Serverless y Observabilidad\",\"atomic-ui-footer-route-certificaciones-cloud-preparacion\":\"Certificaciones Cloud (Preparación)\",\"atomic-ui-footer-route-plataforma-cloud-gcp\":\"Plataforma Cloud GCP\"}},\"now\":\"$undefined\",\"timeZone\":\"UTC\",\"children\":[\"$\",\"$L18\",null,{\"isLogged\":false,\"children\":[[\"$\",\"$L19\",null,{\"referrer\":\"https://platzi.com/cursos/html/configuracion-de-vscode-y-estructura-htm\"}],[\"$\",\"$L1a\",null,{\"isLogged\":false,\"children\":[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$1b\",\"errorStyles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/b43410bc39d016d6.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],\"errorScripts\":[],\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[\"$L1c\",[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"https://pages-production.static.platzi.com/radiance-experience/_next/static/css/b43410bc39d016d6.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}],[\"$\",\"$L1d\",null,{}],["])</script><script>self.__next_f.push([1,"\"$\",\"$L1e\",null,{}],[\"$\",\"$L1f\",null,{}]]}]}]\n1c:[\"$\",\"$L1b\",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\\\"}\"}}]\nb:{\"metadata\":[[\"$\",\"title\",\"0\",{\"children\":\"Configuración de VSCode y estructura HTML5 básica\"}],[\"$\",\"meta\",\"1\",{\"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\"}],[\"$\",\"meta\",\"2\",{\"name\":\"fb:app_id\",\"content\":\"263680607075199\"}],[\"$\",\"meta\",\"3\",{\"name\":\"fb:admins\",\"content\":\"1030603473\"}],[\"$\",\"meta\",\"4\",{\"name\":\"p:domain_verify\",\"content\":\"7b60446823db932528d0528d4cb50e66\"}],[\"$\",\"link\",\"5\",{\"rel\":\"canonical\",\"href\":\"https://platzi.com/cursos/html/configuracion-de-vscode-y-estructura-htm/\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:title\",\"content\":\"Configuración de VSCode y estructura HTML5 básica\"}],[\"$\",\"meta\",\"7\",{\"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\",\"8\",{\"property\":\"og:url\",\"content\":\"https://platzi.com/cursos/html/configuracion-de-vscode-y-estructura-htm/\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:image\",\"content\":\"https://static.platzi.com/media/courses/Piezas-Curso-HTML_OG.jpg\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"11\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"12\",{\"name\":\"twitter:site\",\"content\":\"@Platzi\"}],[\"$\",\"meta\",\"13\",{\"name\":\"twitter:site:id\",\"content\":\"4503599630205252\"}],[\"$\",\"meta\",\"14\",{\"name\":\"twitter:creator\",\"content\":\"@Platzi\"}],[\"$\",\"meta\",\"15\",{\"name\":\"twitter:creator:id\",\"content\":\"4503599630205252\"}],[\"$\",\"meta\",\"16\",{\"name\":\"twitter:title\",\"content\":\"Configuración de VSCode y estructura HTML5 básica\"}],[\"$\",\"meta\",\"17\",{\"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\",\"18\",{\"name\":\"twitter:image\",\"content\":\"https://static.platzi.com/media/courses/Piezas-Curso-HTML_OG.jpg\"}],[\"$\",\"link\",\"19\",{\"rel\":\"icon\",\"href\":\"https://static.platzi.com/media/uploads/icon_77b5127626.png\"}]],\"error\":null,\"digest\":\"$undefined\"}\n13:{\"metadata\":\"$b:metadata\",\"error\":null,\"digest\":\"$undefined\"}\n20:I[54251,[\"7401\",\"static/chunks/baeaa4ff-bd98f1b57edb35fb.js\",\"4676\",\"static/chunks/9437edf3-bc576834b1b3c31c.js\",\"8751\",\"static/chunks/2849449d-aed28ed45c2cb396.js\",\"1459\",\"static/chunks/1459-4439e4327d65fe66.js\",\"9074\",\"static/chunks/9074-512461791a96f6fe.js\",\"1927\",\"static/chunks/1927-622d29926aa68161.js\",\"1722\",\"static/chunks/1722-0a32549291793d29.js\",\"898\",\"static/chunks/898-17c7ce72a5d12c6f.js\",\"3575\",\"static/chunks/3575-3bd1ab8b99f09e2d.js\",\"3970\",\"static/chunks/3970-42d50041e257f091.js\",\"3330\",\"static/chunks/3330-b5e0a3d0bd216ffe.js\",\"4672\",\"static/chunks/4672-a5cfb604a3e8c930.js\",\"929\",\"static/chunks/929-9a0257df42a7470f.js\",\"7453\",\"static/chunks/7453-4e1d3bed0a596f28.js\",\"887\",\"static/chunks/887-1cfa46bcbd16ae08.js\",\"7619\",\"static/chunks/7619-49b648aa557a4197.js\",\"6366\",\"static/chunks/6366-51331d1525c33f30.js\",\"6624\",\"static/chunks/6624-089bdca1d43fbfe7.js\",\"4556\",\"static/chunks/4556-46fcc4990abd44ae.js\",\"110\",\"static/chunks/110-3b4649928ab4e9b7.js\",\"4782\",\"static/chunks/4782-f922caab3f3a9b8d.js\",\"1152\",\"static/chunks/1152-acbf10528d0d8944.js\",\"1095\",\"static/chunks/1095-864fc386c556c419.js\",\"9363\",\"static/chunks/9363-50b1b3a3be68a02f.js\",\"6465\",\"static/chunks/6465-7bce52dc71629cbb.js\",\"6884\",\"static/chunks/6884-97157a03d18389ce.js\",\"6503\",\"static/chunks/6503-4f025edf3847b418.js\",\"2118\",\"static/chunks/2118-4d9bc52fad63aaa3.js\",\"6514\",\"static/chunks/6514-f1fd2245c12d44f5.js\",\"613\",\"static/chunks/613-51e47f7fc766f1ac.js\",\"4796\",\"static/chunks/4796-632f52eb0e87ff9e.js\",\"7810\",\"static/chunks/7810-9fedb2b371cc2"])</script><script>self.__next_f.push([1,"489.js\",\"722\",\"static/chunks/722-04dec690b5da23c9.js\",\"6122\",\"static/chunks/6122-6a5a9936c1f1574b.js\",\"178\",\"static/chunks/app/(materialView)/cursos/%5BcourseSlug%5D/%5BmaterialSlug%5D/page-bf036e3c21a6916a.js\"],\"InBrowserMessagesProvider\"]\n21:I[93670,[\"7401\",\"static/chunks/baeaa4ff-bd98f1b57edb35fb.js\",\"4676\",\"static/chunks/9437edf3-bc576834b1b3c31c.js\",\"8751\",\"static/chunks/2849449d-aed28ed45c2cb396.js\",\"1459\",\"static/chunks/1459-4439e4327d65fe66.js\",\"9074\",\"static/chunks/9074-512461791a96f6fe.js\",\"1927\",\"static/chunks/1927-622d29926aa68161.js\",\"1722\",\"static/chunks/1722-0a32549291793d29.js\",\"898\",\"static/chunks/898-17c7ce72a5d12c6f.js\",\"3575\",\"static/chunks/3575-3bd1ab8b99f09e2d.js\",\"3970\",\"static/chunks/3970-42d50041e257f091.js\",\"3330\",\"static/chunks/3330-b5e0a3d0bd216ffe.js\",\"4672\",\"static/chunks/4672-a5cfb604a3e8c930.js\",\"929\",\"static/chunks/929-9a0257df42a7470f.js\",\"7453\",\"static/chunks/7453-4e1d3bed0a596f28.js\",\"887\",\"static/chunks/887-1cfa46bcbd16ae08.js\",\"7619\",\"static/chunks/7619-49b648aa557a4197.js\",\"6366\",\"static/chunks/6366-51331d1525c33f30.js\",\"6624\",\"static/chunks/6624-089bdca1d43fbfe7.js\",\"4556\",\"static/chunks/4556-46fcc4990abd44ae.js\",\"110\",\"static/chunks/110-3b4649928ab4e9b7.js\",\"4782\",\"static/chunks/4782-f922caab3f3a9b8d.js\",\"1152\",\"static/chunks/1152-acbf10528d0d8944.js\",\"1095\",\"static/chunks/1095-864fc386c556c419.js\",\"9363\",\"static/chunks/9363-50b1b3a3be68a02f.js\",\"6465\",\"static/chunks/6465-7bce52dc71629cbb.js\",\"6884\",\"static/chunks/6884-97157a03d18389ce.js\",\"6503\",\"static/chunks/6503-4f025edf3847b418.js\",\"2118\",\"static/chunks/2118-4d9bc52fad63aaa3.js\",\"6514\",\"static/chunks/6514-f1fd2245c12d44f5.js\",\"613\",\"static/chunks/613-51e47f7fc766f1ac.js\",\"4796\",\"static/chunks/4796-632f52eb0e87ff9e.js\",\"7810\",\"static/chunks/7810-9fedb2b371cc2489.js\",\"722\",\"static/chunks/722-04dec690b5da23c9.js\",\"6122\",\"static/chunks/6122-6a5a9936c1f1574b.js\",\"178\",\"static/chunks/app/(materialView)/cursos/%5BcourseSlug%5D/%5BmaterialSlug%5D/page-bf036e3c21a6916a.js\"],\"EventBusProvider\"]\n22:I[51539,[\"7401\",\"static/chunks/baeaa4ff-bd98f1b57edb35fb.js\",\"4676\",\"static/chunks/9437edf3-bc576834b1b3c31c.js\",\"8751\",\"static/chunks/2849449d-aed28ed45c2cb396.js\",\"1459\",\"static/chunks/1459-4439e4327d65fe66.js\",\"9074\",\"static/chunks/9074-512461791a96f6fe.js\",\"1927\",\"static/chunks/1927-622d29926aa68161.js\",\"1722\",\"static/chunks/1722-0a32549291793d29.js\",\"898\",\"static/chunks/898-17c7ce72a5d12c6f.js\",\"3575\",\"static/chunks/3575-3bd1ab8b99f09e2d.js\",\"3970\",\"static/chunks/3970-42d50041e257f091.js\",\"3330\",\"static/chunks/3330-b5e0a3d0bd216ffe.js\",\"4672\",\"static/chunks/4672-a5cfb604a3e8c930.js\",\"929\",\"static/chunks/929-9a0257df42a7470f.js\",\"7453\",\"static/chunks/7453-4e1d3bed0a596f28.js\",\"887\",\"static/chunks/887-1cfa46bcbd16ae08.js\",\"7619\",\"static/chunks/7619-49b648aa557a4197.js\",\"6366\",\"static/chunks/6366-51331d1525c33f30.js\",\"6624\",\"static/chunks/6624-089bdca1d43fbfe7.js\",\"4556\",\"static/chunks/4556-46fcc4990abd44ae.js\",\"110\",\"static/chunks/110-3b4649928ab4e9b7.js\",\"4782\",\"static/chunks/4782-f922caab3f3a9b8d.js\",\"1152\",\"static/chunks/1152-acbf10528d0d8944.js\",\"1095\",\"static/chunks/1095-864fc386c556c419.js\",\"9363\",\"static/chunks/9363-50b1b3a3be68a02f.js\",\"6465\",\"static/chunks/6465-7bce52dc71629cbb.js\",\"6884\",\"static/chunks/6884-97157a03d18389ce.js\",\"6503\",\"static/chunks/6503-4f025edf3847b418.js\",\"2118\",\"static/chunks/2118-4d9bc52fad63aaa3.js\",\"6514\",\"static/chunks/6514-f1fd2245c12d44f5.js\",\"613\",\"static/chunks/613-51e47f7fc766f1ac.js\",\"4796\",\"static/chunks/4796-632f52eb0e87ff9e.js\",\"7810\",\"static/chunks/7810-9fedb2b371cc2489.js\",\"722\",\"static/chunks/722-04dec690b5da23c9.js\",\"6122\",\"static/chunks/6122-6a5a9936c1f1574b.js\",\"178\",\"static/chunks/app/(materialView)/cursos/%5BcourseSlug%5D/%5BmaterialSlug%5D/page-bf036e3c21a6916a.js\"],\"default\"]\n23:I[45901,[\"7401\",\"static/chunks/baeaa4ff-bd98f1b57edb35fb.js\",\"4676\",\"static/chunks/9437edf3-bc576834b1b3c31c.js\",\"8751\",\"static/chunks/2849449d-aed28ed45c2cb396.js\",\"1459\",\"static/chunks/1459-4439e4327d65fe66.js\",\"9074\",\"static/chunks/9074-512461791a96f6fe.js\",\"1927\",\"static/chunks/1927-622d29926aa68161.js\",\"172"])</script><script>self.__next_f.push([1,"2\",\"static/chunks/1722-0a32549291793d29.js\",\"898\",\"static/chunks/898-17c7ce72a5d12c6f.js\",\"3575\",\"static/chunks/3575-3bd1ab8b99f09e2d.js\",\"3970\",\"static/chunks/3970-42d50041e257f091.js\",\"3330\",\"static/chunks/3330-b5e0a3d0bd216ffe.js\",\"4672\",\"static/chunks/4672-a5cfb604a3e8c930.js\",\"929\",\"static/chunks/929-9a0257df42a7470f.js\",\"7453\",\"static/chunks/7453-4e1d3bed0a596f28.js\",\"887\",\"static/chunks/887-1cfa46bcbd16ae08.js\",\"7619\",\"static/chunks/7619-49b648aa557a4197.js\",\"6366\",\"static/chunks/6366-51331d1525c33f30.js\",\"6624\",\"static/chunks/6624-089bdca1d43fbfe7.js\",\"4556\",\"static/chunks/4556-46fcc4990abd44ae.js\",\"110\",\"static/chunks/110-3b4649928ab4e9b7.js\",\"4782\",\"static/chunks/4782-f922caab3f3a9b8d.js\",\"1152\",\"static/chunks/1152-acbf10528d0d8944.js\",\"1095\",\"static/chunks/1095-864fc386c556c419.js\",\"9363\",\"static/chunks/9363-50b1b3a3be68a02f.js\",\"6465\",\"static/chunks/6465-7bce52dc71629cbb.js\",\"6884\",\"static/chunks/6884-97157a03d18389ce.js\",\"6503\",\"static/chunks/6503-4f025edf3847b418.js\",\"2118\",\"static/chunks/2118-4d9bc52fad63aaa3.js\",\"6514\",\"static/chunks/6514-f1fd2245c12d44f5.js\",\"613\",\"static/chunks/613-51e47f7fc766f1ac.js\",\"4796\",\"static/chunks/4796-632f52eb0e87ff9e.js\",\"7810\",\"static/chunks/7810-9fedb2b371cc2489.js\",\"722\",\"static/chunks/722-04dec690b5da23c9.js\",\"6122\",\"static/chunks/6122-6a5a9936c1f1574b.js\",\"178\",\"static/chunks/app/(materialView)/cursos/%5BcourseSlug%5D/%5BmaterialSlug%5D/page-bf036e3c21a6916a.js\"],\"MaterialProvider\"]\n38:I[53915,[\"7401\",\"static/chunks/baeaa4ff-bd98f1b57edb35fb.js\",\"4676\",\"static/chunks/9437edf3-bc576834b1b3c31c.js\",\"8751\",\"static/chunks/2849449d-aed28ed45c2cb396.js\",\"1459\",\"static/chunks/1459-4439e4327d65fe66.js\",\"9074\",\"static/chunks/9074-512461791a96f6fe.js\",\"1927\",\"static/chunks/1927-622d29926aa68161.js\",\"1722\",\"static/chunks/1722-0a32549291793d29.js\",\"898\",\"static/chunks/898-17c7ce72a5d12c6f.js\",\"3575\",\"static/chunks/3575-3bd1ab8b99f09e2d.js\",\"3970\",\"static/chunks/3970-42d50041e257f091.js\",\"3330\",\"static/chunks/3330-b5e0a3d0bd216ffe.js\",\"4672\",\"static/chunks/4672-a5cfb604a3e8c930.js\",\"929\",\"static/chunks/929-9a0257df42a7470f.js\",\"7453\",\"static/chunks/7453-4e1d3bed0a596f28.js\",\"887\",\"static/chunks/887-1cfa46bcbd16ae08.js\",\"7619\",\"static/chunks/7619-49b648aa557a4197.js\",\"6366\",\"static/chunks/6366-51331d1525c33f30.js\",\"6624\",\"static/chunks/6624-089bdca1d43fbfe7.js\",\"4556\",\"static/chunks/4556-46fcc4990abd44ae.js\",\"110\",\"static/chunks/110-3b4649928ab4e9b7.js\",\"4782\",\"static/chunks/4782-f922caab3f3a9b8d.js\",\"1152\",\"static/chunks/1152-acbf10528d0d8944.js\",\"1095\",\"static/chunks/1095-864fc386c556c419.js\",\"9363\",\"static/chunks/9363-50b1b3a3be68a02f.js\",\"6465\",\"static/chunks/6465-7bce52dc71629cbb.js\",\"6884\",\"static/chunks/6884-97157a03d18389ce.js\",\"6503\",\"static/chunks/6503-4f025edf3847b418.js\",\"2118\",\"static/chunks/2118-4d9bc52fad63aaa3.js\",\"6514\",\"static/chunks/6514-f1fd2245c12d44f5.js\",\"613\",\"static/chunks/613-51e47f7fc766f1ac.js\",\"4796\",\"static/chunks/4796-632f52eb0e87ff9e.js\",\"7810\",\"static/chunks/7810-9fedb2b371cc2489.js\",\"722\",\"static/chunks/722-04dec690b5da23c9.js\",\"6122\",\"static/chunks/6122-6a5a9936c1f1574b.js\",\"178\",\"static/chunks/app/(materialView)/cursos/%5BcourseSlug%5D/%5BmaterialSlug%5D/page-bf036e3c21a6916a.js\"],\"PublicHeaderWrapper\"]\n39:I[16234,[\"7401\",\"static/chunks/baeaa4ff-bd98f1b57edb35fb.js\",\"4676\",\"static/chunks/9437edf3-bc576834b1b3c31c.js\",\"8751\",\"static/chunks/2849449d-aed28ed45c2cb396.js\",\"1459\",\"static/chunks/1459-4439e4327d65fe66.js\",\"9074\",\"static/chunks/9074-512461791a96f6fe.js\",\"1927\",\"static/chunks/1927-622d29926aa68161.js\",\"1722\",\"static/chunks/1722-0a32549291793d29.js\",\"898\",\"static/chunks/898-17c7ce72a5d12c6f.js\",\"3575\",\"static/chunks/3575-3bd1ab8b99f09e2d.js\",\"3970\",\"static/chunks/3970-42d50041e257f091.js\",\"3330\",\"static/chunks/3330-b5e0a3d0bd216ffe.js\",\"4672\",\"static/chunks/4672-a5cfb604a3e8c930.js\",\"929\",\"static/chunks/929-9a0257df42a7470f.js\",\"7453\",\"static/chunks/7453-4e1d3bed0a596f28.js\",\"887\",\"static/chunks/887-1cfa46bcbd16ae08.js\",\"7619\",\"static/chunks/7619-49b648aa557a4197.js\",\"6366\",\"static/chunks/6366-51331d1525c33f30.js\",\"6624\",\"static/chunks/6624-"])</script><script>self.__next_f.push([1,"089bdca1d43fbfe7.js\",\"4556\",\"static/chunks/4556-46fcc4990abd44ae.js\",\"110\",\"static/chunks/110-3b4649928ab4e9b7.js\",\"4782\",\"static/chunks/4782-f922caab3f3a9b8d.js\",\"1152\",\"static/chunks/1152-acbf10528d0d8944.js\",\"1095\",\"static/chunks/1095-864fc386c556c419.js\",\"9363\",\"static/chunks/9363-50b1b3a3be68a02f.js\",\"6465\",\"static/chunks/6465-7bce52dc71629cbb.js\",\"6884\",\"static/chunks/6884-97157a03d18389ce.js\",\"6503\",\"static/chunks/6503-4f025edf3847b418.js\",\"2118\",\"static/chunks/2118-4d9bc52fad63aaa3.js\",\"6514\",\"static/chunks/6514-f1fd2245c12d44f5.js\",\"613\",\"static/chunks/613-51e47f7fc766f1ac.js\",\"4796\",\"static/chunks/4796-632f52eb0e87ff9e.js\",\"7810\",\"static/chunks/7810-9fedb2b371cc2489.js\",\"722\",\"static/chunks/722-04dec690b5da23c9.js\",\"6122\",\"static/chunks/6122-6a5a9936c1f1574b.js\",\"178\",\"static/chunks/app/(materialView)/cursos/%5BcourseSlug%5D/%5BmaterialSlug%5D/page-bf036e3c21a6916a.js\"],\"MaterialHeading\"]\n3a:I[67965,[\"7401\",\"static/chunks/baeaa4ff-bd98f1b57edb35fb.js\",\"4676\",\"static/chunks/9437edf3-bc576834b1b3c31c.js\",\"8751\",\"static/chunks/2849449d-aed28ed45c2cb396.js\",\"1459\",\"static/chunks/1459-4439e4327d65fe66.js\",\"9074\",\"static/chunks/9074-512461791a96f6fe.js\",\"1927\",\"static/chunks/1927-622d29926aa68161.js\",\"1722\",\"static/chunks/1722-0a32549291793d29.js\",\"898\",\"static/chunks/898-17c7ce72a5d12c6f.js\",\"3575\",\"static/chunks/3575-3bd1ab8b99f09e2d.js\",\"3970\",\"static/chunks/3970-42d50041e257f091.js\",\"3330\",\"static/chunks/3330-b5e0a3d0bd216ffe.js\",\"4672\",\"static/chunks/4672-a5cfb604a3e8c930.js\",\"929\",\"static/chunks/929-9a0257df42a7470f.js\",\"7453\",\"static/chunks/7453-4e1d3bed0a596f28.js\",\"887\",\"static/chunks/887-1cfa46bcbd16ae08.js\",\"7619\",\"static/chunks/7619-49b648aa557a4197.js\",\"6366\",\"static/chunks/6366-51331d1525c33f30.js\",\"6624\",\"static/chunks/6624-089bdca1d43fbfe7.js\",\"4556\",\"static/chunks/4556-46fcc4990abd44ae.js\",\"110\",\"static/chunks/110-3b4649928ab4e9b7.js\",\"4782\",\"static/chunks/4782-f922caab3f3a9b8d.js\",\"1152\",\"static/chunks/1152-acbf10528d0d8944.js\",\"1095\",\"static/chunks/1095-864fc386c556c419.js\",\"9363\",\"static/chunks/9363-50b1b3a3be68a02f.js\",\"6465\",\"static/chunks/6465-7bce52dc71629cbb.js\",\"6884\",\"static/chunks/6884-97157a03d18389ce.js\",\"6503\",\"static/chunks/6503-4f025edf3847b418.js\",\"2118\",\"static/chunks/2118-4d9bc52fad63aaa3.js\",\"6514\",\"static/chunks/6514-f1fd2245c12d44f5.js\",\"613\",\"static/chunks/613-51e47f7fc766f1ac.js\",\"4796\",\"static/chunks/4796-632f52eb0e87ff9e.js\",\"7810\",\"static/chunks/7810-9fedb2b371cc2489.js\",\"722\",\"static/chunks/722-04dec690b5da23c9.js\",\"6122\",\"static/chunks/6122-6a5a9936c1f1574b.js\",\"178\",\"static/chunks/app/(materialView)/cursos/%5BcourseSlug%5D/%5BmaterialSlug%5D/page-bf036e3c21a6916a.js\"],\"PlayerEventWatcher\"]\n3b:I[16958,[\"7401\",\"static/chunks/baeaa4ff-bd98f1b57edb35fb.js\",\"4676\",\"static/chunks/9437edf3-bc576834b1b3c31c.js\",\"8751\",\"static/chunks/2849449d-aed28ed45c2cb396.js\",\"1459\",\"static/chunks/1459-4439e4327d65fe66.js\",\"9074\",\"static/chunks/9074-512461791a96f6fe.js\",\"1927\",\"static/chunks/1927-622d29926aa68161.js\",\"1722\",\"static/chunks/1722-0a32549291793d29.js\",\"898\",\"static/chunks/898-17c7ce72a5d12c6f.js\",\"3575\",\"static/chunks/3575-3bd1ab8b99f09e2d.js\",\"3970\",\"static/chunks/3970-42d50041e257f091.js\",\"3330\",\"static/chunks/3330-b5e0a3d0bd216ffe.js\",\"4672\",\"static/chunks/4672-a5cfb604a3e8c930.js\",\"929\",\"static/chunks/929-9a0257df42a7470f.js\",\"7453\",\"static/chunks/7453-4e1d3bed0a596f28.js\",\"887\",\"static/chunks/887-1cfa46bcbd16ae08.js\",\"7619\",\"static/chunks/7619-49b648aa557a4197.js\",\"6366\",\"static/chunks/6366-51331d1525c33f30.js\",\"6624\",\"static/chunks/6624-089bdca1d43fbfe7.js\",\"4556\",\"static/chunks/4556-46fcc4990abd44ae.js\",\"110\",\"static/chunks/110-3b4649928ab4e9b7.js\",\"4782\",\"static/chunks/4782-f922caab3f3a9b8d.js\",\"1152\",\"static/chunks/1152-acbf10528d0d8944.js\",\"1095\",\"static/chunks/1095-864fc386c556c419.js\",\"9363\",\"static/chunks/9363-50b1b3a3be68a02f.js\",\"6465\",\"static/chunks/6465-7bce52dc71629cbb.js\",\"6884\",\"static/chunks/6884-97157a03d18389ce.js\",\"6503\",\"static/chunks/6503-4f025edf3847b418.js\",\"2118\",\"static/chunks/2118-4d9bc52fad63aaa3.js\",\"6514\",\"static/chunks/6514-f1fd2245c12d44f5.js\","])</script><script>self.__next_f.push([1,"\"613\",\"static/chunks/613-51e47f7fc766f1ac.js\",\"4796\",\"static/chunks/4796-632f52eb0e87ff9e.js\",\"7810\",\"static/chunks/7810-9fedb2b371cc2489.js\",\"722\",\"static/chunks/722-04dec690b5da23c9.js\",\"6122\",\"static/chunks/6122-6a5a9936c1f1574b.js\",\"178\",\"static/chunks/app/(materialView)/cursos/%5BcourseSlug%5D/%5BmaterialSlug%5D/page-bf036e3c21a6916a.js\"],\"Viewer\"]\n3f:I[54747,[\"7401\",\"static/chunks/baeaa4ff-bd98f1b57edb35fb.js\",\"4676\",\"static/chunks/9437edf3-bc576834b1b3c31c.js\",\"8751\",\"static/chunks/2849449d-aed28ed45c2cb396.js\",\"1459\",\"static/chunks/1459-4439e4327d65fe66.js\",\"9074\",\"static/chunks/9074-512461791a96f6fe.js\",\"1927\",\"static/chunks/1927-622d29926aa68161.js\",\"1722\",\"static/chunks/1722-0a32549291793d29.js\",\"898\",\"static/chunks/898-17c7ce72a5d12c6f.js\",\"3575\",\"static/chunks/3575-3bd1ab8b99f09e2d.js\",\"3970\",\"static/chunks/3970-42d50041e257f091.js\",\"3330\",\"static/chunks/3330-b5e0a3d0bd216ffe.js\",\"4672\",\"static/chunks/4672-a5cfb604a3e8c930.js\",\"929\",\"static/chunks/929-9a0257df42a7470f.js\",\"7453\",\"static/chunks/7453-4e1d3bed0a596f28.js\",\"887\",\"static/chunks/887-1cfa46bcbd16ae08.js\",\"7619\",\"static/chunks/7619-49b648aa557a4197.js\",\"6366\",\"static/chunks/6366-51331d1525c33f30.js\",\"6624\",\"static/chunks/6624-089bdca1d43fbfe7.js\",\"4556\",\"static/chunks/4556-46fcc4990abd44ae.js\",\"110\",\"static/chunks/110-3b4649928ab4e9b7.js\",\"4782\",\"static/chunks/4782-f922caab3f3a9b8d.js\",\"1152\",\"static/chunks/1152-acbf10528d0d8944.js\",\"1095\",\"static/chunks/1095-864fc386c556c419.js\",\"9363\",\"static/chunks/9363-50b1b3a3be68a02f.js\",\"6465\",\"static/chunks/6465-7bce52dc71629cbb.js\",\"6884\",\"static/chunks/6884-97157a03d18389ce.js\",\"6503\",\"static/chunks/6503-4f025edf3847b418.js\",\"2118\",\"static/chunks/2118-4d9bc52fad63aaa3.js\",\"6514\",\"static/chunks/6514-f1fd2245c12d44f5.js\",\"613\",\"static/chunks/613-51e47f7fc766f1ac.js\",\"4796\",\"static/chunks/4796-632f52eb0e87ff9e.js\",\"7810\",\"static/chunks/7810-9fedb2b371cc2489.js\",\"722\",\"static/chunks/722-04dec690b5da23c9.js\",\"6122\",\"static/chunks/6122-6a5a9936c1f1574b.js\",\"178\",\"static/chunks/app/(materialView)/cursos/%5BcourseSlug%5D/%5BmaterialSlug%5D/page-bf036e3c21a6916a.js\"],\"DesktopAfterMaterial\"]\n40:I[84457,[\"7401\",\"static/chunks/baeaa4ff-bd98f1b57edb35fb.js\",\"4676\",\"static/chunks/9437edf3-bc576834b1b3c31c.js\",\"8751\",\"static/chunks/2849449d-aed28ed45c2cb396.js\",\"1459\",\"static/chunks/1459-4439e4327d65fe66.js\",\"9074\",\"static/chunks/9074-512461791a96f6fe.js\",\"1927\",\"static/chunks/1927-622d29926aa68161.js\",\"1722\",\"static/chunks/1722-0a32549291793d29.js\",\"898\",\"static/chunks/898-17c7ce72a5d12c6f.js\",\"3575\",\"static/chunks/3575-3bd1ab8b99f09e2d.js\",\"3970\",\"static/chunks/3970-42d50041e257f091.js\",\"3330\",\"static/chunks/3330-b5e0a3d0bd216ffe.js\",\"4672\",\"static/chunks/4672-a5cfb604a3e8c930.js\",\"929\",\"static/chunks/929-9a0257df42a7470f.js\",\"7453\",\"static/chunks/7453-4e1d3bed0a596f28.js\",\"887\",\"static/chunks/887-1cfa46bcbd16ae08.js\",\"7619\",\"static/chunks/7619-49b648aa557a4197.js\",\"6366\",\"static/chunks/6366-51331d1525c33f30.js\",\"6624\",\"static/chunks/6624-089bdca1d43fbfe7.js\",\"4556\",\"static/chunks/4556-46fcc4990abd44ae.js\",\"110\",\"static/chunks/110-3b4649928ab4e9b7.js\",\"4782\",\"static/chunks/4782-f922caab3f3a9b8d.js\",\"1152\",\"static/chunks/1152-acbf10528d0d8944.js\",\"1095\",\"static/chunks/1095-864fc386c556c419.js\",\"9363\",\"static/chunks/9363-50b1b3a3be68a02f.js\",\"6465\",\"static/chunks/6465-7bce52dc71629cbb.js\",\"6884\",\"static/chunks/6884-97157a03d18389ce.js\",\"6503\",\"static/chunks/6503-4f025edf3847b418.js\",\"2118\",\"static/chunks/2118-4d9bc52fad63aaa3.js\",\"6514\",\"static/chunks/6514-f1fd2245c12d44f5.js\",\"613\",\"static/chunks/613-51e47f7fc766f1ac.js\",\"4796\",\"static/chunks/4796-632f52eb0e87ff9e.js\",\"7810\",\"static/chunks/7810-9fedb2b371cc2489.js\",\"722\",\"static/chunks/722-04dec690b5da23c9.js\",\"6122\",\"static/chunks/6122-6a5a9936c1f1574b.js\",\"178\",\"static/chunks/app/(materialView)/cursos/%5BcourseSlug%5D/%5BmaterialSlug%5D/page-bf036e3c21a6916a.js\"],\"MobileAfterMaterial\"]\n41:I[49892,[\"7401\",\"static/chunks/baeaa4ff-bd98f1b57edb35fb.js\",\"4676\",\"static/chunks/9437edf3-bc576834b1b3c31c.js\",\"8751\",\"static/chunks/2849449d-aed28ed45c2cb396.js\",\"1459\",\"static/ch"])</script><script>self.__next_f.push([1,"unks/1459-4439e4327d65fe66.js\",\"9074\",\"static/chunks/9074-512461791a96f6fe.js\",\"1927\",\"static/chunks/1927-622d29926aa68161.js\",\"1722\",\"static/chunks/1722-0a32549291793d29.js\",\"898\",\"static/chunks/898-17c7ce72a5d12c6f.js\",\"3575\",\"static/chunks/3575-3bd1ab8b99f09e2d.js\",\"3970\",\"static/chunks/3970-42d50041e257f091.js\",\"3330\",\"static/chunks/3330-b5e0a3d0bd216ffe.js\",\"4672\",\"static/chunks/4672-a5cfb604a3e8c930.js\",\"929\",\"static/chunks/929-9a0257df42a7470f.js\",\"7453\",\"static/chunks/7453-4e1d3bed0a596f28.js\",\"887\",\"static/chunks/887-1cfa46bcbd16ae08.js\",\"7619\",\"static/chunks/7619-49b648aa557a4197.js\",\"6366\",\"static/chunks/6366-51331d1525c33f30.js\",\"6624\",\"static/chunks/6624-089bdca1d43fbfe7.js\",\"4556\",\"static/chunks/4556-46fcc4990abd44ae.js\",\"110\",\"static/chunks/110-3b4649928ab4e9b7.js\",\"4782\",\"static/chunks/4782-f922caab3f3a9b8d.js\",\"1152\",\"static/chunks/1152-acbf10528d0d8944.js\",\"1095\",\"static/chunks/1095-864fc386c556c419.js\",\"9363\",\"static/chunks/9363-50b1b3a3be68a02f.js\",\"6465\",\"static/chunks/6465-7bce52dc71629cbb.js\",\"6884\",\"static/chunks/6884-97157a03d18389ce.js\",\"6503\",\"static/chunks/6503-4f025edf3847b418.js\",\"2118\",\"static/chunks/2118-4d9bc52fad63aaa3.js\",\"6514\",\"static/chunks/6514-f1fd2245c12d44f5.js\",\"613\",\"static/chunks/613-51e47f7fc766f1ac.js\",\"4796\",\"static/chunks/4796-632f52eb0e87ff9e.js\",\"7810\",\"static/chunks/7810-9fedb2b371cc2489.js\",\"722\",\"static/chunks/722-04dec690b5da23c9.js\",\"6122\",\"static/chunks/6122-6a5a9936c1f1574b.js\",\"178\",\"static/chunks/app/(materialView)/cursos/%5BcourseSlug%5D/%5BmaterialSlug%5D/page-bf036e3c21a6916a.js\"],\"MaterialTabs\"]\n43:I[47563,[\"7401\",\"static/chunks/baeaa4ff-bd98f1b57edb35fb.js\",\"4676\",\"static/chunks/9437edf3-bc576834b1b3c31c.js\",\"8751\",\"static/chunks/2849449d-aed28ed45c2cb396.js\",\"1459\",\"static/chunks/1459-4439e4327d65fe66.js\",\"9074\",\"static/chunks/9074-512461791a96f6fe.js\",\"1927\",\"static/chunks/1927-622d29926aa68161.js\",\"1722\",\"static/chunks/1722-0a32549291793d29.js\",\"898\",\"static/chunks/898-17c7ce72a5d12c6f.js\",\"3575\",\"static/chunks/3575-3bd1ab8b99f09e2d.js\",\"3970\",\"static/chunks/3970-42d50041e257f091.js\",\"3330\",\"static/chunks/3330-b5e0a3d0bd216ffe.js\",\"4672\",\"static/chunks/4672-a5cfb604a3e8c930.js\",\"929\",\"static/chunks/929-9a0257df42a7470f.js\",\"7453\",\"static/chunks/7453-4e1d3bed0a596f28.js\",\"887\",\"static/chunks/887-1cfa46bcbd16ae08.js\",\"7619\",\"static/chunks/7619-49b648aa557a4197.js\",\"6366\",\"static/chunks/6366-51331d1525c33f30.js\",\"6624\",\"static/chunks/6624-089bdca1d43fbfe7.js\",\"4556\",\"static/chunks/4556-46fcc4990abd44ae.js\",\"110\",\"static/chunks/110-3b4649928ab4e9b7.js\",\"4782\",\"static/chunks/4782-f922caab3f3a9b8d.js\",\"1152\",\"static/chunks/1152-acbf10528d0d8944.js\",\"1095\",\"static/chunks/1095-864fc386c556c419.js\",\"9363\",\"static/chunks/9363-50b1b3a3be68a02f.js\",\"6465\",\"static/chunks/6465-7bce52dc71629cbb.js\",\"6884\",\"static/chunks/6884-97157a03d18389ce.js\",\"6503\",\"static/chunks/6503-4f025edf3847b418.js\",\"2118\",\"static/chunks/2118-4d9bc52fad63aaa3.js\",\"6514\",\"static/chunks/6514-f1fd2245c12d44f5.js\",\"613\",\"static/chunks/613-51e47f7fc766f1ac.js\",\"4796\",\"static/chunks/4796-632f52eb0e87ff9e.js\",\"7810\",\"static/chunks/7810-9fedb2b371cc2489.js\",\"722\",\"static/chunks/722-04dec690b5da23c9.js\",\"6122\",\"static/chunks/6122-6a5a9936c1f1574b.js\",\"178\",\"static/chunks/app/(materialView)/cursos/%5BcourseSlug%5D/%5BmaterialSlug%5D/page-bf036e3c21a6916a.js\"],\"SignUpWrapper\"]\n24:T19a6,\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"])</script><script>self.__next_f.push([1,"ú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 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"])</script><script>self.__next_f.push([1,"\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\u003e25:Tf18,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 "])</script><script>self.__next_f.push([1,"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.26:T114a,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 "])</script><script>self.__next_f.push([1,"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.27:Taff,\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/"])</script><script>self.__next_f.push([1,"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\u003e28:T1576,\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\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 resultado"])</script><script>self.__next_f.push([1,"s 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\u003e29:T19a6,\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="])</script><script>self.__next_f.push([1,"\"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\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 "])</script><script>self.__next_f.push([1,"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\u003e2a:T191d,\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\u003e\n\u003cli\u003eSeñal v"])</script><script>self.__next_f.push([1,"isual. 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\u003e2b:T1a33,\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óm"])</script><script>self.__next_f.push([1,"o 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 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 "])</script><script>self.__next_f.push([1,"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\u003e2c:T2578,\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\u003cs"])</script><script>self.__next_f.push([1,"pan 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=\"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=\""])</script><script>self.__next_f.push([1,"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\u003e2d:T2277,\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 enca"])</script><script>self.__next_f.push([1,"bezado, 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/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"])</script><script>self.__next_f.push([1," 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\u003e2e:T2afa,\u003cp\u003eLos formularios HTML bien construidos mejoran la experiencia, aceleran el llenado y reducen errores. Aquí aprenderás a estructurar un \u003cstrong\u003eformulario semántico\u003c/strong\u003e, usar \u003cstrong\u003eaction\u003c/strong\u003e y \u003cstrong\u003emethod\u003c/strong\u003e, vincular \u003cstrong\u003elabel\u003c/strong\u003e con \u003cstrong\u003einput\u003c/strong\u003e usando \u003cstrong\u003efor\u003c/strong\u003e e \u003cstrong\u003eid\u003c/strong\u003e, definir \u003cstrong\u003ename\u003c/strong\u003e para el envío al \u003cstrong\u003eservidor\u003c/strong\u003e, aprovechar la \u003cstrong\u003evalidación del navegador\u003c/strong\u003e y cerrar con un \u003cstrong\u003ebotón submit\u003c/strong\u003e que manda los datos a un \u003cem\u003eendpoint\u003c/em\u003e de \u003cem\u003eAPI\u003c/em\u003e.\u003c/p\u003e\n\u003ch2\u003e¿Cómo estructurar un formulario HTML con form, action y method?\u003c/h2\u003e\n\u003cp\u003eUn \u003cstrong\u003eform\u003c/strong\u003e es más que un contenedor: indica al navegador que habrá interacción y activa ayudas como autocompletado y v"])</script><script>self.__next_f.push([1,"alidación. El atributo \u003cstrong\u003eaction\u003c/strong\u003e define a dónde se envían los datos; \u003cstrong\u003emethod\u003c/strong\u003e define cómo, usando los verbos HTTP como \u003cem\u003eGET\u003c/em\u003e o \u003cem\u003ePOST\u003c/em\u003e. En el ejemplo se utiliza \u003cstrong\u003emethod=\"post\"\u003c/strong\u003e y \u003cstrong\u003eaction=\"#\"\u003c/strong\u003e mientras no existe un \u003cem\u003eendpoint\u003c/em\u003e real.\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eUsa \u003cstrong\u003eform\u003c/strong\u003e para activar validaciones del navegador.\u003c/li\u003e\n\u003cli\u003eDefine \u003cstrong\u003eaction\u003c/strong\u003e con la ruta o \u003cem\u003eendpoint\u003c/em\u003e del \u003cem\u003eAPI\u003c/em\u003e cuando esté listo.\u003c/li\u003e\n\u003cli\u003eElige \u003cstrong\u003emethod\u003c/strong\u003e: \u003cem\u003ePOST\u003c/em\u003e para enviar datos. \u003cem\u003eGET\u003c/em\u003e para consultas sencillas.\u003c/li\u003e\n\u003cli\u003eMantén el formulario claro y breve en cada paso.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eEjemplo base:\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 aquí --\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\u003ch2\u003e¿Por qué usar label, for, id y name en input?\u003c/h2\u003e\n\u003cp\u003eEl \u003cstrong\u003elabel\u003c/strong\u003e explica qué espera cada campo. El atributo \u003cstrong\u003efor\u003c/strong\u003e del label se vincula con el \u003cstrong\u003eid\u003c/strong\u003e del \u003cstrong\u003einput\u003c/strong\u003e correspondiente: al hacer clic en el texto, el cursor salta al campo y el navegador ofrece autocompletado si tiene datos guardados. El atributo \u003cstrong\u003ename\u003c/strong\u003e define la clave con la que el dato se enviará al \u003cstrong\u003eservidor\u003c/strong\u003e.\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eVincula label e input con \u003cstrong\u003efor\u003c/strong\u003e e \u003cstrong\u003eid\u003c/strong\u003e idénticos.\u003c/li\u003e\n\u003cli\u003eDefine \u003cstrong\u003ename\u003c/strong\u003e para cada campo: así se envía “clave=valor”.\u003c/li\u003e\n\u003cli\u003eEl navegador puede autocompletar si reconoce \u003cstrong\u003ename\u003c/strong\u003e comunes como “email”.\u003c/li\u003e\n\u003cli\u003eMejora la interacción al enfocar el campo desde el label.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eEjemplo con nombre y correo:\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=\"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=\"na\"\u003etype\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s\"\u003e\u0026quot;text\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\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"])</script><script>self.__next_f.push([1,"\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003etype=\"email\"\u003c/strong\u003e activa validación de formato y sugerencias del navegador.\u003c/li\u003e\n\u003cli\u003eSi hay datos guardados, el navegador ofrece rellenarlos de forma rápida.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2\u003e¿Cuándo elegir input, email y textarea y cómo enviar con submit?\u003c/h2\u003e\n\u003cp\u003eElegir el campo correcto simplifica el llenado. Para respuestas cortas usa \u003cstrong\u003einput\u003c/strong\u003e; para correos, \u003cstrong\u003etype=\"email\"\u003c/strong\u003e; para textos largos, \u003cstrong\u003etextarea\u003c/strong\u003e con control de filas y columnas. Finalmente, un \u003cstrong\u003ebutton type=\"submit\"\u003c/strong\u003e envía todo al destino definido en \u003cstrong\u003eaction\u003c/strong\u003e usando el \u003cstrong\u003emethod\u003c/strong\u003e elegido.\u003c/p\u003e\n\u003ch3\u003e¿Cuándo usar input tipo text o email?\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003eTexto corto: \u003cstrong\u003einput type=\"text\"\u003c/strong\u003e.\u003c/li\u003e\n\u003cli\u003eCorreo electrónico: \u003cstrong\u003einput type=\"email\"\u003c/strong\u003e con validación automática.\u003c/li\u003e\n\u003cli\u003eAutocompletado: el navegador sugiere datos si coinciden \u003cstrong\u003ename\u003c/strong\u003e e historial.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3\u003e¿Cómo capturar texto largo con textarea?\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003eUsa \u003cstrong\u003etextarea\u003c/strong\u003e para mensajes extensos.\u003c/li\u003e\n\u003cli\u003eAjusta \u003cstrong\u003erows\u003c/strong\u003e y \u003cstrong\u003ecols\u003c/strong\u003e como tamaño inicial.\u003c/li\u003e\n\u003cli\u003eEl usuario puede redimensionar el área para escribir mejor.\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;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\u003ch3\u003e¿Cómo enviar con button type submit al servidor o endpoint?\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003eAgrega un botón con \u003cstrong\u003etype=\"submit\"\u003c/strong\u003e al final del formulario.\u003c/li\u003e\n\u003cli\u003eDefine \u003cstrong\u003eaction\u003c/strong\u003e con la URL del \u003cem\u003eendpoint\u003c/em\u003e del \u003cem\u003eAPI\u003c/em\u003e (por ejemplo, de \u003cem\u003elogin\u003c/em\u003e).\u003c/li\u003e\n\u003cli\u003eCon \u003cstrong\u003emethod=\"post\"\u003c/strong\u003e, el navegador envía los datos y recarga si no hay destino válido.\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=\"na\"\u003etype\u003c/span\u003e\u003cspan class=\"o\"\u003e=\u003c/span\u003e\u003cspan class=\"s\"\u003e\u0026quot;text\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"])</script><script>self.__next_f.push([1,"=\"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\u003cp\u003e¿Qué te gustaría construir con estos campos y validaciones del navegador? Cuéntalo en comentarios y comparte tus dudas o ejemplos.\u003c/p\u003e2f:T22d6,\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;pass"])</script><script>self.__next_f.push([1,"word\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\"\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"])</script><script>self.__next_f.push([1,"\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\u003e30:T1be0,\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"])</script><script>self.__next_f.push([1,".\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 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 cla"])</script><script>self.__next_f.push([1,"ss=\"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\u003e31:T1baf,\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\"\u003etyp"])</script><script>self.__next_f.push([1,"e\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?\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/spa"])</script><script>self.__next_f.push([1,"n\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\u003e32:T1bea,\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 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/spa"])</script><script>self.__next_f.push([1,"n\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\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\u003e33:T1f7a,\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 resp"])</script><script>self.__next_f.push([1,"onsivas 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\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/"])</script><script>self.__next_f.push([1,"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\u003e34:T1f22,\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=\""])</script><script>self.__next_f.push([1,"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/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/spa"])</script><script>self.__next_f.push([1,"n\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\u003e35:T2126,\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"])</script><script>self.__next_f.push([1,"/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=\"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/"])</script><script>self.__next_f.push([1,"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 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\u003e36:T45d7,\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 p"])</script><script>self.__next_f.push([1,"ermite 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 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\u003eRobot"])</script><script>self.__next_f.push([1,"s\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\"\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 "])</script><script>self.__next_f.push([1,"\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\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ágen"])</script><script>self.__next_f.push([1,"es 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 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"])</script><script>self.__next_f.push([1,"\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\u003e37:T3c18,\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="])</script><script>self.__next_f.push([1,"\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\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=\""])</script><script>self.__next_f.push([1,"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=\"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"])</script><script>self.__next_f.push([1,"á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 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 u"])</script><script>self.__next_f.push([1,"n comentario y comparte tu portafolio.\u003c/p\u003e3c:T19a6,\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 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 viewp"])</script><script>self.__next_f.push([1,"ort?\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\u003e3d:Tf18,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 t"])</script><script>self.__next_f.push([1,"ab. 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.3e:T114a,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 d"])</script><script>self.__next_f.push([1,"entro 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.42:T5e0,nombres carpetas y archivos sin espacios ni acentos, luego para mencionar archivos es un problema.\n\n.html es lo que le indica al archivo que vamos a usar este codigo.\u0026#x20;\n\nDOCTYPE html es lo que le está indicando al navegador que lo que viene abajo es html5.\u0026#x20;\n\nlas etiquetas contenedoras abren y cierran, y el contenido va en su interior.\n\nopen with live server significa abrir el proyecto en el navegador desde local.\n\nTodo lo que esté dentro de body es lo que se va a ver. Lo que esté dentro de head es lo que necesita el navegador para renderizar el proyecto.\n\nlang=\"en\" - significa el idioma del contenido que va a venir dentro del body. En es inglés. Y es lo que permite al navegador saber si estás en un navegador español viendo una pag en ingles, lo que le hace reconocerlo y preguntarte si quieres traducirlo.\u0026#x20;\n\nmeta charset=\"UTF-82 es para poder usar caracteres especiales, como acentos, la ñ, etc.\n\nname viewport es el que permite que la web sea multidispositivo, sea responsive. content\\_\"width=devide-width, le está diciendo usa el tamaño real del dispositivo. Y la initial-scale=1.0\" significa que siempre lo veamos a escala 1, que no lo haga más pequeño o más grande.\n\n\\\u003ctitle\u003eDocument\\\u003c/title\u003e es el titulo del documento, es lo que va a aparecer como titulo en la pestaña del navegador.\n\nTodo lo que está en body se va a renderizar en el navegador.\n\n\\\u003ch1\u003e \\\u003c/h1\u003e Es una etiqueta contenedora de titulo.\n\n\n\n\\\u003cp\u003e \\"])</script><script>self.__next_f.push([1,"\u003c/p\u003e es una etiqueta contenedora de párrafo común.44:T14ac,{\"@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\":\"Article\",\"headline\":\"Configuración de VSCode y estructura HTML5 básica\",\"image\":\"https://static.platzi.com/media/courses/Piezas-Curso-HTML_OG.jpg\",\"datePublished\":\"2025-09-30T19:00:00+00:00\",\"dateModified\":\"2025-09-30T19:58:02.889052+00:00\",\"author\":{\"@type\":\"Person\",\"name\":\"Diego De Granda\",\"url\":\"https://platzi.com/profesores/degranda/\"},\"articleSection\":\"Curso de HTML\",\"articleBody\":\"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 navegado"])</script><script>self.__next_f.push([1,"r.¿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.\",\"url\":\"https://platzi.com/cursos/html/configuracion-de-vscode-y-estructura-htm/\",\"wordCount\":44,\"publisher\":{\"@type\":\"Organization\",\"name\":\"Platzi INC\"}}]}6:[\"$\",\"$L17\",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-question-error-message\":\"Lo siento, solo puedo responder preguntas relacionadas con el curso y la clase.\",\"ai-question-expand-button\":\"Preguntar a {name}\",\"ai-question-collapsed-text\":\"Haz una pregunta a {name}\",\"ai-question-collapsed-text-no-name\":\"Haz una pregunta\",\"ai-question-prompt-placeholder\":\"Pregunta lo que quieras acerca de la clase\",\"ai-question-prompt-placeholder-mobile\":\"Pregunta acerca de la clase\",\"ai-question-suggestion-1\":\"¿Cuándo usar el Método PATCH?\",\"ai-question-suggestion-2\":\"¿Qué es un error 404?\",\"ai-question-publish-button\":\"Publicar respuesta\",\"ai-question-new-conversation\":\"Hacer otra pregunta\",\"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 "])</script><script>self.__next_f.push([1,"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 {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\",\"end-screen-share-heading\":\"¿Disfrutando esta clase?\",\"end-screen-share-button\":\"Comparte esta clase de manera gratuita\",\"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 a Platzi Learn\",\"dashboard-tool-class\":\"Ir a Platzi Learn\",\"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\",\"material-challenge-feedback-close\":\"Cerrar\",\"material-challenge-countdown-starting\":\"Iniciando reto...\",\"material-challenge-c"])</script><script>self.__next_f.push([1,"ountdown-will-start\":\"El reto iniciará en\",\"material-challenge-swipe-instruction\":\"\u003cspan\u003eDesliza\u003c/span\u003e las cartas hacia su categoría correcta\",\"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ó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\":\"$16:props:messages:shared\",\"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 "])</script><script>self.__next_f.push([1,"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 coincida 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-s"])</script><script>self.__next_f.push([1,"ignup-init-session\":\"Iniciar sesión\"},\"vortex-invitations\":{\"widget-title\":\"Comparte este Curso\",\"widget-subtitle\":\"Invita a alguien a aprender contigo\",\"widget-badge-active\":\"Vortex Activo\",\"widget-email-placeholder\":\"amigo@ejemplo.com\",\"widget-send-button\":\"Enviar Invitación\",\"widget-sending\":\"Enviando...\",\"widget-loading\":\"Cargando Vortex...\",\"widget-not-authenticated\":\"Por favor inicia sesión para invitar a otros a este curso.\",\"widget-success\":\"Invitación enviada a {email}\",\"widget-error\":\"Error al enviar la invitación: {error}\",\"widget-course-label\":\"Curso\",\"widget-material-label\":\"Material\",\"cta-button-text\":\"¿Estás disfrutando esta clase? Invita a alguien de {companyName}\",\"cta-button-label\":\"Invitar compañeros de trabajo\",\"accept-title\":\"Aceptar Invitación\",\"accept-loading\":\"Aceptando invitación...\",\"accept-success\":\"¡Invitación aceptada exitosamente!\",\"accept-error\":\"Error al aceptar la invitación\",\"accept-error-missing-id\":\"Falta el ID de invitación\",\"accept-redirect\":\"Redirigiendo...\",\"accept-loading-auth\":\"Esperando autenticación...\",\"accept-loading-user\":\"Cargando información del usuario...\"}},\"now\":\"$undefined\",\"timeZone\":\"UTC\",\"children\":[\"$\",\"$L20\",null,{\"notifications\":[],\"children\":[false,[\"$\",\"$L21\",null,{\"children\":[[\"$\",\"$L22\",null,{}],[\"$\",\"$L23\",null,{\"courseId\":12341,\"courseSlug\":\"html\",\"materialId\":\"84728\",\"materialSlug\":\"configuracion-de-vscode-y-estructura-htm\",\"materialInfo\":{\"blockedInfo\":{\"blocked\":true,\"type\":\"unlogged\",\"url\":\"\",\"exclusive\":\"\"},\"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\":\"$24\",\"contentSeo\":\"$25\",\"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\":[],\"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\":\"$26\",\"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.\",\"url\":\"https://platzi.com/cursos/html/\",\"stars_quantity\":4.7612,\"opinions_quantity\":64,\"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/2025"])</script><script>self.__next_f.push([1,"0930T150000\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,\"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\",\"order\":0,\"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,\"order\":0,\"content\":\"$27\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false,\"access\":1,\"is_open\":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,\"order\":0,\"content\":\"$28\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false,\"access\":2,\"is_open\":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,\"order\":0,\"content\":\"$29\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false,\"access\":2,\"is_open\":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,\"order\":0,\"content\":\"$2a\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false,\"access\":0,\"is_open\":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,\"order\":0,\"content\":\"$2b\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false,\"access\":0,\"is_open\":false}]},{\"id\":24621,\"title\":\"Listas y Enlaces\",\"order\":0,\"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,\"order\":0,\"content\":\"$2c\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false,\"access\":0,\"is_open\":false},{\"id\":84732,\"title\":\"Etiquetas semánticas HTML5: header, main, nav, article y footer\",\"url\":\"https://platzi.com/cursos/html/etiquetas-semanticas-html5-header-m"])</script><script>self.__next_f.push([1,"ain-n/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1ce0f4aae2065e64aa11_68dc1ce0f4aae2065e64aa25_66s.jpg\",\"duration\":660,\"index\":7,\"order\":0,\"content\":\"$2d\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false,\"access\":0,\"is_open\":false}]},{\"id\":24622,\"title\":\"Formularios y Tablas\",\"order\":0,\"materials\":[{\"id\":84733,\"title\":\"Formularios HTML con form, label, input y validación\",\"url\":\"https://platzi.com/cursos/html/formularios-html-con-form-label-input-y/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1d8c6a2459b36e85d621_68dc1d8c6a2459b36e85d635_94s.jpg\",\"duration\":940,\"index\":8,\"order\":0,\"content\":\"$2e\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false,\"access\":0,\"is_open\":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,\"order\":0,\"content\":\"$2f\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false,\"access\":0,\"is_open\":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,\"order\":0,\"content\":\"$30\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false,\"access\":0,\"is_open\":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,\"order\":0,\"content\":\"$31\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false,\"access\":0,\"is_open\":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,\"order\":0,\"content\":\"$32\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false,\"access\":0,\"is_open\":false}]},{\"id\":24623,\"title\":\"Contenido Multimedia\",\"order\":0,\"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,\"order\":0,\"content\":\"$33\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false,\"access\":0,\"is_open\":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,\"order\":0,\"content\":\"$34\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false,\"access\":0,\"is_open\":false}]},{\"id\":24624,\"title\":\"Accesibilidad Web Y SEO\",\"order\":0,\"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/512e13acaca1ebcd2"])</script><script>self.__next_f.push([1,"f000279/thumb_68dc1e343e36d605d0ac2162_68dc1e343e36d605d0ac2176_81s.jpg\",\"duration\":805,\"index\":15,\"order\":0,\"content\":\"$35\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false,\"access\":0,\"is_open\":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,\"order\":0,\"content\":\"$36\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false,\"access\":0,\"is_open\":false}]},{\"id\":24625,\"title\":\"Proyecto final\",\"order\":0,\"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,\"order\":0,\"content\":\"$37\",\"markdown_content\":\"\",\"publishable_content\":true,\"uploading\":false,\"access\":0,\"is_open\":false}]}],\"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/\"},\"evaluation\":{\"id\":\"f48c9145-4406-46fc-a6fa-a746d3efe14a\",\"active\":true,\"title\":\"Examen de Curso de HTML\",\"url\":\"/evaluacion/f48c9145-4406-46fc-a6fa-a746d3efe14a/\"},\"private\":false,\"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\",\"seo_title\":\"\",\"seo_description\":\"\",\"skills\":[],\"prior_knowledge\":[]},\"concepts\":\"$6:props:children:props:children:1:props:children:1:props:course:concepts\",\"initialCommentsFilter\":\"top\"}],[\"$\",\"div\",null,{\"className\":\"page_Classes___w9i3 page_Classes--accountless__MRvpg page_Classes--withoutAiQuestion__Tj2I5\",\"children\":[[\"$\",\"$L38\",null,{\"messages\":\"$16:props:messages:shared\",\"className\":\"page_Classes__header__W_KM6\"}],[\"$\",\"div\",null,{\"className\":\"page_Classes__info___OiCZ\",\"children\":[\"$\",\"$L39\",null,{\"materialInfo\":\"$6:props:children:props:children:1:props:children:1:props:materialInfo\",\"syllabusSections\":{\"concepts\":[{\"id\":24620,\"title\":\"Fundamentos de HTML\",\"order\":1,\"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,\"order\":1,\"uploading\":false,\"is_open\":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,\"order\":2,\"uploading\":false,\"is_open\":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,\"order\":3,\"uploading\":false,\"is_open\":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,\"order\":4,\"uploading\":false,\"is_open\":false},{\"id\":84730,\"title\":\"In"])</script><script>self.__next_f.push([1,"sertar 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,\"order\":5,\"uploading\":false,\"is_open\":false}]},{\"id\":24621,\"title\":\"Listas y Enlaces\",\"order\":2,\"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,\"order\":6,\"uploading\":false,\"is_open\":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,\"order\":7,\"uploading\":false,\"is_open\":false}]},{\"id\":24622,\"title\":\"Formularios y Tablas\",\"order\":3,\"materials\":[{\"id\":84733,\"title\":\"Formularios HTML con form, label, input y validación\",\"url\":\"https://platzi.com/cursos/html/formularios-html-con-form-label-input-y/\",\"material_type\":\"video\",\"thumbnail_url\":\"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_68dc1d8c6a2459b36e85d621_68dc1d8c6a2459b36e85d635_94s.jpg\",\"duration\":940,\"order\":8,\"uploading\":false,\"is_open\":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,\"order\":9,\"uploading\":false,\"is_open\":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,\"order\":10,\"uploading\":false,\"is_open\":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,\"order\":11,\"uploading\":false,\"is_open\":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,\"order\":12,\"uploading\":false,\"is_open\":false}]},{\"id\":24623,\"title\":\"Contenido Multimedia\",\"order\":4,\"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,\"order\":13,\"uploading\":false,\"is_open\":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,\"order\":14,\"uploading\":false,\"is_open\":false}]},{\"id\":24624,\"title\":\"Accesibil"])</script><script>self.__next_f.push([1,"idad Web Y SEO\",\"order\":5,\"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,\"order\":15,\"uploading\":false,\"is_open\":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,\"order\":16,\"uploading\":false,\"is_open\":false}]},{\"id\":24625,\"title\":\"Proyecto final\",\"order\":6,\"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,\"order\":17,\"uploading\":false,\"is_open\":false}]}],\"exam\":{\"id\":\"\",\"title\":\"Tomar examen\",\"order\":\"\",\"url\":\"/evaluacion/f48c9145-4406-46fc-a6fa-a746d3efe14a/\"}},\"isLoggedUser\":false}]}],[\"$\",\"div\",null,{\"className\":\"page_Classes__main__g6m_Q\",\"children\":[[[\"$\",\"$L3a\",null,{}],[\"$\",\"$L3b\",null,{\"courseId\":12341,\"blockedInfo\":\"$6:props:children:props:children:1:props:children:1:props:materialInfo:blockedInfo\",\"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\":\"$3c\",\"contentSeo\":\"$3d\",\"materialParams\":\"$6:props:children:props:children:1:props:children:1:props:materialInfo:materialParams\",\"video\":\"$6:props:children:props:children:1:props:children:1:props:materialInfo:video\",\"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\":\"$3e\",\"hasAccess\":false,\"isHidden\":false,\"courseType\":\"\"}]],[\"$\",\"$L3f\",null,{\"shouldShowAiQuestion\":false,\"materialId\":\"84728\",\"courseId\":\"12341\",\"courseSlug\":\"html\",\"materialSlug\":\"configuracion-de-vscode-y-estructura-htm\",\"materialInfo\":\"$6:props:children:props:children:1:props:children:1:props:materialInfo\"}]]}],[\"$\",\"$L40\",null,{\"shouldShowAiQuestion\":false,\"materialId\":\"84728\",\"courseId\":\"12341\",\"materialInfo\":\"$6:props:children:props:children:1:props:children:1:props:materialInfo\"}],[\"$\",\"$L41\",null,{\"courseSlug\":\"html\",\"materialId\":\"84728\",\"materialSlug\":\"configuracion-de-vscode-y-estructura-htm\",\"materialInfo\":\"$6:props:children:props:children:1:props:children:1:props:materialInfo\",\"syllabusSections\":\"$6:props:children:props:children:1:props:children:2:props:children:1:props:chil"])</script><script>self.__next_f.push([1,"dren:props:syllabusSections\",\"initialCommentsData\":{\"data\":[{\"id\":5441672,\"author\":{\"id\":1284845,\"name\":\"Valentina Hernández\",\"avatar\":\"https://static.platzi.com/media/avatars/avatars/Valentina0296_dfb61fb0-51a4-404e-8306-8f8620a7f663.jpg\",\"role\":\"student\",\"username\":\"Valentina0296\"},\"content\":\"Tip: dale click en el icono de nuevo archivo, sobre la misma linea escribes el nombre de la carpeta pones / y luego el nombre del archivo con su extension te genera los 2 en un solo paso.\\n\\nIntentenlo y me comenta...!!\\n\\n\\n![](https://static.platzi.com/media/user_upload/upload-64debb7a-5b25-4e21-bb1b-5c18a0706560.jpg \\\"Tip para generar archivos y carpetas\\\")\\n\\n\\n\\nP.D. Tip de Juan Diego(Like si sabes en que curso lo dio) 💚💚\",\"is_discussion\":false,\"slug\":\"tip-dale-click-en-el-icono-de-nuevo-archivo-sobre-la-misma-linea-escribes-el-nombre-de-la-carpeta-pones-y-luego-el-nombre-del-archivo-con-su-extension-te-genera-los-2-en-un-solo-paso-intentenlo-y-me-comenta-httpsstaticplatzicommediauser_uploadupload-64deb\",\"stars_count\":16,\"responses_count\":1,\"created_at\":\"2025-10-01T00:19:31.271471Z\",\"updated_at\":\"2025-12-17T05:23:13.366771Z\",\"edited_at\":null,\"replies\":[{\"id\":5447170,\"author\":{\"id\":3476874,\"name\":\"Dario Mendoza\",\"avatar\":\"https://static.platzi.com/media/avatars/dario.mendoza_7fcbc871-415d-44b8-98b9-fdb30e951cf5.jpg\",\"role\":\"student\",\"username\":\"dario.mendoza\"},\"content\":\"\",\"is_highlighted\":false,\"stars_count\":9,\"created_at\":\"2025-10-09T21:25:49.097900Z\",\"updated_at\":\"2025-12-17T02:26:13.502282Z\",\"edited_at\":\"2025-10-09T21:26:29.828227Z\"}]},{\"id\":5448418,\"author\":{\"id\":1318989,\"name\":\"Hugo Alberto Sánchez Calderón\",\"avatar\":\"https://static.platzi.com/media/avatars/avatars/huggosanchezcalderon_42e59a32-1eb9-438b-8332-60c9c96a203e\",\"role\":\"student\",\"username\":\"huggosanchezcalderon\"},\"content\":\"Deberías dejar una lista de las extensiones que usas en COD para los que no conocemos tanto este IDE\\n\\n\\n\\nDejo las que use:\\n\\nLive Server\\n\\nMaterial Icon Theme\\n\\nEditorConfig for VS Code\\n\\n\\n\\nCon esto ya les queda el editor como el del profe\",\"is_discussion\":false,\"slug\":\"deberias-dejar-una-lista-de-las-extensiones-que-usas-en-cod-para-los-que-no-conocemos-tanto-este-ide-dejo-las-que-use-live-server-material-icon-theme-editorconfig-for-vs-code-con-esto-ya-les-queda-el-editor-como-el-del-profe\",\"stars_count\":10,\"responses_count\":1,\"created_at\":\"2025-10-11T17:48:16.629704Z\",\"updated_at\":\"2025-12-17T16:45:08.702692Z\",\"edited_at\":null,\"replies\":[{\"id\":5469389,\"author\":{\"id\":5402290,\"name\":\"Andrés Arias Varela \",\"avatar\":\"https://static.platzi.com/media/avatars/avatars/aariasv97_d68474c2-648b-4d3a-b8d8-69694cba36ac\",\"role\":\"student\",\"username\":\"aariasv97\"},\"content\":\"mil gracias estaba super perdido\",\"is_highlighted\":false,\"stars_count\":2,\"created_at\":\"2025-11-18T21:31:46.290639Z\",\"updated_at\":\"2025-12-17T16:45:06.640925Z\",\"edited_at\":null}]},{\"id\":5468372,\"author\":{\"id\":5760777,\"name\":\"Charles Drawarkewis Bernal Calderin\",\"avatar\":\"https://static.platzi.com/static/website/v2/images/avatar_default.7516253fc982.png\",\"role\":\"student\",\"username\":\"charlesbernal966\"},\"content\":\"Siento que este profesor se salta muchos pasos al explicar, estoy viendo su clase y no ha explicado que son las etiquetas, no explica que si no te apareció la opción para abrir el html en el navegador, tienes que descargar la extensión, va demasiado rápido y según él al inicio del curso dijo que no se necesitaba experiencia previa, él habla como si estuviera asumiendo que nosotros sabemos esos detalles básicos.\",\"is_discussion\":false,\"slug\":\"siento-que-este-profesor-se-salta-muchos-pasos-al-explicar-estoy-viendo-su-clase-y-no-ha-explicado-que-son-las-etiquetas-no-explica-que-si-no-te-aparecio-la-opcion-para-abrir-el-html-en-el-navegador-tienes-que-descargar-la-extension-va-demasiado-rapido-y\",\"stars_count\":4,\"responses_count\":1,\"created_at\":\"2025-11-16T00:51:51.727697Z\",\"updated_at\":\"2025-12-11T14:57:52.346977Z\",\"edited_at\":\"2025-11-16T00:53:10.712708Z\",\"r"])</script><script>self.__next_f.push([1,"eplies\":[{\"id\":5471480,\"author\":{\"id\":7030619,\"name\":\"Daniel Felipe Gomez Marin\",\"avatar\":\"https://static.platzi.com/media/avatars/dfgm1216_25cbf154-a04e-4d30-a935-6c14abc9f63d.jpg\",\"role\":\"student\",\"username\":\"dfgm1216\"},\"content\":\"Es verdad lo que dices, son pequeños detalles que se salta que son necesarios y luego uno debe buscar que hacer, igual es un autoaprendizaje.\",\"is_highlighted\":false,\"stars_count\":2,\"created_at\":\"2025-11-23T14:11:19.942612Z\",\"updated_at\":\"2025-12-22T18:42:11.542777Z\",\"edited_at\":null}]},{\"id\":5451708,\"author\":{\"id\":1344304,\"name\":\"Laura Mariela Lopez\",\"avatar\":\"https://static.platzi.com/static/website/v2/images/avatar_default.7516253fc982.png\",\"role\":\"student\",\"username\":\"mariela23\"},\"content\":\"Para establecer el idioma español en Visual Studio Code (VSCode), debes seguir estos pasos:\\n\\n1. Abre VSCode.\\n2. Ve a \\\"View\\\" (Ver) en la barra de menú.\\n3. Selecciona \\\"Command Palette\\\" (Paleta de Comandos) o usa el atajo `Ctrl+Shift+P`.\\n4. Escribe \\\"Configure Display Language\\\" (Configurar idioma de visualización) y selecciona esa opción.\\n5. En la lista que aparece, elige `es` para español.\\n6. Reinicia VSCode para aplicar los cambios.\\n\\nAsí podrás trabajar en español en tu entorno de desarrollo.\",\"is_discussion\":false,\"slug\":\"para-establecer-el-idioma-espanol-en-visual-studio-code-vscode-debes-seguir-estos-pasos-1-abre-vscode-2-ve-a-view-ver-en-la-barra-de-menu-3-selecciona-command-palette-paleta-de-comandos-o-usa-el-atajo-ctrlshiftp-4-escribe-configure-display-language-config\",\"stars_count\":4,\"responses_count\":0,\"created_at\":\"2025-10-17T00:13:08.746209Z\",\"updated_at\":\"2025-12-19T19:32:55.340348Z\",\"edited_at\":null,\"replies\":[]},{\"id\":5442605,\"author\":{\"id\":1267501,\"name\":\"Raúl Adolfo Sánchez Rodríguez\",\"avatar\":\"https://static.platzi.com/media/avatars/raulsanchez92_577c936b-adbc-40ea-98e6-5ec0a1589b16\",\"role\":\"student\",\"username\":\"raulsanchez92\"},\"content\":\"\\n\\n\\\\_\\\\_\\\\_\\n\\n\",\"is_discussion\":false,\"slug\":\"httpsstaticplatzicommediauser_uploadupload-138a6add-6d9b-4988-8a80-e96549e624dfpng-___-httpsstaticplatzicommediauser_uploadupload-48722cf9-5c62-4c45-83be-0ba44f78a3e9png\",\"stars_count\":4,\"responses_count\":1,\"created_at\":\"2025-10-02T04:56:00.814105Z\",\"updated_at\":\"2025-11-12T19:08:18.578870Z\",\"edited_at\":null,\"replies\":[{\"id\":5466962,\"author\":{\"id\":1215610,\"name\":\"Mateo Angel Vega\",\"avatar\":\"https://static.platzi.com/media/avatars/mateoangel_89acc51a-8088-4a48-95a5-6db1a5cd15e1\",\"role\":\"student\",\"username\":\"mateoangel\"},\"content\":\"de donde son las imagenes?\",\"is_highlighted\":false,\"stars_count\":1,\"created_at\":\"2025-11-12T19:08:31.335212Z\",\"updated_at\":\"2025-12-17T04:04:25.413181Z\",\"edited_at\":null}]},{\"id\":5459846,\"author\":{\"id\":1733947,\"name\":\"Daniel Yesid Cárdenas Sandoval\",\"avatar\":\"https://static.platzi.com/media/avatars/avatars/dycardenass_333d3c15-eaaa-4513-8f26-601fd86f2344.png\",\"role\":\"student\",\"username\":\"dycardenass\"},\"content\":\"El resumen de la clase esta incompleto\",\"is_discussion\":false,\"slug\":\"el-resumen-de-la-clase-esta-incompleto\",\"stars_count\":3,\"responses_count\":0,\"created_at\":\"2025-10-31T03:05:52.564417Z\",\"updated_at\":\"2025-12-02T15:29:57.124955Z\",\"edited_at\":null,\"replies\":[]},{\"id\":5444050,\"author\":{\"id\":6031588,\"name\":\"Eliecer Baron\",\"avatar\":\"https://static.platzi.com/media/avatars/eliecer2104_87345182-5948-4291-bf0d-9a303da44e8b\",\"role\":\"student\",\"username\":\"eliecer2104\"},\"content\":\"sugiero el curso de programación basica, en este curso aprendemos HTM, CSS, JS, es muy chebre\\n\\nAQUÍ EL LINK:\\n\\n[https://platzi.com/cursos/programacion-basica/que-es-platzi/](https://platzi.com/cursos/programacion-basica/que-es-platzi/)\",\"is_discussion\":false,\"slug\":\"sugiero-el-curso-de-programacion-basica-en-este-curso-aprendemos-htm-css-js-es-muy-chebre-aqui-el-link-httpsplatzicomcursosprogramacion-basicaque-es-platzihttpsplatzicomcursosprogramacion-basicaque-es-platzi\",\"stars_count"])</script><script>self.__next_f.push([1,"\":3,\"responses_count\":0,\"created_at\":\"2025-10-04T20:41:02.073384Z\",\"updated_at\":\"2025-10-21T06:52:31.841246Z\",\"edited_at\":null,\"replies\":[]},{\"id\":5472852,\"author\":{\"id\":1035757,\"name\":\"Jesús Ynuma\",\"avatar\":\"https://static.platzi.com/media/avatars/soyjesuslevano_4a9381dd-4fda-4b3b-9045-a7c1f17b55dd.jpg\",\"role\":\"student\",\"username\":\"soyjesuslevano\"},\"content\":\"Para quienes no ven el código actualizado automáticamente en el navegador, hay que instalar una extensión llamada **Live Server**.\\n\\n\\n\\n### 🛠️ Pasos para Instalar la Extensión:\\n\\n\\n\\n1. Esta extensión se instala desde el mismo Visual Studio Code, yendo a **View** (Ver).\\n2. Busca y haz clic en **Extensiones**.\\n3. Ahí, busca **Live Server**.\\n4. Deben seleccionar el que está con el propietario de **Ritwick Dey**.\\n5. Le dan clic a **Instalar** y ya está.\\n\\nAhora pueden ver el código en el navegador.\",\"is_discussion\":false,\"slug\":\"para-quienes-no-ven-el-codigo-actualizado-automaticamente-en-el-navegador-hay-que-instalar-una-extension-llamada-live-server-pasos-para-instalar-la-extension-1-esta-extension-se-instala-desde-el-mismo-visual-studio-code-yendo-a-view-ver-2-busca-y-haz-clic\",\"stars_count\":2,\"responses_count\":0,\"created_at\":\"2025-11-26T01:29:26.651480Z\",\"updated_at\":\"2025-12-22T18:36:34.625632Z\",\"edited_at\":null,\"replies\":[]},{\"id\":5471457,\"author\":{\"id\":4802599,\"name\":\"Inés Nafie\",\"avatar\":\"https://static.platzi.com/media/avatars/avatars/inafie_f809aea3-7d47-4981-aba9-26ba82e689db\",\"role\":\"student\",\"username\":\"inafie\"},\"content\":\"$42\",\"is_discussion\":false,\"slug\":\"nombres-carpetas-y-archivos-sin-espacios-ni-acentos-luego-para-mencionar-archivos-es-un-problema-html-es-lo-que-le-indica-al-archivo-que-vamos-a-usar-este-codigox20-doctype-html-es-lo-que-le-esta-indicando-al-navegador-que-lo-que-viene-abajo-es-html5x20-l\",\"stars_count\":2,\"responses_count\":0,\"created_at\":\"2025-11-23T11:28:21.519592Z\",\"updated_at\":\"2025-12-12T16:20:41.037325Z\",\"edited_at\":null,\"replies\":[]},{\"id\":5451026,\"author\":{\"id\":5990957,\"name\":\"Luis Ramirez\",\"avatar\":\"https://static.platzi.com/static/website/v2/images/avatar_default.7516253fc982.png\",\"role\":\"student\",\"username\":\"ziulboy\"},\"content\":\"Para abrir tu proyecto en Chrome en lugar de Firefox al usar \\\"Open with Live Server\\\" en VS Code, debes cambiar la configuración predeterminada del navegador. Esto se hace de la siguiente manera:\\n\\n1. Abre VS Code y ve a la configuración (File \u003e Preferences \u003e Settings).\\n2. Busca \\\"Live Server: Custom Browser\\\".\\n3. Establece el valor en `\\\"chrome\\\"`.\\n\\nEsto permitirá que Live Server use Chrome como navegador predeterminado. Si deseas abrir en otro navegador, simplemente reemplaza \\\"chrome\\\" por el nombre correspondiente del navegador (por ejemplo, \\\"edge\\\" para Microsoft Edge).\",\"is_discussion\":false,\"slug\":\"para-abrir-tu-proyecto-en-chrome-en-lugar-de-firefox-al-usar-open-with-live-server-en-vs-code-debes-cambiar-la-configuracion-predeterminada-del-navegador-esto-se-hace-de-la-siguiente-manera-1-abre-vs-code-y-ve-a-la-configuracion-file-gt-preferences-gt-set\",\"stars_count\":2,\"responses_count\":0,\"created_at\":\"2025-10-15T21:44:21.947701Z\",\"updated_at\":\"2025-10-25T14:33:05.141379Z\",\"edited_at\":null,\"replies\":[]},{\"id\":5441693,\"author\":{\"id\":1284845,\"name\":\"Valentina Hernández\",\"avatar\":\"https://static.platzi.com/media/avatars/avatars/Valentina0296_dfb61fb0-51a4-404e-8306-8f8620a7f663.jpg\",\"role\":\"student\",\"username\":\"Valentina0296\"},\"content\":\"\u003e **\\\\\u003chtml\u003e\\\\\u003c/html\u003e** : contenedor padre o principal\\n\u003e **lang = \\\"es\\\":** es un atributo especial que indica el lenguaje.\\n\u003e **\\\\\u003chead\u003e\\\\\u003c/head\u003e** : todo lo que es importante, para poder cargar el proyecto, como dependencias, librerial, css etc.\\n\u003e **\\\\\u003cbody\u003e\\\\\u003c/body\u003e** :Texto, videos, imagenes o cosas interactivas, head y body son contenedores hermanos.\\n\u003e **meta charset=**\\\"UTF-8\\\" : ayuda a que el navegador entienda caracteres especiales.\\n\u003e **meta name**=\\\"viewport\\\" content : te la la descripción de la página en el navegador a la hora de buscarla.\\n\u003e **meta name**=\\\"robots\\\" : sirve para autorizarle a los robots a"])</script><script>self.__next_f.push([1," acomodar la pagina para el tipo de busquedas, es decir posicionar la pagina dependiendo la busqueda.\\n\\n\\n\\n**Etiqueta contenido:** llevaran texto, imagenes, videos que se puedan randerizar.\\n\\n**Etiqueta contenedor**a: llevaran etiquetas dentro.\",\"is_discussion\":false,\"slug\":\"gt-lthtmlgtlthtmlgt-contenedor-padre-o-principal-gt-lang-es-es-un-atributo-especial-que-indica-el-lenguaje-gt-ltheadgtltheadgt-todo-lo-que-es-importante-para-poder-cargar-el-proyecto-como-dependencias-librerial-css-etc-gt-ltbodygtltbodygt-texto-videos-i-2\",\"stars_count\":2,\"responses_count\":0,\"created_at\":\"2025-10-01T00:45:57.059832Z\",\"updated_at\":\"2025-10-13T07:52:48.910673Z\",\"edited_at\":null,\"replies\":[]},{\"id\":5488620,\"author\":{\"id\":1464105,\"name\":\"Johan Andrey Fonseca Flechas\",\"avatar\":\"https://static.platzi.com/media/avatars/avatars/johanandrei345_04a7bd3a-2cb0-4b3a-a1a2-c626885d7540\",\"role\":\"student\",\"username\":\"johanandrei345\"},\"content\":\"**\\\\\u003chtml lang=\\\"en\\\"\u003e:** Es la etiqueta que contiene el documento HTML y tiene una etiqueta que especifica el lenguaje en el que se escribió el contenido.\\n\\n**\\\\\u003chead\u003e:** Contiene los metadatos, es decir, información sobre el documento (no visible para los usuarios) que le indica al navegador cómo debe mostrarse el sitio.\\n\\n* \\\\\u0026lt;meta charset=\\\"UTF-8\\\"\u003e: Indica al navegador la codificación de caracteres a utilizar, permitiéndonos usar tildes, ñ, símbolos y emojis. Si no lo usamos, los acentos y caracteres especiales no cargarían o se imprimirían caracteres extraños.\\n* \\\\\u0026lt;meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\": Controla cómo se ve la página en dipositivos móviles.\\n* \\\\\u0026lt;title\u003e: Es el título de la página que aparece en la pestaña del navegador.\\n\\n**\\\\\u003cbody\u003e:** Es la parte visible de la página web y con la que el usuario interactúa. Todo el contenido en body se renderiza en el navegador.\\n\\n* h1: Título principal\\n* p: Párrafo\",\"is_discussion\":false,\"slug\":\"lthtml-langengt-es-la-etiqueta-que-contiene-el-documento-html-y-tiene-una-etiqueta-que-especifica-el-lenguaje-en-el-que-se-escribio-el-contenido-ltheadgt-contiene-los-metadatos-es-decir-informacion-sobre-el-documento-no-visible-para-los-usuarios-que-le-in\",\"stars_count\":1,\"responses_count\":0,\"created_at\":\"2025-12-17T23:23:52.519232Z\",\"updated_at\":\"2025-12-17T23:24:17.919567Z\",\"edited_at\":\"2025-12-17T23:24:17.918016Z\",\"replies\":[]},{\"id\":5481469,\"author\":{\"id\":929195,\"name\":\"jesus david cabas bravo\",\"avatar\":\"https://static.platzi.com/static/website/v2/images/avatar_default.7516253fc982.png\",\"role\":\"student\",\"username\":\"cabasbravojesusdavid\"},\"content\":\"falto decir la extencion live server para poder usar open live server y faltaria unas extenciones\u0026#x20;\",\"is_discussion\":false,\"slug\":\"falto-decir-la-extencion-live-server-para-poder-usar-open-live-server-y-faltaria-unas-extencionesx20\",\"stars_count\":1,\"responses_count\":0,\"created_at\":\"2025-12-10T20:50:42.277354Z\",\"updated_at\":\"2025-12-10T20:50:44.358047Z\",\"edited_at\":null,\"replies\":[]},{\"id\":5471864,\"author\":{\"id\":6064742,\"name\":\"Mayra Alejandra Mora Márquez\",\"avatar\":\"https://static.platzi.com/media/avatars/mayramoramrd_6e28787a-b428-4c2c-b048-eff37381bb2a.jpg\",\"role\":\"student\",\"username\":\"mayramoramrd\"},\"content\":\"Ya hice lo de live server , pero aún no me sale \",\"is_discussion\":false,\"slug\":\"httpsstaticplatzicommediauser_uploadupload-0d98eb5a-3fe5-45fa-83b9-7d97695ebf04pngya-hice-lo-de-live-server-pero-aun-no-me-sale-httpsstaticplatzicommediauser_uploadupload-94d0aeab-16da-47cb-9dae-cc153b5a196bpng\",\"stars_count\":1,\"responses_count\":2,\"created_at\":\"2025-11-24T12:01:35.862811Z\",\"updated_at\":\"2025-11-24T12:01:37.940887Z\",\"edited_at\":null,\"replies\":[{\"id\":5473586,\"author\":{\"id\":7221952,\"name\":\"JORGE LUIS HERNANDEZ RUIZ\",\"avatar\":\"https://static.platzi.com/media/avatars/avatars/al2223041907_36c588fa-db60-4129-8ac8-53dabb759c75\",\"role\":\"student\",\"usern"])</script><script>self.__next_f.push([1,"ame\":\"al2223041907\"},\"content\":\"Hola compañera, buena noche, las extensiones que hablan otros compañeros se instalan dentro del VS Code, no en el navegador como tal, tienes que ir en la barra de la izquierda donde está la sección de files, buscar, etc, y ahi sale un cuadrado con cuatro cuadrados, (te adjunto una foto de la barra que te menciono) una vez que le des a la penúltima opción que sale en mi captura, te sale la barra de extensiones, ahí es donde buscas las extensiones que otros compañeros mencionan, las mas importantes usadas en el video:\u0026#x20;\\n\\nLive Server\\n\\nMaterial Icon Theme\\n\\nSaludos\\n\\n\\n\\n\u0026#x20;\",\"is_highlighted\":false,\"stars_count\":3,\"created_at\":\"2025-11-27T03:48:31.408753Z\",\"updated_at\":\"2025-12-12T14:45:59.127043Z\",\"edited_at\":null},{\"id\":5473717,\"author\":{\"id\":6064742,\"name\":\"Mayra Alejandra Mora Márquez\",\"avatar\":\"https://static.platzi.com/media/avatars/mayramoramrd_6e28787a-b428-4c2c-b048-eff37381bb2a.jpg\",\"role\":\"student\",\"username\":\"mayramoramrd\"},\"content\":\"Muchas gracias Jorge Luis.\",\"is_highlighted\":false,\"stars_count\":2,\"created_at\":\"2025-11-27T12:47:28.701784Z\",\"updated_at\":\"2025-11-28T23:49:20.446902Z\",\"edited_at\":null}]},{\"id\":5469399,\"author\":{\"id\":5017780,\"name\":\"Catalina Martinez\",\"avatar\":\"https://static.platzi.com/static/website/v2/images/avatar_default.7516253fc982.png\",\"role\":\"student\",\"username\":\"catamartinezmartinez\"},\"content\":\"Muero, no me sale nada y seguí los pasos tal cual. Le doy ! y Tab y no sale el codigo\",\"is_discussion\":false,\"slug\":\"muero-no-me-sale-nada-y-segui-los-pasos-tal-cual-le-doy-y-tab-y-no-sale-el-codigo\",\"stars_count\":1,\"responses_count\":1,\"created_at\":\"2025-11-18T21:39:26.041336Z\",\"updated_at\":\"2025-11-18T21:39:28.153871Z\",\"edited_at\":null,\"replies\":[{\"id\":5472846,\"author\":{\"id\":6015944,\"name\":\"Jerson erick Rosas morillo\",\"avatar\":\"https://static.platzi.com/media/avatars/avatars/rosasmorillojersonerick_a1b0c217-3cc5-4da1-92cc-bc6a246a4e5d\",\"role\":\"student\",\"username\":\"rosasmorillojersonerick\"},\"content\":\"hola debes renombrar tu carpeta puesto que tiene que terminar en index.html\",\"is_highlighted\":false,\"stars_count\":0,\"created_at\":\"2025-11-26T01:13:44.498942Z\",\"updated_at\":\"2025-11-29T03:05:00.407290Z\",\"edited_at\":null}]},{\"id\":5471860,\"author\":{\"id\":6064742,\"name\":\"Mayra Alejandra Mora Márquez\",\"avatar\":\"https://static.platzi.com/media/avatars/mayramoramrd_6e28787a-b428-4c2c-b048-eff37381bb2a.jpg\",\"role\":\"student\",\"username\":\"mayramoramrd\"},\"content\":\"¡Genial, Mayra Alejandra! Recuerda que puedes ver la explicación detallada de cada etiqueta en la clase para entender mejor cómo construir tus archivos HTML. ¡Tú puedes!\",\"is_discussion\":false,\"slug\":\"genial-mayra-alejandra-recuerda-que-puedes-ver-la-explicacion-detallada-de-cada-etiqueta-en-la-clase-para-entender-mejor-como-construir-tus-archivos-html-tu-puedes\",\"stars_count\":1,\"responses_count\":0,\"created_at\":\"2025-11-24T11:53:14.720704Z\",\"updated_at\":\"2025-11-24T11:53:16.817464Z\",\"edited_at\":null,\"replies\":[]}],\"metadata\":{\"count\":16,\"offset\":0,\"limit\":20}},\"isLoggedUser\":false}]]}],[\"$\",\"$L43\",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\":\"$44\"}}]]}]}]\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:'9b413467eab6cf5e',t:'MTc2Njc1ODY3OS4wMDAwMDA='};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>
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