diff --git a/files/es/learn/html/howto/author_fast-loading_html_pages/index.html b/files/es/learn/html/howto/author_fast-loading_html_pages/index.html
deleted file mode 100644
index f75a4d04b67283..00000000000000
--- a/files/es/learn/html/howto/author_fast-loading_html_pages/index.html
+++ /dev/null
@@ -1,54 +0,0 @@
----
-title: Consejos para la creación de páginas HTML de carga rápida
-slug: Learn/HTML/Howto/Author_fast-loading_HTML_pages
-tags:
-  - Consejos
-  - HTML
-  - Rapido
-  - Tips
-translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages
-original_slug: Web/HTML/Consejos_para_la_creación_de_páginas_HTML_de_carga_rápida
----
-<h2 id="Consejos_para_la_creación_de_páginas_HTML_de_carga_rápida">Consejos para la creación de páginas HTML de carga rápida</h2>
-
-<p>Estos consejos estan basados en conocimiento común y experimentación.</p>
-
-<p>Una página web optimizada no solo provee una mayor respuesta a su sitio por parte de los visitantes, sino que también reduce la carga en su servidores web y en su conexión de internet. Esto puede ser crucial para sitios con alto volumen o sitios que tienen un pico de trafico debido a circunstancias inucuales como noticias de ultima hora.</p>
-
-<p>Optimizar la carga de páginas no es solo para el contenido que será visto atraves de una estrecha conexión telefónica o dispositivos móviles. <span id="result_box" lang="es"><span class="hps">Es</span> <span class="hps">tan importante</span> <span class="hps">para el contenido</span> <span class="hps">de banda ancha</span> <span class="hps">y puede conducir a</span> <span class="hps">mejoras espectaculares</span> <span class="hps">incluso</span> <span class="hps">para sus</span> <span class="hps">visitantes con</span> <span class="hps">las conexiones más rápidas</span><span>.</span></span></p>
-
-<h3 id="Consejos">Consejos</h3>
-
-<h4 id="Reducir_el_peso_de_las_páginas_web">Reducir el peso de las páginas web</h4>
-
-<p>El peso de las páginas web es por mucho el factor más importante en el rendimiento de carga de una página.</p>
-
-<p>Reducir el peso de la página mediante la eliminación de espacios en blanco innecesarios y comentarios, comunmente se coonoce como minimalización, y al mover "inline-script" y "CSS" a un archivo externo, puede mejorar el rendimiento de la descarga con minimas necesidades de otros cambios en la estructura de la página.</p>
-
-<p>Herramientas como <a class="external external-icon" href="http://tidy.sourceforge.net/">HTML Tidy</a> pueden <span id="result_box" lang="es"><span class="hps">quitar</span> <span class="hps">automáticamente</span> <span class="hps">espacios en blanco</span> <span class="hps">y las líneas</span> <span class="hps">en blanco adicionales</span> <span class="hps">de</span> <span class="hps">código fuente HTML valido</span><span class="hps">. Otras herramientas pueden "comprimir"</span></span> JavaScript al reformatear el codigo fuente o <span id="result_box" lang="es"><span class="hps">por</span> <span class="alt-edited hps">ofuscación</span> <span class="hps">la fuente</span> <span class="hps">y la sustitución de</span> <span class="hps">los identificadores largos con versiones mas cortas.</span></span></p>
-
-<h3 id="Minimizar_el_número_de_archivos">Minimizar el número de archivos</h3>
-
-<p>Reducir el número de archivos referentes en una pagina web baja el número de conexiones <a href="https://developer.mozilla.org/en-US/docs/HTTP" title="en-US/docs/HTTP">HTTP</a> requeridas para bajar la página.</p>
-
-<p>Dependiendo de la configuración de cache de un navegador, puede enviar una petición <span id="result_box" lang="es"><span class="hps">"If</span><span>-Modified-Since"</span></span> al servidor web para cada "CSS", JavaScript o archivo de imágen, preguntando si el archivo ha sido modificado desde la ultima vez que fué descargado.</p>
-
-<p>Al reducir el número de archivos que son refereciados dentro de una página web, <span id="result_box" lang="es"><span class="hps">se reduce el</span> <span class="hps">tiempo necesario para que</span> <span class="hps">estas solicitudes</span> <span class="hps">se envíen</span><span>,</span> <span class="hps">y</span> <span class="hps">para que  sus</span> <span class="hps">respuestas</span> <span class="hps">que se reciban</span><span>.</span></span></p>
-
-<p>Si se usan muchas imágenes de fondo en sus "CSS", puedes reducir la cantidad de busquedas HTTP necesarias al combinar las imagenes en una, conocido como "image sprite". Luego solamente <span id="result_box" lang="es"><span class="hps">se aplica la</span> <span class="hps">misma imagen</span> <span class="hps">cada</span> <span class="hps">vez que lo necesite</span> <span class="hps">para un fondo,</span> <span class="hps">ajustando las coordenadas el eje (X / Y</span></span>) adecuadamente. Estas técnica trabaja mejor con elementos que tendrán dimensiones limitadas, no funcionará para todos los usos de imagenes de fondo, sin embargo, la menor cantidad de pedidos HTTP y el uso de una única imágen en caché puede reducir el timepo de carga de una página.</p>
-
-<p>Demasiado tiempo gastado en consultar la ultima modificación de los archivos referenciados puede demorar la pantalla inicial de una página web, <span id="result_box" lang="es"><span class="hps">ya que el</span> <span class="hps">explorador debe</span> <span class="hps">comprobar</span> <span class="hps">la fecha de modificación</span> <span class="hps">de cada</span> <span class="hps">archivo</span> <span class="hps">CSS o</span> <span class="hps">JavaScript</span><span>, antes de pintar la página.</span></span></p>
-
-<h3 id="Reducir_la_busqueda_de_dominios">Reducir la busqueda de dominios</h3>
-
-<p>Debido a que cada dominio separado cuesta tiempo en una busqeuda DNS, el tiempo de carga de la página crecerá junto con el número de dominios <span id="result_box" lang="es"><span class="hps">que aparecen en</span> <span class="hps">enlace</span> <span class="hps">CSS</span> <span class="atn hps">(</span><span>s</span><span>)</span>, <span class="hps"> JavaScript</span> <span class="hps">y</span> <span class="hps">recursos de</span> <span class="hps">imagen.</span></span></p>
-
-<p>Esto no puede ser siempre práctico; sin embargo <span id="result_box" lang="es"><span class="hps">siempre se debe</span> <span class="hps">tener cuidado de usar</span> <span class="hps">sólo el número</span> <span class="hps">mínimo necesario</span> <span class="hps">de los diferentes dominios</span> <span class="hps">en</span> <span class="hps">sus páginas</span></span>.</p>
-
-<h3 id="Reutilización_de_contenido_de_cache">Reutilización de contenido de cache</h3>
-
-<p><span id="result_box" lang="es"><span class="hps">Asegúrese de que cualquier</span> <span class="hps">contenido que se pueden</span> <span class="hps">almacenar en caché</span><span>,</span> <span class="hps">se almacena en caché</span><span>,</span> <span class="hps">y</span> <span class="hps">con</span> <span class="hps">fechas de caducidad</span> <span class="hps">correspondientes.</span></span></p>
-
-<p><span id="result_box" lang="es"><span class="hps">En particular</span><span>,</span> <span class="hps">prestar atención a la</span> <span class="hps">cabecera</span></span> "<code>Last-Modified</code>". Permite el eficiente almacenamiento en cache de la página; <span id="result_box" lang="es"><span class="hps">por medio de</span> <span class="hps">esta cabecera</span><span>, la información</span> <span class="hps">se transmite al</span> <span class="hps">agente de usuario</span> <span class="hps">sobre el archivo</span> <span class="hps">que quiere</span> <span class="hps">cargar</span><span>,</span> <span class="hps">por ejemplo, </span></span><span id="result_box" lang="es"><span class="hps">como cuando</span> <span class="hps">fue</span> <span class="hps">modificada por última vez</span><span>.</span> <span class="hps">La mayoría de los</span> <span class="hps">servidores web</span> <span class="hps">añadirá automáticamente</span> <span class="hps">la</span> <span class="hps">cabecera Last-Modified</span> <span class="hps">para</span> <span class="hps">páginas estáticas</span> <span class="hps">(por ejemplo</span> <span class="hps">.html</span><span>,</span> <span class="hps">.css</span><span>)</span><span>,</span></span> <span id="result_box" lang="es"><span class="hps">basado en</span> <span class="hps">la</span> <span class="hps">fecha de última modificación</span> <span class="hps">almacenada en</span> <span class="hps">el sistema de archivos</span><span>.</span> <span class="hps">Con</span> <span class="hps">páginas dinámicas</span> <span class="hps">(por ejemplo,</span> <span class="hps">.php</span><span>,</span> <span class="hps">.aspx</span><span>)</span><span>,</span> <span class="hps">esto, por supuesto</span><span>,</span> <span class="hps">no se puede hacer</span><span>, y</span> <span class="hps">la cabecera</span> <span class="hps">no se envía</span><span>.</span></span></p>
-
-<p><span id="result_box" lang="es"><span class="hps">Así</span><span>,</span> <span class="hps">en particular</span> <span class="hps">para las páginas</span> <span class="hps">que se generan</span> <span class="hps">de forma dinámica</span><span>,</span> <span class="hps">un poco de investigación</span> <span class="hps">sobre este tema es</span> <span class="hps">beneficioso.</span> <span class="hps">Puede ser</span> <span class="hps">un poco</span> <span class="hps">complicada, pero</span> <span class="hps">se ahorrará mucho</span> <span class="hps">en</span> <span class="hps">las solicitudes de página</span> <span class="hps">en las páginas</span> <span class="hps">que</span> <span class="hps">normalmente no serían</span> <span class="hps">cacheable</span><span>.</span></span></p>
diff --git a/files/es/learn/html/howto/author_fast-loading_html_pages/index.md b/files/es/learn/html/howto/author_fast-loading_html_pages/index.md
new file mode 100644
index 00000000000000..a43233eb0ad991
--- /dev/null
+++ b/files/es/learn/html/howto/author_fast-loading_html_pages/index.md
@@ -0,0 +1,54 @@
+---
+title: Consejos para la creación de páginas HTML de carga rápida
+slug: Learn/HTML/Howto/Author_fast-loading_HTML_pages
+tags:
+  - Consejos
+  - HTML
+  - Rapido
+  - Tips
+translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages
+original_slug: Web/HTML/Consejos_para_la_creación_de_páginas_HTML_de_carga_rápida
+---
+## Consejos para la creación de páginas HTML de carga rápida
+
+Estos consejos estan basados en conocimiento común y experimentación.
+
+Una página web optimizada no solo provee una mayor respuesta a su sitio por parte de los visitantes, sino que también reduce la carga en su servidores web y en su conexión de internet. Esto puede ser crucial para sitios con alto volumen o sitios que tienen un pico de trafico debido a circunstancias inucuales como noticias de ultima hora.
+
+Optimizar la carga de páginas no es solo para el contenido que será visto atraves de una estrecha conexión telefónica o dispositivos móviles. Es tan importante para el contenido de banda ancha y puede conducir a mejoras espectaculares incluso para sus visitantes con las conexiones más rápidas.
+
+### Consejos
+
+#### Reducir el peso de las páginas web
+
+El peso de las páginas web es por mucho el factor más importante en el rendimiento de carga de una página.
+
+Reducir el peso de la página mediante la eliminación de espacios en blanco innecesarios y comentarios, comunmente se coonoce como minimalización, y al mover "inline-script" y "CSS" a un archivo externo, puede mejorar el rendimiento de la descarga con minimas necesidades de otros cambios en la estructura de la página.
+
+Herramientas como [HTML Tidy](http://tidy.sourceforge.net/) pueden quitar automáticamente espacios en blanco y las líneas en blanco adicionales de código fuente HTML valido. Otras herramientas pueden "comprimir" JavaScript al reformatear el codigo fuente o por ofuscación la fuente y la sustitución de los identificadores largos con versiones mas cortas.
+
+### Minimizar el número de archivos
+
+Reducir el número de archivos referentes en una pagina web baja el número de conexiones [HTTP](/es/docs/HTTP) requeridas para bajar la página.
+
+Dependiendo de la configuración de cache de un navegador, puede enviar una petición "If-Modified-Since" al servidor web para cada "CSS", JavaScript o archivo de imágen, preguntando si el archivo ha sido modificado desde la ultima vez que fué descargado.
+
+Al reducir el número de archivos que son refereciados dentro de una página web, se reduce el tiempo necesario para que estas solicitudes se envíen, y para que sus respuestas que se reciban.
+
+Si se usan muchas imágenes de fondo en sus "CSS", puedes reducir la cantidad de busquedas HTTP necesarias al combinar las imagenes en una, conocido como "image sprite". Luego solamente se aplica la misma imagen cada vez que lo necesite para un fondo, ajustando las coordenadas el eje (X / Y) adecuadamente. Estas técnica trabaja mejor con elementos que tendrán dimensiones limitadas, no funcionará para todos los usos de imagenes de fondo, sin embargo, la menor cantidad de pedidos HTTP y el uso de una única imágen en caché puede reducir el timepo de carga de una página.
+
+Demasiado tiempo gastado en consultar la ultima modificación de los archivos referenciados puede demorar la pantalla inicial de una página web, ya que el explorador debe comprobar la fecha de modificación de cada archivo CSS o JavaScript, antes de pintar la página.
+
+### Reducir la busqueda de dominios
+
+Debido a que cada dominio separado cuesta tiempo en una busqeuda DNS, el tiempo de carga de la página crecerá junto con el número de dominios que aparecen en enlace CSS (s), JavaScript y recursos de imagen.
+
+Esto no puede ser siempre práctico; sin embargo siempre se debe tener cuidado de usar sólo el número mínimo necesario de los diferentes dominios en sus páginas.
+
+### Reutilización de contenido de cache
+
+Asegúrese de que cualquier contenido que se pueden almacenar en caché, se almacena en caché, y con fechas de caducidad correspondientes.
+
+En particular, prestar atención a la cabecera "`Last-Modified`". Permite el eficiente almacenamiento en cache de la página; por medio de esta cabecera, la información se transmite al agente de usuario sobre el archivo que quiere cargar, por ejemplo, como cuando fue modificada por última vez. La mayoría de los servidores web añadirá automáticamente la cabecera Last-Modified para páginas estáticas (por ejemplo .html, .css), basado en la fecha de última modificación almacenada en el sistema de archivos. Con páginas dinámicas (por ejemplo, .php, .aspx), esto, por supuesto, no se puede hacer, y la cabecera no se envía.
+
+Así, en particular para las páginas que se generan de forma dinámica, un poco de investigación sobre este tema es beneficioso. Puede ser un poco complicada, pero se ahorrará mucho en las solicitudes de página en las páginas que normalmente no serían cacheable.
diff --git a/files/es/learn/html/howto/index.html b/files/es/learn/html/howto/index.html
deleted file mode 100644
index 00519310cdb38c..00000000000000
--- a/files/es/learn/html/howto/index.html
+++ /dev/null
@@ -1,142 +0,0 @@
----
-title: Solución de problemas comunes de HTML
-slug: Learn/HTML/Howto
-tags:
-  - CodificacióndeSecuenciadeComandos
-  - HTML
-translation_of: Learn/HTML/Howto
-original_slug: Learn/HTML/como
----
-<p>{{LearnSidebar}}</p>
-
-<p class="summary">Los siguientes enlaces brindan soluciones puntuales a los problemas más comunes a los que te enfrentarás a diario en HTML.</p>
-
-<div class="column-container">
-<div class="column-half">
-<h3 id="Estructura_básica">Estructura básica</h3>
-
-<p>La principal aplicación de HTML es la estructuración del documento. Si eres nuevo en HTML debes empezar aquí.</p>
-
-<ul>
- <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document">Cómo crear un documento HTML básico</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Howto/Divide_a_webpage_into_logical_sections">Cómo dividir una página web en secciones lógicas</a></li>
- <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#The_basics_headings_and_paragraphs">Cómo establecer una estructura adecuada de encabezados y párrafos</a></li>
-</ul>
-
-<h3 id="Semántica_básica_textos">Semántica básica textos</h3>
-
-<p>HTML se especializa en suministrar información semántica del documento, así que HTML soluciona muchas dudas que puede tener sobre como transmitir su mensaje a través de un documento.</p>
-
-<ul>
- <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">Cómo crear una lista de elementos con HTML</a></li>
- <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">Cómo enfatizar o acentuar contenido</a></li>
- <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">Cómo indicar qué texto es importante</a></li>
- <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Representing_computer_code">Cómo muestra el ordenador el codigo HTML</a></li>
- <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#Annotating_images_with_figures_and_figure_captions">Cómo comentar imagenes y gráficas</a></li>
- <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations">Cómo marcar abreviaturas y hacerlas entendibles</a></li>
- <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Quotations">Cómo añadir citas y referencias a sitios web</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Howto/Define_terms_with_HTML">Cómo definir términos con HTML</a></li>
-</ul>
-</div>
-
-<div class="column-half">
-<h3 id="Hipervínculos">Hipervínculos</h3>
-
-<p>Uno de las principales razones por las que HTML hace más fácil la navegación son los {{Glossary("hyperlink", "hipervínculos")}}, que pueden ser usados de diferentes formas:</p>
-
-<ul>
- <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Active_learning_creating_a_navigation_menu">Cómo crear un hipervínculo</a></li>
- <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Active_learning_creating_a_navigation_menu">Cómo crear una tabla de contenidos con HTML</a></li>
-</ul>
-
-<h3 id="Imágenes_y_multimedia">Imágenes y multimedia</h3>
-
-<ul>
- <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Active_learning_creating_a_navigation_menu">Cómo</a><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#How_do_we_put_an_image_on_a_webpage"> añadir imagenes al sitio web</a></li>
- <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Active_learning_creating_a_navigation_menu">Cómo</a><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content"> añadir contenidos de video al sitio web</a></li>
-</ul>
-
-<h3 id="Scripts_y_estilización">Scripts y estilización</h3>
-
-<p>HTML únicamente define la estructura del documento. Para solucionar los problemas de presentación usamos {{glossary("CSS")}}, o usamos scripts para hacer la página interactiva.</p>
-
-<ul>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML">Cómo usar CSS dentro de un sitio web</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Howto/Use_JavaScript_within_a_webpage">Cómo usar JavaScript dentro de un sitio web</a></li>
-</ul>
-
-<h3 id="Contenido_integrado">Contenido integrado</h3>
-
-<ul>
- <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">Cómo integrar una página web dentro de otra</a></li>
- <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#The_%3Cembed%3E_and_%3Cobject%3E_elements">Cómo integrar contenido Flash </a><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">dentro de </a><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#The_%3Cembed%3E_and_%3Cobject%3E_elements">una página web</a></li>
-</ul>
-</div>
-</div>
-
-<h2 id="Problemas_avanzados_o_raros">Problemas avanzados o raros</h2>
-
-<p>Más allá de lo basico, HTML es muy rico y ofrece características avanzadas para solucionar problemas complejos. Estos artículos te ayudarán a abordar estos casos menos comunes:</p>
-
-<div class="column-container">
-<div class="column-half">
-<h3 id="Formularios">Formularios</h3>
-
-<p>Los formularios son una estructura compleja en HTML para enviar datos desde una pagina web al servidor. Te animamos a que revises la <a href="/en-US/docs/Web/Guide/HTML/Forms">guia completa</a>. Aquí es por donde deberías empezar:</p>
-
-<ul>
- <li><a href="/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form">Cómo crear un formulario Web simple</a></li>
- <li><a href="/en-US/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form">Cómo estructurar un formulario Web</a></li>
-</ul>
-
-<h3 id="Información_tabular">Información tabular</h3>
-
-<p>Alguna información, llamada datos tabulares, necesita ser organizada en tablas mediante filas y columnas. Siendo ésta una de las estructuras más complejas de HTML, no es fácil dominarla:</p>
-
-<ul>
- <li><a href="/en-US/docs/Learn/HTML/Howto/Create_a_data_spreadsheet">Cómo crear una tabla de datos</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Howto/Make_HTML_tables_accessible">Cómo hacer tablas HTML accesibles</a></li>
-</ul>
-
-<h3 id="Representación_de_datos">Representación de datos</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/HTMLHowto/Represent_numeric_values_with_HTML">Cómo representar valores numericos y de código con HTML -</a> <span class="tlid-translation translation" lang="es"><span title="">ver </span></span> <span class="tlid-translation translation" lang="es"><span title="">Superíndice y Subíndice, y Representación del código de la computadora.</span></span></li>
- <li><a href="/en-US/docs/Learn/HTML/Howto/Associate_human_readable_content_with_arbitrary_computer_data_structures">Cómo usar atributos de datos</a></li>
-</ul>
-
-<h3 id="Rendimiento">Rendimiento</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/HTML/Howto/Create_collapsible_content_with_HTML">Cómo crear páginas HTML de carga rápida</a></li>
-</ul>
-</div>
-
-<div class="column-half">
-<h3 id="Semántica_avanzada_de_texto">Semántica avanzada de texto</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/HTML/Howto/Take_control_of_HTML_line_breaking">Cómo controlar el salto de línea en HTML</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Howto/Mark_text_insertion_and_deletion">Cómo marcar cambios (agregar y remover textos)</a> -ver los elementos {{htmlelement("ins")}} y {{htmlelement("del")}}</li>
-</ul>
-
-<h3 id="Imágenes_y_multimedia_avanzada">Imágenes y multimedia avanzada</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Cómo agregar una imagen receptiva a una página web</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Cómo agregar una imagen vectorial a una página web</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">Cómo agregar un mapa de visitas sobre una imagen</a></li>
-</ul>
-
-<h3 id="Internacionalización">Internacionalización</h3>
-
-<p>HTML no es monolingüe. Éste <span class="tlid-translation translation" lang="es"><span title="">proporciona herramientas para manejar problemas comunes de internacionalización.</span></span></p>
-
-<ul>
- <li><a href="/en-US/docs/Learn/HTML/Howto/Add_multiple_languages_into_a_single_webpage">Cómo agregar multiples lenguajes en una misma página web</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Howto/Display_time_and_date_with_HTML">Cómo mostrar hora y fecha con HTML </a></li>
-</ul>
-</div>
-</div>
-
-<p><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span> </p>
diff --git a/files/es/learn/html/howto/index.md b/files/es/learn/html/howto/index.md
new file mode 100644
index 00000000000000..f29c76dc0cbe82
--- /dev/null
+++ b/files/es/learn/html/howto/index.md
@@ -0,0 +1,102 @@
+---
+title: Solución de problemas comunes de HTML
+slug: Learn/HTML/Howto
+tags:
+  - CodificacióndeSecuenciadeComandos
+  - HTML
+translation_of: Learn/HTML/Howto
+original_slug: Learn/HTML/como
+---
+{{LearnSidebar}}
+
+Los siguientes enlaces brindan soluciones puntuales a los problemas más comunes a los que te enfrentarás a diario en HTML.
+
+### Estructura básica
+
+La principal aplicación de HTML es la estructuración del documento. Si eres nuevo en HTML debes empezar aquí.
+
+- [Cómo crear un documento HTML básico](/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document)
+- [Cómo dividir una página web en secciones lógicas](/es/docs/Learn/HTML/Howto/Divide_a_webpage_into_logical_sections)
+- [Cómo establecer una estructura adecuada de encabezados y párrafos](/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#The_basics_headings_and_paragraphs)
+
+### Semántica básica textos
+
+HTML se especializa en suministrar información semántica del documento, así que HTML soluciona muchas dudas que puede tener sobre como transmitir su mensaje a través de un documento.
+
+- [Cómo crear una lista de elementos con HTML](/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists)
+- [Cómo enfatizar o acentuar contenido](/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance)
+- [Cómo indicar qué texto es importante](/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance)
+- [Cómo muestra el ordenador el codigo HTML](/es/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Representing_computer_code)
+- [Cómo comentar imagenes y gráficas](/es/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#Annotating_images_with_figures_and_figure_captions)
+- [Cómo marcar abreviaturas y hacerlas entendibles](/es/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations)
+- [Cómo añadir citas y referencias a sitios web](/es/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Quotations)
+- [Cómo definir términos con HTML](/es/docs/Learn/HTML/Howto/Define_terms_with_HTML)
+
+### Hipervínculos
+
+Uno de las principales razones por las que HTML hace más fácil la navegación son los {{Glossary("hyperlink", "hipervínculos")}}, que pueden ser usados de diferentes formas:
+
+- [Cómo crear un hipervínculo](/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Active_learning_creating_a_navigation_menu)
+- [Cómo crear una tabla de contenidos con HTML](/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Active_learning_creating_a_navigation_menu)
+
+### Imágenes y multimedia
+
+- [Cómo](/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Active_learning_creating_a_navigation_menu)[ añadir imagenes al sitio web](/es/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#How_do_we_put_an_image_on_a_webpage)
+- [Cómo](/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Active_learning_creating_a_navigation_menu)[ añadir contenidos de video al sitio web](/es/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content)
+
+### Scripts y estilización
+
+HTML únicamente define la estructura del documento. Para solucionar los problemas de presentación usamos {{glossary("CSS")}}, o usamos scripts para hacer la página interactiva.
+
+- [Cómo usar CSS dentro de un sitio web](/es/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML)
+- [Cómo usar JavaScript dentro de un sitio web](/es/docs/Learn/HTML/Howto/Use_JavaScript_within_a_webpage)
+
+### Contenido integrado
+
+- [Cómo integrar una página web dentro de otra](/es/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies)
+- [Cómo integrar contenido Flash ](/es/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#The_%3Cembed%3E_and_%3Cobject%3E_elements)[dentro de ](/es/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies)[una página web](/es/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#The_%3Cembed%3E_and_%3Cobject%3E_elements)
+
+## Problemas avanzados o raros
+
+Más allá de lo basico, HTML es muy rico y ofrece características avanzadas para solucionar problemas complejos. Estos artículos te ayudarán a abordar estos casos menos comunes:
+
+### Formularios
+
+Los formularios son una estructura compleja en HTML para enviar datos desde una pagina web al servidor. Te animamos a que revises la [guia completa](/es/docs/Web/Guide/HTML/Forms). Aquí es por donde deberías empezar:
+
+- [Cómo crear un formulario Web simple](/es/docs/Web/Guide/HTML/Forms/My_first_HTML_form)
+- [Cómo estructurar un formulario Web](/es/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form)
+
+### Información tabular
+
+Alguna información, llamada datos tabulares, necesita ser organizada en tablas mediante filas y columnas. Siendo ésta una de las estructuras más complejas de HTML, no es fácil dominarla:
+
+- [Cómo crear una tabla de datos](/es/docs/Learn/HTML/Howto/Create_a_data_spreadsheet)
+- [Cómo hacer tablas HTML accesibles](/es/docs/Learn/HTML/Howto/Make_HTML_tables_accessible)
+
+### Representación de datos
+
+- [Cómo representar valores numericos y de código con HTML -](/es/docs/Learn/HTMLHowto/Represent_numeric_values_with_HTML) ver Superíndice y Subíndice, y Representación del código de la computadora.
+- [Cómo usar atributos de datos](/es/docs/Learn/HTML/Howto/Associate_human_readable_content_with_arbitrary_computer_data_structures)
+
+### Rendimiento
+
+- [Cómo crear páginas HTML de carga rápida](/es/docs/Learn/HTML/Howto/Create_collapsible_content_with_HTML)
+
+### Semántica avanzada de texto
+
+- [Cómo controlar el salto de línea en HTML](/es/docs/Learn/HTML/Howto/Take_control_of_HTML_line_breaking)
+- [Cómo marcar cambios (agregar y remover textos)](/es/docs/Learn/HTML/Howto/Mark_text_insertion_and_deletion) -ver los elementos {{htmlelement("ins")}} y {{htmlelement("del")}}
+
+### Imágenes y multimedia avanzada
+
+- [Cómo agregar una imagen receptiva a una página web](/es/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)
+- [Cómo agregar una imagen vectorial a una página web](/es/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web)
+- [Cómo agregar un mapa de visitas sobre una imagen](/es/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image)
+
+### Internacionalización
+
+HTML no es monolingüe. Éste proporciona herramientas para manejar problemas comunes de internacionalización.
+
+- [Cómo agregar multiples lenguajes en una misma página web](/es/docs/Learn/HTML/Howto/Add_multiple_languages_into_a_single_webpage)
+- [Cómo mostrar hora y fecha con HTML](/es/docs/Learn/HTML/Howto/Display_time_and_date_with_HTML)
diff --git a/files/es/learn/html/howto/use_data_attributes/index.html b/files/es/learn/html/howto/use_data_attributes/index.html
deleted file mode 100644
index a0b136615f9570..00000000000000
--- a/files/es/learn/html/howto/use_data_attributes/index.html
+++ /dev/null
@@ -1,76 +0,0 @@
----
-title: Uso de atributos de datos
-slug: Learn/HTML/Howto/Use_data_attributes
-translation_of: Learn/HTML/Howto/Use_data_attributes
-original_slug: Learn/HTML/como/Usando_atributos_de_datos
----
-<div>{{LearnSidebar}}</div>
-
-<p><a href="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a> está diseñado de forma tal que sea fácil extender los datos asociados a un elemento en particular sin necesidad de que tengan un significado definido. Los atributos <a href="/en-US/docs/Web/HTML/Global_attributes#attr-dataset"><code>data-* </code></a> permiten almacenar información adicional sobre un elemento HTML cualquiera sin tener que recurrir a artilugios tales como la utilización de atributos no estándar, propiedades adicionales en el DOM o {{domxref("Node.setUserData()")}}.</p>
-
-<h2 id="Sintaxis_HTML">Sintaxis HTML</h2>
-
-<p>La sintáxis es simple. Un atributo cualquiera cuyo nombre comience con <code>data-</code>es un atributo de datos. Supongamos que tenemos un artículo y deseamos almacenar información adicional que no tiene ninguna representación visual. En ese caso, alcanza con que hagamos uso de los atributos <code>data</code>:</p>
-
-<pre class="brush: html notranslate">&lt;article
-  id="electriccars"
-  data-columns="3"
-  data-index-number="12314"
-  data-parent="cars"&gt;
-...
-&lt;/article&gt;</pre>
-
-<h2 id="Acceso_a_través_de_JavaScript">Acceso a través de JavaScript</h2>
-
-<p>Leer los valores de estos atributos en <a href="/en-US/docs/Web/JavaScript">JavaScript</a> también es muy sencillo. Puede usar {{domxref("Element.getAttribute", "getAttribute()")}} con su nombre HTML completo para leerlos, pero el estándar define una forma más simple: un {{domxref("DOMStringMap")}} puede leer a través de una propiedad {{domxref("HTMLElement.dataset", "dataset")}}.</p>
-
-<p>Para obtener un atributo <code>data</code> a través del <code>dataset</code> del objeto, obtenga la propiedad por la parte del nombre del atributo despues de <code>data-</code> (tenga en cuenta que los guiones son convertidos en camelCase).</p>
-
-<pre class="brush: js notranslate">var article = document.getElementById('electriccars');
-
-article.dataset.columns // "3"
-article.dataset.indexNumber // "12314"
-article.dataset.parent // "cars"</pre>
-
-<p>Cada propiedad es una cadena y se puede leer y escribir. En el caso anterior, establecer <code>article.dataset.columns = 5</code> cambiaría ese atributo a <code>"5"</code>.</p>
-
-<h2 id="Acceso_a_través_de_CSS">Acceso a través de CSS</h2>
-
-<p>Tenga en cuenta que, debido a que los atributos de datos son atributos simples de HTML, incluso puede acceder a ellos desde <a href="/en-US/docs/Web/CSS">CSS</a>. Por ejemplo, para mostrar los <code>data-parent</code> en el artículo, puede usar el <a href="/en-US/docs/Web/CSS/content">contenido generado</a> en CSS con la función {{cssxref("attr")}}:</p>
-
-<pre class="brush: css notranslate">article::before {
-  content: attr(data-parent);
-}</pre>
-
-<p>También puede usar los <a href="/en-US/docs/Web/CSS/Attribute_selectors">selectores de atributos</a> en CSS para cambiar los estilos de acuerdo a las priopiedades de datos:</p>
-
-<pre class="brush: css notranslate">article[data-columns='3'] {
-  width: 400px;
-}
-article[data-columns='4'] {
-  width: 600px;
-}</pre>
-
-<p>Puede ver todo esto trabajando junto <a href="http://jsbin.com/ujiday/2/edit">en este ejemplo de JSBin</a>.</p>
-
-<p>Los atributos de datos también se pueden almacenar para que contengan información que cambia constantemente, como los puntajes en un juego. Usando los selectores de CSS y el acceso a JavaScript aquí, esto le permite crear algunos efectos ingeniosos sin tener que escribir sus propias rutinas de visualización. Consulte <a href="http://www.youtube.com/watch?v=On_WyUB1gOk">este screencast</a> para ver un ejemplo utilizando contenido generado y transacciones CSS (<a href="http://jsbin.com/atawaz/3/edit">Ejemplo JSBin</a>).</p>
-
-<p>Los valores de datos son cadenas de caracteres. Los valores numéricos deben ser citados en el selector para que el estilo surta efecto.</p>
-
-<h2 id="Problemas">Problemas</h2>
-
-<p>No almacene el contenido que debería ser visible y accesible en los atributos de datos, ya que las tecnologías de asistencia, no pueden acceder a ellos. Ademas, los rastreadores de búsqueda no pueden indexar los valores de los atributos de datos.</p>
-
-<p>Los principales problemas a considerar son el soporte y rendimiento en Internet Explorer. Internet Explorer 11 y superiores, proporcionan soporte para el estándar, pero todas las versiones anteriores <a href="http://caniuse.com/#feat=dataset">no son compatibles con <code>dataset</code></a>. Para admitir IE 10 e inferiores, debe acceder a los atributos de datos con {{domxref("Element.getAttribute", "getAttribute()")}} en su lugar. Ademas, el <a href="http://jsperf.com/data-dataset">rendimiento de lectura de los atributos de datos</a> en comparación con el almacenamiento de estos datos en un objeto JS normal es deficiente.</p>
-
-<p>Dicho esto, sin embargo, para metadatos asociados a elementos personalizados, son una gran solución.</p>
-
-<p>En Firefox 49.0.2 (y quizás versiones anteriores), los atributos de datos que exceden los 1022 caracteres no serán leídos por Javascript (EcmaScript 4).</p>
-
-<h2 id="Ver_también">Ver también</h2>
-
-<ul>
- <li>Este artículo es una adaptación de <a href="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/">Usando atributos de datos en JavaScript y CSS en hacks.mozilla.org</a>.</li>
- <li>Los atributos personalizados también son compatibles en SVG 2; vea {{domxref("SVGElement.dataset")}} y {{SVGAttr("data-*")}} para más información.</li>
- <li><a href="http://www.sitepoint.com/use-html5-data-attributes/">Cómo utilizar atributos de datos HTML5</a></li>
-</ul>
diff --git a/files/es/learn/html/howto/use_data_attributes/index.md b/files/es/learn/html/howto/use_data_attributes/index.md
new file mode 100644
index 00000000000000..424a9fd9a061ef
--- /dev/null
+++ b/files/es/learn/html/howto/use_data_attributes/index.md
@@ -0,0 +1,82 @@
+---
+title: Uso de atributos de datos
+slug: Learn/HTML/Howto/Use_data_attributes
+translation_of: Learn/HTML/Howto/Use_data_attributes
+original_slug: Learn/HTML/como/Usando_atributos_de_datos
+---
+{{LearnSidebar}}
+
+[HTML5](/es/docs/Web/Guide/HTML/HTML5) está diseñado de forma tal que sea fácil extender los datos asociados a un elemento en particular sin necesidad de que tengan un significado definido. Los atributos [`data-* `](/es/docs/Web/HTML/Global_attributes#attr-dataset)permiten almacenar información adicional sobre un elemento HTML cualquiera sin tener que recurrir a artilugios tales como la utilización de atributos no estándar, propiedades adicionales en el DOM o {{domxref("Node.setUserData()")}}.
+
+## Sintaxis HTML
+
+La sintáxis es simple. Un atributo cualquiera cuyo nombre comience con `data-`es un atributo de datos. Supongamos que tenemos un artículo y deseamos almacenar información adicional que no tiene ninguna representación visual. En ese caso, alcanza con que hagamos uso de los atributos `data`:
+
+```html
+<article
+  id="electriccars"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="cars">
+...
+</article>
+```
+
+## Acceso a través de JavaScript
+
+Leer los valores de estos atributos en [JavaScript](/es/docs/Web/JavaScript) también es muy sencillo. Puede usar {{domxref("Element.getAttribute", "getAttribute()")}} con su nombre HTML completo para leerlos, pero el estándar define una forma más simple: un {{domxref("DOMStringMap")}} puede leer a través de una propiedad {{domxref("HTMLElement.dataset", "dataset")}}.
+
+Para obtener un atributo `data` a través del `dataset` del objeto, obtenga la propiedad por la parte del nombre del atributo despues de `data-` (tenga en cuenta que los guiones son convertidos en camelCase).
+
+```js
+var article = document.getElementById('electriccars');
+
+article.dataset.columns // "3"
+article.dataset.indexNumber // "12314"
+article.dataset.parent // "cars"
+```
+
+Cada propiedad es una cadena y se puede leer y escribir. En el caso anterior, establecer `article.dataset.columns = 5` cambiaría ese atributo a `"5"`.
+
+## Acceso a través de CSS
+
+Tenga en cuenta que, debido a que los atributos de datos son atributos simples de HTML, incluso puede acceder a ellos desde [CSS](/es/docs/Web/CSS). Por ejemplo, para mostrar los `data-parent` en el artículo, puede usar el [contenido generado](/es/docs/Web/CSS/content) en CSS con la función {{cssxref("attr")}}:
+
+```css
+article::before {
+  content: attr(data-parent);
+}
+```
+
+También puede usar los [selectores de atributos](/es/docs/Web/CSS/Attribute_selectors) en CSS para cambiar los estilos de acuerdo a las priopiedades de datos:
+
+```css
+article[data-columns='3'] {
+  width: 400px;
+}
+article[data-columns='4'] {
+  width: 600px;
+}
+```
+
+Puede ver todo esto trabajando junto [en este ejemplo de JSBin](http://jsbin.com/ujiday/2/edit).
+
+Los atributos de datos también se pueden almacenar para que contengan información que cambia constantemente, como los puntajes en un juego. Usando los selectores de CSS y el acceso a JavaScript aquí, esto le permite crear algunos efectos ingeniosos sin tener que escribir sus propias rutinas de visualización. Consulte [este screencast](http://www.youtube.com/watch?v=On_WyUB1gOk) para ver un ejemplo utilizando contenido generado y transacciones CSS ([Ejemplo JSBin](http://jsbin.com/atawaz/3/edit)).
+
+Los valores de datos son cadenas de caracteres. Los valores numéricos deben ser citados en el selector para que el estilo surta efecto.
+
+## Problemas
+
+No almacene el contenido que debería ser visible y accesible en los atributos de datos, ya que las tecnologías de asistencia, no pueden acceder a ellos. Ademas, los rastreadores de búsqueda no pueden indexar los valores de los atributos de datos.
+
+Los principales problemas a considerar son el soporte y rendimiento en Internet Explorer. Internet Explorer 11 y superiores, proporcionan soporte para el estándar, pero todas las versiones anteriores [no son compatibles con `dataset`](http://caniuse.com/#feat=dataset). Para admitir IE 10 e inferiores, debe acceder a los atributos de datos con {{domxref("Element.getAttribute", "getAttribute()")}} en su lugar. Ademas, el [rendimiento de lectura de los atributos de datos](http://jsperf.com/data-dataset) en comparación con el almacenamiento de estos datos en un objeto JS normal es deficiente.
+
+Dicho esto, sin embargo, para metadatos asociados a elementos personalizados, son una gran solución.
+
+En Firefox 49.0.2 (y quizás versiones anteriores), los atributos de datos que exceden los 1022 caracteres no serán leídos por Javascript (EcmaScript 4).
+
+## Ver también
+
+- Este artículo es una adaptación de [Usando atributos de datos en JavaScript y CSS en hacks.mozilla.org](https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/).
+- Los atributos personalizados también son compatibles en SVG 2; vea {{domxref("SVGElement.dataset")}} y {{SVGAttr("data-*")}} para más información.
+- [Cómo utilizar atributos de datos HTML5](http://www.sitepoint.com/use-html5-data-attributes/)
diff --git a/files/es/learn/html/index.html b/files/es/learn/html/index.html
deleted file mode 100644
index deb7369a9ac067..00000000000000
--- a/files/es/learn/html/index.html
+++ /dev/null
@@ -1,66 +0,0 @@
----
-title: Estructurando la web con HTML
-slug: Learn/HTML
-tags:
-  - Aprender
-  - Guía
-  - HTML
-  - Novato
-  - Principiante
-  - Tema
-  - introducción
-translation_of: Learn/HTML
----
-<div>{{LearnSidebar}}</div>
-
-<p class="summary">Para crear sitios web, debes conocer el {{Glossary('HTML')}} — la tecnología fundamental que se utiliza para definir la estructura de una página web. HTML se utiliza para especificar si tu contenido web se debe reconocer como un párrafo, lista, encabezado, enlace, imagen, reproductor multimedia, formulario o uno de los muchos otros elementos disponibles o incluso un nuevo elemento que tú definas.</p>
-
-<div class="callout">
-<h3 id="¿Quieres_transformarte_en_un_desarrollador_de_la_interfaz_de_usuario_web">¿Quieres transformarte en un desarrollador de la interfaz de usuario web?</h3>
-
-<p>Hemos elaborado un curso que incluye toda la información esencial que necesitas para trabajar hacia tu objetivo.</p>
-
-<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Empieza aquí</a></p>
-</div>
-
-<h2 id="Prerrequisitos">Prerrequisitos</h2>
-
-<ul>
-</ul>
-
-<p>Antes de comenzar con este tema, debes tener al menos una familiaridad básica con el uso de computadoras y el uso pasivo de la web (es decir, simplemente mirarlo, consumir el contenido). Debes tener un entorno de trabajo básico configurado como se detalla en {{web.link("/es/docs/Learn/Getting_started_with_the_web/Installing_basic_software", "Instalación de software básico")}}, y comprender cómo crear y administrar archivos, como se detalla en {{web.link("/es/docs/Learn/Getting_started_with_the_web/Dealing_with_files", "Manejo de archivos")}}; ambos son parte del módulo para principiantes en la {{web.link("/es/docs/Learn/Getting_started_with_the_web", "Introducción a la Web")}}.</p>
-
-<p>Se recomienda que trabajes con {{web.link("/es/docs/Learn/Getting_started_with_the_web", "Comenzando con la web")}} antes de intentar este tema, sin embargo, no es absolutamente necesario; gran parte de lo que se cubre en el artículo {{web.link("/es/docs/Learn/Getting_started_with_the_web/HTML_basics", "conceptos básicos de HTML")}} también se cubre en el {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML", "Módulo de introducción a HTML")}}, aunque con mucho más detalle.</p>
-
-<p>Después de comprender HTML, puedes pasar a aprender temas más avanzados como:</p>
-
-<ul>
- <li>{{web.link("/es/docs/Learn/CSS", "CSS")}}, y cómo usarlo para estilizar HTML (por ejemplo, modificar el tamaño del texto y los tipos de letra utilizados, agregar bordes y sombras, modelar tu página con varias columnas, agregar animaciones y otros efectos visuales).</li>
- <li>{{web.link("/es/docs/Learn/JavaScript", "JavaScript")}}, y cómo usarlo para agregar funcionalidad dinámica a las páginas web (por ejemplo, encontrar tu ubicación y trazarla en un mapa, hacer que los elementos de la <em><strong>I</strong>nterfaz de <strong>U</strong>suario</em> (<strong>IU</strong> en adelante) aparezcan/desaparezcan cuando se alterna un botón, guardar los datos del usuario localmente en su computadora y mucho más).</li>
-</ul>
-
-<h2 id="Módulos">Módulos</h2>
-
-<p>Este tema contiene los siguientes módulos, en un orden sugerido para trabajar con ellos. Definitivamente deberías comenzar con el primero.</p>
-
-<dl>
- <dt>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML", "Introducción a HTML")}}</dt>
- <dd>Este módulo prepara el escenario para que te acostumbres a conceptos y sintaxis importantes, explica cómo aplicar HTML al texto, cómo crear hipervínculos y cómo usar HTML para estructurar una página web.</dd>
- <dt>{{web.link("/es/docs/Learn/HTML/Multimedia_and_embedding", "Multimedia e inserción")}}</dt>
- <dd>Este módulo explora cómo usar HTML para incluir multimedia en tus páginas web, incluidas las diferentes formas en que se pueden incluir imágenes y cómo insertar video, audio e incluso otras páginas web completas.</dd>
- <dt>{{web.link("/es/docs/Learn/HTML/Tables", "tablas HTML")}}</dt>
- <dd>Representar datos tabulares en una página web de una manera comprensible y {{Glossary("Accessibility", "accesible")}} puede ser un desafío. Este módulo cubre el marcado básico de tablas, junto con características más complejas como la implementación de subtítulos y resúmenes.</dd>
-</dl>
-
-<h2 id="Resolver_problemas_comunes_de_HTML">Resolver problemas comunes de HTML</h2>
-
-<p>{{web.link("/es/docs/Learn/HTML/Howto", "Usa HTML para resolver problemas comunes")}} proporciona vínculos a secciones de contenido que explican cómo usar HTML para resolver muchos problemas comunes al crear una página web: lidiar con títulos, agregar imágenes o videos, enfatizar contenido, crear una forma básica, etc.</p>
-
-<h2 id="Ve_también">Ve también</h2>
-
-<dl>
- <dt>{{web.link("/es/docs/Learn/HTML/Forms", "Formularios Web")}}</dt>
- <dd>Este módulo proporciona una serie de artículos que te ayudarán a dominar los conceptos básicos de los formularios web. Los formularios web son una herramienta muy poderosa para interactuar con los usuarios — generalmente, se utilizan para recopilar datos de los usuarios o para permitirles controlar una interfaz de usuario. Sin embargo, por razones históricas y técnicas, no siempre es obvio cómo utilizarlos en todo su potencial. Aborda todos los aspectos esenciales de los formularios web, incluido el marcado de su estructura HTML, el diseño de controles de formulario, la validación de datos de formulario y el envío de datos al servidor.</dd>
- <dt>{{web.link("/es/docs/Web/HTML", "HTML (lenguaje de marcado de hipertexto)")}}</dt>
- <dd>El punto de entrada principal para la documentación de referencia HTML en MDN, incluidas las referencias detalladas de elementos y atributos; si deseas saber qué atributos tiene un elemento o qué valores tiene un atributo, por ejemplo, este es un excelente lugar para comenzar.</dd>
-</dl>
diff --git a/files/es/learn/html/index.md b/files/es/learn/html/index.md
new file mode 100644
index 00000000000000..8518c641b0ccf8
--- /dev/null
+++ b/files/es/learn/html/index.md
@@ -0,0 +1,55 @@
+---
+title: Estructurando la web con HTML
+slug: Learn/HTML
+tags:
+  - Aprender
+  - Guía
+  - HTML
+  - Novato
+  - Principiante
+  - Tema
+  - introducción
+translation_of: Learn/HTML
+---
+{{LearnSidebar}}
+
+Para crear sitios web, debes conocer el {{Glossary('HTML')}} — la tecnología fundamental que se utiliza para definir la estructura de una página web. HTML se utiliza para especificar si tu contenido web se debe reconocer como un párrafo, lista, encabezado, enlace, imagen, reproductor multimedia, formulario o uno de los muchos otros elementos disponibles o incluso un nuevo elemento que tú definas.
+
+> #### ¿Quieres transformarte en un desarrollador de la interfaz de usuario web?
+>
+> Hemos elaborado un curso que incluye toda la información esencial que necesitas para trabajar hacia tu objetivo.
+>
+> [Empieza aquí](/es/docs/Learn/Front-end_web_developer)
+
+## Prerrequisitos
+
+Antes de comenzar con este tema, debes tener al menos una familiaridad básica con el uso de computadoras y el uso pasivo de la web (es decir, simplemente mirarlo, consumir el contenido). Debes tener un entorno de trabajo básico configurado como se detalla en {{web.link("/es/docs/Learn/Getting_started_with_the_web/Installing_basic_software", "Instalación de software básico")}}, y comprender cómo crear y administrar archivos, como se detalla en {{web.link("/es/docs/Learn/Getting_started_with_the_web/Dealing_with_files", "Manejo de archivos")}}; ambos son parte del módulo para principiantes en la {{web.link("/es/docs/Learn/Getting_started_with_the_web", "Introducción a la Web")}}.
+
+Se recomienda que trabajes con {{web.link("/es/docs/Learn/Getting_started_with_the_web", "Comenzando con la web")}} antes de intentar este tema, sin embargo, no es absolutamente necesario; gran parte de lo que se cubre en el artículo {{web.link("/es/docs/Learn/Getting_started_with_the_web/HTML_basics", "conceptos básicos de HTML")}} también se cubre en el {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML", "Módulo de introducción a HTML")}}, aunque con mucho más detalle.
+
+Después de comprender HTML, puedes pasar a aprender temas más avanzados como:
+
+- {{web.link("/es/docs/Learn/CSS", "CSS")}}, y cómo usarlo para estilizar HTML (por ejemplo, modificar el tamaño del texto y los tipos de letra utilizados, agregar bordes y sombras, modelar tu página con varias columnas, agregar animaciones y otros efectos visuales).
+- {{web.link("/es/docs/Learn/JavaScript", "JavaScript")}}, y cómo usarlo para agregar funcionalidad dinámica a las páginas web (por ejemplo, encontrar tu ubicación y trazarla en un mapa, hacer que los elementos de la _**I**nterfaz de **U**suario_ (**IU** en adelante) aparezcan/desaparezcan cuando se alterna un botón, guardar los datos del usuario localmente en su computadora y mucho más).
+
+## Módulos
+
+Este tema contiene los siguientes módulos, en un orden sugerido para trabajar con ellos. Definitivamente deberías comenzar con el primero.
+
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML", "Introducción a HTML")}}
+  - : Este módulo prepara el escenario para que te acostumbres a conceptos y sintaxis importantes, explica cómo aplicar HTML al texto, cómo crear hipervínculos y cómo usar HTML para estructurar una página web.
+- {{web.link("/es/docs/Learn/HTML/Multimedia_and_embedding", "Multimedia e inserción")}}
+  - : Este módulo explora cómo usar HTML para incluir multimedia en tus páginas web, incluidas las diferentes formas en que se pueden incluir imágenes y cómo insertar video, audio e incluso otras páginas web completas.
+- {{web.link("/es/docs/Learn/HTML/Tables", "tablas HTML")}}
+  - : Representar datos tabulares en una página web de una manera comprensible y {{Glossary("Accessibility", "accesible")}} puede ser un desafío. Este módulo cubre el marcado básico de tablas, junto con características más complejas como la implementación de subtítulos y resúmenes.
+
+## Resolver problemas comunes de HTML
+
+{{web.link("/es/docs/Learn/HTML/Howto", "Usa HTML para resolver problemas comunes")}} proporciona vínculos a secciones de contenido que explican cómo usar HTML para resolver muchos problemas comunes al crear una página web: lidiar con títulos, agregar imágenes o videos, enfatizar contenido, crear una forma básica, etc.
+
+## Ve también
+
+- {{web.link("/es/docs/Learn/HTML/Forms", "Formularios Web")}}
+  - : Este módulo proporciona una serie de artículos que te ayudarán a dominar los conceptos básicos de los formularios web. Los formularios web son una herramienta muy poderosa para interactuar con los usuarios — generalmente, se utilizan para recopilar datos de los usuarios o para permitirles controlar una interfaz de usuario. Sin embargo, por razones históricas y técnicas, no siempre es obvio cómo utilizarlos en todo su potencial. Aborda todos los aspectos esenciales de los formularios web, incluido el marcado de su estructura HTML, el diseño de controles de formulario, la validación de datos de formulario y el envío de datos al servidor.
+- {{web.link("/es/docs/Web/HTML", "HTML (lenguaje de marcado de hipertexto)")}}
+  - : El punto de entrada principal para la documentación de referencia HTML en MDN, incluidas las referencias detalladas de elementos y atributos; si deseas saber qué atributos tiene un elemento o qué valores tiene un atributo, por ejemplo, este es un excelente lugar para comenzar.
diff --git a/files/es/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/es/learn/html/introduction_to_html/advanced_text_formatting/index.html
deleted file mode 100644
index 49758ede6775e1..00000000000000
--- a/files/es/learn/html/introduction_to_html/advanced_text_formatting/index.html
+++ /dev/null
@@ -1,696 +0,0 @@
----
-title: Formateo de texto avanzado
-slug: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting
-tags:
-  - CodingScripting
-  - Guía
-  - HTML
-  - Lista de descripción
-  - Novato
-  - Principiante
-  - Texto
-  - abreviatura
-  - aprende
-  - cita
-  - semántica
-translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting
-original_slug: Learn/HTML/Introduccion_a_HTML/Advanced_text_formatting
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</div>
-
-<p class="summary">Hay muchos otros elementos en HTML para dar formato al texto, que no expusimos en el artículo {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Fundamentos de texto HTML")}}. Los elementos descritos en este artículo son menos conocidos, pero aún así es muy útil conocerlos (no obstante, no es una lista completa de ninguna manera). Aquí aprenderás cómo marcar citas, listas de descripción, código de computadora y otro texto relacionado, subíndices y superíndices, información de contacto y mucho más.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prerrequisitos:</th>
-   <td>Estar familiarizado con HTML, cubierto en {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}. Aplicación de formato a texto en documentos HTML, según lo expuesto en la sección {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Fundamentos de texto HTML")}}.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objetivo:</th>
-   <td>Aprender a utilizar elementos HTML menos conocidos para marcar características semánticas avanzadas.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Listas_de_descripciones">Listas de descripciones</h2>
-
-<p>En los fundamentos del texto HTML, explicamos cómo {{web.link("/es/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists", "marcar listas básicas")}} en HTML, pero no mencionamos el tercer tipo de lista con la que te encontrarás ocasionalmente: <strong>listas de descripción</strong>. El propósito de estas listas es marcar un conjunto de elementos y sus descripciones asociadas, como términos y definiciones, o preguntas y respuestas. Veamos un ejemplo de un conjunto de términos y definiciones:</p>
-
-<pre class="brush: bash notranslate">soliloquio
-En las obras dramáticas, corresponde a cuando un personaje se habla a sí mismo para representar sus pensamientos o sentimientos internos y, en el proceso, transmitirlos a la audiencia (pero no a otros personajes).
-monólogo
-En las obras dramáticas, corresponde a cuando un personaje habla de sus pensamientos en voz alta para compartirlos con el público y cualquier otro personaje presente.
-aparte
-En las obras dramáticas, corresponde a cuando un personaje comparte un comentario solo con la audiencia para dar efecto cómico o dramático. Suele ser un sentimiento, un pensamiento o información adicional.</pre>
-
-<p>Las listas de descripción utilizan un contenedor diferente al de los otros tipos de listas — {{HTMLElement("dl")}} («<em><b>d</b>escription <b>l</b>ist</em>» o lista de descripciones); además, cada término está envuelto en un elemento {{HTMLElement("dt")}} («<em><b>d</b>escription <b>t</b>erm</em>» o término a describir), y cada descripción está envuelta en un elemento {{HTMLElement("dd")}} («<em><b>d</b>escription <b>d</b>efinition</em>» o definición de descripción). Para redondear esta información veamos un ejemplo:</p>
-
-<div id="listas-de-descripciones-ejemplo-activo-1">
-<pre class="brush: html notranslate">&lt;dl&gt;
-  &lt;dt&gt;soliloquio&lt;/dt&gt;
-  &lt;dd&gt;En las obras dramáticas, corresponde a cuando un personaje se habla a sí mismo para representar sus pensamientos o sentimientos internos y, en el proceso, transmitirlos a la audiencia (pero no a otros personajes).&lt;/dd&gt;
-  &lt;dt&gt;monólogo&lt;/dt&gt;
-  &lt;dd&gt;En las obras dramáticas, corresponde a cuando un personaje habla de sus pensamientos en voz alta para compartirlos con el público y cualquier otro personaje presente.&lt;/dd&gt;
-  &lt;dt&gt;aparte&lt;/dt&gt;
-  &lt;dd&gt;En las obras dramáticas, corresponde a cuando un personaje comparte un comentario solo con la audiencia para dar efecto cómico o dramático. Suele ser un sentimiento, un pensamiento o información adicional.&lt;/dd&gt;
-&lt;/dl&gt;</pre>
-</div>
-
-<p>Los estilos predeterminados del navegador mostrarán listas de descripciones con las descripciones sangradas un poco más que los términos.</p>
-
-<p>{{ EmbedLiveSample('listas-de-descripciones-ejemplo-activo-1', '100%', '285px', '', '', 'hide-codepen-jsfiddle') }}</p>
-
-<p>Ten en cuenta que un solo término puede tener múltiples descripciones, por ejemplo:</p>
-
-<div id="listas-de-descripciones-ejemplo-activo-2">
-<pre class="brush: html notranslate">&lt;dl&gt;
-  &lt;dt&gt;aparte&lt;/dt&gt;
-  &lt;dd&gt;En las obras dramáticas, corresponde a cuando un personaje comparte un comentario solo con la audiencia para dar efecto cómico o dramático. Suele ser un sentimiento, un pensamiento o información adicional.&lt;/dd&gt;
-  &lt;dd&gt;Si la obra es impresa, es una sección de contenido que se relaciona con el tema, pero no encaja directamente en el flujo principal de contenido, de modo que se presenta por separado (a menudo en una caja de texto en el margen).&lt;/dd&gt;
-&lt;/dl&gt;</pre>
-</div>
-
-<p>{{ EmbedLiveSample('listas-de-descripciones-ejemplo-activo-2', '100%', '193px', '', '', 'hide-codepen-jsfiddle') }}</p>
-
-<h3 id="Aprendizaje_activo_Marcar_un_conjunto_de_definiciones">Aprendizaje activo: Marcar un conjunto de definiciones</h3>
-
-<p>Es hora de practicar las listas de descripciones; agrega elementos al texto sin formato en el campo <em>Código editable</em> para que aparezca como una lista de descripción en el campo <em>Salida en vivo</em>. Puedes usar tus propios términos y descripciones si lo deseas.</p>
-
-<p>Si cometes un error, siempre puedes restablecer el código anterior pulsando el botón <em>Restablecer</em>. Si te quedas realmente encallado, pulsa el botón <em>Mostrar solución</em> para ver una buena propuesta.</p>
-
-<div class="hidden">
-<h6 id="Código_reproducible">Código reproducible</h6>
-
-<pre class="brush: html notranslate">&lt;h2&gt;Salida en vivo&lt;/h2&gt;
-
-&lt;div class="output" style="min-height: 50px;"&gt;
-&lt;/div&gt;
-
-&lt;h2&gt;Código editable&lt;/h2&gt;
-&lt;p class="a11y-label"&gt;Pulsa Esc para quitar el foco del área de código (Tab inserta un carácter de tabulación).&lt;/p&gt;
-
-&lt;textarea id="code" class="input" style="min-height: 100px; width: 95%"&gt;
-Tocino
-El pegamento que une al mundo.
-Huevos
-El pegamento que une el pastel.
-Café
-La bebida que hace que el mundo funcione por la mañana.
-Un color marrón claro.&lt;/textarea&gt;
-
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="reset" type="button" value="Restablecer"&gt;
-  &lt;input id="solution" type="button" value="Mostrar solución"&gt;
-&lt;/div&gt;</pre>
-
-<pre class="brush: css notranslate">html {
-  font-family: sans-serif;
-}
-
-h2 {
-  font-size: 16px;
-}
-
-.a11y-label {
-  margin: 0;
-  text-align: right;
-  font-size: 0.7rem;
-  width: 98%;
-}
-
-body {
-  margin: 10px;
-  background: #f5f9fa;
-}</pre>
-
-<pre class="brush: js notranslate">const textarea = document.getElementById('code');
-const reset = document.getElementById('reset');
-const solution = document.getElementById('solution');
-const output = document.querySelector('.output');
-const code = textarea.value;
-const userEntry = textarea.value;
-
-function updateCode() {
-  output.innerHTML = textarea.value;
-}
-
-reset.addEventListener('click', function() {
-  textarea.value = code;
-  userEntry = textarea.value;
-  solutionEntry = htmlSolution;
-  solution.value = 'Mostrar solución';
-  updateCode();
-});
-
-solution.addEventListener('click', function() {
-  if(solution.value === 'Mostrar solución') {
-    textarea.value = solutionEntry;
-    solution.value = 'Ocultar solución';
-  } else {
-    textarea.value = userEntry;
-    solution.value = 'Mostrar solución';
-  }
-  updateCode();
-});
-
-const htmlSolution = '&lt;dl&gt;\n &lt;dt&gt;Tocino&lt;/dt&gt;\n &lt;dd&gt;El pegamento que une al mundo.&lt;/dd&gt;\n &lt;dt&gt;Huevos&lt;/dt&gt;\n &lt;dd&gt;El pegamento que une el pastel.&lt;/dd&gt;\n &lt;dt&gt;Café&lt;/dt&gt;\n &lt;dd&gt;La bebida que hace que el mundo funcione por la mañana.&lt;/dd&gt;\n &lt;dd&gt;Un color marrón claro.&lt;/dd&gt;\n&lt;/dl&gt;';
-const solutionEntry = htmlSolution;
-
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
-
-// captura la tecla de tabulación en el área de texto y en su lugar
-// hace que se escriba una tabulación en la posición del cursor
-
-textarea.onkeydown = function(e){
-  if (e.keyCode === 9) {
-    e.preventDefault();
-    insertAtCaret('\t');
-  }
-
-  if (e.keyCode === 27) {
-    textarea.blur();
-  }
-};
-
-function insertAtCaret(text) {
-  const scrollPos = textarea.scrollTop;
-  const caretPos = textarea.selectionStart;
-
-  const front = (textarea.value).substring(0, caretPos);
-  const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
-  textarea.value = front + text + back;
-  caretPos = caretPos + text.length;
-  textarea.selectionStart = caretPos;
-  textarea.selectionEnd = caretPos;
-  textarea.focus();
-  textarea.scrollTop = scrollPos;
-}
-
-// Actualiza el userCode guardado cada vez que el usuario actualiza el código del área de texto
-
-textarea.onkeyup = function(){
-  // Solo queremos guardar el estado cuando se muestra el código de usuario,
-  // no es la solución, por lo que la solución no se guarda sobre el código del usuario
-  if(solution.value === 'Mostrar solución') {
-    userEntry = textarea.value;
-  } else {
-    solutionEntry = textarea.value;
-  }
-
-  updateCode();
-};</pre>
-</div>
-
-<p>{{ EmbedLiveSample('Código_reproducible', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p>
-
-<h2 id="Citas">Citas</h2>
-
-<p>HTML también dispone de elementos para el marcado de citas; cual elemento utilices depende de si estás marcando la cita como un bloque o como un elemento en línea.</p>
-
-<h3 id="Cita_en_bloque_independiente_blockquote">Cita en bloque independiente (<em>blockquote</em>)</h3>
-
-<p>Si una sección de contenido a nivel de bloque (ya sea un párrafo, varios párrafos, una lista, etc.) se cita en otro lugar, debes envolverla dentro de un elemento {{HTMLElement("blockquote")}} para indicarlo, e incluye una URL que apunte a la fuente de la cita dentro de un atributo {{HTMLAttrxRef("cite", "blockquote")}}. Por ejemplo, el siguiente marcado tomado de la página del elemento <code>&lt;blockquote&gt;</code> de MDN:</p>
-
-<pre class="brush: html notranslate">&lt;p&gt;El &lt;strong&gt;elemento HTML &lt;code&gt;&amp;lt;blockquote&amp;gt;&lt;/code&gt;&lt;/strong&gt; (o &lt;em&gt;elemento HTML de cita
-en bloque independiente&lt;/em&gt;) indica que el texto al que delimita es una cita ampliada.&lt;/p&gt;</pre>
-
-<p>Para convertir esto en una cita en bloque independiente, simplemente harías lo siguiente:</p>
-
-<div id="blockquote-ejemplo-en-vivo">
-<pre class="brush: html notranslate">&lt;p&gt;A continuación se muestra una cita en bloque independiente...&lt;/p&gt;
-&lt;blockquote cite="https://developer.mozilla.org/es/docs/Web/HTML/Element/blockquote"&gt;
-  &lt;p&gt;El &lt;strong&gt;elemento HTML &lt;code&gt;&amp;lt;blockquote&amp;gt;&lt;/code&gt;&lt;/strong&gt; (o &lt;em&gt;elemento HTML de cita
-  en bloque independiente&lt;/em&gt;) indica que el texto al que delimita es una cita ampliada.&lt;/p&gt;
-&lt;/blockquote&gt;</pre>
-</div>
-
-<p>El estilo predeterminado del navegador lo mostrará como un párrafo con sangría, para indicar que se trata de una cita; el párrafo anterior a la cita sirve para demostrarlo.</p>
-
-<p>{{EmbedLiveSample('blockquote-ejemplo-en-vivo', '100%', '117px', '', '', 'hide-codepen-jsfiddle')}}</p>
-
-<h3 id="Citas_en_línea">Citas en línea</h3>
-
-<p>Las citas en línea funcionan exactamente de la misma manera, excepto que usan el elemento {{HTMLElement("q")}}. Por ejemplo, el siguiente fragmento de marcado contiene una cita <code>&lt;q&gt;</code> de la página MDN:</p>
-
-<pre class="brush: html notranslate">&lt;p&gt;El elemento de cita — &lt;code&gt;&amp;lt;q&amp;gt;&lt;/code&gt; — se &lt;q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q"&gt;utiliza en
-para citas breves que no requieren saltos de párrafo.&lt;/q&gt;&lt;/p&gt;</pre>
-
-<p>El estilo predeterminado del navegador lo representará como texto normal entre comillas para indicar una cita, así:</p>
-
-<p>{{ EmbedLiveSample('Citas_en_línea', '100%', '78px', '', '', 'hide-codepen-jsfiddle')}}</p>
-
-<h3 id="Citas_2">Citas</h3>
-
-<p>El contenido del atributo {{HTMLAttrxRef("cite", "blockquote")}} suena útil, pero desafortunadamente los navegadores, lectores de pantalla, etc. no hacen mucho con él. No hay forma de hacer que el navegador muestre el contenido de <code>cite</code> sin escribir tu propia solución usando JavaScript o CSS. Si deseas que la fuente de la cita esté disponible en la página, lo debes hacer en el texto a través de un enlace o de alguna otra forma apropiada.</p>
-
-<p>Hay un elemento {{HTMLElement("cite")}}, pero está destinado a contener el título del recurso que se cita, p. ej. el nombre del libro. Sin embargo, no hay razón por la que no puedas vincular el texto dentro de <code>&lt;cite&gt;</code> a la fuente de la cita de alguna manera:</p>
-
-<pre class="brush: html notranslate">&lt;p&gt;De acuerdo con &lt;a href="https://developer.mozilla.org/es/docs/Web/HTML/Element/blockquote"&gt;
-&lt;cite&gt;página de citas en bloque independiente de MDN&lt;/cite&gt;&lt;/a&gt;:
-&lt;/p&gt;
-
-&lt;blockquote cite="https://developer.mozilla.org/es/docs/Web/HTML/Element/blockquote"&gt;
-  &lt;p&gt;El &lt;strong&gt;elemento HTML &lt;code&gt;&amp;lt;blockquote&amp;gt;&lt;/code&gt;&lt;/strong&gt; (o &lt;em&gt;elemento HTML de cita
-  en bloque independiente&lt;/em&gt;) indica que el texto al que delimita es una cita ampliada.&lt;/p&gt;
-&lt;/blockquote&gt;
-
-&lt;p&gt;El elemento de cita — &lt;code&gt;&amp;lt;q&amp;gt;&lt;/code&gt; — se &lt;q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q"&gt;utiliza en
-citas breves que no requieren saltos de párrafo.&lt;/q&gt; -- &lt;a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q"&gt;
-&lt;cite&gt;página q de MDN&lt;/cite&gt;&lt;/a&gt;.&lt;/p&gt;</pre>
-
-<p>Las citas se escriben en cursiva de forma predeterminada.</p>
-
-<p>{{ EmbedLiveSample('Citas_2', '100%', '179px', '', '', 'hide-codepen-jsfiddle') }}</p>
-
-<h3 id="Aprendizaje_activo_¿Quién_dijo_eso">Aprendizaje activo: ¿Quién dijo eso?</h3>
-
-<p>¡Es hora de otro ejemplo de aprendizaje activo! En este ejemplo, nos gustaría que:</p>
-
-<ol>
- <li>Conviertas el párrafo del medio en una cita en bloque independiente, que incluya un atributo <code>cite</code>.</li>
- <li>Conviertas "La necesidad de eliminar el diálogo interno negativo" en el tercer párrafo en una cita en línea e incluya un atributo <code>cite</code>.</li>
- <li>Envuelvas el título de cada fuente en etiquetas <code>&lt;cite&gt;</code> y conviertas cada una en un enlace a esa fuente.</li>
-</ol>
-
-<p>Las fuentes de citación que necesitas son:</p>
-
-<ul>
- <li>http://www.brainyquote.com/quotes/authors/c/confucius.html para la citas de Confucio</li>
- <li>http://www.affirmationsforpositivethinking.com para "La necesidad de eliminar el diálogo interno negativo".</li>
-</ul>
-
-<p>Si cometes un error, siempre puedes restablecer el código anterior pulsando el botón <em>Restablecer</em>. Si te quedas realmente encallado, pulsa el botón <em>Mostrar solución</em> para ver una buena propuesta.</p>
-
-<div class="hidden">
-<h6 id="Código_reproducible_2">Código reproducible 2</h6>
-
-<pre class="brush: html notranslate">&lt;h2&gt;Salida en vivo&lt;/h2&gt;
-
-&lt;div class="output" style="min-height: 50px;"&gt;
-&lt;/div&gt;
-
-&lt;h2&gt;Código editable&lt;/h2&gt;
-&lt;p class="a11y-label"&gt;Pulsa Esc para quitar el foco del área de código (Tab inserta un carácter de tabulación).&lt;/p&gt;
-
-&lt;textarea id="code" class="input" style="min-height: 150px; width: 95%"&gt;
-&lt;p&gt;Hola y bienvenido a mi página de motivación. Como dice el sitio de citas de Confucio:&lt;/p&gt;
-&lt;p&gt;No importa qué tan lento vayas siempre que no te detengas.&lt;/p&gt;
-&lt;p&gt;También me encanta el concepto de pensamiento positivo y La necesidad de eliminar el diálogo interno negativo (como se menciona en Afirmaciones para el pensamiento positivo).&lt;/p&gt;
-&lt;/textarea&gt;
-
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="reset" type="button" value="Restablecer"&gt;
-  &lt;input id="solution" type="button" value="Mostrar solución"&gt;
-&lt;/div&gt;</pre>
-
-<pre class="brush: css notranslate">html {
-  font-family: sans-serif;
-}
-
-h2 {
-  font-size: 16px;
-}
-
-.a11y-label {
-  margin: 0;
-  text-align: right;
-  font-size: 0.7rem;
-  width: 98%;
-}
-
-body {
-  margin: 10px;
-  background: #f5f9fa;
-}</pre>
-
-<pre class="brush: js notranslate">const textarea = document.getElementById('code');
-const reset = document.getElementById('reset');
-const solution = document.getElementById('solution');
-const output = document.querySelector('.output');
-const code = textarea.value;
-const userEntry = textarea.value;
-
-function updateCode() {
-  output.innerHTML = textarea.value;
-}
-
-reset.addEventListener('click', function() {
-  textarea.value = code;
-  userEntry = textarea.value;
-  solutionEntry = htmlSolution;
-  solution.value = 'Mostrar solución';
-  updateCode();
-});
-
-solution.addEventListener('click', function() {
-  if(solution.value === 'Mostrar solución') {
-    textarea.value = solutionEntry;
-    solution.value = 'Ocultar solución';
-  } else {
-    textarea.value = userEntry;
-    solution.value = 'Mostrar solución';
-  }
-  updateCode();
-});
-
-const htmlSolution = '&lt;p&gt;Hola y bienvenido a mi página de motivación. Como dice &lt;a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"&gt;&lt;cite&gt;el sitio de citas de Confucio:&lt;/cite&gt;&lt;/a&gt;:&lt;/p&gt;\n\n&lt;blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html"&gt;\n&lt;p&gt;No importa qué tan lento vayas siempre que no te detengas.&lt;/p&gt;\n&lt;/blockquote&gt;\n\n&lt;p&gt;También me encanta el concepto de pensamiento positivo y &lt;q cite="http://www.affirmationsforpositivethinking.com"&gt;La necesidad de eliminar el diálogo interno negativo&lt;/q&gt; (como se menciona en &lt;a href="http://www.affirmationsforpositivethinking.com"&gt;&lt;cite&gt;Afirmaciones para el pensamiento positivo&lt;/cite&gt;&lt;/a&gt;).&lt;/p&gt;';
-const solutionEntry = htmlSolution;
-
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
-
-// captura la tecla de tabulación en el área de texto y en su lugar
-// hace que se escriba una tabulación en la posición del cursor
-
-textarea.onkeydown = function(e){
-  if (e.keyCode === 9) {
-    e.preventDefault();
-    insertAtCaret('\t');
-  }
-
-  if (e.keyCode === 27) {
-    textarea.blur();
-  }
-};
-
-function insertAtCaret(text) {
-  const scrollPos = textarea.scrollTop;
-  const caretPos = textarea.selectionStart;
-
-  const front = (textarea.value).substring(0, caretPos);
-  const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
-  textarea.value = front + text + back;
-  caretPos = caretPos + text.length;
-  textarea.selectionStart = caretPos;
-  textarea.selectionEnd = caretPos;
-  textarea.focus();
-  textarea.scrollTop = scrollPos;
-}
-
-// Actualiza el userCode guardado cada vez que el usuario actualiza el código del área de texto
-
-textarea.onkeyup = function(){
-  // Solo queremos guardar el estado cuando se muestra el código de usuario,
-  // no es la solución, por lo que la solución no se guarda sobre el código del usuario
-  if(solution.value === 'Mostrar solución') {
-    userEntry = textarea.value;
-  } else {
-    solutionEntry = textarea.value;
-  }
-
-  updateCode();
-};</pre>
-</div>
-
-<p>{{ EmbedLiveSample('Código_reproducible_2', 700, 450, "", "", "hide-codepen-jsfiddle") }}</p>
-
-<h2 id="Abreviaturas">Abreviaturas</h2>
-
-<p>Otro elemento bastante común que encontrarás cuando busques en la Web es {{HTMLElement("abbr")}} — se usa para envolver una abreviatura o acrónimo, y proporcionar una expansión completa del término (incluida dentro de un atributo {{HTMLAttrxRef("title")}}. Veamos un par de ejemplos:</p>
-
-<div id="ejemplo-de-abreviaturas-en-vivo">
-<pre class="brush: html notranslate">&lt;p&gt;Usamos &lt;abbr title="Lenguaje de marcado de hipertexto"&gt;HTML&lt;/abbr&gt; para estructurar nuestros documentos web.&lt;/p&gt;
-
-&lt;p&gt;Creo que el &lt;abbr title="Reverendo""&gt;Rev.&lt;/abbr&gt; Green lo hizo en la cocina con la motosierra.&lt;/p&gt;</pre>
-</div>
-
-<p>Estos saldrán con un aspecto similar a este (la expansión aparecerá en una descripción emergente cuando se coloque el cursor sobre el término):</p>
-
-<p>{{EmbedLiveSample('ejemplo-de-abreviaturas-en-vivo', '100%', '94px', '', '', 'hide-codepen-jsfiddle')}}</p>
-
-<div class="note">
-<p><strong>Nota</strong>: Hay otro elemento, {{HTMLElement("acronym")}}, que básicamente hace lo mismo que <code>&lt;abbr&gt;</code>, y se diseñó específicamente para acrónimos en lugar de las abreviaturas. Sin embargo, este ha caído en desuso — no era compatible con los navegadores ni con <code>&lt;abbr&gt;</code>, y <code>&lt;abbr&gt;</code> tiene una función tan similar que se consideró inútil conservar ambos. Solo utiliza <code>&lt;abbr&gt;</code>.</p>
-</div>
-
-<h3 id="Aprendizaje_activo_Marcar_una_abreviatura">Aprendizaje activo: Marcar una abreviatura</h3>
-
-<p>Para esta simple tarea de aprendizaje activo, nos gustaría que simplemente marcaras una abreviatura. Puedes usar el ejemplo que encontrarás a continuación o reemplazarla por una de tu elección. </p>
-
-<div class="hidden">
-<h6 id="Código_reproducible_3">Código reproducible</h6>
-
-<pre class="brush: html notranslate">&lt;h2&gt;Salida en vivo&lt;/h2&gt;
-
-&lt;div class="output" style="min-height: 50px;"&gt;
-&lt;/div&gt;
-
-&lt;h2&gt;Código editable&lt;/h2&gt;
-&lt;p class="a11y-label"&gt;Pulsa Esc para quitar el foco del área de código (Tab inserta un carácter de tabulación).&lt;/p&gt;
-
-&lt;textarea id="code" class="input" style="min-height: 50px; width: 95%"&gt;
-&lt;p&gt;La NASA sin duda hace un interesante trabajo.&lt;/p&gt;
-&lt;/textarea&gt;
-
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="reset" type="button" value="Restablecer"&gt;
-  &lt;input id="solution" type="button" value="Mostrar solución"&gt;
-&lt;/div&gt;</pre>
-
-<pre class="brush: css notranslate">html {
-  font-family: sans-serif;
-}
-
-h2 {
-  font-size: 16px;
-}
-
-.a11y-label {
-  margin: 0;
-  text-align: right;
-  font-size: 0.7rem;
-  width: 98%;
-}
-
-body {
-  margin: 10px;
-  background: #f5f9fa;
-}</pre>
-
-<pre class="brush: js notranslate">const textarea = document.getElementById('code');
-const reset = document.getElementById('reset');
-const solution = document.getElementById('solution');
-const output = document.querySelector('.output');
-const code = textarea.value;
-const userEntry = textarea.value;
-
-function updateCode() {
-  output.innerHTML = textarea.value;
-}
-
-reset.addEventListener('click', function() {
-  textarea.value = code;
-  userEntry = textarea.value;
-  solutionEntry = htmlSolution;
-  solution.value = 'Mostrar solución';
-  updateCode();
-});
-
-solution.addEventListener('click', function() {
-  if(solution.value === 'Mostrar solución') {
-    textarea.value = solutionEntry;
-    solution.value = 'Ocultar solución';
-  } else {
-    textarea.value = userEntry;
-    solution.value = 'Mostrar solución';
-  }
-  updateCode();
-});
-
-const htmlSolution = '&lt;p&gt;La &lt;abbr title="Administración Nacional de Aeronáutica y del Espacio"&gt;NASA&lt;/abbr&gt; sin duda hace un interesante trabajo.&lt;/p&gt;';
-const solutionEntry = htmlSolution;
-
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
-
-// captura la tecla de tabulación en el área de texto y en su lugar
-// hace que se escriba una tabulación en la posición del cursor
-
-textarea.onkeydown = function(e){
-  if (e.keyCode === 9) {
-    e.preventDefault();
-    insertAtCaret('\t');
-  }
-
-  if (e.keyCode === 27) {
-    textarea.blur();
-  }
-};
-
-function insertAtCaret(text) {
-  const scrollPos = textarea.scrollTop;
-  const caretPos = textarea.selectionStart;
-
-  const front = (textarea.value).substring(0, caretPos);
-  const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
-  textarea.value = front + text + back;
-  caretPos = caretPos + text.length;
-  textarea.selectionStart = caretPos;
-  textarea.selectionEnd = caretPos;
-  textarea.focus();
-  textarea.scrollTop = scrollPos;
-}
-
-// Actualiza el userCode guardado cada vez que el usuario actualiza el código del área de texto
-
-textarea.onkeyup = function(){
-  // Solo queremos guardar el estado cuando se muestra el código de usuario,
-  // no es la solución, por lo que la solución no se guarda sobre el código del usuario
-  if(solution.value === 'Mostrar solución') {
-    userEntry = textarea.value;
-  } else {
-    solutionEntry = textarea.value;
-  }
-
-  updateCode();
-};</pre>
-</div>
-
-<p>{{ EmbedLiveSample('Código_reproducible_3', 700, 300, "", "", "hide-codepen-jsfiddle") }}</p>
-
-<h2 id="Marcar_la_información_de_contacto">Marcar la información de contacto</h2>
-
-<p>HTML tiene un elemento para marcar la información de contacto — {{HTMLElement("address")}}. Este simplemente envuelve tus datos de contacto, por ejemplo:</p>
-
-<pre class="brush: html notranslate">&lt;address&gt;
-  &lt;p&gt;Chris Mills, Manchester, The Grim North, Reino Unido&lt;/p&gt;
-&lt;/address&gt;</pre>
-
-<p>También podrías incluir un marcado más complejo y otras formas de información de contacto, por ejemplo:</p>
-
-<pre class="brush: html notranslate">&lt;address&gt;
-  &lt;p&gt;
-    Chris Mills&lt;br&gt;
-    Manchester&lt;br&gt;
-    The Grim North&lt;br&gt;
-    Reino Unido
-  &lt;/p&gt;
-
-  &lt;ul&gt;
-    &lt;li&gt;Tel: 01234 567 890&lt;/li&gt;
-    &lt;li&gt;Email: me@grim-north.co.uk&lt;/li&gt;
-  &lt;/ul&gt;
-&lt;/address&gt;</pre>
-
-<p>Ten en cuenta que algo como esto también estaría bien, si la página vinculada contuviera la información de contacto:</p>
-
-<pre class="brush: html notranslate">&lt;address&gt;
-  &lt;p&gt;Página escrita por &lt;a href="../authors/chris-mills/"&gt;Chris Mills&lt;/a&gt;.&lt;/p&gt;
-&lt;/address&gt;</pre>
-
-<h2 id="Superíndice_y_subíndice">Superíndice y subíndice</h2>
-
-<p>En ocasiones, necesitarás utilizar superíndice y subíndice al marcar elementos como fechas, fórmulas químicas y ecuaciones matemáticas para que tengan el significado correcto. Los elementos {{HTMLElement("sup")}} y {{HTMLElement("sub")}} se ocupan de ello. Por ejemplo:</p>
-
-<pre class="brush: html notranslate">&lt;p&gt;Nací el 25&lt;sup&gt;th&lt;/sup&gt; de mayo de 2001.&lt;/p&gt;
-&lt;p&gt;La fórmula química de la cafeína es C&lt;sub&gt;8&lt;/sub&gt;H&lt;sub&gt;10&lt;/sub&gt;N&lt;sub&gt;4&lt;/sub&gt;O&lt;sub&gt;2&lt;/sub&gt;.&lt;/p&gt;
-&lt;p&gt;If x&lt;sup&gt;2&lt;/sup&gt; es 9, x debe ser igual 3 o -3.&lt;/p&gt;</pre>
-
-<p>La salida de este código se ve así:</p>
-
-<p>{{ EmbedLiveSample('Superíndice_y_subíndice', '100%', '141px', '', '', 'hide-codepen-jsfiddle') }}</p>
-
-<h2 id="Representación_del_código_informático">Representación del código informático</h2>
-
-<p>Hay una serie de elementos disponibles para marcar código informático usando HTML:</p>
-
-<ul>
- <li>{{HTMLElement("code")}}: Para marcar fragmentos genéricos de código informático.</li>
- <li>{{HTMLElement("pre")}}: Para respetar los espacios en blanco (en general, en los bloques de código) — si utilizas la sangría o diversos espacios en blanco consecutivos dentro de un texto, los navegadores los ignorarán y no se mostrarán en la página. Sin embargo, si delimitas el texto con las etiquetas <code>&lt;pre&gt;&lt;/pre&gt;</code>, los espacios en blanco se representarán de forma idéntica a como se ven en tu editor de texto.</li>
- <li>{{HTMLElement("var")}}: Para marcar específicamente nombres de variables.</li>
- <li>{{HTMLElement("kbd")}}: Para marcar entradas de teclado (y de otro tipo) en el ordenador.</li>
- <li>{{HTMLElement("samp")}}: Para marcar la salida de un programa de ordenador.</li>
-</ul>
-
-<p>Veamos algunos ejemplos. Deberías intentar jugar con estos (intenta obtener una copia de nuestro archivo de ejemplo <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/other-semantics.html">other-semantics.html</a>):</p>
-
-<pre class="brush: html notranslate">&lt;pre&gt;&lt;code&gt;var para = document.querySelector('p');
-
-para.onclick = function() {
-  alert('¡Guau!, ¡deja de apretar!');
-}&lt;/code&gt;&lt;/pre&gt;
-
-&lt;p&gt;No debes utilizar elementos de presentación como &lt;code&gt;&amp;lt;font&amp;gt;&lt;/code&gt; y &lt;code&gt;&amp;lt;center&amp;gt;&lt;/code&gt;.&lt;/p&gt;
-
-&lt;p&gt;En el ejemplo de JavaScript anterior, &lt;var&gt;para&lt;/var&gt; representa un elemento de párrafo.&lt;/p&gt;
-
-
-&lt;p&gt;Selecciona todo el texto con &lt;kbd&gt;Ctrl&lt;/kbd&gt;/&lt;kbd&gt;Cmd&lt;/kbd&gt; + &lt;kbd&gt;A&lt;/kbd&gt;.&lt;/p&gt;
-
-&lt;pre&gt;$ &lt;kbd&gt;ping mozilla.org&lt;/kbd&gt;
-&lt;samp&gt;PING mozilla.org (63.245.215.20): 56 bytes de datos
-64 bytes de 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms&lt;/samp&gt;&lt;/pre&gt;</pre>
-
-<p>El código anterior se verá así:</p>
-
-<p>{{ EmbedLiveSample('Representación_del_código_informático','100%',300, "", "", "hide-codepen-jsfiddle") }}</p>
-
-<h2 id="Marcar_horas_y_fechas">Marcar horas y fechas</h2>
-
-<p>HTML también proporciona el elemento {{HTMLElement("time")}} para marcar horas y fechas en un formato legible por la máquina. Por ejemplo:</p>
-
-<pre class="brush: html notranslate">&lt;time datetime="2016-01-20"&gt;20 Enero 2016&lt;/time&gt;
-</pre>
-
-<p>¿Por qué es útil esto? Bueno, hay muchas formas diferentes en que los humanos escriben las fechas. La fecha anterior se podría escribir como:</p>
-
-<ul>
- <li>20 Enero 2016</li>
- <li>20th January 2016</li>
- <li>Ene 20 2016</li>
- <li>20/01/16</li>
- <li>01/20/16</li>
- <li>El 20 del mes que viene</li>
- <li><span lang="fr">20e Janvier 2016</span></li>
- <li><span lang="ja">2016年1月20日</span></li>
- <li>... y así sucesivamente ...</li>
-</ul>
-
-<p>Pero estas diferentes formas no las pueden reconocer fácilmente las computadoras — ¿qué pasaría si quisieras tomar automáticamente las fechas de todos los eventos en una página e insertarlas en un calendario? El elemento {{HTMLElement("time")}} te permite adjuntar una fecha/hora inequívoca y legible por la máquina para este propósito.</p>
-
-<p>El ejemplo básico anterior solo proporciona una fecha simple legible por la máquina, pero hay muchas otras opciones que son posibles, por ejemplo:</p>
-
-<pre class="brush: html notranslate">&lt;!-- Fecha simple estándar --&gt;
-&lt;time datetime="2016-01-20"&gt;20 Enero 2016&lt;/time&gt;
-&lt;!-- Solo año y mes --&gt;
-&lt;time datetime="2016-01"&gt;Enero 2016&lt;/time&gt;
-&lt;!-- Solo mes y día --&gt;
-&lt;time datetime="01-20"&gt;20 Enero 2016&lt;/time&gt;
-&lt;!-- Solo tiempo, horas y minutos --&gt;
-&lt;time datetime="19:30"&gt;19:30&lt;/time&gt;
-&lt;!-- ¡También puedes hacer segundos y milisegundos! --&gt;
-&lt;time datetime="19:30:01.856"&gt;19:30:01.856&lt;/time&gt;
-&lt;!-- Fecha y hora --&gt;
-&lt;time datetime="2016-01-20T19:30"&gt;7.30pm, 20 Enero 2016&lt;/time&gt;
-&lt;!-- Fecha y hora con desplazamiento de zona horaria --&gt;
-&lt;time datetime="2016-01-20T19:30+01:00"&gt;7.30pm, 20 Enero 2016 es 8.30pm en Francia&lt;/time&gt;
-&lt;!-- Llamar a un número de semana específico --&gt;
-&lt;time datetime="2016-W04"&gt;La cuarta semana de 2016&lt;/time&gt;
-</pre>
-
-<h2 id="¡Pon_a_prueba_tus_habilidades!">¡Pon a prueba tus habilidades!</h2>
-
-<p>Has llegado al final de este artículo, pero ¿puedes recordar la información más importante? Puedes encontrar más pruebas para verificar que has retenido esta información antes de continuar; consulta {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_Advanced_HTML_text", "Pon a prueba tus habilidades: Texto HTML avanzado")}}.</p>
-
-<h2 id="Resumen">Resumen</h2>
-
-<p>Esto marca el final de nuestro estudio de la semántica del texto HTML. Ten en cuenta que lo que has visto durante este curso no es una lista exhaustiva de elementos de texto HTML — quisimos tratar de cubrir los aspectos esenciales y algunos de los más comunes que verás en la naturaleza, o al menos podrían resultarte interesantes. Para encontrar muchos más elementos HTML, puedes echarle un vistazo a nuestra {{web.link("/es/docs/Web/HTML/Element", "referencia de elementos HTML")}} (la {{web.link("/es/docs/Web/HTML/Element#Inline_text_semantics", "La sección Semántica de texto en línea")}} sería un gran lugar para comenzar). En el próximo artículo veremos los elementos HTML que usarás para estructurar las diferentes partes de un documento HTML.</p>
-
-<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</p>
-
-<h2 id="En_este_módulo">En este módulo</h2>
-
-<ul>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}</li>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "¿Qué hay en el «head»? Metadatos en HTML")}}</li>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Fundamentos de texto HTML")}}</li>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Crear hipervínculos")}}</li>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Formateo de texto avanzado")}}</li>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Estructura web y documentación")}}</li>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Depurar HTML")}}</li>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Marcado para una carta")}}</li>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Estructuración del contenido de una página")}}</li>
-</ul>
diff --git a/files/es/learn/html/introduction_to_html/advanced_text_formatting/index.md b/files/es/learn/html/introduction_to_html/advanced_text_formatting/index.md
new file mode 100644
index 00000000000000..2b8216f1803a85
--- /dev/null
+++ b/files/es/learn/html/introduction_to_html/advanced_text_formatting/index.md
@@ -0,0 +1,721 @@
+---
+title: Formateo de texto avanzado
+slug: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting
+tags:
+  - CodingScripting
+  - Guía
+  - HTML
+  - Lista de descripción
+  - Novato
+  - Principiante
+  - Texto
+  - abreviatura
+  - aprende
+  - cita
+  - semántica
+translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting
+original_slug: Learn/HTML/Introduccion_a_HTML/Advanced_text_formatting
+---
+{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}
+
+Hay muchos otros elementos en HTML para dar formato al texto, que no expusimos en el artículo {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Fundamentos de texto HTML")}}. Los elementos descritos en este artículo son menos conocidos, pero aún así es muy útil conocerlos (no obstante, no es una lista completa de ninguna manera). Aquí aprenderás cómo marcar citas, listas de descripción, código de computadora y otro texto relacionado, subíndices y superíndices, información de contacto y mucho más.
+
+<table>
+  <tbody>
+    <tr>
+      <th scope="row">Prerrequisitos:</th>
+      <td>
+        Estar familiarizado con HTML, cubierto en
+        {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}.
+        Aplicación de formato a texto en documentos HTML, según lo expuesto en
+        la sección
+        {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Fundamentos de texto HTML")}}.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Objetivo:</th>
+      <td>
+        Aprender a utilizar elementos HTML menos conocidos para marcar
+        características semánticas avanzadas.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## Listas de descripciones
+
+En los fundamentos del texto HTML, explicamos cómo {{web.link("/es/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists", "marcar listas básicas")}} en HTML, pero no mencionamos el tercer tipo de lista con la que te encontrarás ocasionalmente: **listas de descripción**. El propósito de estas listas es marcar un conjunto de elementos y sus descripciones asociadas, como términos y definiciones, o preguntas y respuestas. Veamos un ejemplo de un conjunto de términos y definiciones:
+
+```bash
+soliloquio
+En las obras dramáticas, corresponde a cuando un personaje se habla a sí mismo para representar sus pensamientos o sentimientos internos y, en el proceso, transmitirlos a la audiencia (pero no a otros personajes).
+monólogo
+En las obras dramáticas, corresponde a cuando un personaje habla de sus pensamientos en voz alta para compartirlos con el público y cualquier otro personaje presente.
+aparte
+En las obras dramáticas, corresponde a cuando un personaje comparte un comentario solo con la audiencia para dar efecto cómico o dramático. Suele ser un sentimiento, un pensamiento o información adicional.
+```
+
+Las listas de descripción utilizan un contenedor diferente al de los otros tipos de listas — {{HTMLElement("dl")}} («_**d**escription **l**ist_» o lista de descripciones); además, cada término está envuelto en un elemento {{HTMLElement("dt")}} («_**d**escription **t**erm_» o término a describir), y cada descripción está envuelta en un elemento {{HTMLElement("dd")}} («_**d**escription **d**efinition_» o definición de descripción). Para redondear esta información veamos un ejemplo:
+
+```html
+<dl>
+  <dt>soliloquio</dt>
+  <dd>En las obras dramáticas, corresponde a cuando un personaje se habla a sí mismo para representar sus pensamientos o sentimientos internos y, en el proceso, transmitirlos a la audiencia (pero no a otros personajes).</dd>
+  <dt>monólogo</dt>
+  <dd>En las obras dramáticas, corresponde a cuando un personaje habla de sus pensamientos en voz alta para compartirlos con el público y cualquier otro personaje presente.</dd>
+  <dt>aparte</dt>
+  <dd>En las obras dramáticas, corresponde a cuando un personaje comparte un comentario solo con la audiencia para dar efecto cómico o dramático. Suele ser un sentimiento, un pensamiento o información adicional.</dd>
+</dl>
+```
+
+Los estilos predeterminados del navegador mostrarán listas de descripciones con las descripciones sangradas un poco más que los términos.
+
+{{ EmbedLiveSample('listas-de-descripciones-ejemplo-activo-1', '100%', '285px', '', '', 'hide-codepen-jsfiddle') }}
+
+#
+
+Ten en cuenta que un solo término puede tener múltiples descripciones, por ejemplo:
+
+```html
+<dl>
+  <dt>aparte</dt>
+  <dd>En las obras dramáticas, corresponde a cuando un personaje comparte un comentario solo con la audiencia para dar efecto cómico o dramático. Suele ser un sentimiento, un pensamiento o información adicional.</dd>
+  <dd>Si la obra es impresa, es una sección de contenido que se relaciona con el tema, pero no encaja directamente en el flujo principal de contenido, de modo que se presenta por separado (a menudo en una caja de texto en el margen).</dd>
+</dl>
+```
+
+{{ EmbedLiveSample('listas-de-descripciones-ejemplo-activo-2', '100%', '193px', '', '', 'hide-codepen-jsfiddle') }}
+
+### Aprendizaje activo: Marcar un conjunto de definiciones
+
+Es hora de practicar las listas de descripciones; agrega elementos al texto sin formato en el campo _Código editable_ para que aparezca como una lista de descripción en el campo _Salida en vivo_. Puedes usar tus propios términos y descripciones si lo deseas.
+
+Si cometes un error, siempre puedes restablecer el código anterior pulsando el botón _Restablecer_. Si te quedas realmente encallado, pulsa el botón _Mostrar solución_ para ver una buena propuesta.
+
+```html hidden
+<h2>Salida en vivo</h2>
+
+<div class="output" style="min-height: 50px;">
+</div>
+
+<h2>Código editable</h2>
+<p class="a11y-label">Pulsa Esc para quitar el foco del área de código (Tab inserta un carácter de tabulación).</p>
+
+<textarea id="code" class="input" style="min-height: 100px; width: 95%">
+Tocino
+El pegamento que une al mundo.
+Huevos
+El pegamento que une el pastel.
+Café
+La bebida que hace que el mundo funcione por la mañana.
+Un color marrón claro.</textarea>
+
+<div class="playable-buttons">
+<input id="reset" type="button" value="Restablecer">
+<input id="solution" type="button" value="Mostrar solución">
+</div>
+```
+
+```css hidden
+html {
+font-family: sans-serif;
+}
+
+h2 {
+font-size: 16px;
+}
+
+.a11y-label {
+margin: 0;
+text-align: right;
+font-size: 0.7rem;
+width: 98%;
+}
+
+body {
+margin: 10px;
+background: #f5f9fa;
+}
+```
+
+```js hidden
+const textarea = document.getElementById('code');
+const reset = document.getElementById('reset');
+const solution = document.getElementById('solution');
+const output = document.querySelector('.output');
+const code = textarea.value;
+const userEntry = textarea.value;
+
+function updateCode() {
+output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+textarea.value = code;
+userEntry = textarea.value;
+solutionEntry = htmlSolution;
+solution.value = 'Mostrar solución';
+updateCode();
+});
+
+solution.addEventListener('click', function() {
+if(solution.value === 'Mostrar solución') {
+textarea.value = solutionEntry;
+solution.value = 'Ocultar solución';
+} else {
+textarea.value = userEntry;
+solution.value = 'Mostrar solución';
+}
+updateCode();
+});
+
+const htmlSolution = '<dl>\n <dt>Tocino</dt>\n <dd>El pegamento que une al mundo.</dd>\n <dt>Huevos</dt>\n <dd>El pegamento que une el pastel.</dd>\n <dt>Café</dt>\n <dd>La bebida que hace que el mundo funcione por la mañana.</dd>\n <dd>Un color marrón claro.</dd>\n</dl>';
+const solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// captura la tecla de tabulación en el área de texto y en su lugar
+// hace que se escriba una tabulación en la posición del cursor
+
+textarea.onkeydown = function(e){
+if (e.keyCode === 9) {
+e.preventDefault();
+insertAtCaret('\t');
+}
+
+if (e.keyCode === 27) {
+textarea.blur();
+}
+};
+
+function insertAtCaret(text) {
+const scrollPos = textarea.scrollTop;
+const caretPos = textarea.selectionStart;
+
+const front = (textarea.value).substring(0, caretPos);
+const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+textarea.value = front + text + back;
+caretPos = caretPos + text.length;
+textarea.selectionStart = caretPos;
+textarea.selectionEnd = caretPos;
+textarea.focus();
+textarea.scrollTop = scrollPos;
+}
+
+// Actualiza el userCode guardado cada vez que el usuario actualiza el código del área de texto
+
+textarea.onkeyup = function(){
+// Solo queremos guardar el estado cuando se muestra el código de usuario,
+// no es la solución, por lo que la solución no se guarda sobre el código del usuario
+if(solution.value === 'Mostrar solución') {
+userEntry = textarea.value;
+} else {
+solutionEntry = textarea.value;
+}
+
+updateCode();
+};
+```
+
+{{ EmbedLiveSample('Código_reproducible', 700, 350, "", "", "hide-codepen-jsfiddle") }}
+
+## Citas
+
+HTML también dispone de elementos para el marcado de citas; cual elemento utilices depende de si estás marcando la cita como un bloque o como un elemento en línea.
+
+### Cita en bloque independiente (_blockquote_)
+
+Si una sección de contenido a nivel de bloque (ya sea un párrafo, varios párrafos, una lista, etc.) se cita en otro lugar, debes envolverla dentro de un elemento {{HTMLElement("blockquote")}} para indicarlo, e incluye una URL que apunte a la fuente de la cita dentro de un atributo {{HTMLAttrxRef("cite", "blockquote")}}. Por ejemplo, el siguiente marcado tomado de la página del elemento `<blockquote>` de MDN:
+
+```html
+<p>El <strong>elemento HTML <code>&lt;blockquote&gt;</code></strong> (o <em>elemento HTML de cita
+en bloque independiente</em>) indica que el texto al que delimita es una cita ampliada.</p>
+```
+
+##
+
+Para convertir esto en una cita en bloque independiente, simplemente harías lo siguiente:
+
+```html
+<p>A continuación se muestra una cita en bloque independiente...</p>
+<blockquote cite="https://developer.mozilla.org/es/docs/Web/HTML/Element/blockquote">
+  <p>El <strong>elemento HTML <code>&lt;blockquote&gt;</code></strong> (o <em>elemento HTML de cita
+  en bloque independiente</em>) indica que el texto al que delimita es una cita ampliada.</p>
+</blockquote>
+```
+
+El estilo predeterminado del navegador lo mostrará como un párrafo con sangría, para indicar que se trata de una cita; el párrafo anterior a la cita sirve para demostrarlo.
+
+{{EmbedLiveSample('blockquote-ejemplo-en-vivo', '100%', '117px', '', '', 'hide-codepen-jsfiddle')}}
+
+### Citas en línea
+
+Las citas en línea funcionan exactamente de la misma manera, excepto que usan el elemento {{HTMLElement("q")}}. Por ejemplo, el siguiente fragmento de marcado contiene una cita `<q>` de la página MDN:
+
+```html
+<p>El elemento de cita — <code>&lt;q&gt;</code> — se <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">utiliza en
+para citas breves que no requieren saltos de párrafo.</q></p>
+```
+
+El estilo predeterminado del navegador lo representará como texto normal entre comillas para indicar una cita, así:
+
+{{ EmbedLiveSample('Citas_en_línea', '100%', '78px', '', '', 'hide-codepen-jsfiddle')}}
+
+### Citas
+
+El contenido del atributo {{HTMLAttrxRef("cite", "blockquote")}} suena útil, pero desafortunadamente los navegadores, lectores de pantalla, etc. no hacen mucho con él. No hay forma de hacer que el navegador muestre el contenido de `cite` sin escribir tu propia solución usando JavaScript o CSS. Si deseas que la fuente de la cita esté disponible en la página, lo debes hacer en el texto a través de un enlace o de alguna otra forma apropiada.
+
+Hay un elemento {{HTMLElement("cite")}}, pero está destinado a contener el título del recurso que se cita, p. ej. el nombre del libro. Sin embargo, no hay razón por la que no puedas vincular el texto dentro de `<cite>` a la fuente de la cita de alguna manera:
+
+```html
+<p>De acuerdo con <a href="https://developer.mozilla.org/es/docs/Web/HTML/Element/blockquote">
+<cite>página de citas en bloque independiente de MDN</cite></a>:
+</p>
+
+<blockquote cite="https://developer.mozilla.org/es/docs/Web/HTML/Element/blockquote">
+  <p>El <strong>elemento HTML <code>&lt;blockquote&gt;</code></strong> (o <em>elemento HTML de cita
+  en bloque independiente</em>) indica que el texto al que delimita es una cita ampliada.</p>
+</blockquote>
+
+<p>El elemento de cita — <code>&lt;q&gt;</code> — se <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">utiliza en
+citas breves que no requieren saltos de párrafo.</q> -- <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">
+<cite>página q de MDN</cite></a>.</p>
+```
+
+Las citas se escriben en cursiva de forma predeterminada.
+
+{{ EmbedLiveSample('Citas_2', '100%', '179px', '', '', 'hide-codepen-jsfiddle') }}
+
+### Aprendizaje activo: ¿Quién dijo eso?
+
+¡Es hora de otro ejemplo de aprendizaje activo! En este ejemplo, nos gustaría que:
+
+1.  Conviertas el párrafo del medio en una cita en bloque independiente, que incluya un atributo `cite`.
+2.  Conviertas "La necesidad de eliminar el diálogo interno negativo" en el tercer párrafo en una cita en línea e incluya un atributo `cite`.
+3.  Envuelvas el título de cada fuente en etiquetas `<cite>` y conviertas cada una en un enlace a esa fuente.
+
+Las fuentes de citación que necesitas son:
+
+- http\://www\.brainyquote.com/quotes/authors/c/confucius.html para la citas de Confucio
+- http\://www\.affirmationsforpositivethinking.com para "La necesidad de eliminar el diálogo interno negativo".
+
+Si cometes un error, siempre puedes restablecer el código anterior pulsando el botón _Restablecer_. Si te quedas realmente encallado, pulsa el botón _Mostrar solución_ para ver una buena propuesta.
+
+```html hidden
+<h2>Salida en vivo</h2>
+
+<div class="output" style="min-height: 50px;">
+</div>
+
+<h2>Código editable</h2>
+<p class="a11y-label">Pulsa Esc para quitar el foco del área de código (Tab inserta un carácter de tabulación).</p>
+
+<textarea id="code" class="input" style="min-height: 150px; width: 95%">
+<p>Hola y bienvenido a mi página de motivación. Como dice el sitio de citas de Confucio:</p>
+<p>No importa qué tan lento vayas siempre que no te detengas.</p>
+<p>También me encanta el concepto de pensamiento positivo y La necesidad de eliminar el diálogo interno negativo (como se menciona en Afirmaciones para el pensamiento positivo).</p>
+</textarea>
+
+<div class="playable-buttons">
+<input id="reset" type="button" value="Restablecer">
+<input id="solution" type="button" value="Mostrar solución">
+</div>
+```
+
+```css hidden
+html {
+font-family: sans-serif;
+}
+
+h2 {
+font-size: 16px;
+}
+
+.a11y-label {
+margin: 0;
+text-align: right;
+font-size: 0.7rem;
+width: 98%;
+}
+
+body {
+margin: 10px;
+background: #f5f9fa;
+}
+```
+
+```js hidden
+const textarea = document.getElementById('code');
+const reset = document.getElementById('reset');
+const solution = document.getElementById('solution');
+const output = document.querySelector('.output');
+const code = textarea.value;
+const userEntry = textarea.value;
+
+function updateCode() {
+output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+textarea.value = code;
+userEntry = textarea.value;
+solutionEntry = htmlSolution;
+solution.value = 'Mostrar solución';
+updateCode();
+});
+
+solution.addEventListener('click', function() {
+if(solution.value === 'Mostrar solución') {
+textarea.value = solutionEntry;
+solution.value = 'Ocultar solución';
+} else {
+textarea.value = userEntry;
+solution.value = 'Mostrar solución';
+}
+updateCode();
+});
+
+const htmlSolution = '<p>Hola y bienvenido a mi página de motivación. Como dice <a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>el sitio de citas de Confucio:</cite></a>:</p>\n\n<blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html">\n<p>No importa qué tan lento vayas siempre que no te detengas.</p>\n</blockquote>\n\n<p>También me encanta el concepto de pensamiento positivo y <q cite="http://www.affirmationsforpositivethinking.com">La necesidad de eliminar el diálogo interno negativo</q> (como se menciona en <a href="http://www.affirmationsforpositivethinking.com"><cite>Afirmaciones para el pensamiento positivo</cite></a>).</p>';
+const solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// captura la tecla de tabulación en el área de texto y en su lugar
+// hace que se escriba una tabulación en la posición del cursor
+
+textarea.onkeydown = function(e){
+if (e.keyCode === 9) {
+e.preventDefault();
+insertAtCaret('\t');
+}
+
+if (e.keyCode === 27) {
+textarea.blur();
+}
+};
+
+function insertAtCaret(text) {
+const scrollPos = textarea.scrollTop;
+const caretPos = textarea.selectionStart;
+
+const front = (textarea.value).substring(0, caretPos);
+const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+textarea.value = front + text + back;
+caretPos = caretPos + text.length;
+textarea.selectionStart = caretPos;
+textarea.selectionEnd = caretPos;
+textarea.focus();
+textarea.scrollTop = scrollPos;
+}
+
+// Actualiza el userCode guardado cada vez que el usuario actualiza el código del área de texto
+
+textarea.onkeyup = function(){
+// Solo queremos guardar el estado cuando se muestra el código de usuario,
+// no es la solución, por lo que la solución no se guarda sobre el código del usuario
+if(solution.value === 'Mostrar solución') {
+userEntry = textarea.value;
+} else {
+solutionEntry = textarea.value;
+}
+
+updateCode();
+};
+```
+
+{{ EmbedLiveSample('Código_reproducible_2', 700, 450, "", "", "hide-codepen-jsfiddle") }}
+
+## Abreviaturas
+
+Otro elemento bastante común que encontrarás cuando busques en la Web es {{HTMLElement("abbr")}} — se usa para envolver una abreviatura o acrónimo, y proporcionar una expansión completa del término (incluida dentro de un atributo {{HTMLAttrxRef("title")}}. Veamos un par de ejemplos:
+
+```html
+<p>Usamos <abbr title="Lenguaje de marcado de hipertexto">HTML</abbr> para estructurar nuestros documentos web.</p>
+
+<p>Creo que el <abbr title="Reverendo">Rev.</abbr> Green lo hizo en la cocina con la motosierra.</p>
+```
+
+Estos saldrán con un aspecto similar a este (la expansión aparecerá en una descripción emergente cuando se coloque el cursor sobre el término):
+
+{{EmbedLiveSample('ejemplo-de-abreviaturas-en-vivo', '100%', '94px', '', '', 'hide-codepen-jsfiddle')}}
+
+> **Nota:** Hay otro elemento, {{HTMLElement("acronym")}}, que básicamente hace lo mismo que `<abbr>`, y se diseñó específicamente para acrónimos en lugar de las abreviaturas. Sin embargo, este ha caído en desuso — no era compatible con los navegadores ni con `<abbr>`, y `<abbr>` tiene una función tan similar que se consideró inútil conservar ambos. Solo utiliza `<abbr>`.
+
+### Aprendizaje activo: Marcar una abreviatura
+
+Para esta simple tarea de aprendizaje activo, nos gustaría que simplemente marcaras una abreviatura. Puedes usar el ejemplo que encontrarás a continuación o reemplazarla por una de tu elección.
+
+```html hidden
+<h2>Salida en vivo</h2>
+
+<div class="output" style="min-height: 50px;">
+</div>
+
+<h2>Código editable</h2>
+<p class="a11y-label">Pulsa Esc para quitar el foco del área de código (Tab inserta un carácter de tabulación).</p>
+
+<textarea id="code" class="input" style="min-height: 50px; width: 95%">
+<p>La NASA sin duda hace un interesante trabajo.</p>
+</textarea>
+
+<div class="playable-buttons">
+<input id="reset" type="button" value="Restablecer">
+<input id="solution" type="button" value="Mostrar solución">
+</div>
+```
+
+```css hidden
+html {
+font-family: sans-serif;
+}
+
+h2 {
+font-size: 16px;
+}
+
+.a11y-label {
+margin: 0;
+text-align: right;
+font-size: 0.7rem;
+width: 98%;
+}
+
+body {
+margin: 10px;
+background: #f5f9fa;
+}
+```
+
+```js hidden
+const textarea = document.getElementById('code');
+const reset = document.getElementById('reset');
+const solution = document.getElementById('solution');
+const output = document.querySelector('.output');
+const code = textarea.value;
+const userEntry = textarea.value;
+
+function updateCode() {
+output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+textarea.value = code;
+userEntry = textarea.value;
+solutionEntry = htmlSolution;
+solution.value = 'Mostrar solución';
+updateCode();
+});
+
+solution.addEventListener('click', function() {
+if(solution.value === 'Mostrar solución') {
+textarea.value = solutionEntry;
+solution.value = 'Ocultar solución';
+} else {
+textarea.value = userEntry;
+solution.value = 'Mostrar solución';
+}
+updateCode();
+});
+
+const htmlSolution = '<p>La <abbr title="Administración Nacional de Aeronáutica y del Espacio">NASA</abbr> sin duda hace un interesante trabajo.</p>';
+const solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// captura la tecla de tabulación en el área de texto y en su lugar
+// hace que se escriba una tabulación en la posición del cursor
+
+textarea.onkeydown = function(e){
+if (e.keyCode === 9) {
+e.preventDefault();
+insertAtCaret('\t');
+}
+
+if (e.keyCode === 27) {
+textarea.blur();
+}
+};
+
+function insertAtCaret(text) {
+const scrollPos = textarea.scrollTop;
+const caretPos = textarea.selectionStart;
+
+const front = (textarea.value).substring(0, caretPos);
+const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+textarea.value = front + text + back;
+caretPos = caretPos + text.length;
+textarea.selectionStart = caretPos;
+textarea.selectionEnd = caretPos;
+textarea.focus();
+textarea.scrollTop = scrollPos;
+}
+
+// Actualiza el userCode guardado cada vez que el usuario actualiza el código del área de texto
+
+textarea.onkeyup = function(){
+// Solo queremos guardar el estado cuando se muestra el código de usuario,
+// no es la solución, por lo que la solución no se guarda sobre el código del usuario
+if(solution.value === 'Mostrar solución') {
+userEntry = textarea.value;
+} else {
+solutionEntry = textarea.value;
+}
+
+updateCode();
+};
+```
+
+{{ EmbedLiveSample('Código_reproducible_3', 700, 300, "", "", "hide-codepen-jsfiddle") }}
+
+## Marcar la información de contacto
+
+HTML tiene un elemento para marcar la información de contacto — {{HTMLElement("address")}}. Este simplemente envuelve tus datos de contacto, por ejemplo:
+
+```html
+<address>
+  <p>Chris Mills, Manchester, The Grim North, Reino Unido</p>
+</address>
+```
+
+También podrías incluir un marcado más complejo y otras formas de información de contacto, por ejemplo:
+
+```html
+<address>
+  <p>
+    Chris Mills<br>
+    Manchester<br>
+    The Grim North<br>
+    Reino Unido
+  </p>
+
+  <ul>
+    <li>Tel: 01234 567 890</li>
+    <li>Email: me@grim-north.co.uk</li>
+  </ul>
+</address>
+```
+
+Ten en cuenta que algo como esto también estaría bien, si la página vinculada contuviera la información de contacto:
+
+```html
+<address>
+  <p>Página escrita por <a href="../authors/chris-mills/">Chris Mills</a>.</p>
+</address>
+```
+
+## Superíndice y subíndice
+
+En ocasiones, necesitarás utilizar superíndice y subíndice al marcar elementos como fechas, fórmulas químicas y ecuaciones matemáticas para que tengan el significado correcto. Los elementos {{HTMLElement("sup")}} y {{HTMLElement("sub")}} se ocupan de ello. Por ejemplo:
+
+```html
+<p>Nací el 25<sup>th</sup> de mayo de 2001.</p>
+<p>La fórmula química de la cafeína es C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
+<p>If x<sup>2</sup> es 9, x debe ser igual 3 o -3.</p>
+```
+
+La salida de este código se ve así:
+
+{{ EmbedLiveSample('Superíndice_y_subíndice', '100%', '141px', '', '', 'hide-codepen-jsfiddle') }}
+
+## Representación del código informático
+
+Hay una serie de elementos disponibles para marcar código informático usando HTML:
+
+- {{HTMLElement("code")}}: Para marcar fragmentos genéricos de código informático.
+- {{HTMLElement("pre")}}: Para respetar los espacios en blanco (en general, en los bloques de código) — si utilizas la sangría o diversos espacios en blanco consecutivos dentro de un texto, los navegadores los ignorarán y no se mostrarán en la página. Sin embargo, si delimitas el texto con las etiquetas `<pre></pre>`, los espacios en blanco se representarán de forma idéntica a como se ven en tu editor de texto.
+- {{HTMLElement("var")}}: Para marcar específicamente nombres de variables.
+- {{HTMLElement("kbd")}}: Para marcar entradas de teclado (y de otro tipo) en el ordenador.
+- {{HTMLElement("samp")}}: Para marcar la salida de un programa de ordenador.
+
+Veamos algunos ejemplos. Deberías intentar jugar con estos (intenta obtener una copia de nuestro archivo de ejemplo [other-semantics.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/other-semantics.html)):
+
+```html
+<pre><code>var para = document.querySelector('p');
+
+para.onclick = function() {
+  alert('¡Guau!, ¡deja de apretar!');
+}</code></pre>
+
+<p>No debes utilizar elementos de presentación como <code>&lt;font&gt;</code> y <code>&lt;center&gt;</code>.</p>
+
+<p>En el ejemplo de JavaScript anterior, <var>para</var> representa un elemento de párrafo.</p>
+
+
+<p>Selecciona todo el texto con <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>
+
+<pre>$ <kbd>ping mozilla.org</kbd>
+<samp>PING mozilla.org (63.245.215.20): 56 bytes de datos
+64 bytes de 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>
+```
+
+El código anterior se verá así:
+
+{{ EmbedLiveSample('Representación_del_código_informático','100%',300, "", "", "hide-codepen-jsfiddle") }}
+
+## Marcar horas y fechas
+
+HTML también proporciona el elemento {{HTMLElement("time")}} para marcar horas y fechas en un formato legible por la máquina. Por ejemplo:
+
+```html
+<time datetime="2016-01-20">20 Enero 2016</time>
+```
+
+¿Por qué es útil esto? Bueno, hay muchas formas diferentes en que los humanos escriben las fechas. La fecha anterior se podría escribir como:
+
+- 20 Enero 2016
+- 20th January 2016
+- Ene 20 2016
+- 20/01/16
+- 01/20/16
+- El 20 del mes que viene
+- 20e Janvier 2016
+- 2016 年 1 月 20 日
+- ... y así sucesivamente ...
+
+Pero estas diferentes formas no las pueden reconocer fácilmente las computadoras — ¿qué pasaría si quisieras tomar automáticamente las fechas de todos los eventos en una página e insertarlas en un calendario? El elemento {{HTMLElement("time")}} te permite adjuntar una fecha/hora inequívoca y legible por la máquina para este propósito.
+
+El ejemplo básico anterior solo proporciona una fecha simple legible por la máquina, pero hay muchas otras opciones que son posibles, por ejemplo:
+
+```html
+<!-- Fecha simple estándar -->
+<time datetime="2016-01-20">20 Enero 2016</time>
+<!-- Solo año y mes -->
+<time datetime="2016-01">Enero 2016</time>
+<!-- Solo mes y día -->
+<time datetime="01-20">20 Enero 2016</time>
+<!-- Solo tiempo, horas y minutos -->
+<time datetime="19:30">19:30</time>
+<!-- ¡También puedes hacer segundos y milisegundos! -->
+<time datetime="19:30:01.856">19:30:01.856</time>
+<!-- Fecha y hora -->
+<time datetime="2016-01-20T19:30">7.30pm, 20 Enero 2016</time>
+<!-- Fecha y hora con desplazamiento de zona horaria -->
+<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 Enero 2016 es 8.30pm en Francia</time>
+<!-- Llamar a un número de semana específico -->
+<time datetime="2016-W04">La cuarta semana de 2016</time>
+```
+
+## ¡Pon a prueba tus habilidades!
+
+Has llegado al final de este artículo, pero ¿puedes recordar la información más importante? Puedes encontrar más pruebas para verificar que has retenido esta información antes de continuar; consulta {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_Advanced_HTML_text", "Pon a prueba tus habilidades: Texto HTML avanzado")}}.
+
+## Resumen
+
+Esto marca el final de nuestro estudio de la semántica del texto HTML. Ten en cuenta que lo que has visto durante este curso no es una lista exhaustiva de elementos de texto HTML — quisimos tratar de cubrir los aspectos esenciales y algunos de los más comunes que verás en la naturaleza, o al menos podrían resultarte interesantes. Para encontrar muchos más elementos HTML, puedes echarle un vistazo a nuestra {{web.link("/es/docs/Web/HTML/Element", "referencia de elementos HTML")}} (la {{web.link("/es/docs/Web/HTML/Element#Inline_text_semantics", "La sección Semántica de texto en línea")}} sería un gran lugar para comenzar). En el próximo artículo veremos los elementos HTML que usarás para estructurar las diferentes partes de un documento HTML.
+
+{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}
+
+## En este módulo
+
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "¿Qué hay en el «head»? Metadatos en HTML")}}
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Fundamentos de texto HTML")}}
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Crear hipervínculos")}}
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Formateo de texto avanzado")}}
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Estructura web y documentación")}}
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Depurar HTML")}}
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Marcado para una carta")}}
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Estructuración del contenido de una página")}}
diff --git a/files/es/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/es/learn/html/introduction_to_html/creating_hyperlinks/index.html
deleted file mode 100644
index eaab5e5e968a5b..00000000000000
--- a/files/es/learn/html/introduction_to_html/creating_hyperlinks/index.html
+++ /dev/null
@@ -1,347 +0,0 @@
----
-title: Crear hipervínculos
-slug: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
-tags:
-  - Aprender
-  - CodingScripting
-  - Guía
-  - HTML
-  - HTTP
-  - Novato
-  - Principiante
-  - Title
-  - URL
-  - enlace
-  - hiperenlaces
-  - hipervínculos
-  - href
-  - referencia absoluta
-  - referencia relativa
-  - título
-  - urls
-translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
-original_slug: Learn/HTML/Introduccion_a_HTML/Creating_hyperlinks
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</div>
-
-<p class="summary">Los hipervínculos (o enlaces) son elementos verdaderamente importantes — son los que hacen que la web sea <em><strong>web</strong></em>. Este artículo expone la sintaxis necesaria para crear un enlace, además contiene un catálogo de buenas prácticas para crearlos.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prerrequisitos:</th>
-   <td>Estar familiarizado con HTML, cubierto en {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}. Aplicación de formato a texto en documentos HTML, según lo expuesto en la sección {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "fundamentos de texto HTML")}}.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objetivo:</th>
-   <td>Aprender a implementar un <em>hipervínculo</em> de forma efectiva y enlazar múltiples archivos.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="¿Qué_es_un_hipervínculo">¿Qué es un hipervínculo?</h2>
-
-<p>Los hipervínculos son una de las innovaciones más interesantes que ofrece la Web. Han formado parte de esta desde el principio, pero hacen que la web sea <em>web </em>: Los hipervínculos nos permiten vincular documentos a otros documentos o recursos, vincular a partes específicas de documentos o hacer que las aplicaciones estén disponibles en una dirección web. Prácticamente cualquier contenido web se puede convertir en un enlace que, al pulsarlo (activarlo), dirija el navegador a la dirección web a la que apunta el enlace ({{Glossary("URL")}}).</p>
-
-<div class="note">
-<p><strong>Nota</strong>: Una URL puede apuntar a archivos HTML, archivos de texto, imágenes, documentos de texto, archivos de audio o vídeo, y cualquier otra cosa que se pueda mostrar en la web. Si el navegador no sabe cómo manejar el archivo, te preguntará si lo quieres abrir (en cuyo caso la tarea de abrirlo y manejarlo se transferirá a la aplicación nativa instalada en el dispositivo) o si lo quieres descargar (en cuyo caso podrás ocuparte de él más tarde).</p>
-</div>
-
-<p>El sitio web de la BBC, por ejemplo, contiene una gran cantidad de enlaces que apuntan a multitud de noticias en diferentes zonas de el sitio (funcionalidad de navegación), zonas de acceso/registro (herramientas de usuario) y otras.</p>
-
-<p><img alt="Portada de bbc.co.uk, que muestra muchas noticias y la funcionalidad del menú de navegación" src="https://mdn.mozillademos.org/files/12405/bbc-homepage.png" style="display: block; margin: 0 auto;"></p>
-
-<h2 id="Anatomía_de_un_enlace">Anatomía de un enlace</h2>
-
-<p>Un enlace básico se crea incluyendo el texto (o cualquier otro contenido, ve <a href="#convertir_bloques_de_contenido_en_enlaces">Convertir bloques de contenido en enlaces</a>), que queramos convertir en un enlace usando un elemento ancla {{HTMLElement("a")}}, dándole un atributo {{HTMLAttrxRef("href", "a")}} (también conocido como «<strong><em>Hypertext Reference</em></strong>», «<strong><em>target</em></strong>» u <strong>objetivo</strong>) que contendrá la dirección web hacia dónde queremos que apunte el enlace.</p>
-
-<pre class="brush: html notranslate">&lt;p&gt;Crea un enlace a
-&lt;a href="https://www.mozilla.org/es-ES/"&gt;la página de inicio de Mozilla&lt;/a&gt;.
-&lt;/p&gt;</pre>
-
-<p>Este código producirá el siguiente resultado:</p>
-
-<p>Crea un enlace a <a class="ignore-external" href="https://www.mozilla.org/es-ES/">la página de inicio de Mozilla</a>.</p>
-
-<h3 id="Añadir_información_de_asistencia_con_el_atributo_title">Añadir información de asistencia con el atributo <code>title</code></h3>
-
-<p>Otro atributo que posiblemente quieras agregar a tus enlaces es <code>title</code>. El título contiene información adicional sobre el enlace, como qué tipo de información contiene la página o cosas que debes tener en cuenta en el sitio web.</p>
-
-<pre class="brush: html notranslate">&lt;p&gt;Crea un enlace a
-&lt;a href="https://www.mozilla.org/es-ES/"
-   title="El mejor lugar para encontrar más información acerca de la misión de Mozilla
-          y cómo contribuir"&gt;la página de inicio de Mozilla&lt;/a&gt;.
-&lt;/p&gt;</pre>
-
-<p>Este código producirá el siguiente resultado (el título se mostrará al pasar el ratón sobre el texto del enlace):</p>
-
-<p>Crea un enlace a <a class="ignore-external" href="https://www.mozilla.org/es-ES/" title="El mejor lugar para encontrar más información sobre la misión de Mozilla y cómo contribuir">la página de inicio de Mozilla</a>.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: El título de un enlace solo será visible al pasar el ratón por encima, lo cual significa que los usuarios que naveguen usando los controles de sus teclados, o pantallas táctiles, tendrán dificultades para acceder a la información proporcionada por el título. Si la información del título es verdaderamente importante para el uso de la página, deberemos presentar el título de manera que sea accesible a todos los usuarios, por ejemplo incluyéndola como parte del texto del enlace.</p>
-</div>
-
-<h3 id="Aprendizaje_activo_crea_tu_propio_ejemplo_de_enlace">Aprendizaje activo: crea tu propio ejemplo de enlace</h3>
-
-<p>Es momento del aprendizaje activo — crea un documento HTML con tu editor de código (nuestra <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">plantilla de aprendizaje</a> te hará la tarea más llevadera).</p>
-
-<ul>
- <li>En el cuerpo del HTML (<code>body</code>), añade uno o más párrafos o cualquier otro tipo de contenido de los que ya conoces.</li>
- <li>Convierte algún texto en enlaces.</li>
- <li>Incluye atributos de título (<code>title</code>).</li>
-</ul>
-
-<h3 id="Convertir_bloques_de_contenido_en_enlaces">Convertir bloques de contenido en enlaces</h3>
-
-<p>Como hemos mencionado anteriormente, puedes convertir cualquier contenido en un enlace, incluso {{web.link("/es/docs/Learn/HTML/Getting_started#Elementos_de_bloque_y_elementos_en_línea", "Elementos de bloque y elementos en línea")}}. Si quieres convertir una imagen en un enlace, simplemente usa el elemento {{HTMLElement("a")}} encerrando el elemento {{HTMLElement("img")}} entre <code>&lt;a&gt;</code> y <code>&lt;/a&gt;</code>.</p>
-
-<pre class="brush: html notranslate">&lt;a href="https://www.mozilla.org/es-ES/"&gt;
-  &lt;img src="mozilla-image.png" alt="Logotipo de Mozilla que dirige a la página inicial de Mozilla"&gt;
-&lt;/a&gt;</pre>
-
-<div class="note">
-<p><strong>Nota</strong>: Encontrarás mucho más sobre el manejo de imágenes en próximos artículos en esta web.</p>
-</div>
-
-<h2 id="Primer_acercamiento_a_URLs_y_rutas">Primer acercamiento a URLs y rutas</h2>
-
-<p>Para comprender completamente a dónde apuntan los enlaces, necesitas conocer las URLs y las rutas. En esta sección encontrarás la información que necesitas sobre el tema.</p>
-
-<p>Una localizadora uniforme de recursos (URL, de las iniciales en inglés de «<em>Uniform Resource Locator</em>») es simplemente una secuencia de caracteres de texto que definen donde está situado algo en la web. Por ejemplo, la página de Mozilla está ubicada en <code>https://www.mozilla.org/es-ES/</code>.</p>
-
-<p>Las URLs utilizan rutas para encontrar los archivos. Las rutas especifican dónde se encuentra el archivo que buscas dentro del sistema de archivos. Veamos un ejemplo de una estructura de directorios (ve el directorio <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/creating-hyperlinks">creating-hyperlinks</a>).</p>
-
-<p><img alt="Una estructura de directorios simple. El directorio principal se llama creating-hyperlinks y contiene dos archivos llamados index.html y contacts.html, y dos directorios llamados projects y pdfs, que contiene un archivo index.html y un archivo project-brief.pdf, respectivamente" src="https://mdn.mozillademos.org/files/12409/simple-directory.png" style="display: block; margin: 0 auto;"></p>
-
-<p>Al directorio <strong>raíz</strong> de esta estructura de directorios lo hemos llamado <code>creating-hyperlinks</code>. Al trabajar en modo local en una web, habrá un directorio que contendrá toda la información. En nuestro ejemplo, dentro de la raíz, encontramos el archivo <code>index.html</code> y el archivo <code>contacts.html</code>. En una web real, <code>index.html</code> es el punto de entrada a la web, lo que se conoce como <em>página de inicio</em>.</p>
-
-<p>Observamos también dos directorios dentro de nuestro directorio raíz que son: <code>pdfs</code> y <code>projects</code>. Cada uno de ellos tiene archivos en su interior — un archivo PDF (<code>project-brief.pdf</code>) y un archivo <code>index.html</code>, respectivamente. Observa que es posible tener sin problemas dos archivos <code>index.html</code> en un proyecto siempre y cuando se encuentren alojados en ubicaciones diferentes de nuestra estructura de archivos — muchos sitios web lo hacen. El segundo <code>index.html</code> será la página de inicio para la información relativa a los proyectos.</p>
-
-<ul>
- <li>
-  <p><strong>En el mismo directorio</strong>: Si queremos incluir un hipervínculo dentro del archivo <code>index.html</code> (el <code>index.html</code> del nivel más alto) que apunte al archivo <code>contacts.html</code>, simplemente especificaremos el nombre del archivo al que hacemos referencia, porque se encuentra en el mismo directorio en el que se encuentra el archivo <code>index.html</code> desde donde lo queremos llamar. Por lo tanto, usamos la URL <code>contacts.html</code> — veamos el código:</p>
-
-  <pre class="brush: html notranslate">&lt;p&gt;¿Quieres contactar con un miembro específico del personal?
-Encuentra los detalles en nuestra &lt;a href="contacts.html"&gt;página de contactos&lt;/a&gt;.&lt;/p&gt;</pre>
- </li>
- <li>
-  <p><strong>Bajando por la estructura de subdirectorios</strong>: Si queremos incluir un hipervínculo dentro del archivo <code>index.html</code> (el <code>index.html</code> de nivel más alto) que apunta a <code>projects/index.html</code>, debemos bajar hasta el directorio <code>projects</code> antes de indicar al archivo al que queremos enlazar. Para ello especificamos el nombre del directorio y le añadimos una barra inclinada hacia adelante, y a continuación el nombre del archivo. Por lo tanto, utilizaremos la URL <code>projects/index.html</code>:</p>
-
-  <pre class="brush: html notranslate">&lt;p&gt;Visita mi &lt;a href="projects/index.html"&gt;página de inicio del proyecto&lt;/a&gt;.&lt;/p&gt;</pre>
- </li>
- <li>
-  <p><strong>Subiendo por nuestro sistema de directorios</strong>: Si ahora queremos incluir un hipervínculo dentro del archivo <code>projects/index.html</code> que apunte a <code>pdfs/project-brief.pdf</code>, hay que subir un nivel en nuestro sistema de directorios, para luego bajar al directorio <code>pdf</code>. Para «Subir un nivel» utilizamos los dos puntos — (<code>..</code>) — por lo que usamos la URL <code>../pdfs/project-brief.pdf</code>:</p>
-
-  <pre class="brush: html notranslate">&lt;p&gt;Un enlace a mi&lt;a href="../pdfs/project-brief.pdf"&gt;resumen del proyecto&lt;/a&gt;.&lt;/p&gt;</pre>
- </li>
-</ul>
-
-<div class="note">
-<p><strong>Nota</strong>: Podemos combinar más de una instancia de estas características y generar URLs más complejas, si es necesario, por ejemplo: <code>../../../ruta/compleja/a/mi/archivo.html</code>.</p>
-</div>
-
-<h3 id="Fragmentos_de_documento">Fragmentos de documento</h3>
-
-<p>Es posible apuntar hacia una parte concreta de un documento HTML en vez de a todo un documento. Para ello hay que asignar previamente un atributo {{HTMLAttrxRef("id")}} al elemento hacia el que apuntamos. Esto se debe hacer en el encabezado y quedará así:</p>
-
-<pre class="brush: html notranslate">&lt;h2 id="Dirección_de_envío"&gt;Dirección de envío&lt;/h2&gt;</pre>
-
-<p>Posteriormente para hacer referencia a este <code>id</code> concreto, lo añadiremos al final de la URL precedido por una almohadilla — veamos el ejemplo:</p>
-
-<pre class="brush: html notranslate">&lt;p&gt;¿Quieres mandarnos una carta? Aquí tienes nuestra &lt;a href="contacts.html#Dirección_de_envío"&gt;Dirección de envío&lt;/a&gt;.&lt;/p&gt;</pre>
-
-<p>También podemos usar esta referencia a un fragmento de documento para apuntar hacia otra <em>parte del mismo documento</em>:</p>
-
-<pre class="brush: html notranslate">&lt;p&gt;La &lt;a href="#Dirección_de_envío"&gt;Dirección de envío de la empresa&lt;/a&gt; se encuentra al final de esta página.&lt;/p&gt;</pre>
-
-<h3 id="URLs_absolutas_y_relativas">URLs absolutas y relativas</h3>
-
-<p>Dos términos que encontrarás en la Web son <strong>URL absoluta</strong> y <strong>URL relativa:</strong></p>
-
-<p><strong>URL absoluta</strong>: Hace referencia a una dirección definida por su ubicación absoluta en la web, esta incluye el {{Glossary("protocol", "protocolo")}} y el {{Glossary("domain name", "nombre del dominio")}}. Por ejemplo, si subes una página de inicio <code>index.html</code> a un directorio llamado <code>projects</code> que se encuentra dentro de la raíz de un servidor web, y el dominio del sitio web es <code>http://www.example.com</code>, se podrá acceder a la página desde <code>http://www.example.com/projects/index.html</code> (o simplemente <code>http://www.example.com/projects/</code>, ya que la mayoría de los servidores web buscan la página de inicio <code>index.html</code> para cargarla por omisión si no se les especifica otra en la URL).</p>
-
-<p>Una URL absoluta siempre apuntará a la misma dirección, sin importar desde dónde se utilice.</p>
-
-<p>Una <strong>URL relativa</strong>: Hace referencia a una dirección que depende de la posición del archivo desde donde se utiliza — son las que vimos en la sección anterior. Por ejemplo, si desde un archivo ubicado en <code>http://www.example.com/projects/index.html</code> queremos enlazar hacia un archivo PDF ubicado en el mismo directorio, la URL sería simplemente el nombre del archivo (por ejemplo: <code>project-brief.pdf</code>) no necesitamos más información. Si el archivo PDF está situado en un subdirectorio dentro de <code>projects</code> llamado <code>pdfs</code>, la URL relativa es: <code>pdfs/project-brief.pdf</code> (la URL absoluta equivalente sería: <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>).</p>
-
-<p>Una URL relativa hará referencia a diferentes direcciones según dónde se encuentre el archivo desde el cual se utiliza — por ejemplo, si movemos nuestro archivo <code>index.html</code> del directorio <code>projects</code> a la raíz del sitio web (el nivel más alto, no cualquiera de los otros directorios), la URL relativa <code>pdfs/project-brief.pdf</code> ahora hará referencia a <code>http://www.example.com/pdfs/project-brief.pdf</code>, en lugar de a <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>.</p>
-
-<p>Por supuesto, la ubicación del archivo <code>pdfs/project-brief.pdf</code> y del directorio <code>pdfs</code> no cambian de repente cuando mueves el archivo <code>index.html</code>; esto hará que tus enlaces apunten a un sitio equivocado y no funcionarán correctamente al hacer clic en ellos. ¡Por lo tanto debes tener cuidado!</p>
-
-<h2 id="Buenas_prácticas_en_el_uso_de_los_enlaces">Buenas prácticas en el uso de los enlaces</h2>
-
-<p>Hay algunas buenas prácticas que debemos respetar cuando escribimos enlaces. Veamos cuáles son.</p>
-
-<ul>
-</ul>
-
-<h3 id="Redacción_clara_del_enlace">Redacción clara del enlace</h3>
-
-<p>Es fácil rellenar de enlaces una página, sin más. Pero esto no basta. Hay que lograr que nuestros enlaces sean <em>accesibles</em> para todo tipo de lectores, sin importar el contexto o las herramientas que prefieran. Por ejemplo:</p>
-
-<ul>
- <li>Los usuarios de lectores de pantalla suelen saltar de enlace a enlace en la página y los leen todos sin contexto.</li>
- <li>Los motores de búsqueda utilizan el texto de los enlaces para indizar los archivos buscados, por lo que es una buena idea incluir palabras clave al definir el texto de los enlaces para describir de forma efectiva el sitio al que apuntan.</li>
- <li>Los usuarios visuales suelen echar un vistazo rápido a la página y leen solo lo que les interesa, en lugar de leer todo el texto palabra por palabra, y sus miradas van directamente a las características destacadas de la página, como son los enlaces. Este tipo de usuarios encuentra útiles los textos descriptivos que estos contienen.</li>
-</ul>
-
-<p>Veamos un ejemplo concreto:</p>
-
-<p><em><strong>Buen</strong> texto en un enlace</em>: <a href="https://firefox.com">Descargar Firefox</a></p>
-
-<pre class="brush: html notranslate">&lt;p&gt;&lt;a href="https://firefox.com/"&gt;
-  Descargar Firefox
-&lt;/a&gt;&lt;/p&gt;</pre>
-
-<p><em><strong>Mal</strong> texto en un enlace</em>: <a href="https://firefox.com/">Pulsar aquí</a> para descargar Firefox</p>
-
-<pre class="brush: html notranslate">&lt;p&gt;&lt;a href="https://firefox.com/"&gt;
-  Haz clic aquí
-&lt;/a&gt;
-para descargar Firefox&lt;/p&gt;
-</pre>
-
-<p>Otras indicaciones:</p>
-
-<ul>
- <li>No repetir la URL como parte del texto — Las URLs suenan horrible, y todavía suenan peor si las lee un lector de pantalla, letra por letra.</li>
- <li>No escribir «<em>link</em>» o «<em>link a</em>» o «enlace» o «enlace a» en el texto del enlace porque es redundante. Los lectores automáticos indican que hay un enlace al encontrarlo. Los usuarios también saben que hay un enlace, porque normalmente se suele cambiar el color del texto y se subraya (no hay que romper esta convención, porque los usuarios están acostumbrados a ella).</li>
- <li>Redacta la etiqueta del enlace de la manera más breve y concisa posible — los textos de enlace largos son especialmente molestos para los usuarios que utilizan lectores automáticos, porque tienen que escuchar todo el texto del enlace.</li>
- <li>Minimiza los casos en los que varias copias del mismo texto están vinculadas a diferentes lugares. Esto puede causar problemas a los usuarios de lectores de pantalla, si hay una lista de enlaces fuera de contexto que están etiquetados como "haz clic aquí", "haz clic aquí", "haz clic aquí".</li>
-</ul>
-
-<h3 id="Utiliza_enlaces_relativos_siempre_que_sea_posible">Utiliza enlaces relativos siempre que sea posible</h3>
-
-<p>A partir de las indicaciones anteriores podemos llegar a pensar que es mejor utilizar referencias absolutas en todos los casos; después de todo, estas no se rompen cuando la página se traslada como ocurre con las referencias relativas. Sin embargo, debes utilizar enlaces relativos siempre que sea posible cuando enlaces a otras ubicaciones dentro del <em>mismo sitio web</em>. Cuando vinculas a otro sitio web, deberás utilizar un vínculo absoluto.</p>
-
-<ul>
- <li>Primero, porque el código es mucho más fácil de leer — las URLs relativas suelen ser mucho más cortas que las absolutas, lo que hace que el código sea mucho más fácil de leer.</li>
- <li>Segundo, resulta más eficiente utilizar URLs relativas cuando sea posible. Cuando usas una URL absoluta, el navegador comienza buscando la ubicación real del servidor en el Sistema de nombres de dominio ({{Glossary("DNS")}}), consulta {{web.link("/es/docs/Learn/Getting_started_with_the_web/How_the_Web_works", "Cómo funciona la web")}} para obtener más información). Entonces va a ese servidor y busca el archivo solicitado. En cambio, con una URL relativa, el navegador simplemente busca el archivo solicitado en el mismo servidor. Si usas URLs absolutas donde las URLs relativas lo harían, constantemente estás haciendo que tu navegador haga un trabajo adicional, lo cual significa que funcionará de manera menos eficiente.</li>
-</ul>
-
-<h3 id="Indica_claramente_los_recursos_no_HTML">Indica claramente los recursos no HTML</h3>
-
-<p>Cuando damos referencias a recursos para descargarlos (como documentos en formato PDF o Word) o para reproducirlos (como archivos de audio o vídeo) o que tengan un efecto inesperado (una ventana emergente) hay que indicarlo para no confundir al usuario.</p>
-
-<p>Por ejemplo:</p>
-
-<ul>
- <li>Si tienes una conexión con poco ancho de banda, pulsas un enlace y comienza a descargar un archivo pesado de forma inesperada.</li>
- <li>Si no tienes instalado el reproductor Flash, pulsas un enlace y te conduce a una página que requiere Flash.</li>
-</ul>
-
-<p>Veamos algunos ejemplos, para ver qué texto puede ser aconsejable en estos casos:</p>
-
-<pre class="brush: html notranslate">&lt;p&gt;&lt;a href="http://www.example.com/large-report.pdf"&gt;
-  Descarga el informe de ventas (PDF, 10MB)
-&lt;/a&gt;&lt;/p&gt;
-
-&lt;p&gt;&lt;a href="http://www.example.com/video-stream/"&gt;
-  Reproduce el vídeo (el flujo de datos se abre en una pestaña independiente, calidad HD)
-&lt;/a&gt;&lt;/p&gt;
-
-&lt;p&gt;&lt;a href="http://www.example.com/car-game"&gt;
-  Juega al juego del automóvil (requiere Flash)
-&lt;/a&gt;&lt;/p&gt;</pre>
-
-<h3 id="Utiliza_el_atributo_download_al_enlazar_una_descarga">Utiliza el atributo <code>download</code> al enlazar una descarga</h3>
-
-<p>Si queremos hacer referencia a una descarga en lugar de a algo que abra el navegador, disponemos del atributo <code>download</code> para proporcionar un nombre predeterminado al archivo a guardar. Veamos un ejemplo con un enlace a la descarga de la versión para Windows de Firefox:</p>
-
-<pre class="brush: html notranslate">&lt;a href="https://download.mozilla.org/?product=firefox-latest-ssl&amp;os=win64&amp;lang=es-MX"
-   download="firefox-latest-64bit-installer.exe"&gt;
-  Descarga la última versión de Firefox para Windows (64 bits) (Español, es-MX)
-&lt;/a&gt;</pre>
-
-<h2 id="Aprendizaje_activo_crear_un_menú_de_navegación">Aprendizaje activo: crear un menú de navegación</h2>
-
-<p>Para este ejercicio, deberás crear lo que se conoce como <em>web multipágina</em>: un menú de navegación con enlaces a distintas páginas. Esta es una manera común de crear páginas web — usamos la misma estructura en todas las páginas, incluida la que contiene el menú de navegación. Cuando los usuarios pulsen los enlaces tendrán la sensación de que están en la misma página y que solo cambia el contenido mostrado.</p>
-
-<p>Tendrás que hacer copias locales, en el mismo directorio, de las cuatro siguientes páginas (revisa el directorio <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-start">navigation-menu-start</a> para el listado completo):</p>
-
-<ul>
- <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/index.html">index.html</a></li>
- <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/projects.html">projects.html</a></li>
- <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/pictures.html">pictures.html</a></li>
- <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/social.html">social.html</a></li>
-</ul>
-
-<p>A continuación:</p>
-
-<ol>
- <li>Añade una lista no ordenada en el lugar adecuado de la página, que contenga los nombres de las páginas a las que enlazas. Un menú de navegación normalmente es una lista de enlaces (<em>links</em>), por lo que esto es semánticamente correcto.</li>
- <li>Convierte cada nombre en un enlace a esa página.</li>
- <li>Copia el menú de navegación en cada una de las páginas.</li>
- <li>En cada página, elimina solo el enlace que hace referencia a sí mismo (es confuso y no tiene sentido que una página se llame a sí misma, y la falta del enlace actúa como recordatorio de la página en la que se está en cada momento).</li>
-</ol>
-
-<p>El ejercicio terminado debería crear una página como la siguiente:</p>
-
-<p><img alt="Un ejemplo de un menú de navegación HTML simple, con inicio, imágenes, proyectos y elementos del menú social" src="https://mdn.mozillademos.org/files/12411/navigation-example.png" style="display: block; margin: 0 auto;"></p>
-
-<div class="note">
-<p><strong>Nota</strong>: Si ahora encallas, o no estás seguro de haberlo conseguido, revisa el directorio <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up">navigation-menu-marked-up</a> para ver la respuesta correcta.</p>
-</div>
-
-<h2 id="Enlace_a_correo_electrónico">Enlace a correo electrónico</h2>
-
-<p>Es posible crear enlaces o botones que, cuando se pulsan, abren un nuevo correo saliente en lugar de enlazar a un recurso o página. Esto se consigue con el elemento ancla {{HTMLElement("a")}} y el elemento <code>mailto:</code> seguido del esquema de la URL.</p>
-
-<p>En su forma más básica, un enlace <code>mailto:</code> simplemente contiene la dirección de correo electrónico de los destinatarios. Por ejemplo:</p>
-
-<pre class="brush: html notranslate">&lt;a href="mailto:nowhere@mozilla.org"&gt;Enviar correo electrónico a ninguna parte&lt;/a&gt;
-</pre>
-
-<p>Esto da como resultado un enlace que se ve así: <a href="mailto:nowhere@mozilla.org"> Enviar correo electrónico a ninguna parte</a>.</p>
-
-<p>De hecho, incluso el atributo con la dirección de correo electrónico es opcional. Si lo omites y tu ({{HTMLAttrxRef("href", "a")}} simplemente es "mailto:", aparecerá una nueva ventana de correo saliente en el gestor de correo sin la dirección del destinatario. Esto es útil cuando queremos compartir enlaces que los usuarios puedan pulsar para enviar un correo electrónico y elegir un destinatario posteriormente.</p>
-
-<h3 id="Especificar_detalles">Especificar detalles</h3>
-
-<p>Además de la dirección de correo electrónico, puedes proporcionar otra información. De hecho, puedes incluir cualquier campo estándar contenido en el encabezado de cualquier mensaje en la URL <code>mailto</code> que proporciones. Los más utilizados son el «<code>subject</code>» (asunto), «<code>cc</code>» (con copia a) o «<code>bcc</code>» (copia oculta), y «<code>body</code>» (cuerpo del mensaje, que no es realmente un campo de la cabecera, pero permite especificar un mensaje breve para el nuevo correo electrónico). Cada campo y su valor se especifican como un argumento de la consulta.</p>
-
-<p>Veamos un ejemplo que incluye estos campos:</p>
-
-<pre class="brush: html notranslate">&lt;a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&amp;bcc=name3@rapidtables.com&amp;subject=The%20subject%20of%20the%20email&amp;body=The%20body%20of%20the%20email"&gt;
-  Enviar un correo electrónico cc, bcc, asunto y cuerpo
-&lt;/a&gt;</pre>
-
-<div class="note">
-<p><strong>Nota</strong>: Los valores de cada campo deben tener la URL codificada, es decir, sin caracteres no imprimibles (caracteres invisibles, tabulaciones, retornos de carro y saltos de página) y espacios con codificación porcentual (%20) {{Interwiki("wikipedia", "Código porciento")}}. También hay que tener en cuenta el uso del signo de interrogación (?) para separar la URL principal de los valores de los campos, y el símbolo ampersand (&amp;) para separar cada campo dentro del enlace <code>mailto:</code>. Esta es la notación de consulta URL estándar. Lee {{web.link("/es/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data#The_GET_method", "el método GET")}} para comprender mejor qué notación de consulta URL se usa comúnmente.</p>
-</div>
-
-<p>A continuación otros ejemplos de utilización de enlaces <code>mailto</code>:</p>
-
-<ul>
- <li><a href="mailto:">mailto:</a></li>
- <li><a href="mailto:nowhere@mozilla.org">mailto:nowhere@mozilla.org</a></li>
- <li><a href="mailto:nowhere@mozilla.org,nobody@mozilla.org">mailto:nowhere@mozilla.org,nobody@mozilla.org</a></li>
- <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org</a></li>
- <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&amp;subject=This%20is%20the%20subject">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&amp;subject=This%20is%20the%20subject</a></li>
-</ul>
-
-<h2 id="¡Pon_a_prueba_tus_habilidades!">¡Pon a prueba tus habilidades!</h2>
-
-<p>Has llegado al final de este artículo, pero ¿puedes recordar la información más importante? Encuentra más ejercicios con los que comprobar que has retenido esta información antes de seguir adelante; consulta {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_Links", "Pon a prueba tus habilidades: Enlaces")}}.</p>
-
-<h2 id="Resumen">Resumen</h2>
-
-<p>Eso es todo en cuanto a enlaces, ¡por ahora! Volveremos a ellos más tarde en este curso cuando comencemos a usar estilos. Lo siguiente en HTML, será aprender la semántica de texto para usar algunas características avanzadas/inusuales que nos serán utilidad — Formato de texto avanzado será la próxima parada.</p>
-
-<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</p>
-
-<h2 id="En_este_módulo">En este módulo</h2>
-
-<ul>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}</li>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "¿Qué hay en el «head»? Metadatos en HTML")}}</li>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Fundamentos de texto HTML")}}</li>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Crear hipervínculos")}}</li>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Formateo de texto avanzado")}}</li>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Estructura web y documentación")}}</li>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Depurar HTML")}}</li>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Marcado para una carta")}}</li>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Estructuración del contenido de una página")}}</li>
-</ul>
diff --git a/files/es/learn/html/introduction_to_html/creating_hyperlinks/index.md b/files/es/learn/html/introduction_to_html/creating_hyperlinks/index.md
new file mode 100644
index 00000000000000..a8fe004cf171e1
--- /dev/null
+++ b/files/es/learn/html/introduction_to_html/creating_hyperlinks/index.md
@@ -0,0 +1,343 @@
+---
+title: Crear hipervínculos
+slug: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
+tags:
+  - Aprender
+  - CodingScripting
+  - Guía
+  - HTML
+  - HTTP
+  - Novato
+  - Principiante
+  - Title
+  - URL
+  - enlace
+  - hiperenlaces
+  - hipervínculos
+  - href
+  - referencia absoluta
+  - referencia relativa
+  - título
+  - urls
+translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
+original_slug: Learn/HTML/Introduccion_a_HTML/Creating_hyperlinks
+---
+{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}
+
+Los hipervínculos (o enlaces) son elementos verdaderamente importantes — son los que hacen que la web sea _**web**_. Este artículo expone la sintaxis necesaria para crear un enlace, además contiene un catálogo de buenas prácticas para crearlos.
+
+<table>
+  <tbody>
+    <tr>
+      <th scope="row">Prerrequisitos:</th>
+      <td>
+        Estar familiarizado con HTML, cubierto en
+        {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}.
+        Aplicación de formato a texto en documentos HTML, según lo expuesto en
+        la sección
+        {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "fundamentos de texto HTML")}}.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Objetivo:</th>
+      <td>
+        Aprender a implementar un <em>hipervínculo</em> de forma efectiva y
+        enlazar múltiples archivos.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## ¿Qué es un hipervínculo?
+
+Los hipervínculos son una de las innovaciones más interesantes que ofrece la Web. Han formado parte de esta desde el principio, pero hacen que la web sea _web_ : Los hipervínculos nos permiten vincular documentos a otros documentos o recursos, vincular a partes específicas de documentos o hacer que las aplicaciones estén disponibles en una dirección web. Prácticamente cualquier contenido web se puede convertir en un enlace que, al pulsarlo (activarlo), dirija el navegador a la dirección web a la que apunta el enlace ({{Glossary("URL")}}).
+
+> **Nota:** Una URL puede apuntar a archivos HTML, archivos de texto, imágenes, documentos de texto, archivos de audio o vídeo, y cualquier otra cosa que se pueda mostrar en la web. Si el navegador no sabe cómo manejar el archivo, te preguntará si lo quieres abrir (en cuyo caso la tarea de abrirlo y manejarlo se transferirá a la aplicación nativa instalada en el dispositivo) o si lo quieres descargar (en cuyo caso podrás ocuparte de él más tarde).
+
+El sitio web de la BBC, por ejemplo, contiene una gran cantidad de enlaces que apuntan a multitud de noticias en diferentes zonas de el sitio (funcionalidad de navegación), zonas de acceso/registro (herramientas de usuario) y otras.
+
+![Portada de bbc.co.uk, que muestra muchas noticias y la funcionalidad del menú de navegación](https://mdn.mozillademos.org/files/12405/bbc-homepage.png)
+
+## Anatomía de un enlace
+
+Un enlace básico se crea incluyendo el texto (o cualquier otro contenido, ve [Convertir bloques de contenido en enlaces](#convertir_bloques_de_contenido_en_enlaces)), que queramos convertir en un enlace usando un elemento ancla {{HTMLElement("a")}}, dándole un atributo {{HTMLAttrxRef("href", "a")}} (también conocido como «**_Hypertext Reference_**», «**_target_**» u **objetivo**) que contendrá la dirección web hacia dónde queremos que apunte el enlace.
+
+```html
+<p>Crea un enlace a
+<a href="https://www.mozilla.org/es-ES/">la página de inicio de Mozilla</a>.
+</p>
+```
+
+Este código producirá el siguiente resultado:
+
+Crea un enlace a <a class="ignore-external" href="https://www.mozilla.org/es-ES/">la página de inicio de Mozilla</a>.
+
+### Añadir información de asistencia con el atributo `title`
+
+Otro atributo que posiblemente quieras agregar a tus enlaces es `title`. El título contiene información adicional sobre el enlace, como qué tipo de información contiene la página o cosas que debes tener en cuenta en el sitio web.
+
+```html
+<p>Crea un enlace a
+<a href="https://www.mozilla.org/es-ES/"
+   title="El mejor lugar para encontrar más información acerca de la misión de Mozilla
+          y cómo contribuir">la página de inicio de Mozilla</a>.
+</p>
+```
+
+Este código producirá el siguiente resultado (el título se mostrará al pasar el ratón sobre el texto del enlace):
+
+Crea un enlace a [la página de inicio de Mozilla](https://www.mozilla.org/es-ES/ "El mejor lugar para encontrar más información sobre la misión de Mozilla y cómo contribuir").
+
+> **Nota:** El título de un enlace solo será visible al pasar el ratón por encima, lo cual significa que los usuarios que naveguen usando los controles de sus teclados, o pantallas táctiles, tendrán dificultades para acceder a la información proporcionada por el título. Si la información del título es verdaderamente importante para el uso de la página, deberemos presentar el título de manera que sea accesible a todos los usuarios, por ejemplo incluyéndola como parte del texto del enlace.
+
+### Aprendizaje activo: crea tu propio ejemplo de enlace
+
+Es momento del aprendizaje activo — crea un documento HTML con tu editor de código (nuestra [plantilla de aprendizaje](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html) te hará la tarea más llevadera).
+
+- En el cuerpo del HTML (`body`), añade uno o más párrafos o cualquier otro tipo de contenido de los que ya conoces.
+- Convierte algún texto en enlaces.
+- Incluye atributos de título (`title`).
+
+### Convertir bloques de contenido en enlaces
+
+Como hemos mencionado anteriormente, puedes convertir cualquier contenido en un enlace, incluso {{web.link("/es/docs/Learn/HTML/Getting_started#Elementos_de_bloque_y_elementos_en_línea", "Elementos de bloque y elementos en línea")}}. Si quieres convertir una imagen en un enlace, simplemente usa el elemento {{HTMLElement("a")}} encerrando el elemento {{HTMLElement("img")}} entre `<a>` y `</a>`.
+
+```html
+<a href="https://www.mozilla.org/es-ES/">
+  <img src="mozilla-image.png" alt="Logotipo de Mozilla que dirige a la página inicial de Mozilla">
+</a>
+```
+
+> **Nota:** Encontrarás mucho más sobre el manejo de imágenes en próximos artículos en esta web.
+
+## Primer acercamiento a URLs y rutas
+
+Para comprender completamente a dónde apuntan los enlaces, necesitas conocer las URLs y las rutas. En esta sección encontrarás la información que necesitas sobre el tema.
+
+Una localizadora uniforme de recursos (URL, de las iniciales en inglés de «_Uniform Resource Locator_») es simplemente una secuencia de caracteres de texto que definen donde está situado algo en la web. Por ejemplo, la página de Mozilla está ubicada en `https://www.mozilla.org/es-ES/`.
+
+Las URLs utilizan rutas para encontrar los archivos. Las rutas especifican dónde se encuentra el archivo que buscas dentro del sistema de archivos. Veamos un ejemplo de una estructura de directorios (ve el directorio [creating-hyperlinks](https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/creating-hyperlinks)).
+
+![Una estructura de directorios simple. El directorio principal se llama creating-hyperlinks y contiene dos archivos llamados index.html y contacts.html, y dos directorios llamados projects y pdfs, que contiene un archivo index.html y un archivo project-brief.pdf, respectivamente](https://mdn.mozillademos.org/files/12409/simple-directory.png)
+
+Al directorio **raíz** de esta estructura de directorios lo hemos llamado `creating-hyperlinks`. Al trabajar en modo local en una web, habrá un directorio que contendrá toda la información. En nuestro ejemplo, dentro de la raíz, encontramos el archivo `index.html` y el archivo `contacts.html`. En una web real, `index.html` es el punto de entrada a la web, lo que se conoce como _página de inicio_.
+
+Observamos también dos directorios dentro de nuestro directorio raíz que son: `pdfs` y `projects`. Cada uno de ellos tiene archivos en su interior — un archivo PDF (`project-brief.pdf`) y un archivo `index.html`, respectivamente. Observa que es posible tener sin problemas dos archivos `index.html` en un proyecto siempre y cuando se encuentren alojados en ubicaciones diferentes de nuestra estructura de archivos — muchos sitios web lo hacen. El segundo `index.html` será la página de inicio para la información relativa a los proyectos.
+
+- **En el mismo directorio**: Si queremos incluir un hipervínculo dentro del archivo `index.html` (el `index.html` del nivel más alto) que apunte al archivo `contacts.html`, simplemente especificaremos el nombre del archivo al que hacemos referencia, porque se encuentra en el mismo directorio en el que se encuentra el archivo `index.html` desde donde lo queremos llamar. Por lo tanto, usamos la URL `contacts.html` — veamos el código:
+
+  ```html
+  <p>¿Quieres contactar con un miembro específico del personal?
+  Encuentra los detalles en nuestra <a href="contacts.html">página de contactos</a>.</p>
+  ```
+
+- **Bajando por la estructura de subdirectorios**: Si queremos incluir un hipervínculo dentro del archivo `index.html` (el `index.html` de nivel más alto) que apunta a `projects/index.html`, debemos bajar hasta el directorio `projects` antes de indicar al archivo al que queremos enlazar. Para ello especificamos el nombre del directorio y le añadimos una barra inclinada hacia adelante, y a continuación el nombre del archivo. Por lo tanto, utilizaremos la URL `projects/index.html`:
+
+  ```html
+  <p>Visita mi <a href="projects/index.html">página de inicio del proyecto</a>.</p>
+  ```
+
+- **Subiendo por nuestro sistema de directorios**: Si ahora queremos incluir un hipervínculo dentro del archivo `projects/index.html` que apunte a `pdfs/project-brief.pdf`, hay que subir un nivel en nuestro sistema de directorios, para luego bajar al directorio `pdf`. Para «Subir un nivel» utilizamos los dos puntos — (`..`) — por lo que usamos la URL `../pdfs/project-brief.pdf`:
+
+  ```html
+  <p>Un enlace a mi<a href="../pdfs/project-brief.pdf">resumen del proyecto</a>.</p>
+  ```
+
+> **Nota:** Podemos combinar más de una instancia de estas características y generar URLs más complejas, si es necesario, por ejemplo: `../../../ruta/compleja/a/mi/archivo.html`.
+
+### Fragmentos de documento
+
+Es posible apuntar hacia una parte concreta de un documento HTML en vez de a todo un documento. Para ello hay que asignar previamente un atributo {{HTMLAttrxRef("id")}} al elemento hacia el que apuntamos. Esto se debe hacer en el encabezado y quedará así:
+
+```html
+<h2 id="Dirección_de_envío">Dirección de envío</h2>
+```
+
+Posteriormente para hacer referencia a este `id` concreto, lo añadiremos al final de la URL precedido por una almohadilla — veamos el ejemplo:
+
+```html
+<p>¿Quieres mandarnos una carta? Aquí tienes nuestra <a href="contacts.html#Dirección_de_envío">Dirección de envío</a>.</p>
+```
+
+También podemos usar esta referencia a un fragmento de documento para apuntar hacia otra _parte del mismo documento_:
+
+```html
+<p>La <a href="#Dirección_de_envío">Dirección de envío de la empresa</a> se encuentra al final de esta página.</p>
+```
+
+### URLs absolutas y relativas
+
+Dos términos que encontrarás en la Web son **URL absoluta** y **URL relativa:**
+
+**URL absoluta**: Hace referencia a una dirección definida por su ubicación absoluta en la web, esta incluye el {{Glossary("protocol", "protocolo")}} y el {{Glossary("domain name", "nombre del dominio")}}. Por ejemplo, si subes una página de inicio `index.html` a un directorio llamado `projects` que se encuentra dentro de la raíz de un servidor web, y el dominio del sitio web es `http://www.example.com`, se podrá acceder a la página desde `http://www.example.com/projects/index.html` (o simplemente `http://www.example.com/projects/`, ya que la mayoría de los servidores web buscan la página de inicio `index.html` para cargarla por omisión si no se les especifica otra en la URL).
+
+Una URL absoluta siempre apuntará a la misma dirección, sin importar desde dónde se utilice.
+
+Una **URL relativa**: Hace referencia a una dirección que depende de la posición del archivo desde donde se utiliza — son las que vimos en la sección anterior. Por ejemplo, si desde un archivo ubicado en `http://www.example.com/projects/index.html` queremos enlazar hacia un archivo PDF ubicado en el mismo directorio, la URL sería simplemente el nombre del archivo (por ejemplo: `project-brief.pdf`) no necesitamos más información. Si el archivo PDF está situado en un subdirectorio dentro de `projects` llamado `pdfs`, la URL relativa es: `pdfs/project-brief.pdf` (la URL absoluta equivalente sería: `http://www.example.com/projects/pdfs/project-brief.pdf`).
+
+Una URL relativa hará referencia a diferentes direcciones según dónde se encuentre el archivo desde el cual se utiliza — por ejemplo, si movemos nuestro archivo `index.html` del directorio `projects` a la raíz del sitio web (el nivel más alto, no cualquiera de los otros directorios), la URL relativa `pdfs/project-brief.pdf` ahora hará referencia a `http://www.example.com/pdfs/project-brief.pdf`, en lugar de a `http://www.example.com/projects/pdfs/project-brief.pdf`.
+
+Por supuesto, la ubicación del archivo `pdfs/project-brief.pdf` y del directorio `pdfs` no cambian de repente cuando mueves el archivo `index.html`; esto hará que tus enlaces apunten a un sitio equivocado y no funcionarán correctamente al hacer clic en ellos. ¡Por lo tanto debes tener cuidado!
+
+## Buenas prácticas en el uso de los enlaces
+
+Hay algunas buenas prácticas que debemos respetar cuando escribimos enlaces. Veamos cuáles son.
+
+### Redacción clara del enlace
+
+Es fácil rellenar de enlaces una página, sin más. Pero esto no basta. Hay que lograr que nuestros enlaces sean _accesibles_ para todo tipo de lectores, sin importar el contexto o las herramientas que prefieran. Por ejemplo:
+
+- Los usuarios de lectores de pantalla suelen saltar de enlace a enlace en la página y los leen todos sin contexto.
+- Los motores de búsqueda utilizan el texto de los enlaces para indizar los archivos buscados, por lo que es una buena idea incluir palabras clave al definir el texto de los enlaces para describir de forma efectiva el sitio al que apuntan.
+- Los usuarios visuales suelen echar un vistazo rápido a la página y leen solo lo que les interesa, en lugar de leer todo el texto palabra por palabra, y sus miradas van directamente a las características destacadas de la página, como son los enlaces. Este tipo de usuarios encuentra útiles los textos descriptivos que estos contienen.
+
+Veamos un ejemplo concreto:
+
+_**Buen** texto en un enlace_: [Descargar Firefox](https://firefox.com)
+
+```html
+<p><a href="https://firefox.com/">
+  Descargar Firefox
+</a></p>
+```
+
+_**Mal** texto en un enlace_: [Pulsar aquí](https://firefox.com/) para descargar Firefox
+
+```html
+<p><a href="https://firefox.com/">
+  Haz clic aquí
+</a>
+para descargar Firefox</p>
+```
+
+Otras indicaciones:
+
+- No repetir la URL como parte del texto — Las URLs suenan horrible, y todavía suenan peor si las lee un lector de pantalla, letra por letra.
+- No escribir «_link_» o «_link a_» o «enlace» o «enlace a» en el texto del enlace porque es redundante. Los lectores automáticos indican que hay un enlace al encontrarlo. Los usuarios también saben que hay un enlace, porque normalmente se suele cambiar el color del texto y se subraya (no hay que romper esta convención, porque los usuarios están acostumbrados a ella).
+- Redacta la etiqueta del enlace de la manera más breve y concisa posible — los textos de enlace largos son especialmente molestos para los usuarios que utilizan lectores automáticos, porque tienen que escuchar todo el texto del enlace.
+- Minimiza los casos en los que varias copias del mismo texto están vinculadas a diferentes lugares. Esto puede causar problemas a los usuarios de lectores de pantalla, si hay una lista de enlaces fuera de contexto que están etiquetados como "haz clic aquí", "haz clic aquí", "haz clic aquí".
+
+### Utiliza enlaces relativos siempre que sea posible
+
+A partir de las indicaciones anteriores podemos llegar a pensar que es mejor utilizar referencias absolutas en todos los casos; después de todo, estas no se rompen cuando la página se traslada como ocurre con las referencias relativas. Sin embargo, debes utilizar enlaces relativos siempre que sea posible cuando enlaces a otras ubicaciones dentro del _mismo sitio web_. Cuando vinculas a otro sitio web, deberás utilizar un vínculo absoluto.
+
+- Primero, porque el código es mucho más fácil de leer — las URLs relativas suelen ser mucho más cortas que las absolutas, lo que hace que el código sea mucho más fácil de leer.
+- Segundo, resulta más eficiente utilizar URLs relativas cuando sea posible. Cuando usas una URL absoluta, el navegador comienza buscando la ubicación real del servidor en el Sistema de nombres de dominio ({{Glossary("DNS")}}), consulta {{web.link("/es/docs/Learn/Getting_started_with_the_web/How_the_Web_works", "Cómo funciona la web")}} para obtener más información). Entonces va a ese servidor y busca el archivo solicitado. En cambio, con una URL relativa, el navegador simplemente busca el archivo solicitado en el mismo servidor. Si usas URLs absolutas donde las URLs relativas lo harían, constantemente estás haciendo que tu navegador haga un trabajo adicional, lo cual significa que funcionará de manera menos eficiente.
+
+### Indica claramente los recursos no HTML
+
+Cuando damos referencias a recursos para descargarlos (como documentos en formato PDF o Word) o para reproducirlos (como archivos de audio o vídeo) o que tengan un efecto inesperado (una ventana emergente) hay que indicarlo para no confundir al usuario.
+
+Por ejemplo:
+
+- Si tienes una conexión con poco ancho de banda, pulsas un enlace y comienza a descargar un archivo pesado de forma inesperada.
+- Si no tienes instalado el reproductor Flash, pulsas un enlace y te conduce a una página que requiere Flash.
+
+Veamos algunos ejemplos, para ver qué texto puede ser aconsejable en estos casos:
+
+```html
+<p><a href="http://www.example.com/large-report.pdf">
+  Descarga el informe de ventas (PDF, 10MB)
+</a></p>
+
+<p><a href="http://www.example.com/video-stream/">
+  Reproduce el vídeo (el flujo de datos se abre en una pestaña independiente, calidad HD)
+</a></p>
+
+<p><a href="http://www.example.com/car-game">
+  Juega al juego del automóvil (requiere Flash)
+</a></p>
+```
+
+### Utiliza el atributo `download` al enlazar una descarga
+
+Si queremos hacer referencia a una descarga en lugar de a algo que abra el navegador, disponemos del atributo `download` para proporcionar un nombre predeterminado al archivo a guardar. Veamos un ejemplo con un enlace a la descarga de la versión para Windows de Firefox:
+
+```html
+<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=es-MX"
+   download="firefox-latest-64bit-installer.exe">
+  Descarga la última versión de Firefox para Windows (64 bits) (Español, es-MX)
+</a>
+```
+
+## Aprendizaje activo: crear un menú de navegación
+
+Para este ejercicio, deberás crear lo que se conoce como _web multipágina_: un menú de navegación con enlaces a distintas páginas. Esta es una manera común de crear páginas web — usamos la misma estructura en todas las páginas, incluida la que contiene el menú de navegación. Cuando los usuarios pulsen los enlaces tendrán la sensación de que están en la misma página y que solo cambia el contenido mostrado.
+
+Tendrás que hacer copias locales, en el mismo directorio, de las cuatro siguientes páginas (revisa el directorio [navigation-menu-start](https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-start) para el listado completo):
+
+- [index.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/index.html)
+- [projects.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/projects.html)
+- [pictures.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/pictures.html)
+- [social.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/social.html)
+
+A continuación:
+
+1.  Añade una lista no ordenada en el lugar adecuado de la página, que contenga los nombres de las páginas a las que enlazas. Un menú de navegación normalmente es una lista de enlaces (_links_), por lo que esto es semánticamente correcto.
+2.  Convierte cada nombre en un enlace a esa página.
+3.  Copia el menú de navegación en cada una de las páginas.
+4.  En cada página, elimina solo el enlace que hace referencia a sí mismo (es confuso y no tiene sentido que una página se llame a sí misma, y la falta del enlace actúa como recordatorio de la página en la que se está en cada momento).
+
+El ejercicio terminado debería crear una página como la siguiente:
+
+![Un ejemplo de un menú de navegación HTML simple, con inicio, imágenes, proyectos y elementos del menú social](https://mdn.mozillademos.org/files/12411/navigation-example.png)
+
+> **Nota:** Si ahora encallas, o no estás seguro de haberlo conseguido, revisa el directorio [navigation-menu-marked-up](https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up) para ver la respuesta correcta.
+
+## Enlace a correo electrónico
+
+Es posible crear enlaces o botones que, cuando se pulsan, abren un nuevo correo saliente en lugar de enlazar a un recurso o página. Esto se consigue con el elemento ancla {{HTMLElement("a")}} y el elemento `mailto:` seguido del esquema de la URL.
+
+En su forma más básica, un enlace `mailto:` simplemente contiene la dirección de correo electrónico de los destinatarios. Por ejemplo:
+
+```html
+<a href="mailto:nowhere@mozilla.org">Enviar correo electrónico a ninguna parte</a>
+```
+
+Esto da como resultado un enlace que se ve así: [Enviar correo electrónico a ninguna parte](mailto:nowhere@mozilla.org).
+
+De hecho, incluso el atributo con la dirección de correo electrónico es opcional. Si lo omites y tu ({{HTMLAttrxRef("href", "a")}} simplemente es "mailto:", aparecerá una nueva ventana de correo saliente en el gestor de correo sin la dirección del destinatario. Esto es útil cuando queremos compartir enlaces que los usuarios puedan pulsar para enviar un correo electrónico y elegir un destinatario posteriormente.
+
+### Especificar detalles
+
+Además de la dirección de correo electrónico, puedes proporcionar otra información. De hecho, puedes incluir cualquier campo estándar contenido en el encabezado de cualquier mensaje en la URL `mailto` que proporciones. Los más utilizados son el «`subject`» (asunto), «`cc`» (con copia a) o «`bcc`» (copia oculta), y «`body`» (cuerpo del mensaje, que no es realmente un campo de la cabecera, pero permite especificar un mensaje breve para el nuevo correo electrónico). Cada campo y su valor se especifican como un argumento de la consulta.
+
+Veamos un ejemplo que incluye estos campos:
+
+```html
+<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">
+  Enviar un correo electrónico cc, bcc, asunto y cuerpo
+</a>
+```
+
+> **Nota:** Los valores de cada campo deben tener la URL codificada, es decir, sin caracteres no imprimibles (caracteres invisibles, tabulaciones, retornos de carro y saltos de página) y espacios con codificación porcentual (%20) {{Interwiki("wikipedia", "Código porciento")}}. También hay que tener en cuenta el uso del signo de interrogación (?) para separar la URL principal de los valores de los campos, y el símbolo ampersand (&) para separar cada campo dentro del enlace `mailto:`. Esta es la notación de consulta URL estándar. Lee {{web.link("/es/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data#The_GET_method", "el método GET")}} para comprender mejor qué notación de consulta URL se usa comúnmente.
+
+A continuación otros ejemplos de utilización de enlaces `mailto`:
+
+- <mailto:>
+- <mailto:nowhere@mozilla.org>
+- <mailto:nowhere@mozilla.org,nobody@mozilla.org>
+- <mailto:nowhere@mozilla.org?cc=nobody@mozilla.org>
+- <mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject>
+
+## ¡Pon a prueba tus habilidades!
+
+Has llegado al final de este artículo, pero ¿puedes recordar la información más importante? Encuentra más ejercicios con los que comprobar que has retenido esta información antes de seguir adelante; consulta {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_Links", "Pon a prueba tus habilidades: Enlaces")}}.
+
+## Resumen
+
+Eso es todo en cuanto a enlaces, ¡por ahora! Volveremos a ellos más tarde en este curso cuando comencemos a usar estilos. Lo siguiente en HTML, será aprender la semántica de texto para usar algunas características avanzadas/inusuales que nos serán utilidad — Formato de texto avanzado será la próxima parada.
+
+{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}
+
+## En este módulo
+
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "¿Qué hay en el «head»? Metadatos en HTML")}}
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Fundamentos de texto HTML")}}
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Crear hipervínculos")}}
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Formateo de texto avanzado")}}
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Estructura web y documentación")}}
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Depurar HTML")}}
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Marcado para una carta")}}
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Estructuración del contenido de una página")}}
diff --git a/files/es/learn/html/introduction_to_html/debugging_html/index.html b/files/es/learn/html/introduction_to_html/debugging_html/index.html
deleted file mode 100644
index 42e2f98c714f06..00000000000000
--- a/files/es/learn/html/introduction_to_html/debugging_html/index.html
+++ /dev/null
@@ -1,172 +0,0 @@
----
-title: Depurar el HTML
-slug: Learn/HTML/Introduction_to_HTML/Debugging_HTML
-tags:
-  - Error
-  - Guía
-  - HTML
-  - Principiante
-  - Validación
-  - Validador
-  - depurar
-  - programar
-translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML
-original_slug: Learn/HTML/Introduccion_a_HTML/Debugging_HTML
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</div>
-
-<p class="summary">Escribir HTML es fácil, pero ¿qué pasa si algo va mal y desconocemos dónde está el error de codificación? En este artículo veremos varias herramientas que nos ayudarán a arreglar errores en HTML.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prerrequisitos:</th>
-   <td>Estar familiarizado con los principios básicos de HTML, como los vistos en el apartado <a href="/es/docs/Learn/HTML/Introduccion_a_HTML/iniciar">Empezar con el HTML</a>, <a href="/es/docs/Learn/HTML/Introduccion_a_HTML/texto">Conocimientos básicos de aplicación de formato a textos con HTML</a> y <a href="/es/docs/Learn/HTML/Introduccion_a_HTML/Creating_hyperlinks">Creación de hiperenlaces</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objetivo:</th>
-   <td>Aprender el funcionamiento básico de las herramientas de depuración de problemas de código en HTML.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Depurar_no_debe_asustarnos">Depurar no debe asustarnos</h2>
-
-<p>Cuando escribimos cualquier tipo de código, normalmente todo va bien, hasta ese fatídico momento en el que ocurre un error, hemos hecho algo mal y el código no funciona, o no funciona del todo, no lo suficientemente bien. Por ejemplo, el dibujo siguiente muestra un error de {{glossary("compile","compilación")}} de un programa sencillo escrito en lenguaje <a href="https://www.rust-lang.org/">Rust</a>.</p>
-
-<p><img alt="A console window showing the result of trying to compile a rust program with a missing quote around a string in a print statement. The error message reported is error: unterminated double quote string." src="https://mdn.mozillademos.org/files/12435/error-message.png" style="display: block; height: 520px; margin: 0px auto; width: 711px;">En el ejemplo, el mensaje de error es fácilmente comprensible: "unterminated double quote string" (comillas sin cerrar en el texto). Si analizamos el listado de código, observamos que en <code>println!(Hello, world!");</code> faltan una comillas. Pero, los mensajes de error pueden complicarse con facilidad y su interpretación ser menos sencilla a medida que los programas aumentan en tamaño, e incluso casos sencillo pueden llegar a intimidar a alguien que no sabe nada de Rust.</p>
-
-<p>Sin embargo, la depuración no nos debe asustar; la clave para sentirnos cómodos con la escritura y la depuración de cualquier lenguaje o código es la familiaridad, tanto con el lenguaje como con las herramientas.</p>
-
-<h2 id="HTML_y_depuración">HTML y depuración</h2>
-
-<p>HTML no es tan complicado de entender como Rust; HTML no se compila por separado antes de que el navegador lo analice (se interpreta, no se compila). Y la sintaxis de los {{glossary("element","elementos")}} de HTML es mucho más sencilla de entender que la de cualquier lenguaje de programación real como Rust, {{glossary("JavaScript")}} o {{glossary("Python")}}. La forma en que los navegadores ejecutan HTML es más <strong>permisiva</strong> que la de los otros lenguajes, cosa que es buena y mala a la vez.</p>
-
-<h3 id="Código_permisivo">Código permisivo</h3>
-
-<p>¿Qué queremos decir con <em>permisivo</em>? Bien, normalmente cuando hacemos algo mal al codificar, suele haber dos tipos de error:</p>
-
-<ul>
- <li><strong>Errores sintácticos</strong>: Son errores de escritura en el código que impiden que el programa funcione, como el error en Rust de arriba. Suelen ser fáciles de arreglar si estamos familiarizados con las herramientas adecuadas y sabemos el significado de los mensajes de error.</li>
- <li><strong>Errores lógicos</strong>: En estos errores la sintaxis es correcta, pero el código no hace lo que debería, por lo que el programa funciona de forma incorrecta. Estos errores son, por lo general, más difíciles de solucionar que los sintácticos, porque no hay mensajes de error que nos avisen de ellos.</li>
-</ul>
-
-<p>HTML en sí mismo no suele producir errores sintácticos porque los navegadores son permisivos con ellos; o sea, el código se sigue ejecutando ¡aun si hay errores! Los navegadores disponen de reglas internas para saber cómo interpretar los errores de marcado incorrecto que encuentran, y seguirán funcionando aunque no produzcan el resultado esperado. Esto puede también ser un problema, por supuesto.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: La ejecución de HTML es permisiva porque cuando se creó la web por primera vez, se decidió que el hecho de permitir que la gente publicara su contenido era más importante que el hecho de que la sintaxis fuera totalmente correcta. La web no sería tan popular como lo es hoy en día si se hubiera sido más estricto desde el primer momento.</p>
-</div>
-
-<h3 id="Aprendizaje_activo_Estudio_del_código_permisivo">Aprendizaje activo: Estudio del código permisivo</h3>
-
-<p>Es hora de estudiar la naturaleza permisiva del código HTML por nosotros mismos.</p>
-
-<ol>
- <li>En primer lugar, hagamos una copia de nuestro <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">ejemplo-demo a depurar</a> y guardémoslo de forma local. Está escrito para generar diversos errores que deberemos descubrir (se dice que el marcado de HTML está <strong>mal formado</strong>, en contraposición a un marcado <strong>bien formado</strong>).</li>
- <li>A continuación, abrámoslo en un navegador; veremos lo siguiente:<img alt="A simple HTML document with a title of HTML debugging examples, and some information about common HTML errors, such as unclosed elements, badly nested elements, and unclosed attributes. " src="https://mdn.mozillademos.org/files/12437/badly-formed-html.png" style="display: block; margin: 0 auto;"></li>
- <li>No parece que esté bien; veamos el código fuente para ver qué podemos hacer (solo mostramos el contenido del &lt;body&gt;):
-  <pre class="brush: html notranslate">&lt;h1&gt;HTML debugging examples&lt;/h1&gt;
-
-&lt;p&gt;What causes errors in HTML?
-
-&lt;ul&gt;
-  &lt;li&gt;Unclosed elements: If an element is &lt;strong&gt;not closed properly,
-      then its effect can spread to areas you didn't intend
-
-  &lt;li&gt;Badly nested elements: Nesting elements properly is also very important
-      for code behaving correctly. &lt;strong&gt;strong &lt;em&gt;strong emphasised?&lt;/strong&gt;
-      what is this?&lt;/em&gt;
-
-  &lt;li&gt;Unclosed attributes: Another common source of HTML problems. Let's
-      look at an example: &lt;a href="https://www.mozilla.org/&gt;link to Mozilla
-      homepage&lt;/a&gt;
-&lt;/ul&gt;</pre>
- </li>
- <li>Veamos qué problemas podemos descubrir:
-  <ul>
-   <li>El elemento {{htmlelement("p")}} y el {{htmlelement("li")}} no tienen etiquetas de cierre. Si comprobamos el resultado, no parece que haya generado un efecto grave en la representación del lenguaje de marcado, porque es fácil deducir que donde un elemento acaba, debería comenzar otro.</li>
-   <li>El primer elemento {{htmlelement("strong")}} no tiene etiqueta de cierre. Este resulta ser un poco más problemático porque no es fácil deducir dónde se supone que termina el elemento. De hecho, el énfasis fuerte se ha aplicado al resto del texto.</li>
-   <li>Esta sección está mal anidada: <code>&lt;strong&gt;strong &lt;em&gt;strong emphasised?&lt;/strong&gt; what is this?&lt;/em&gt;</code>. No es fácil de explicar la forma en que ha sido interpretado, debido al problema anterior.</li>
-   <li>Al valor del atributo {{htmlattrxref("href","a")}} le faltan las comillas de cierre. Esto parece haber causado el problema más grave: el enlace ha desaparecido totalmente.</li>
-  </ul>
- </li>
- <li>Ahora veamos lo que el navegador ha mostrado en contraposición al código fuente. Para ello podemos usar las herramientas de desarrollo del navegador. Si no estamos familiarizados con el uso de estas herramientas, echemos un vistazo rápido a <a href="/es/docs/Learn/Common_questions/What_are_browser_developer_tools">Descubrir las herramientas de desarrollo del navegador</a>, y luego continuaremos.</li>
- <li>En el inspector de objetos (DOM), puedes comprobar la apariencia de cada elemento: <img alt="The HTML inspector in Firefox, with our example's paragraph highlighted, showing the text &quot;What causes errors in HTML?&quot; Here you can see that the paragraph element has been closed by the browser." src="https://mdn.mozillademos.org/files/12439/html-inspector.png" style="display: block; margin: 0 auto;"></li>
- <li>Vamos a explorar nuestro código en detalle con el inspector de objetos DOM para ver cómo el navegador ha arreglado nuestros errores de código HTML (lo hemos hecho con Firefox; otros navegadores modernos deberían conducir al mismo resultado):
-  <ul>
-   <li>Se han añadido etiquetas de cierre a los párrafos y las líneas de las listas.</li>
-   <li>Al no estar claro el final del elemento <code>&lt;strong&gt;</code>, el navegador lo ha aplicado individualmente a todos los bloques de texto siguientes, a cada uno le ha añadido su etiqueta <code>strong</code> propia, desde donde está ¡hasta el final del documento!</li>
-   <li>El navegador ha arreglado el anidamiento incorrecto del modo siguiente:
-    <pre class="brush: html notranslate">&lt;strong&gt;strong
-  &lt;em&gt;strong emphasised?&lt;/em&gt;
-&lt;/strong&gt;
-&lt;em&gt; what is this?&lt;/em&gt;</pre>
-   </li>
-   <li>El enlace a cuyo atributo le faltan las comillas del final ha sido ignorado. La última lista la ha dejado como sigue:
-    <pre class="brush: html notranslate">&lt;li&gt;
-  &lt;strong&gt;Unclosed attributes: Another common source of HTML problems.
-  Let's look at an example: &lt;/strong&gt;
-&lt;/li&gt;</pre>
-   </li>
-  </ul>
- </li>
-</ol>
-
-<h3 id="Validación_HTML">Validación HTML</h3>
-
-<p>Con el ejemplo anterior podemos asegurarnos de que nuestro HTML está bien formado, pero ¿cómo? En el ejemplo siguiente podemos comprobar que es bastante fácil buscar entre las líneas y encontrar los errores en documentos pequeños; pero, ¿qué pasa cuando trabajamos con documentos HTML grandes y complejos?</p>
-
-<p>La mejor estrategia es comenzar por pasar tu página HTML por el <a href="https://validator.w3.org/">servicio de validación de etiquetas</a>; fue creado y está mantenido por el W3C, organización que se encarga de definir las especificaciones de HTML, CSS y otras tecnologías web. Esta página web toma un documento HTML como entrada, lo procesa, y genera un informe de dónde están los errores en el documento.</p>
-
-<p><img alt="The HTML validator homepage" src="https://mdn.mozillademos.org/files/12441/validator.png" style="display: block; margin: 0 auto;"></p>
-
-<p>Para validar el HTML, podemos proporcionar al validador una dirección web a la que apuntar, subirle un archivo HTML, o directamente introducirle el código HTML que queremos que revise.</p>
-
-<h3 id="Aprendizaje_activo_Validación_de_un_documento_HTML">Aprendizaje activo: Validación de un documento HTML</h3>
-
-<p align="left">Vamos a probar de validar nuestro <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">documento ejemplo</a>.</p>
-
-<ol>
- <li>Primero, cargamos el <a href="https://validator.w3.org/">servicio de validación</a> en una pestaña del navegador, si no lo tenemos ya.</li>
- <li>Hacemos clic en la subpestaña <a href="https://validator.w3.org/#validate_by_input">Validate by Direct Input</a>.</li>
- <li>Copiamos el código del documento ejemplo (no solo el <code>body</code>) y lo pegamos en el cuadro de texto grande.</li>
- <li>Hacemos clic en el botón <em>Check</em>.</li>
-</ol>
-
-<p>Esto debería proporcionar una lista de errores y otras informaciones:</p>
-
-<p><img alt="A list of of HTML validation results from the W3C markup validation service" src="https://mdn.mozillademos.org/files/12443/validation-results.png" style="display: block; margin: 0 auto;"></p>
-
-<h4 id="Interpretación_de_los_mensajes_de_error">Interpretación de los mensajes de error</h4>
-
-<p>La lista de mensajes de error que nos presenta el validador suele ayudar, pero a veces, no resultan muy útiles; con un poco de práctica aprenderemos a interpretar la lista para arreglar nuestro código. Veamos los mensajes de error y su significado. Observamos que cada mensaje se presenta con un número de línea y de columna, para ayudar a localizar el error más fácilmente.</p>
-
-<ul>
- <li>"<span>Consider adding a </span><code>lang</code><span> attribute to the </span><code>html</code><span> start tag to declare the language of this document.": No se trata de un error, sino de una advertencia (warning). La <a class="external external-icon" href="https://www.w3.org/International/questions/qa-html-language-declarations" rel="noopener">recomendación</a> es definir siempre un idioma, y este "warning" explica cómo hacerlo..</span></li>
- <li>"End tag <code>li</code> implied, but there were open elements" (2 instancias): Estos mensajes indican que un elemento que ha sido abierto debe ser cerrado. La etiqueta de cierre se supone, pero no está ahí. La información de la línea/columna apunta a la primera línea después de donde debería estar la etiqueta de cierre; es una buena pista para ver qué pasa.</li>
- <li>"Unclosed element <code>strong</code>": Un elemento {{htmlelement("strong")}} no ha sido cerrado, y la línea/columna apunta directamente al lugar del error.</li>
- <li>"End tag <code>strong</code> violates nesting rules": Este apunta a elementos que están incorrectamente anidados, y la línea/columna nos indica donde están.</li>
- <li>"End of file reached when inside an attribute value. Ignoring tag": Esta es bastante enigmática; se refiere al hecho de que el valor de un atributo no ha sido bien construido, posiblemente cerca del final del archivo porque el final aparece dentro del valor del atributo. El hecho de que el navegador no muestre el enlace nos debería dar una buena pista de qué elemento es el erróneo.</li>
- <li>"End of file seen and there were open elements": Este es un poco ambiguo, pero básicamente se refiere al hecho de que hay elementos abiertos que necesitan ser cerrados adecuadamente. Los números de línea apuntan a las últimas líneas del archivo, y este mensaje de error viene con una línea de código que indica un ejemplo de un elemento abierto:
-  <pre class="notranslate">example: &lt;a href="https://www.mozilla.org/&gt;link to Mozilla homepage&lt;/a&gt; ↩ &lt;/ul&gt;↩ &lt;/body&gt;↩&lt;/html&gt;</pre>
-
-  <div class="note">
-  <p><strong>Nota</strong>: Un atributo al que le falten las comillas de cierre puede ser un elemento abierto, porque el resto del documento será interpretado como si fuera parte de este atributo.</p>
-  </div>
- </li>
- <li>Unclosed element <code>ul</code>: Este no ayuda mucho, porque el elemento {{htmlelement("ul")}} está cerrado correctamente. Este error se debe a que el elemento {{htmlelement("a")}} no ha sido cerrado, ya que faltan las comillas de cierre.</li>
-</ul>
-
-<p><span>No debemos preocuparnos si no podemos corregir todos los mensajes de error; es práctico tratar de arreglar unos pocos errores cada vez y volver a pasar el validador para ver los que quedan. A veces, al arreglar unos cuantos se arreglan automáticamente otros muchos; con frecuencia muchos errores los causa uno solo en un efecto dominó.</span></p>
-
-<p><span>Sabremos  que todos los errores están arreglados cuando veamos el mensaje siguiente: </span></p>
-
-<p><img alt='Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."' src="https://mdn.mozillademos.org/files/12445/valid-html-banner.png" style="display: block; margin: 0 auto;"></p>
-
-<h2 id="Resumen">Resumen</h2>
-
-<p>Pues hasta aquí una introducción al depurado de HTML, que nos proporcionará habilidades para cuando comencemos a depurar CSS, JavaScript y otros lenguajes más adelante en nuestros trabajos. Este apartado también constituye el final de la introducción al módulo de artículos de aprendizaje de HTML; ahora podemos hacer los test de prueba: el primero de los cuales está en el enlace siguiente.</p>
-
-<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</p>
diff --git a/files/es/learn/html/introduction_to_html/debugging_html/index.md b/files/es/learn/html/introduction_to_html/debugging_html/index.md
new file mode 100644
index 00000000000000..3fff590d00569e
--- /dev/null
+++ b/files/es/learn/html/introduction_to_html/debugging_html/index.md
@@ -0,0 +1,180 @@
+---
+title: Depurar el HTML
+slug: Learn/HTML/Introduction_to_HTML/Debugging_HTML
+tags:
+  - Error
+  - Guía
+  - HTML
+  - Principiante
+  - Validación
+  - Validador
+  - depurar
+  - programar
+translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML
+original_slug: Learn/HTML/Introduccion_a_HTML/Debugging_HTML
+---
+{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}
+
+Escribir HTML es fácil, pero ¿qué pasa si algo va mal y desconocemos dónde está el error de codificación? En este artículo veremos varias herramientas que nos ayudarán a arreglar errores en HTML.
+
+<table>
+  <tbody>
+    <tr>
+      <th scope="row">Prerrequisitos:</th>
+      <td>
+        Estar familiarizado con los principios básicos de HTML, como los vistos
+        en el apartado
+        <a href="/es/docs/Learn/HTML/Introduccion_a_HTML/iniciar"
+          >Empezar con el HTML</a
+        >,
+        <a href="/es/docs/Learn/HTML/Introduccion_a_HTML/texto"
+          >Conocimientos básicos de aplicación de formato a textos con HTML</a
+        >
+        y
+        <a href="/es/docs/Learn/HTML/Introduccion_a_HTML/Creating_hyperlinks"
+          >Creación de hiperenlaces</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Objetivo:</th>
+      <td>
+        Aprender el funcionamiento básico de las herramientas de depuración de
+        problemas de código en HTML.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## Depurar no debe asustarnos
+
+Cuando escribimos cualquier tipo de código, normalmente todo va bien, hasta ese fatídico momento en el que ocurre un error, hemos hecho algo mal y el código no funciona, o no funciona del todo, no lo suficientemente bien. Por ejemplo, el dibujo siguiente muestra un error de {{glossary("compile","compilación")}} de un programa sencillo escrito en lenguaje [Rust](https://www.rust-lang.org/).
+
+![A console window showing the result of trying to compile a rust program with a missing quote around a string in a print statement. The error message reported is error: unterminated double quote string.](https://mdn.mozillademos.org/files/12435/error-message.png)En el ejemplo, el mensaje de error es fácilmente comprensible: "unterminated double quote string" (comillas sin cerrar en el texto). Si analizamos el listado de código, observamos que en `println!(Hello, world!");` faltan una comillas. Pero, los mensajes de error pueden complicarse con facilidad y su interpretación ser menos sencilla a medida que los programas aumentan en tamaño, e incluso casos sencillo pueden llegar a intimidar a alguien que no sabe nada de Rust.
+
+Sin embargo, la depuración no nos debe asustar; la clave para sentirnos cómodos con la escritura y la depuración de cualquier lenguaje o código es la familiaridad, tanto con el lenguaje como con las herramientas.
+
+## HTML y depuración
+
+HTML no es tan complicado de entender como Rust; HTML no se compila por separado antes de que el navegador lo analice (se interpreta, no se compila). Y la sintaxis de los {{glossary("element","elementos")}} de HTML es mucho más sencilla de entender que la de cualquier lenguaje de programación real como Rust, {{glossary("JavaScript")}} o {{glossary("Python")}}. La forma en que los navegadores ejecutan HTML es más **permisiva** que la de los otros lenguajes, cosa que es buena y mala a la vez.
+
+### Código permisivo
+
+¿Qué queremos decir con _permisivo_? Bien, normalmente cuando hacemos algo mal al codificar, suele haber dos tipos de error:
+
+- **Errores sintácticos**: Son errores de escritura en el código que impiden que el programa funcione, como el error en Rust de arriba. Suelen ser fáciles de arreglar si estamos familiarizados con las herramientas adecuadas y sabemos el significado de los mensajes de error.
+- **Errores lógicos**: En estos errores la sintaxis es correcta, pero el código no hace lo que debería, por lo que el programa funciona de forma incorrecta. Estos errores son, por lo general, más difíciles de solucionar que los sintácticos, porque no hay mensajes de error que nos avisen de ellos.
+
+HTML en sí mismo no suele producir errores sintácticos porque los navegadores son permisivos con ellos; o sea, el código se sigue ejecutando ¡aun si hay errores! Los navegadores disponen de reglas internas para saber cómo interpretar los errores de marcado incorrecto que encuentran, y seguirán funcionando aunque no produzcan el resultado esperado. Esto puede también ser un problema, por supuesto.
+
+> **Nota:** La ejecución de HTML es permisiva porque cuando se creó la web por primera vez, se decidió que el hecho de permitir que la gente publicara su contenido era más importante que el hecho de que la sintaxis fuera totalmente correcta. La web no sería tan popular como lo es hoy en día si se hubiera sido más estricto desde el primer momento.
+
+### Aprendizaje activo: Estudio del código permisivo
+
+Es hora de estudiar la naturaleza permisiva del código HTML por nosotros mismos.
+
+1.  En primer lugar, hagamos una copia de nuestro [ejemplo-demo a depurar](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html) y guardémoslo de forma local. Está escrito para generar diversos errores que deberemos descubrir (se dice que el marcado de HTML está **mal formado**, en contraposición a un marcado **bien formado**).
+2.  A continuación, abrámoslo en un navegador; veremos lo siguiente:![A simple HTML document with a title of HTML debugging examples, and some information about common HTML errors, such as unclosed elements, badly nested elements, and unclosed attributes. ](https://mdn.mozillademos.org/files/12437/badly-formed-html.png)
+3.  No parece que esté bien; veamos el código fuente para ver qué podemos hacer (solo mostramos el contenido del \<body>):
+
+    ```html
+    <h1>HTML debugging examples</h1>
+
+    <p>What causes errors in HTML?
+
+    <ul>
+      <li>Unclosed elements: If an element is <strong>not closed properly,
+          then its effect can spread to areas you didn't intend
+
+      <li>Badly nested elements: Nesting elements properly is also very important
+          for code behaving correctly. <strong>strong <em>strong emphasised?</strong>
+          what is this?</em>
+
+      <li>Unclosed attributes: Another common source of HTML problems. Let's
+          look at an example: <a href="https://www.mozilla.org/>link to Mozilla
+          homepage</a>
+    </ul>
+    ```
+
+4.  Veamos qué problemas podemos descubrir:
+
+    - El elemento {{htmlelement("p")}} y el {{htmlelement("li")}} no tienen etiquetas de cierre. Si comprobamos el resultado, no parece que haya generado un efecto grave en la representación del lenguaje de marcado, porque es fácil deducir que donde un elemento acaba, debería comenzar otro.
+    - El primer elemento {{htmlelement("strong")}} no tiene etiqueta de cierre. Este resulta ser un poco más problemático porque no es fácil deducir dónde se supone que termina el elemento. De hecho, el énfasis fuerte se ha aplicado al resto del texto.
+    - Esta sección está mal anidada: `<strong>strong <em>strong emphasised?</strong> what is this?</em>`. No es fácil de explicar la forma en que ha sido interpretado, debido al problema anterior.
+    - Al valor del atributo {{htmlattrxref("href","a")}} le faltan las comillas de cierre. Esto parece haber causado el problema más grave: el enlace ha desaparecido totalmente.
+
+5.  Ahora veamos lo que el navegador ha mostrado en contraposición al código fuente. Para ello podemos usar las herramientas de desarrollo del navegador. Si no estamos familiarizados con el uso de estas herramientas, echemos un vistazo rápido a [Descubrir las herramientas de desarrollo del navegador](/es/docs/Learn/Common_questions/What_are_browser_developer_tools), y luego continuaremos.
+6.  En el inspector de objetos (DOM), puedes comprobar la apariencia de cada elemento: ![The HTML inspector in Firefox, with our example's paragraph highlighted, showing the text "What causes errors in HTML?" Here you can see that the paragraph element has been closed by the browser.](https://mdn.mozillademos.org/files/12439/html-inspector.png)
+7.  Vamos a explorar nuestro código en detalle con el inspector de objetos DOM para ver cómo el navegador ha arreglado nuestros errores de código HTML (lo hemos hecho con Firefox; otros navegadores modernos deberían conducir al mismo resultado):
+
+    - Se han añadido etiquetas de cierre a los párrafos y las líneas de las listas.
+    - Al no estar claro el final del elemento `<strong>`, el navegador lo ha aplicado individualmente a todos los bloques de texto siguientes, a cada uno le ha añadido su etiqueta `strong` propia, desde donde está ¡hasta el final del documento!
+    - El navegador ha arreglado el anidamiento incorrecto del modo siguiente:
+
+      ```html
+      <strong>strong
+        <em>strong emphasised?</em>
+      </strong>
+      <em> what is this?</em>
+      ```
+
+    - El enlace a cuyo atributo le faltan las comillas del final ha sido ignorado. La última lista la ha dejado como sigue:
+
+      ```html
+      <li>
+        <strong>Unclosed attributes: Another common source of HTML problems.
+        Let's look at an example: </strong>
+      </li>
+      ```
+
+### Validación HTML
+
+Con el ejemplo anterior podemos asegurarnos de que nuestro HTML está bien formado, pero ¿cómo? En el ejemplo siguiente podemos comprobar que es bastante fácil buscar entre las líneas y encontrar los errores en documentos pequeños; pero, ¿qué pasa cuando trabajamos con documentos HTML grandes y complejos?
+
+La mejor estrategia es comenzar por pasar tu página HTML por el [servicio de validación de etiquetas](https://validator.w3.org/); fue creado y está mantenido por el W3C, organización que se encarga de definir las especificaciones de HTML, CSS y otras tecnologías web. Esta página web toma un documento HTML como entrada, lo procesa, y genera un informe de dónde están los errores en el documento.
+
+![The HTML validator homepage](https://mdn.mozillademos.org/files/12441/validator.png)
+
+Para validar el HTML, podemos proporcionar al validador una dirección web a la que apuntar, subirle un archivo HTML, o directamente introducirle el código HTML que queremos que revise.
+
+### Aprendizaje activo: Validación de un documento HTML
+
+Vamos a probar de validar nuestro [documento ejemplo](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html).
+
+1.  Primero, cargamos el [servicio de validación](https://validator.w3.org/) en una pestaña del navegador, si no lo tenemos ya.
+2.  Hacemos clic en la subpestaña [Validate by Direct Input](https://validator.w3.org/#validate_by_input).
+3.  Copiamos el código del documento ejemplo (no solo el `body`) y lo pegamos en el cuadro de texto grande.
+4.  Hacemos clic en el botón _Check_.
+
+Esto debería proporcionar una lista de errores y otras informaciones:
+
+![A list of of HTML validation results from the W3C markup validation service](https://mdn.mozillademos.org/files/12443/validation-results.png)
+
+#### Interpretación de los mensajes de error
+
+La lista de mensajes de error que nos presenta el validador suele ayudar, pero a veces, no resultan muy útiles; con un poco de práctica aprenderemos a interpretar la lista para arreglar nuestro código. Veamos los mensajes de error y su significado. Observamos que cada mensaje se presenta con un número de línea y de columna, para ayudar a localizar el error más fácilmente.
+
+- "Consider adding a `lang` attribute to the `html` start tag to declare the language of this document.": No se trata de un error, sino de una advertencia (warning). La [recomendación](https://www.w3.org/International/questions/qa-html-language-declarations) es definir siempre un idioma, y este "warning" explica cómo hacerlo..
+- "End tag `li` implied, but there were open elements" (2 instancias): Estos mensajes indican que un elemento que ha sido abierto debe ser cerrado. La etiqueta de cierre se supone, pero no está ahí. La información de la línea/columna apunta a la primera línea después de donde debería estar la etiqueta de cierre; es una buena pista para ver qué pasa.
+- "Unclosed element `strong`": Un elemento {{htmlelement("strong")}} no ha sido cerrado, y la línea/columna apunta directamente al lugar del error.
+- "End tag `strong` violates nesting rules": Este apunta a elementos que están incorrectamente anidados, y la línea/columna nos indica donde están.
+- "End of file reached when inside an attribute value. Ignoring tag": Esta es bastante enigmática; se refiere al hecho de que el valor de un atributo no ha sido bien construido, posiblemente cerca del final del archivo porque el final aparece dentro del valor del atributo. El hecho de que el navegador no muestre el enlace nos debería dar una buena pista de qué elemento es el erróneo.
+- "End of file seen and there were open elements": Este es un poco ambiguo, pero básicamente se refiere al hecho de que hay elementos abiertos que necesitan ser cerrados adecuadamente. Los números de línea apuntan a las últimas líneas del archivo, y este mensaje de error viene con una línea de código que indica un ejemplo de un elemento abierto:
+
+      example: `<a href="https://www.mozilla.org/>link to Mozilla homepage</a> ↩ </ul>↩ </body>↩</html>`
+
+  > **Nota:** Un atributo al que le falten las comillas de cierre puede ser un elemento abierto, porque el resto del documento será interpretado como si fuera parte de este atributo.
+
+- Unclosed element `ul`: Este no ayuda mucho, porque el elemento {{htmlelement("ul")}} está cerrado correctamente. Este error se debe a que el elemento {{htmlelement("a")}} no ha sido cerrado, ya que faltan las comillas de cierre.
+
+No debemos preocuparnos si no podemos corregir todos los mensajes de error; es práctico tratar de arreglar unos pocos errores cada vez y volver a pasar el validador para ver los que quedan. A veces, al arreglar unos cuantos se arreglan automáticamente otros muchos; con frecuencia muchos errores los causa uno solo en un efecto dominó.
+
+Sabremos que todos los errores están arreglados cuando veamos el mensaje siguiente:
+
+![Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."](https://mdn.mozillademos.org/files/12445/valid-html-banner.png)
+
+## Resumen
+
+Pues hasta aquí una introducción al depurado de HTML, que nos proporcionará habilidades para cuando comencemos a depurar CSS, JavaScript y otros lenguajes más adelante en nuestros trabajos. Este apartado también constituye el final de la introducción al módulo de artículos de aprendizaje de HTML; ahora podemos hacer los test de prueba: el primero de los cuales está en el enlace siguiente.
+
+{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}
diff --git a/files/es/learn/html/introduction_to_html/document_and_website_structure/index.html b/files/es/learn/html/introduction_to_html/document_and_website_structure/index.html
deleted file mode 100644
index b23389d2fb4117..00000000000000
--- a/files/es/learn/html/introduction_to_html/document_and_website_structure/index.html
+++ /dev/null
@@ -1,299 +0,0 @@
----
-title: Estructura web y documentación
-slug: Learn/HTML/Introduction_to_HTML/Document_and_website_structure
-tags:
-  - CodingScripting
-  - Composición
-  - Diseño
-  - Formato
-  - Guía
-  - HTML
-  - Presentación
-  - Principiante
-  - Sitio
-  - Sitio Web
-  - bloques
-  - pagina
-  - programar
-  - semántica
-translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure
-original_slug: Learn/HTML/Introduccion_a_HTML/estructura
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}</div>
-
-<p class="summary">Además de definir partes individuales de tu página (como un párrafo o una imagen), {{Glossary("HTML")}} también dispone de elementos de bloque que se pueden utilizar para estructurar las distintas áreas de tu sito web (tal como el encabezado, el menú de navegación o la parte del contenido principal. En este artículo veras cómo planificar una estructura básica de página web y escribirás el HTML que representa esa estructura.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prerrequisitos:</th>
-   <td>Estar familiarizado con HTML, cubierto en {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}. Aplicación de formato a texto en documentos HTML, según lo expuesto en la sección {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Fundamentos de texto HTML")}}. Funcionamiento de los hipervínculos, cubierto en {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Crear hipervínculos")}}.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objetivo:</th>
-   <td>Aprender a estructurar tu documento usando atributos semánticos y construir la estructura de una página web sencilla.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Partes_básicas_de_un_documento">Partes básicas de un documento</h2>
-
-<p>Las páginas web pueden y se deben diferenciar las unas de las otras, pero todas tienden a contener elementos comunes parecidos, a menos que estén destinadas a mostrar un vídeo o un juego a pantalla completa, o que formen parte de un proyecto artístico concreto o, simplemente, que estén mal estructuradas; estos elementos comunes son:</p>
-
-<dl>
- <dt>encabezado:</dt>
- <dd>Normalmente formado por una gran franja que cruza la parte superior de la página con un <strong>gran título</strong>, un logotipo y quizás un lema. Esta parte suele permanecer invariable mientras navegas entre las páginas de un mismo sitio web.</dd>
- <dt>barra de navegación:</dt>
- <dd>Son los enlaces a las secciones principales del sitio web. Normalmente está formada por un menú con botones, enlaces o pestañas. Al igual que el <em>encabezado</em>, este contenido suele permanecer invariable en las diferentes páginas del sitio; tener un menú inconsistente en tu página web conducirá a los usuarios a la confusión y frustración. Muchos diseñadores web consideran que el menú de navegación forma parte del encabezado y que no posee un componente individual, aunque no es necesario que sea así; de hecho, algunos argumentan que tener ambos componentes por separado es mejor por motivos de {{web.link("/es/docs/Learn/Accessibility", "accesibilidad")}} porque los lectores de pantalla pueden leer mejor ambos elementos si están separados.</dd>
- <dt>contenido principal:</dt>
- <dd>Es la gran parte central de la página y contiene la mayor parte del contenido particular de una página web concreta; por ejemplo, el video que quieres ver, la narración que quieres leer, el mapa que quieres consultar, los titulares de las noticias, etc. ¡Esta es la parte que definitivamente debe variar mucho de una página a otra de tu sitio web!</dd>
- <dt>barra lateral:</dt>
- <dd>Suele incluir algún tipo de información adicional, enlaces, citas, publicidad, etc. Normalmente está relacionada con el contenido principal de la página (por ejemplo, en una página de noticias, la barra lateral podría contener la biografía del autor o enlaces a artículos relacionados), pero en otras ocasiones encontraras elementos recurrentes como un menú de navegación secundario.</dd>
- <dt>pie de página:</dt>
- <dd>Es la parte inferior de la página, que generalmente contiene la letra pequeña, el copyright o la información de contacto. Es el sitio donde se coloca la información común (al igual que en el encabezado), pero esta información no suele ser tan importante o es secundaria con respecto a la página en sí misma. El pie también se suele usar para propósitos {{Glossary("SEO")}}, e incluye enlaces de acceso rápido al contenido más popular.</dd>
-</dl>
-
-<p>Una página web «típica» se podría parecer a esta:</p>
-
-<p><img alt="Un ejemplo de estructura de sitio web simple con un encabezado principal, menú de navegación, contenido principal, barra lateral y pie de página." src="https://mdn.mozillademos.org/files/12417/sample-website.png" style="display: block; margin: 0 auto;"></p>
-
-<h2 id="HTML_para_dar_estructura_al_contenido">HTML para dar estructura al contenido</h2>
-
-<p>El ejemplo no es muy atractivo, pero puede servir para ilustrar un ejemplo de diseño de una página web típica. Puedes encontrar sitios con más columnas, algunas mucho más complejas, pero esta servirá para hacerte una idea general sobre el tema. Con el CSS adecuado podrás usar muchos más elementos para decorar las distintas secciones y conseguir que queden como deses, pero como se comentó anteriormente, necesitas respetar ciertas normas semánticas, y <em>utilizar el elemento adecuado para cada tipo de sección</em>.</p>
-
-<p>La parte visual no lo es todo. Utilizarás diferentes fuentes y colores para llamar la atención de los usuarios sin discapacidad visual de las partes más importantes del contenido, como el menú de navegación y sus enlaces correspondientes, pero ¿qué ocurre con los usuarios con discapacidad visual que no pueden distinguir los colores llamativos o el tamaño grande de las fuentes?</p>
-
-<div class="note">
-<p><strong>Nota</strong>: Los daltónicos representan alrededor del <a href="http://www.color-blindness.com/2006/04/28/colorblind-population/">4% de la población mundial</a> (aproximadamente 1 de cada 12 hombres y 1 de cada 200 mujeres son daltónicos). Los invidentes y las personas con discapacidad visual representan aproximadamente el 4-5% de la población mundial (en 2012 había {{Interwiki("wikipedia", "Discapacidad visual")}} 285 millones de personas con alguna de estas características en el mundo, mientras que el total de la población estaba {{Interwiki("wikipedia", "World_human_population#/media/File:World_population_history.svg", "alrededor de los 7,000 millones")}}.</p>
-</div>
-
-<p>En tu código HTML puedes crear secciones de contenido basadas en su <em>funcionalidad</em> — puedes usar elementos que representen sin ambigüedad las diferentes secciones de contenido descritas, de forma que las tecnologías de accesibilidad y los lectores de pantalla puedan reconocer esos elementos y asistir en tareas como «encontrar el menú de navegación», o «encontrar el contenido principal». Como se mencionó anteriormente en el curso, hay una serie de {{web.link("/es/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Por_qué_necesitamos_estructura", "consecuencias por no usar la estructura de elementos y semántica adecuada para hacer el trabajo correctamente")}}.</p>
-
-<p>HTML dispone de etiquetas adecuadas que puedes usar para establecer estas secciones semánticas, por ejemplo:</p>
-
-<ul>
- <li><strong>encabezado</strong>: {{HTMLElement("header")}}.</li>
- <li><strong>menú de navegación </strong>: {{HTMLElement("nav")}}.</li>
- <li><strong>contenido principal</strong>: {{HTMLElement("main")}}, con varias subsecciones (además de la barra lateral) representadas por los elementos {{HTMLElement("article")}}, {{HTMLElement("section")}}, y {{HTMLElement("div")}}.</li>
- <li><strong>barra lateral</strong>: {{HTMLElement("aside")}}; a menudo colocada dentro de {{HTMLElement("main")}}.</li>
- <li><strong>pie de página</strong>: {{HTMLElement("footer")}}.</li>
-</ul>
-
-<h3 id="Aprendizaje_activo_El_código_del_ejemplo_anterior">Aprendizaje activo: El código del ejemplo anterior</h3>
-
-<p>El ejemplo de página web que se muestra arriba se consigue a partir del siguiente código (disponible en el <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/document_and_website_structure/index.html">repositorio Github</a>). Observa el ejemplo anterior, y a continuación échale un vistazo al código de abajo para identificar las secciones marcadas en el ejemplo.</p>
-
-<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;meta charset="utf-8"&gt;
-
-    &lt;title&gt;El título de mi página&lt;/title&gt;
-    &lt;link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css"&gt;
-    &lt;link rel="stylesheet" href="style.css"&gt;
-
-    &lt;!-- las tres siguientes líneas son un truco para obtener elementos semánticos de HTML5 que funcionan en versiones de Internet Explorer antiguas --&gt;
-    &lt;!--[if lt IE 9]&gt;
-      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"&gt;&lt;/script&gt;
-    &lt;![endif]--&gt;
-  &lt;/head&gt;
-
-  &lt;body&gt;
-    &lt;!-- Aquí empieza el encabezado principal que se mantendrá en todas las páginas del sitio web --&gt;
-
-    &lt;header&gt;
-      &lt;h1&gt;Encabezado&lt;/h1&gt;
-    &lt;/header&gt;
-
-    &lt;nav&gt;
-      &lt;ul&gt;
-        &lt;li&gt;&lt;a href="#"&gt;Inicio&lt;/a&gt;&lt;/li&gt;
-        &lt;li&gt;&lt;a href="#"&gt;Nuestro equipo&lt;/a&gt;&lt;/li&gt;
-        &lt;li&gt;&lt;a href="#"&gt;Proyectos&lt;/a&gt;&lt;/li&gt;
-        &lt;li&gt;&lt;a href="#"&gt;Contacto&lt;/a&gt;&lt;/li&gt;
-      &lt;/ul&gt;
-
-       &lt;!-- Un formulario de búsqueda es una forma no-lineal de hacer búsquedas en un sitio web. --&gt;
-
-       &lt;form&gt;
-         &lt;input type="search" name="q" placeholder="Buscar"&gt;
-         &lt;input type="submit" value="¡Vamos!"&gt;
-       &lt;/form&gt;
-     &lt;/nav&gt;
-
-    &lt;!-- Aquí está el contenido principal de nuestra página --&gt;
-    &lt;main&gt;
-
-      &lt;!-- Contiene un artículo --&gt;
-      &lt;article&gt;
-        &lt;h2&gt;Título del artículo&lt;/h2&gt;
-
-        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.&lt;/p&gt;
-
-        &lt;h3&gt;Subsección&lt;/h3&gt;
-
-        &lt;p&gt;Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.&lt;/p&gt;
-
-        &lt;p&gt;Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.&lt;/p&gt;
-
-        &lt;h3&gt;Otra subsección&lt;/h3&gt;
-
-        &lt;p&gt;Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.&lt;/p&gt;
-
-        &lt;p&gt;Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.&lt;/p&gt;
-      &lt;/article&gt;
-
-      &lt;!-- el contenido aparte también se puede anidar dentro del contenido principal --&gt;
-      &lt;aside&gt;
-        &lt;h2&gt;Relacionado&lt;/h2&gt;
-
-        &lt;ul&gt;
-          &lt;li&gt;&lt;a href="#"&gt;Oh, me gusta estar junto al mar&lt;/a&gt;&lt;/li&gt;
-          &lt;li&gt;&lt;a href="#"&gt;Oh, me gusta estar junto al mar&lt;/a&gt;&lt;/li&gt;
-          &lt;li&gt;&lt;a href="#"&gt;Aunque en el norte de Inglaterra&lt;/a&gt;&lt;/li&gt;
-          &lt;li&gt;&lt;a href="#"&gt;Nunca deja de llover&lt;/a&gt;&lt;/li&gt;
-          &lt;li&gt;&lt;a href="#"&gt;Oh, bueno...&lt;/a&gt;&lt;/li&gt;
-        &lt;/ul&gt;
-      &lt;/aside&gt;
-
-    &lt;/main&gt;
-
-    &lt;!-- Y aquí está nuestro pie de página principal que se utiliza en todas las páginas de nuestro sitio web --&gt;
-
-    &lt;footer&gt;
-      &lt;p&gt;©Copyright 2050 de nadie. Todos los derechos revertidos.&lt;/p&gt;
-    &lt;/footer&gt;
-
-  &lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<p>Tómate tu tiempo para revisar el código y comprenderlo — Los comentarios en el código también te ayudarán a entenderlo. No te pedimos que hagas mucho más en este artículo, porque la clave para entender el diseño del documento es escribir una estructura HTML conocida y posteriormente desarrollar su apariencia con CSS. Estudiaremos el diseño CSS como parte del tema CSS.</p>
-
-<h2 id="Elementos_de_diseño_HTML_en_detalle">Elementos de diseño HTML en detalle</h2>
-
-<p>Es bueno entender el significado global de todos los elementos definitorios de las secciones HTML en detalle; es algo en que trabajarás gradualmente a medida que comiences a tener más experiencia en el desarrollo web. En el enlace {{web.link("/es/docs/Web/HTML/Element", "referencia de elementos HTML")}} podemos entrar en un gran nivel de detalle. Por el momento, estas son las definiciones principales que deberíamos tratar de entender:</p>
-
-<ul>
- <li>{{HTMLElement('main')}} encierra el contenido particular a esta página. Utilizaremos <code>&lt;main&gt;</code> solamente una vez para cada página y lo situaremos directamente dentro del elemento {{HTMLElement('body')}}. Es mejor que no lo anidemos en otros elementos.</li>
- <li>{{HTMLElement('article')}} encuadra un bloque de contenido que tiene sentido por sí mismo aparte del resto de la página (por ejemplo una entrada en un blog).</li>
- <li>{{HTMLElement('section')}} es parecido al elemento <code>&lt;article&gt;</code>, pero se usa más para agrupar cada parte de la página que, por su funcionalidad, constituye una sección en sí misma (por ejemplo un minimapa o un conjunto de titulares y resúmenes). Se considera una buena práctica comenzar cada una de estas secciones con un título de encabezado ({{web.link("/es/Learn/HTML/Howto/Set_up_a_proper_title_hierarchy", "heading")}}); observa que podemos subdividir artículos (<code>&lt;article&gt;</code>) en distintas secciones (<code>&lt;section&gt;</code>), o también secciones en distintos artículos, dependiendo del contexto.</li>
- <li>{{HTMLElement('aside')}} incluye contenido que no está directamente relacionado con el contenido principal, pero que puede aportar información adicional relacionada indirectamente con él (resúmenes, biografías del autor, enlaces relacionados, etc.).</li>
- <li>{{HTMLElement('header')}} representa un grupo de contenido introductorio. Si este es «<em>hijo</em>» de un elemento {{HTMLElement('body')}}, se convertirá en el <strong>encabezado</strong> principal del sitio web, pero si es hijo de un elemento {{HTMLElement('article')}} o un elemento {{HTMLElement('section')}}, entonces simplemente será el <strong>encabezado</strong> particular de cada sección (por favor, no lo confundas con {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Añadir_un_título","títulos y encabezados")}}).</li>
- <li>{{HTMLElement('nav')}} contiene la funcionalidad de navegación principal de la página. Los enlaces secundarios, etc., no entrarán en la navegación.</li>
- <li>{{HTMLElement('footer')}} representa un grupo de contenido al final de una página.</li>
-</ul>
-
-<h3 id="Envolturas_no_semánticas">Envolturas no semánticas</h3>
-
-<p>A veces hay situaciones en las que no encuentras un elemento semántico adecuado para agrupar ciertos elementos o englobar cierto contenido. Podrías querer agrupar ciertos elementos para referirte a ellos como una entidad que comparta cierto {{Glossary("CSS")}} o {{Glossary("JavaScript")}}. Para casos como esos, HTML dispone del elemento {{HTMLElement("div")}} y del elemento {{HTMLElement("span")}}. Preferentemente estos elementos se deberán utilizar con sus atributos ({{HTMLAttrxRef('class')}}), para conferirles algún tipo de etiquetado que permita determinarlos con facilidad.</p>
-
-<p>{{HTMLElement("span")}} es un elemento no-semántico que se utiliza en el interior de una línea. Se utiliza cuando no se nos ocurre el uso de ningún otro elemento semántico de texto en el que incluir el contenido, o si no se desea añadir ningún significado específico. Por ejemplo:</p>
-
-<pre class="brush: html notranslate">&lt;p&gt;El rey volvió ebrio a su habitación alrededor de la 01:00, y sin duda la cerveza no le ayudaba
-cuando cruzó tambaleante la puerta &lt;span class="editor-note"&gt;[nota del editor: en este instante de la
-representación, deberían atenuarse las luces]&lt;/span&gt;.&lt;/p&gt;</pre>
-
-<p>En este caso, la nota del editor solo proporciona información extra para el director de la obra; se supone que estos elementos no incluyen contenido extra importante. Para los usuarios sin discapacidad visual, quizás debamos usar CSS para diferenciar sutilmente estas notas del texto principal.</p>
-
-<p>{{HTMLElement("div")}} es un elemento de bloque no-semántico; lo utilizaras cuando no se te ocurra el uso de otro elemento semántico mejor, o si no deseas añadir ningún significado concreto. Por ejemplo, imagina un carrito de compras que puedes pulsar en cualquier momento durante tu estancia en una tienda virtual:</p>
-
-<pre class="brush: html notranslate">&lt;div class="shopping-cart"&gt;
-  &lt;h2&gt;Carrito de compras&lt;/h2&gt;
-  &lt;ul&gt;
-    &lt;li&gt;
-      &lt;p&gt;&lt;a href=""&gt;&lt;strong&gt;Pendientes de plata&lt;/strong&gt;&lt;/a&gt;: $99.95.&lt;/p&gt;
-      &lt;img src="../products/3333-0985/" alt="Pendientes de plata"&gt;
-    &lt;/li&gt;
-    &lt;li&gt;
-      ...
-    &lt;/li&gt;
-  &lt;/ul&gt;
-  &lt;p&gt;Importe total: $237.89&lt;/p&gt;
-&lt;/div&gt;</pre>
-
-<p>Este no es un elemento lateral (<code>&lt;aside&gt;</code>) porque no necesariamente está relacionado con el contenido principal de la página (en realidad quieres que se pueda ver desde cualquier página). Ni siquiera se puede incluir en una sección (<code>&lt;section&gt;</code>) porque su contenido no forma parte del contenido principal de la página. Por lo tanto, un elemento <code>&lt;div&gt;</code> es el adecuado en este caso. Hemos incluido un <strong>encabezado</strong> para indicar a los lectores de pantalla donde van a encontrarlo.</p>
-
-<div class="warning">
-<p><strong>Atención</strong>: Los elementos <code>div</code> son tan prácticos y simples que es fácil usarlos en exceso. Como no conllevan valor semántico, enmarañan el código HTML. Debemos tener cuidado de usarlos solo cuando no halles una solución mejor y reducir su uso al mínimo, porque de otro modo complicarás el mantenimiento y actualización de los documentos.</p>
-</div>
-
-<h3 id="Saltos_de_línea_y_líneas_horizontales">Saltos de línea y líneas horizontales</h3>
-
-<p>Dos elementos que debes conocer y utilizarás ocasionalmente son {{HTMLElement("br")}} y {{HTMLElement("hr")}}:</p>
-
-<p>El elemento {{HTMLElement("br")}} genera un salto de línea en un párrafo; es la única manera de representar series de líneas cortas, como una dirección postal o un poema. Por ejemplo:</p>
-
-<div id="line-break-live-sample">
-<pre class="brush: html notranslate">&lt;p&gt;Había una vez un hombre llamado O'Dell&lt;br&gt;
-A quién le encantaba escribir HTML&lt;br&gt;
-Pero su estructura era mala, su semántica era triste&lt;br&gt;
-y su marcado no se interpretó muy bien.&lt;/p&gt;</pre>
-</div>
-
-<p>Sin el elemento {{HTMLElement("br")}}, todo el párrafo se habría presentado como una sola línea larga (como ya hemos dicho con anterioridad en este curso, {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Los_espacios_en_blanco_en_HTML", "HTML ignora la mayoría del espacio en blanco")}}); con estos elementos {{HTMLElement("br")}} en el código, las líneas quedan:</p>
-
-<p>{{EmbedLiveSample('line-break-live-sample', '100%', '125px', '', '', 'hide-codepen-jsfiddle')}}</p>
-
-<p>Los elementos {{HTMLElement("hr")}} generan una regla horizontal en el documento que denota un cambio en la temática del texto (como un cambio de tema o de escena). Visualmente tiene el aspecto de una línea horizontal. Por ejemplo:</p>
-
-<div id="Ejemplo_en_vivo_línea_horizontal">
-<pre class="brush: html notranslate">&lt;p&gt;Ron fue acorralado en una esquina por las bestias abisales que merodeaban. Asustado, pero decidido a proteger a sus amigos, levantó su varita y se preparó para la batalla, con la esperanza de que su llamada de socorro hubiera llegado a alguien.&lt;/p&gt;
-&lt;hr&gt;
-&lt;p&gt;Mientras tanto, Harry estaba sentado en su casa, mirando su declaración de regalías y pensando en cuándo saldría la próxima serie derivada, cuando de pronto voló por su ventana una carta de socorro y aterrizó en su regazo. La leyó vagamente y suspiró; "Será mejor que vuelva al trabajo entonces", reflexionó.&lt;/p&gt;</pre>
-</div>
-
-<p>Quedará así:</p>
-
-<p>{{EmbedLiveSample('Ejemplo_en_vivo_línea_horizontal', '100%', '185px', '', '', 'hide-codepen-jsfiddle')}}</p>
-
-<h2 id="Planificación_de_una_página_web_sencilla">Planificación de una página web sencilla</h2>
-
-<p>Una vez has planificado el contenido de una página web sencilla, el paso lógico siguiente es intentar trabajar en el contenido para todo el sitio web, las páginas que necesitas y la forma de disponer las conexiones entre ellas para producir la mejor experiencia de usuario a los visitantes. Esto se conoce con el nombre de ({{Glossary("Arquitectura de la información")}}). Una web grande y compleja necesitará mucha planificación, pero para una web sencilla compuesta por unas cuantas páginas, el proceso puede ser sencillo, ¡y divertido!.</p>
-
-<ol>
- <li>Ten en cuenta que habrá varios elementos comunes en muchas (si no en todas las) páginas, tal como el menú de navegación y el contenido del pie de página. Si la web está dedicada a un negocio, por ejemplo, sería una buena idea disponer de la información de contacto en el pie de página en todas las páginas. Anota lo que deseas tener en común en cada página. <img alt="las características comunes del sitio de viajes para ir en cada página: título y logotipo, contacto, derechos de autor, términos y condiciones, selección de idioma, política de accesibilidad" src="https://mdn.mozillademos.org/files/12423/common-features.png" style="border-style: solid; border-width: 1px; display: block; height: 375px; margin: 0px auto; width: 600px;"></li>
- <li>A continuación, esboza un esquema sencillo de cuál podría ser la estructura deseada de la apariencia de cada página (podría ser algo tan sencillo como el siguiente dibujo). Anota los bloques principales. <img alt="Un diagrama simple de una estructura de sitio de ejemplo, con un encabezado, un área de contenido principal, dos barras laterales opcionales y un pie de página" src="https://mdn.mozillademos.org/files/12429/site-structure.png" style="border-style: solid; border-width: 1px; display: block; height: 232px; margin: 0px auto; width: 600px;"></li>
- <li>Ahora, elabora una lista completa con todo el resto del contenido de tu sitio web que no sea común a todas las páginas. <img alt="Una larga lista de todas las funciones que podrías incluir en tu sitio de viajes, desde buscar, hasta ofertas especiales e información específica del país" src="https://mdn.mozillademos.org/files/12425/feature-list.png" style="border-style: solid; border-width: 1px; display: block; height: 1066px; margin: 0px auto; width: 600px;"></li>
- <li>A continuación, trata de ordenar todo este contenido por grupos, para hacerte una idea de las partes que podrían ir juntas en las diferentes páginas. Esto es muy similar a una técnica llamada {{Glossary("Clasificación de tarjetas")}}. <img alt="Los elementos que deberían aparecer en un sitio de vacaciones ordenados en 5 categorías: Búsqueda, Especiales, Información específica del país, Resultados de búsqueda y Compra cosas" src="https://mdn.mozillademos.org/files/12421/card-sorting.png" style="border-style: solid; border-width: 1px; display: block; height: 579px; margin: 0px auto; width: 600px;"></li>
- <li>Ahora trata de esquematizar un mapa de tu sitio — dibuja un globo para cada página de tu sitio web y dibuja líneas que identifiquen el flujo de datos entre las distintas páginas. La página de inicio normalmente estará ubicada en el centro y enlazará con el resto de páginas; la mayoría de las páginas de una web sencilla estarán enlazadas desde el menú de navegación principal, aunque puede haber excepciones. También puedes incluir notas sobre cómo se pueden presentar las cosas. <img alt="Un mapa del sitio que muestra la página de inicio, la página del país, los resultados de búsqueda, la página de ofertas especiales, la página de pago y la página de compra" src="https://mdn.mozillademos.org/files/12427/site-map.png" style="border-style: solid; border-width: 1px; display: block; height: 872px; margin: 0px auto; width: 600px;"></li>
-</ol>
-
-<h3 id="Aprendizaje_activo_Creación_de_un_mapa_del_sitio_web">Aprendizaje activo: Creación de un mapa del sitio web</h3>
-
-<p>Intenta llevar a cabo el ejercicio anterior para crear tu propia página web. ¿Qué contenido le vas a dar a tu sitio web?</p>
-
-<div class="note">
-<p><strong>Nota</strong>: Guarda este esquema para utilizarlo más adelante.</p>
-</div>
-
-<h2 id="¡Pon_a_prueba_tus_habilidades!">¡Pon a prueba tus habilidades!</h2>
-
-<p>Has llegado al final de este artículo, pero ¿puedes recordar la información más importante? Puedes encontrar una evaluación detallada que pruebe estas habilidades al final del módulo; consulta {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Estructurar el contenido de una página")}}. ¡Recuerda leer primero el siguiente artículo de la serie y no solo saltarlo!</p>
-
-<h2 id="Resumen">Resumen</h2>
-
-<p>En este punto, deberías tener una mejor idea sobre cómo estructurar una página/sitio web. En el último artículo de este módulo, se explica cómo depurar HTML.</p>
-
-<h2 id="Ve_también">Ve también</h2>
-
-<ul>
- <li>{{web.link("/es/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines", "Uso de secciones y esquemas HTML")}}: Guía avanzada de elementos semánticos HTML5 y el algoritmo de esquema HTML5.</li>
-</ul>
-
-<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}</p>
-
-<h2 id="En_este_módulo">En este módulo</h2>
-
-<ul>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}</li>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "¿Qué hay en el «head»? Metadatos en HTML")}}</li>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Fundamentos de texto HTML")}}</li>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Crear hipervínculos")}}</li>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Formateo de texto avanzado")}}</li>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Estructura web y documentación")}}</li>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Depurar HTML")}}</li>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Marcado para una carta")}}</li>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Estructuración del contenido de una página")}}</li>
-</ul>
diff --git a/files/es/learn/html/introduction_to_html/document_and_website_structure/index.md b/files/es/learn/html/introduction_to_html/document_and_website_structure/index.md
new file mode 100644
index 00000000000000..09e6ff82d249ab
--- /dev/null
+++ b/files/es/learn/html/introduction_to_html/document_and_website_structure/index.md
@@ -0,0 +1,298 @@
+---
+title: Estructura web y documentación
+slug: Learn/HTML/Introduction_to_HTML/Document_and_website_structure
+tags:
+  - CodingScripting
+  - Composición
+  - Diseño
+  - Formato
+  - Guía
+  - HTML
+  - Presentación
+  - Principiante
+  - Sitio
+  - Sitio Web
+  - bloques
+  - pagina
+  - programar
+  - semántica
+translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure
+original_slug: Learn/HTML/Introduccion_a_HTML/estructura
+---
+{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}
+
+Además de definir partes individuales de tu página (como un párrafo o una imagen), {{Glossary("HTML")}} también dispone de elementos de bloque que se pueden utilizar para estructurar las distintas áreas de tu sito web (tal como el encabezado, el menú de navegación o la parte del contenido principal. En este artículo veras cómo planificar una estructura básica de página web y escribirás el HTML que representa esa estructura.
+
+<table>
+  <tbody>
+    <tr>
+      <th scope="row">Prerrequisitos:</th>
+      <td>
+        Estar familiarizado con HTML, cubierto en
+        {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}.
+        Aplicación de formato a texto en documentos HTML, según lo expuesto en
+        la sección
+        {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Fundamentos de texto HTML")}}.
+        Funcionamiento de los hipervínculos, cubierto en
+        {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Crear hipervínculos")}}.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Objetivo:</th>
+      <td>
+        Aprender a estructurar tu documento usando atributos semánticos y
+        construir la estructura de una página web sencilla.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## Partes básicas de un documento
+
+Las páginas web pueden y se deben diferenciar las unas de las otras, pero todas tienden a contener elementos comunes parecidos, a menos que estén destinadas a mostrar un vídeo o un juego a pantalla completa, o que formen parte de un proyecto artístico concreto o, simplemente, que estén mal estructuradas; estos elementos comunes son:
+
+- encabezado:
+  - : Normalmente formado por una gran franja que cruza la parte superior de la página con un **gran título**, un logotipo y quizás un lema. Esta parte suele permanecer invariable mientras navegas entre las páginas de un mismo sitio web.
+- barra de navegación:
+  - : Son los enlaces a las secciones principales del sitio web. Normalmente está formada por un menú con botones, enlaces o pestañas. Al igual que el _encabezado_, este contenido suele permanecer invariable en las diferentes páginas del sitio; tener un menú inconsistente en tu página web conducirá a los usuarios a la confusión y frustración. Muchos diseñadores web consideran que el menú de navegación forma parte del encabezado y que no posee un componente individual, aunque no es necesario que sea así; de hecho, algunos argumentan que tener ambos componentes por separado es mejor por motivos de [accesibilidad](/es/docs/Learn/Accessibility) porque los lectores de pantalla pueden leer mejor ambos elementos si están separados.
+- contenido principal:
+  - : Es la gran parte central de la página y contiene la mayor parte del contenido particular de una página web concreta; por ejemplo, el video que quieres ver, la narración que quieres leer, el mapa que quieres consultar, los titulares de las noticias, etc. ¡Esta es la parte que definitivamente debe variar mucho de una página a otra de tu sitio web!
+- barra lateral:
+  - : Suele incluir algún tipo de información adicional, enlaces, citas, publicidad, etc. Normalmente está relacionada con el contenido principal de la página (por ejemplo, en una página de noticias, la barra lateral podría contener la biografía del autor o enlaces a artículos relacionados), pero en otras ocasiones encontraras elementos recurrentes como un menú de navegación secundario.
+- pie de página:
+  - : Es la parte inferior de la página, que generalmente contiene la letra pequeña, el copyright o la información de contacto. Es el sitio donde se coloca la información común (al igual que en el encabezado), pero esta información no suele ser tan importante o es secundaria con respecto a la página en sí misma. El pie también se suele usar para propósitos {{Glossary("SEO")}}, e incluye enlaces de acceso rápido al contenido más popular.
+
+Una página web «típica» se podría parecer a esta:
+
+![Un ejemplo de estructura de sitio web simple con un encabezado principal, menú de navegación, contenido principal, barra lateral y pie de página.](https://mdn.mozillademos.org/files/12417/sample-website.png)
+
+## HTML para dar estructura al contenido
+
+El ejemplo no es muy atractivo, pero puede servir para ilustrar un ejemplo de diseño de una página web típica. Puedes encontrar sitios con más columnas, algunas mucho más complejas, pero esta servirá para hacerte una idea general sobre el tema. Con el CSS adecuado podrás usar muchos más elementos para decorar las distintas secciones y conseguir que queden como deses, pero como se comentó anteriormente, necesitas respetar ciertas normas semánticas, y _utilizar el elemento adecuado para cada tipo de sección_.
+
+La parte visual no lo es todo. Utilizarás diferentes fuentes y colores para llamar la atención de los usuarios sin discapacidad visual de las partes más importantes del contenido, como el menú de navegación y sus enlaces correspondientes, pero ¿qué ocurre con los usuarios con discapacidad visual que no pueden distinguir los colores llamativos o el tamaño grande de las fuentes?
+
+> **Nota:** Los daltónicos representan alrededor del [4% de la población mundial](http://www.color-blindness.com/2006/04/28/colorblind-population/) (aproximadamente 1 de cada 12 hombres y 1 de cada 200 mujeres son daltónicos). Los invidentes y las personas con discapacidad visual representan aproximadamente el 4-5% de la población mundial (en 2012 había {{Interwiki("wikipedia", "Discapacidad visual")}} 285 millones de personas con alguna de estas características en el mundo, mientras que el total de la población estaba {{Interwiki("wikipedia", "World_human_population#/media/File:World_population_history.svg", "alrededor de los 7,000 millones")}}.
+
+En tu código HTML puedes crear secciones de contenido basadas en su _funcionalidad_ — puedes usar elementos que representen sin ambigüedad las diferentes secciones de contenido descritas, de forma que las tecnologías de accesibilidad y los lectores de pantalla puedan reconocer esos elementos y asistir en tareas como «encontrar el menú de navegación», o «encontrar el contenido principal». Como se mencionó anteriormente en el curso, hay una serie de {{web.link("/es/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Por_qué_necesitamos_estructura", "consecuencias por no usar la estructura de elementos y semántica adecuada para hacer el trabajo correctamente")}}.
+
+HTML dispone de etiquetas adecuadas que puedes usar para establecer estas secciones semánticas, por ejemplo:
+
+- **encabezado**: {{HTMLElement("header")}}.
+- **menú de navegación** : {{HTMLElement("nav")}}.
+- **contenido principal**: {{HTMLElement("main")}}, con varias subsecciones (además de la barra lateral) representadas por los elementos {{HTMLElement("article")}}, {{HTMLElement("section")}}, y {{HTMLElement("div")}}.
+- **barra lateral**: {{HTMLElement("aside")}}; a menudo colocada dentro de {{HTMLElement("main")}}.
+- **pie de página**: {{HTMLElement("footer")}}.
+
+### Aprendizaje activo: El código del ejemplo anterior
+
+El ejemplo de página web que se muestra arriba se consigue a partir del siguiente código (disponible en el [repositorio Github](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/document_and_website_structure/index.html)). Observa el ejemplo anterior, y a continuación échale un vistazo al código de abajo para identificar las secciones marcadas en el ejemplo.
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+
+    <title>El título de mi página</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" href="style.css">
+
+    <!-- las tres siguientes líneas son un truco para obtener elementos semánticos de HTML5 que funcionan en versiones de Internet Explorer antiguas -->
+    <!--[if lt IE 9]>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
+    <![endif]-->
+  </head>
+
+  <body>
+    <!-- Aquí empieza el encabezado principal que se mantendrá en todas las páginas del sitio web -->
+
+    <header>
+      <h1>Encabezado</h1>
+    </header>
+
+    <nav>
+      <ul>
+        <li><a href="#">Inicio</a></li>
+        <li><a href="#">Nuestro equipo</a></li>
+        <li><a href="#">Proyectos</a></li>
+        <li><a href="#">Contacto</a></li>
+      </ul>
+
+       <!-- Un formulario de búsqueda es una forma no-lineal de hacer búsquedas en un sitio web. -->
+
+       <form>
+         <input type="search" name="q" placeholder="Buscar">
+         <input type="submit" value="¡Vamos!">
+       </form>
+     </nav>
+
+    <!-- Aquí está el contenido principal de nuestra página -->
+    <main>
+
+      <!-- Contiene un artículo -->
+      <article>
+        <h2>Título del artículo</h2>
+
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>
+
+        <h3>Subsección</h3>
+
+        <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>
+
+        <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>
+
+        <h3>Otra subsección</h3>
+
+        <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
+
+        <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
+      </article>
+
+      <!-- el contenido aparte también se puede anidar dentro del contenido principal -->
+      <aside>
+        <h2>Relacionado</h2>
+
+        <ul>
+          <li><a href="#">Oh, me gusta estar junto al mar</a></li>
+          <li><a href="#">Oh, me gusta estar junto al mar</a></li>
+          <li><a href="#">Aunque en el norte de Inglaterra</a></li>
+          <li><a href="#">Nunca deja de llover</a></li>
+          <li><a href="#">Oh, bueno...</a></li>
+        </ul>
+      </aside>
+
+    </main>
+
+    <!-- Y aquí está nuestro pie de página principal que se utiliza en todas las páginas de nuestro sitio web -->
+
+    <footer>
+      <p>©Copyright 2050 de nadie. Todos los derechos revertidos.</p>
+    </footer>
+
+  </body>
+</html>
+```
+
+Tómate tu tiempo para revisar el código y comprenderlo — Los comentarios en el código también te ayudarán a entenderlo. No te pedimos que hagas mucho más en este artículo, porque la clave para entender el diseño del documento es escribir una estructura HTML conocida y posteriormente desarrollar su apariencia con CSS. Estudiaremos el diseño CSS como parte del tema CSS.
+
+## Elementos de diseño HTML en detalle
+
+Es bueno entender el significado global de todos los elementos definitorios de las secciones HTML en detalle; es algo en que trabajarás gradualmente a medida que comiences a tener más experiencia en el desarrollo web. En el enlace {{web.link("/es/docs/Web/HTML/Element", "referencia de elementos HTML")}} podemos entrar en un gran nivel de detalle. Por el momento, estas son las definiciones principales que deberíamos tratar de entender:
+
+- {{HTMLElement('main')}} encierra el contenido particular a esta página. Utilizaremos `<main>` solamente una vez para cada página y lo situaremos directamente dentro del elemento {{HTMLElement('body')}}. Es mejor que no lo anidemos en otros elementos.
+- {{HTMLElement('article')}} encuadra un bloque de contenido que tiene sentido por sí mismo aparte del resto de la página (por ejemplo una entrada en un blog).
+- {{HTMLElement('section')}} es parecido al elemento `<article>`, pero se usa más para agrupar cada parte de la página que, por su funcionalidad, constituye una sección en sí misma (por ejemplo un minimapa o un conjunto de titulares y resúmenes). Se considera una buena práctica comenzar cada una de estas secciones con un título de encabezado ({{web.link("/es/Learn/HTML/Howto/Set_up_a_proper_title_hierarchy", "heading")}}); observa que podemos subdividir artículos (`<article>`) en distintas secciones (`<section>`), o también secciones en distintos artículos, dependiendo del contexto.
+- {{HTMLElement('aside')}} incluye contenido que no está directamente relacionado con el contenido principal, pero que puede aportar información adicional relacionada indirectamente con él (resúmenes, biografías del autor, enlaces relacionados, etc.).
+- {{HTMLElement('header')}} representa un grupo de contenido introductorio. Si este es «_hijo_» de un elemento {{HTMLElement('body')}}, se convertirá en el **encabezado** principal del sitio web, pero si es hijo de un elemento {{HTMLElement('article')}} o un elemento {{HTMLElement('section')}}, entonces simplemente será el **encabezado** particular de cada sección (por favor, no lo confundas con {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Añadir_un_título","títulos y encabezados")}}).
+- {{HTMLElement('nav')}} contiene la funcionalidad de navegación principal de la página. Los enlaces secundarios, etc., no entrarán en la navegación.
+- {{HTMLElement('footer')}} representa un grupo de contenido al final de una página.
+
+### Envolturas no semánticas
+
+A veces hay situaciones en las que no encuentras un elemento semántico adecuado para agrupar ciertos elementos o englobar cierto contenido. Podrías querer agrupar ciertos elementos para referirte a ellos como una entidad que comparta cierto {{Glossary("CSS")}} o {{Glossary("JavaScript")}}. Para casos como esos, HTML dispone del elemento {{HTMLElement("div")}} y del elemento {{HTMLElement("span")}}. Preferentemente estos elementos se deberán utilizar con sus atributos ({{HTMLAttrxRef('class')}}), para conferirles algún tipo de etiquetado que permita determinarlos con facilidad.
+
+{{HTMLElement("span")}} es un elemento no-semántico que se utiliza en el interior de una línea. Se utiliza cuando no se nos ocurre el uso de ningún otro elemento semántico de texto en el que incluir el contenido, o si no se desea añadir ningún significado específico. Por ejemplo:
+
+```html
+<p>El rey volvió ebrio a su habitación alrededor de la 01:00, y sin duda la cerveza no le ayudaba
+cuando cruzó tambaleante la puerta <span class="editor-note">[nota del editor: en este instante de la
+representación, deberían atenuarse las luces]</span>.</p>
+```
+
+En este caso, la nota del editor solo proporciona información extra para el director de la obra; se supone que estos elementos no incluyen contenido extra importante. Para los usuarios sin discapacidad visual, quizás debamos usar CSS para diferenciar sutilmente estas notas del texto principal.
+
+{{HTMLElement("div")}} es un elemento de bloque no-semántico; lo utilizaras cuando no se te ocurra el uso de otro elemento semántico mejor, o si no deseas añadir ningún significado concreto. Por ejemplo, imagina un carrito de compras que puedes pulsar en cualquier momento durante tu estancia en una tienda virtual:
+
+```html
+<div class="shopping-cart">
+  <h2>Carrito de compras</h2>
+  <ul>
+    <li>
+      <p><a href=""><strong>Pendientes de plata</strong></a>: $99.95.</p>
+      <img src="../products/3333-0985/" alt="Pendientes de plata">
+    </li>
+    <li>
+      ...
+    </li>
+  </ul>
+  <p>Importe total: $237.89</p>
+</div>
+```
+
+Este no es un elemento lateral (`<aside>`) porque no necesariamente está relacionado con el contenido principal de la página (en realidad quieres que se pueda ver desde cualquier página). Ni siquiera se puede incluir en una sección (`<section>`) porque su contenido no forma parte del contenido principal de la página. Por lo tanto, un elemento `<div>` es el adecuado en este caso. Hemos incluido un **encabezado** para indicar a los lectores de pantalla donde van a encontrarlo.
+
+> **Advertencia:** Los elementos `div` son tan prácticos y simples que es fácil usarlos en exceso. Como no conllevan valor semántico, enmarañan el código HTML. Debemos tener cuidado de usarlos solo cuando no halles una solución mejor y reducir su uso al mínimo, porque de otro modo complicarás el mantenimiento y actualización de los documentos.
+
+### Saltos de línea y líneas horizontales
+
+Dos elementos que debes conocer y utilizarás ocasionalmente son {{HTMLElement("br")}} y {{HTMLElement("hr")}}:
+
+El elemento {{HTMLElement("br")}} genera un salto de línea en un párrafo; es la única manera de representar series de líneas cortas, como una dirección postal o un poema. Por ejemplo:
+
+```html
+<p>Había una vez un hombre llamado O'Dell<br>
+A quién le encantaba escribir HTML<br>
+Pero su estructura era mala, su semántica era triste<br>
+y su marcado no se interpretó muy bien.</p>
+```
+
+Sin el elemento {{HTMLElement("br")}}, todo el párrafo se habría presentado como una sola línea larga (como ya hemos dicho con anterioridad en este curso, {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Los_espacios_en_blanco_en_HTML", "HTML ignora la mayoría del espacio en blanco")}}); con estos elementos {{HTMLElement("br")}} en el código, las líneas quedan:
+
+{{EmbedLiveSample('line-break-live-sample', '100%', '125px', '', '', 'hide-codepen-jsfiddle')}}
+
+##
+
+Los elementos {{HTMLElement("hr")}} generan una regla horizontal en el documento que denota un cambio en la temática del texto (como un cambio de tema o de escena). Visualmente tiene el aspecto de una línea horizontal. Por ejemplo:
+
+```html
+<p>Ron fue acorralado en una esquina por las bestias abisales que merodeaban. Asustado, pero decidido a proteger a sus amigos, levantó su varita y se preparó para la batalla, con la esperanza de que su llamada de socorro hubiera llegado a alguien.</p>
+<hr>
+<p>Mientras tanto, Harry estaba sentado en su casa, mirando su declaración de regalías y pensando en cuándo saldría la próxima serie derivada, cuando de pronto voló por su ventana una carta de socorro y aterrizó en su regazo. La leyó vagamente y suspiró; "Será mejor que vuelva al trabajo entonces", reflexionó.</p>
+```
+
+Quedará así:
+
+{{EmbedLiveSample('Ejemplo_en_vivo_línea_horizontal', '100%', '185px', '', '', 'hide-codepen-jsfiddle')}}
+
+## Planificación de una página web sencilla
+
+Una vez has planificado el contenido de una página web sencilla, el paso lógico siguiente es intentar trabajar en el contenido para todo el sitio web, las páginas que necesitas y la forma de disponer las conexiones entre ellas para producir la mejor experiencia de usuario a los visitantes. Esto se conoce con el nombre de ({{Glossary("Arquitectura de la información")}}). Una web grande y compleja necesitará mucha planificación, pero para una web sencilla compuesta por unas cuantas páginas, el proceso puede ser sencillo, ¡y divertido!.
+
+1.  Ten en cuenta que habrá varios elementos comunes en muchas (si no en todas las) páginas, tal como el menú de navegación y el contenido del pie de página. Si la web está dedicada a un negocio, por ejemplo, sería una buena idea disponer de la información de contacto en el pie de página en todas las páginas. Anota lo que deseas tener en común en cada página. ![las características comunes del sitio de viajes para ir en cada página: título y logotipo, contacto, derechos de autor, términos y condiciones, selección de idioma, política de accesibilidad](https://mdn.mozillademos.org/files/12423/common-features.png)
+2.  A continuación, esboza un esquema sencillo de cuál podría ser la estructura deseada de la apariencia de cada página (podría ser algo tan sencillo como el siguiente dibujo). Anota los bloques principales. ![Un diagrama simple de una estructura de sitio de ejemplo, con un encabezado, un área de contenido principal, dos barras laterales opcionales y un pie de página](https://mdn.mozillademos.org/files/12429/site-structure.png)
+3.  Ahora, elabora una lista completa con todo el resto del contenido de tu sitio web que no sea común a todas las páginas. ![Una larga lista de todas las funciones que podrías incluir en tu sitio de viajes, desde buscar, hasta ofertas especiales e información específica del país](https://mdn.mozillademos.org/files/12425/feature-list.png)
+4.  A continuación, trata de ordenar todo este contenido por grupos, para hacerte una idea de las partes que podrían ir juntas en las diferentes páginas. Esto es muy similar a una técnica llamada {{Glossary("Clasificación de tarjetas")}}. ![Los elementos que deberían aparecer en un sitio de vacaciones ordenados en 5 categorías: Búsqueda, Especiales, Información específica del país, Resultados de búsqueda y Compra cosas](https://mdn.mozillademos.org/files/12421/card-sorting.png)
+5.  Ahora trata de esquematizar un mapa de tu sitio — dibuja un globo para cada página de tu sitio web y dibuja líneas que identifiquen el flujo de datos entre las distintas páginas. La página de inicio normalmente estará ubicada en el centro y enlazará con el resto de páginas; la mayoría de las páginas de una web sencilla estarán enlazadas desde el menú de navegación principal, aunque puede haber excepciones. También puedes incluir notas sobre cómo se pueden presentar las cosas. ![Un mapa del sitio que muestra la página de inicio, la página del país, los resultados de búsqueda, la página de ofertas especiales, la página de pago y la página de compra](https://mdn.mozillademos.org/files/12427/site-map.png)
+
+### Aprendizaje activo: Creación de un mapa del sitio web
+
+Intenta llevar a cabo el ejercicio anterior para crear tu propia página web. ¿Qué contenido le vas a dar a tu sitio web?
+
+> **Nota:** Guarda este esquema para utilizarlo más adelante.
+
+## ¡Pon a prueba tus habilidades!
+
+Has llegado al final de este artículo, pero ¿puedes recordar la información más importante? Puedes encontrar una evaluación detallada que pruebe estas habilidades al final del módulo; consulta {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Estructurar el contenido de una página")}}. ¡Recuerda leer primero el siguiente artículo de la serie y no solo saltarlo!
+
+## Resumen
+
+En este punto, deberías tener una mejor idea sobre cómo estructurar una página/sitio web. En el último artículo de este módulo, se explica cómo depurar HTML.
+
+## Ve también
+
+- {{web.link("/es/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines", "Uso de secciones y esquemas HTML")}}: Guía avanzada de elementos semánticos HTML5 y el algoritmo de esquema HTML5.
+
+{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}
+
+## En este módulo
+
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "¿Qué hay en el «head»? Metadatos en HTML")}}
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Fundamentos de texto HTML")}}
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Crear hipervínculos")}}
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Formateo de texto avanzado")}}
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Estructura web y documentación")}}
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Depurar HTML")}}
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Marcado para una carta")}}
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Estructuración del contenido de una página")}}
diff --git a/files/es/learn/html/introduction_to_html/getting_started/index.html b/files/es/learn/html/introduction_to_html/getting_started/index.html
deleted file mode 100644
index a9bd7ee6c3a581..00000000000000
--- a/files/es/learn/html/introduction_to_html/getting_started/index.html
+++ /dev/null
@@ -1,768 +0,0 @@
----
-title: Empezar con HTML
-slug: Learn/HTML/Introduction_to_HTML/Getting_started
-tags:
-  - Atributos
-  - Elemento
-  - Guía
-  - HTML
-  - Principiante
-  - comentários
-translation_of: Learn/HTML/Introduction_to_HTML/Getting_started
-original_slug: Learn/HTML/Introduccion_a_HTML/iniciar
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div>
-
-<p class="summary">En este artículo vamos a exponer lo más básico del HTML. Para comenzar definiremos elementos, atributos y el resto de términos importantes que quizá ya te suenen y qué función cumplen dentro del lenguaje. También explica dónde encajan estos en HTML. Aprenderás cómo se estructuran los elementos HTML, cómo se estructura una página HTML típica y otras características básicas importantes del lenguaje. Por el camino, también iremos practicando con algo de HTML.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prerrequisitos:</th>
-   <td>Conocimientos básicos de informática, {{web.link("/es/docs/Learn/Getting_started_with_the_web/Installing_basic_software", "tener instalado el software básico")}} y conocimientos básicos de cómo {{web.link("/es/docs/Learn/Getting_started_with_the_web/Dealing_with_files", "trabajar con archivos")}}.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objetivo:</th>
-   <td>Familiarizarte con el lenguaje HTML, y adquirir algo de práctica escribiendo unos pocos elementos HTML.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="¿Qué_es_el_HTML">¿Qué es el HTML?</h2>
-
-<p>{{Glossary("HTML")}} ("<em>Hypertext Markup Language</em>") no es un lenguaje de programación. Es un <em>lenguaje de marcado</em> que le dice a los navegadores web cómo estructurar las páginas web que estás visitando. Puede ser tan complejo o tan simple como desee el desarrollador web. El HTML consiste en una serie de {{Glossary("Element", "elementos")}}, que puedes utilizar para encerrar, delimitar o <em>marcar</em> diferentes partes del contenido para hacer que aparezcan de una cierta manera, o actúen de determinada forma. Las {{Glossary("Tag", "etiquetas")}} que delimitan un fragmento de contenido pueden hacer que dicho contenido enlace con otra página, ponga una palabra en cursiva, etcétera. Por ejemplo, dada la siguiente línea de contenido:</p>
-
-<pre class="brush: bash notranslate">Mi gato es muy gruñón</pre>
-
-<p>Si queremos que la línea sea independiente de otras, podemos especificar que es un párrafo encerrándola con una etiqueta de elemento de párrafo ({{htmlelement("p")}}):</p>
-
-<pre class="brush: html notranslate">&lt;p&gt;Mi gato es muy gruñón&lt;/p&gt;</pre>
-
-<div class="note">
-<p><strong>Nota</strong>: Las etiquetas en HTML no distinguen entre mayúsculas y minúsculas. Así que se pueden escribir tanto en mayúsculas como en minúsculas. Por ejemplo, una etiqueta {{htmlelement("title")}} se puede escribir como <code>&lt;title&gt;</code>, <code>&lt;TITLE&gt;</code>, <code>&lt;Title&gt;</code>, <code>&lt;TiTle&gt;</code>, etc., y funcionará correctamente. La mejor práctica, sin embargo, es escribir todas las etiquetas en minúsculas para mantener la coherencia y legibilidad, entre otros motivos.</p>
-</div>
-
-<h2 id="Anatomía_de_un_elemento_HTML">Anatomía de un elemento HTML</h2>
-
-<p>Exploremos un poco el elemento párrafo:</p>
-
-<p><img alt="Anatomía de los elementos HTML" src="https://mdn.mozillademos.org/files/11913/htmlexp.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p>
-
-<p>Las principales partes de nuestro elemento son:</p>
-
-<ul>
- <li>La <strong>etiqueta de apertura</strong>: consiste en el nombre del elemento (en este caso, <code>p</code>), encerrado entre <strong>paréntesis angulares</strong> de apertura y cierre. Esta etiqueta de apertura marca dónde comienza el elemento o comienza a tener efecto. En este ejemplo, precede al comienzo del texto del párrafo.</li>
- <li>El <strong>contenido</strong>: Este es el contenido del elemento. En este ejemplo, es el texto del párrafo.</li>
- <li>La <strong>etiqueta de cierre</strong>: Es lo mismo que la etiqueta de apertura, excepto que incluye una barra diagonal antes del nombre del elemento. Esto indica dónde termina el elemento; en este caso, dónde finaliza el párrafo. No incluir una etiqueta de cierre es un error común de principiante, y puede conducir a extraños resultados.</li>
-</ul>
-
-<p>El <strong>elemento</strong> lo conforman la etiqueta de apertura, seguida del contenido, seguido de la etiqueta de cierre.</p>
-
-<h3 id="Aprendizaje_activo_crear_tu_primer_elemento_HTML">Aprendizaje activo: crear tu primer elemento HTML</h3>
-
-<p>Edita la siguiente línea en el área <em>Entrada</em> envolviéndola con las etiquetas <code>&lt;em&gt;</code> y <code>&lt;/em&gt;</code>. Para <em>abrir el elemento</em>, coloca la etiqueta de apertura <code>&lt;em&gt;</code> al principio de la línea. Para <em>cerrar el elemento</em>, coloca la etiqueta de cierre <code>&lt;/em&gt;</code> al final de la línea. ¡Obtienes una línea en cursiva! Puedes ver tus cambios actualizados automáticamente en la caja de texto de <em>Salida</em>.</p>
-
-<p>Si te equivocas, siempre puedes volver al código anterior mediante el botón <em>Restablecer</em>. Si te quedas realmente atascado, pulsa el botón <em>Mostrar la solución</em> para ver la solución.</p>
-
-<div class="hidden">
-<h6 id="Código_reproducible">Código reproducible</h6>
-
-<pre class="brush: html notranslate">&lt;h2&gt;Salida en vivo&lt;/h2&gt;
-&lt;div class="output" style="min-height: 50px;"&gt;
-&lt;/div&gt;
-
-&lt;h2&gt;Código editable&lt;/h2&gt;
-&lt;p class="a11y-label"&gt;Pulsa Esc para quitar el foco del área de código (Tab inserta un carácter de tabulación).&lt;/p&gt;
-
-&lt;textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"&gt;
-  Este es mi texto.
-&lt;/textarea&gt;
-
-&lt;div class="controls"&gt;
-  &lt;input id="reset" type="button" value="Restablecer" /&gt;
-  &lt;input id="solution" type="button" value="Mostrar solución" /&gt;
-&lt;/div&gt;
-</pre>
-
-<pre class="brush: css notranslate">html {
-  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
-}
-
-h2 {
-  font-size: 16px;
-}
-
-.a11y-label {
-  margin: 0;
-  text-align: right;
-  font-size: 0.7rem;
-  width: 98%;
-}
-
-body {
-  margin: 10px;
-  background: #f5f9fa;
-}
-</pre>
-
-<pre class="brush: js notranslate">var textarea = document.getElementById('code');
-var reset = document.getElementById('reset');
-var solution = document.getElementById('solution');
-var output = document.querySelector('.output');
-var code = textarea.value;
-var userEntry = textarea.value;
-
-function updateCode() {
-  output.innerHTML = textarea.value;
-}
-
-reset.addEventListener('click', function() {
-  textarea.value = code;
-  userEntry = textarea.value;
-  solutionEntry = htmlSolution;
-  solution.value = 'Mostrar solución';
-  updateCode();
-});
-
-solution.addEventListener('click', function() {
-  if(solution.value === 'Mostrar solución') {
-    textarea.value = solutionEntry;
-    solution.value = 'Ocultar solución';
-  } else {
-    textarea.value = userEntry;
-    solution.value = 'Mostrar solución';
-  }
-  updateCode();
-});
-
-var htmlSolution = '&lt;em&gt;Este es mi texto.&lt;/em&gt;';
-var solutionEntry = htmlSolution;
-
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
-
-// captura la tecla de tabulación en el área de texto y en su lugar
-// hace que se escriba una tabulación en la posición del cursor
-
-textarea.onkeydown = function(e){
-  if (e.keyCode === 9) {
-    e.preventDefault();
-    insertAtCaret('\t');
-  }
-
-  if (e.keyCode === 27) {
-    textarea.blur();
-  }
-};
-
-function insertAtCaret(text) {
-  var scrollPos = textarea.scrollTop;
-  var caretPos = textarea.selectionStart;
-
-  var front = (textarea.value).substring(0, caretPos);
-  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
-  textarea.value = front + text + back;
-  caretPos = caretPos + text.length;
-  textarea.selectionStart = caretPos;
-  textarea.selectionEnd = caretPos;
-  textarea.focus();
-  textarea.scrollTop = scrollPos;
-}
-
-// Actualiza el userCode guardado cada vez que el usuario actualiza el código del área de texto
-
-textarea.onkeyup = function(){
-  // Solo queremos guardar el estado cuando se muestra el código de usuario,
-  // no es la solución, por lo que la solución no se guarda sobre el código del usuario
-  if(solution.value === 'Mostrar solución') {
-    userEntry = textarea.value;
-  } else {
-    solutionEntry = textarea.value;
-  }
-
-  updateCode();
-};</pre>
-</div>
-
-<p>{{ EmbedLiveSample('Código_reproducible', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p>
-
-<h3 id="Elementos_anidados">Elementos anidados</h3>
-
-<p>Se pueden poner elementos dentro de otros elementos. Esto se llama <strong>anidamiento</strong>. Si quisiéramos decir que nuestro gato es <strong>muy</strong> gruñón, podríamos encerrar la palabra <em>muy</em> en un elemento {{htmlelement("strong")}} para que aparezca destacada.</p>
-
-<pre class="brush: html notranslate">&lt;p&gt;Mi gato es &lt;strong&gt;muy&lt;/strong&gt; gruñón.&lt;/p&gt;</pre>
-
-<p>Hay una forma correcta e incorrecta de anidar. En el ejemplo anterior, primero abrimos el elemento <code>p</code>, luego abrimos el elemento <code>strong</code>. Para un anidamiento adecuado, primero debemos cerrar el elemento <code>strong</code>, antes de cerrar el <code>p</code>.</p>
-
-<p>El siguiente es un ejemplo de la forma <em>incorrecta</em> de anidar:</p>
-
-<pre class="example-bad brush: html notranslate">&lt;p&gt;Mi gato es &lt;strong&gt;muy gruñón.&lt;/p&gt;&lt;/strong&gt;</pre>
-
-<p>Los elementos tienen que abrirse y cerrarse correctamente para que estén claramente dentro o fuera el uno del otro. Con el tipo de superposición en el ejemplo anterior, el navegador tiene que adivinar tu intención. Este tipo de adivinanzas puede producir resultados inesperados.</p>
-
-<h3 id="Elementos_de_bloque_y_elementos_en_línea">Elementos de bloque y elementos en línea</h3>
-
-<p>Hay dos categorías importantes de elementos en HTML — Estos son los elementos de bloque y los elementos en línea.</p>
-
-<ul>
- <li>Los elementos de bloque forman un bloque visible en la página. Aparecerán en una línea nueva después de cualquier contenido anterior. Cualquier contenido que vaya después también aparecerá en una línea nueva. Los elementos a nivel de bloque suelen ser elementos estructurales de la página. Por ejemplo, un elemento a nivel de bloque puede representar encabezados, párrafos, listas, menús de navegación o pies de página. Un elemento a nivel de bloque no estaría anidado dentro de un elemento en línea, pero podría estar anidado dentro de otro elemento a nivel de bloque.</li>
- <li>Los elementos en línea están contenidos dentro de elementos de bloque y delimitan solo pequeñas partes del contenido del documento; (no párrafos enteros o agrupaciones de contenido) Un elemento en línea no hará que aparezca una nueva línea en el documento. Suele utilizarse con texto. Por ejemplo es el caso de un elemento {{htmlelement("a")}} (hipervínculo) o elementos de énfasis como {{htmlelement("em")}} o {{htmlelement("strong")}}.</li>
-</ul>
-
-<p>Considera el siguiente ejemplo:</p>
-
-<pre class="brush: html notranslate">&lt;em&gt;primero&lt;/em&gt;&lt;em&gt;segundo&lt;/em&gt;&lt;em&gt;tercero&lt;/em&gt;
-
-&lt;p&gt;cuarto&lt;/p&gt;&lt;p&gt;quinto&lt;/p&gt;&lt;p&gt;sexto&lt;/p&gt;
-</pre>
-
-<p>{{htmlelement("em")}} es un elemento en línea. Así, como puedes observar, los tres primeros elementos se sitúan en la misma línea, uno tras otro sin espacio entre ellos. Por otro lado, {{htmlelement("p")}} es un elemento a nivel de bloque. Cada elemento <em>p</em> aparece en una nueva línea, con un espacio arriba y abajo. (El espaciado se debe al {{web.link("/es/docs/Learn/CSS/Introduction_to_CSS", "estilo CSS")}} predeterminado que el navegador aplica a los párrafos).</p>
-
-<p>{{ EmbedLiveSample('Elementos_de_bloque_y_elementos_en_línea', 700, 200, "", "") }}</p>
-
-<div class="note">
-<p><strong>Nota</strong>: HTML5 redefinió las categorías de elementos: consulta <a href="https://html.spec.whatwg.org/multipage/indices.html#element-content-categories">Categorías de contenido de elementos</a>. Si bien estas definiciones son más precisas y menos ambiguas que sus predecesoras, las nuevas definiciones son mucho más complicadas de entender que <em>block</em> e <em>inline </em>. Este artículo seguirá con estos dos términos.</p>
-</div>
-
-<div class="note">
-<p><strong>Nota</strong>: Los términos «en bloque» (block) y «en línea» (inline), tal como se usan en este tema, no se deberían confundir con {{web.link("/es/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes", "los tipos de casillas de CSS")}} que se conocen con el mismo nombre. Aunque de manera predeterminada están relacionados, el hecho de cambiar el tipo de aspecto visual del CSS no cambia la categoría del elemento ni afecta a aquellos elementos que pueda contener. Una de las razones por las que HTML5 abandonó el uso de estos términos fue para evitar este tipo de confusión.</p>
-</div>
-
-<div class="note">
-<p><strong>Nota</strong>: Puedes encontrar referencias útiles que incluyen listas de elementos de bloque y elementos en línea. Consulta {{web.link("/es/docs/Web/HTML/Block-level_elements", "Elementos en bloque")}} y {{web.link("/es/docs/Web/HTML/Elementos_en_línea", "Elementos en línea")}}.</p>
-</div>
-
-<h3 id="Elementos_vacíos">Elementos vacíos</h3>
-
-<p>No todos los elementos siguen el patrón de etiqueta de apertura, contenido y etiqueta de cierre. Algunos elementos consisten solo en una etiqueta única, que se utiliza generalmente para insertar/incrustar algo en el documento en el lugar donde se le quiere incluir. Por ejemplo, el elemento {{htmlelement("img")}} inserta una imagen en la página:</p>
-
-<pre class="brush: html notranslate">&lt;img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"&gt;</pre>
-
-<p>Este texto mostrará lo siguiente en tu página:</p>
-
-<p>{{ EmbedLiveSample('Elementos_vacíos', 700, 300, "", "", "hide-codepen-jsfiddle") }}</p>
-
-<div class="note">
-<p><strong>Nota</strong>: Los elementos vacíos en ocasiones también se llaman elementos <em>nulos</em> o <em>vanos</em> (<em>void elements</em>).</p>
-</div>
-
-<h2 id="Atributos">Atributos</h2>
-
-<p>Los elementos también pueden tener atributos. Los atributos tienen este aspecto:</p>
-
-<p><img alt="atributo html" src="https://mdn.mozillademos.org/files/11915/htmlatributos.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p>
-
-<p>Los atributos contienen información extra sobre el elemento que no se mostrará en el contenido. En este caso, el atributo <code>class</code> asigna al elemento un identificador que se puede utilizar para dotarlo de información de estilo.</p>
-
-<p>Un atributo debería tener:</p>
-
-<ul>
- <li>Un espacio entre este y el nombre del elemento. (Para un elemento con más de un atributo, los atributos también deben estar separados por espacios).</li>
- <li>El nombre del atributo, seguido por un signo igual.</li>
- <li>Un valor del atributo, rodeado de comillas de apertura y cierre.</li>
-</ul>
-
-<h3 id="Aprendizaje_activo_Añadir_atributos_a_un_elemento">Aprendizaje activo: Añadir atributos a un elemento</h3>
-
-<p>Otro ejemplo de un elemento es {{htmlelement("a")}}. Esto significa <em>ancla</em>. Una ancla puede convertir el texto que encierra en un hipervínculo. Las anclas pueden tener varios atributos, pero varios son como sigue:</p>
-
-<ul>
- <li><strong><code>href</code></strong>: El valor de este atributo indica la dirección web a la que se quiere que apunte el enlace, que será hacia donde nos lleve el navegador cuando se haga clic sobre el elemento. Por ejemplo, <code>href="https://www.mozilla.org/"</code>.</li>
- <li><strong><code>title</code></strong>: El atributo <code>title</code> añade información adicional sobre el enlace, como puede ser el título de la página que vinculas. Por ejemplo, <code>title="La página de inicio de Mozilla"</code>. Esta información aparecerá cuando se le pase el ratón por encima.</li>
- <li><strong><code>target</code></strong>: El atributo <code>target</code> especifica el contexto de navegación que va a usar para mostrar el enlace. Por ejemplo, <code>target="_blank"</code> abrirá el enlace en una nueva pestaña. Si quieres mostrar el enlace en la pestaña activa, simplemente omite este atributo.</li>
-</ul>
-
-<p>Edita la línea de abajo en el área de <em>Entrada</em> para convertirlo en un enlace a tu sitio web favorito.</p>
-
-<ol>
- <li>Añade el elemento <code>&lt;a&gt;</code>.</li>
- <li>Añade el atributo <code>href</code> y el atributo <code>title</code>.</li>
- <li>Especifica el atributo <code>target</code> para abrir el enlace en una nueva pestaña.</li>
-</ol>
-
-<p>Los cambios se actualizarán inmediatamente en la zona de <em>Salida</em>. Deberías ver un enlace que mostrará el contenido del atributo <code>title</code> cuando pases el ratón encima, y que te llevará a la dirección web indicada por el atributo <code>href</code> cuando hagas clic. Recuerda que debes incluir un espacio entre el nombre del elemento y cada atributo.</p>
-
-<p>Si te equivocas, siempre puedes restablecer el código anterior pulsando el botón <em>Restablecer</em>. Si te quedas realmente atascado, pulsa el botón <em>Mostrar la solución</em> para ver la solución.</p>
-
-<div class="hidden">
-<h6 id="Código_reproducible_2">Código reproducible 2</h6>
-
-<pre class="brush: html notranslate">&lt;h2&gt;Salida en vivo&lt;/h2&gt;
-
-&lt;div class="output" style="min-height: 50px;"&gt;
-&lt;/div&gt;
-
-&lt;h2&gt;Código editable&lt;/h2&gt;
-&lt;p class="a11y-label"&gt;Pulsa Esc para quitar el foco del área de código (Tab inserta un carácter de tabulación).&lt;/p&gt;
-
-&lt;textarea id="code" class="input" style="min-height: 100px;width: 95%"&gt;
-  &amp;lt;p&amp;gt;Un enlace a mi sitio web favorito.&amp;lt;/p&amp;gt;
-&lt;/textarea&gt;
-
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="reset" type="button" value="Restablecer"&gt;
-  &lt;input id="solution" type="button" value="Mostrar solución"&gt;
-&lt;/div&gt;</pre>
-
-<pre class="brush: css notranslate">html {
-  font-family: sans-serif;
-}
-
-h2 {
-  font-size: 16px;
-}
-
-.a11y-label {
-  margin: 0;
-  text-align: right;
-  font-size: 0.7rem;
-  width: 98%;
-}
-
-body {
-  margin: 10px;
-  background: #f5f9fa;
-}</pre>
-
-<pre class="brush: js notranslate">var textarea = document.getElementById('code');
-var reset = document.getElementById('reset');
-var solution = document.getElementById('solution');
-var output = document.querySelector('.output');
-var code = textarea.value;
-var userEntry = textarea.value;
-
-function updateCode() {
-  output.innerHTML = textarea.value;
-}
-
-reset.addEventListener('click', function() {
-  textarea.value = code;
-  userEntry = textarea.value;
-  solutionEntry = htmlSolution;
-  solution.value = 'Mostrar solución';
-  updateCode();
-});
-
-solution.addEventListener('click', function() {
-  if(solution.value === 'Mostrar solución') {
-    textarea.value = solutionEntry;
-    solution.value = 'Ocultar solución';
-  } else {
-    textarea.value = userEntry;
-    solution.value = 'Mostrar solución';
-  }
-  updateCode();
-});
-
-var htmlSolution = '&lt;p&gt;Un enlace a mi &lt;a href="https://www.mozilla.org/" title="La página de inicio de Mozilla" target="_blank"&gt;sitio web favorito&lt;/a&gt;.&lt;/p&gt;';
-var solutionEntry = htmlSolution;
-
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
-
-// captura la tecla de tabulación en el área de texto y en su lugar
-// hace que se escriba una tabulación en la posición del cursor
-
-textarea.onkeydown = function(e){
-  if (e.keyCode === 9) {
-    e.preventDefault();
-    insertAtCaret('\t');
-  }
-
-  if (e.keyCode === 27) {
-    textarea.blur();
-  }
-};
-
-function insertAtCaret(text) {
-  var scrollPos = textarea.scrollTop;
-  var caretPos = textarea.selectionStart;
-
-  var front = (textarea.value).substring(0, caretPos);
-  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
-  textarea.value = front + text + back;
-  caretPos = caretPos + text.length;
-  textarea.selectionStart = caretPos;
-  textarea.selectionEnd = caretPos;
-  textarea.focus();
-  textarea.scrollTop = scrollPos;
-}
-
-// Actualiza el userCode guardado cada vez que el usuario actualiza el código del área de texto
-
-textarea.onkeyup = function(){
-  // Solo queremos guardar el estado cuando se muestra el código de usuario,
-  // no es la solución, por lo que la solución no se guarda sobre el código del usuario
-  if(solution.value === 'Mostrar solución') {
-    userEntry = textarea.value;
-  } else {
-    solutionEntry = textarea.value;
-  }
-
-  updateCode();
-};</pre>
-</div>
-
-<p>{{ EmbedLiveSample('Código_reproducible_2', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p>
-
-<h3 id="Atributos_booleanos">Atributos booleanos</h3>
-
-<p>En ocasiones puedes ver atributos escritos sin valor. Esto está permitido. Estos se denominan atributos booleanos. Los atributos booleanos solo pueden tener un valor, que generalmente es el mismo que el nombre del atributo. Por ejemplo, considera el atributo {{htmlattrxref("disabled", "input")}}, que puedes asignar a los elementos de entrada del formulario. (Usa esto para <em>deshabilitar</em> los elementos de entrada del formulario para que el usuario no pueda realizar entradas. Los elementos desactivados suelen tener una apariencia atenuada). Por ejemplo:</p>
-
-<pre class="brush: bash notranslate">&lt;input type="text" disabled="disabled"&gt;</pre>
-
-<p>De manera abreviada, también es posible escribirlo como se describe a continuación (además, se ha incluido un elemento de entrada de formulario no desactivado como referencia, para dar una idea más precisa de lo que sucede):</p>
-
-<pre class="brush: html notranslate">&lt;!-- el uso del atributo deshabilitado evita que el usuario final introduzca texto en el cuadro de entrada --&gt;
-&lt;input type="text" disabled&gt;
-
-&lt;!-- se permite la entrada de texto, ya que no contiene el atributo deshabilitado --&gt;
-&lt;input type="text"&gt;
-</pre>
-
-<p>Como referencia, el ejemplo anterior también incluye un elemento de entrada de formulario no deshabilitado. El HTML del ejemplo anterior produce este resultado:</p>
-
-<p>{{ EmbedLiveSample('Atributos_booleanos', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p>
-
-<h3 id="Omitir_comillas_en_valores_de_atributos">Omitir comillas en valores de atributos</h3>
-
-<p>Cuando observas diferentes páginas web, puedes encontrarte con todo tipo de estilos de etiquetado extraños, que incluyen valores de atributos sin comillas. Esto se permite en ciertas circunstancias, pero interrumpirá la edición en otras. Por ejemplo, si volvemos a revisar el ejemplo del enlace, sería posible escribir una versión básica con solo el atributo <code>href</code>, así:</p>
-
-<pre class="brush: html notranslate">&lt;a href=https://www.mozilla.org/&gt;mi sitio web favorito&lt;/a&gt;</pre>
-
-<p>Sin embargo, las cosas no funcionarán cuando a este estilo se añada el atributo <code>title</code>:</p>
-
-<pre class="example-bad brush: html notranslate">&lt;a href=https://www.mozilla.org/ title=The Mozilla homepage&gt;mi sitio web favorito&lt;/a&gt;</pre>
-
-<p>En este punto el navegador interpretará mal el cambio y pensará que el atributo <code>title</code> corresponde a tres atributos: un atributo <code>title</code> con el valor <em>The</em> y dos atributos booleanos: <code>Mozilla</code> y <code>homepage</code>. ¡Obviamente, esta no es la intensión! Causará errores o comportamientos inesperados, como puedes ver en el ejemplo en vivo a continuación. ¡Intenta colocar el cursor sobre el enlace para ver el texto del título!</p>
-
-<p>{{ EmbedLiveSample('Omitir_comillas_en_valores_de_atributos', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p>
-
-<p>Incluye <strong>siempre</strong> las comillas de atributos. Evita tales problemas y da como resultado un código más legible.</p>
-
-<h3 id="¿Comillas_simples_o_dobles">¿Comillas simples o dobles?</h3>
-
-<p>En este artículo todos los atributos se han incluido en comillas dobles. Sin embargo, se pueden ver comillas simples en algún código HTML. Es una cuestión de estilo. Puedes elegir libremente cuál prefieres. Ambas líneas de código son equivalentes:</p>
-
-<pre class="brush: html notranslate">&lt;a href="http://www.ejemplo.com"&gt;Un enlace a mi ejemplo.&lt;/a&gt;
-
-&lt;a href='http://www.ejemplo.com'&gt;Un enlace a mi ejemplo.&lt;/a&gt;</pre>
-
-<p>Asegúrate de no mezclar ambos tipos de comillas. El siguiente ejemplo muestra un tipo de mezcla de comillas que saldrá mal:</p>
-
-<pre class="example-bad brush: html notranslate">&lt;a href="http://www.ejemplo.com'&gt;Un enlace a mi ejemplo.&lt;/a&gt;</pre>
-
-<p>Si utilizas un tipo de comillas en tu documento HTML, puedes incluir el otro tipo de comillas para tus valores de atributo sin que esto te cause problemas:</p>
-
-<pre class="brush: html notranslate">&lt;a href="http://www.ejemplo.com" title="¿A que es 'divertido'"&gt;Un enlace a mi ejemplo.&lt;/a&gt;</pre>
-
-<p>Sin embargo, si deseas anidar unas comillas dentro de otras del mismo tipo (ya sea simples o dobles), tendrás que utilizar entidades HTML para las comillas. Por ejemplo, el siguiente código no va a funcionar:</p>
-
-<pre class="example-bad brush: html notranslate">&lt;a href='http://www.ejemplo.com' title='¿A que es 'divertido'?'&gt;Un enlace a mi ejemplo.&lt;/a&gt;</pre>
-
-<p>Así que tendrás que hacer esto:</p>
-
-<pre class="brush: html notranslate">&lt;a href='http://www.ejemplo.com' title='¿A que es &amp;apos;divertido&amp;apos;?'&gt;Un enlace a mi ejemplo.&lt;/a&gt;</pre>
-
-<h2 id="Anatomía_de_un_documento_HTML">Anatomía de un documento HTML</h2>
-
-<p>Los elementos HTML no son muy útiles por sí mismos. Ahora veremos cómo combinar los elementos individuales para formar una página HTML completa:</p>
-
-<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;meta charset="utf-8"&gt;
-    &lt;title&gt;Mi página de prueba&lt;/title&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;p&gt;Esta es mi página&lt;/p&gt;
-  &lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<p>Aquí tenemos:</p>
-
-<ol>
- <li><code>&lt;!DOCTYPE html&gt;</code>: El elemento <em>doctype</em>. En sus inicios, cuando el HTML llevaba poco tiempo (alrededor de 1991-1992), los <em>doctypes</em> servían como enlaces al conjunto de reglas que la página HTML debía seguir para que fuera considerado buen HTML. Un elemento <em>doctype</em> de aquella época podía parecerse a esto:
-
-  <pre class="brush: bash notranslate">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</pre>
-  En la actualidad se ignora y se considera un legado histórico que hay que incluir para que todo funcione correctamente. <code>&lt;!DOCTYPE html&gt;</code> es la secuencia de caracteres más corta que se acepta como elemento <em>doctype</em> válido. Eso es lo único que realmente necesitas saber.</li>
- <li><code>&lt;html&gt;&lt;/html&gt;</code>: El elemento <code>&lt;html&gt;</code>. Este elemento envuelve todo el contenido de la página. A veces se lo conoce como el elemento raíz.</li>
- <li><code>&lt;head&gt;&lt;/head&gt;</code>: El elemento <code>&lt;{{htmlelement("head")}}&gt;</code> (cabecera). Este elemento actúa como contenedor para todos los parámetros que quieras incluir en el documento HTML que <em>no serán</em> visibles a los visitantes de la página. Incluye cosas como palabras clave y la descripción de la página que quieras mostrar en los resultados de búsqueda, así como la hoja de estilo para formatear nuestro contenido, declaraciones de codificación de caracteres y más. Aprenderás más acerca de esto en el siguiente artículo de la serie.</li>
- <li><code>&lt;meta charset="utf-8"&gt;</code>: Este elemento establece que tu documento HTML usará la codificación UTF-8, que incluye la gran mayoría de caracteres de todos los idiomas humanos escritos. En resumen: puede gestionar cualquier contenido textual que pongas en tu documento. No hay razón para no configurar este valor y te puede ayudar a evitar problemas más adelante.</li>
- <li><code>&lt;title&gt;&lt;/title&gt;</code>: El elemento {{htmlelement("title")}}. Este establece el título de la página, que es el título que aparece en la pestaña del navegador en la que se carga la página. El título de la página también se utiliza para describir la página cuando se marca como favorita.</li>
- <li><code>&lt;body&gt;&lt;/body&gt;</code>: El elemento <code>&lt;body&gt;</code>. Contiene todo el contenido que quieres mostrar a los usuarios cuando visitan tu página, ya sea texto, imágenes, vídeos, juegos, pistas de audio reproducibles o cualquier otra cosa.</li>
-</ol>
-
-<h3 id="Aprendizaje_activo_Añadir_algunas_características_a_un_documento_HTML">Aprendizaje activo: Añadir algunas características a un documento HTML</h3>
-
-<p>Si quieres escribir algo de HTML en tu ordenador local para experimentar, puedes:</p>
-
-<ol>
- <li>Copiar el ejemplo de la página HTML del punto anterior.</li>
- <li>Crear un archivo nuevo en un editor de texto.</li>
- <li>Pegar el código en el nuevo archivo de texto.</li>
- <li>Guardar el archivo como <code>index.html</code>.</li>
-</ol>
-
-<div class="note">
-<p><strong>Nota</strong>: También puedes encontrar esta plantilla básica de HTML en el <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">repositorio GitHub del Área MDN Learning</a>.</p>
-</div>
-
-<p>Ahora puedes abrir este archivo en un navegador web para ver cómo se ve el código renderizado. Edita el código y actualiza el navegador para ver cuál es el resultado. En principio se verá algo así:</p>
-
-<p><img alt="Una sencilla página HTML que dice esta es mi página" src="https://mdn.mozillademos.org/files/12279/template-screenshot.png" style="display: block; height: 365px; margin: 0px auto; width: 595px;">En este ejercicio, puedes editar el código en tu ordenador como se indica arriba, o puedes editarlo en la ventana editable que tienes a continuación (la ventana editable representa solo el contenido del elemento {{htmlelement("body")}}, en este caso). Intenta reproducir los siguientes pasos:</p>
-
-<ul>
- <li>Justo debajo de la etiqueta de apertura {{htmlelement("body")}}, añade un título principal para el documento. Este deberá estar dentro de una etiqueta de apertura <code>&lt;h1&gt;</code> y una etiqueta de cierre <code>&lt;/h1&gt;</code>.</li>
- <li>Edita el contenido del párrafo e incluye algún texto sobre algo que te interese.</li>
- <li>Pon las palabras importantes dentro de etiquetas <code>&lt;strong&gt;</code> de apertura y <code>&lt;/strong&gt;</code> de cierre para que destaquen en negrita.</li>
- <li>Añade un enlace a tu párrafo, como se ha explicado {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Active_learning_Adding_attributes_to_an_element", "anteriormente en este mismo artículo")}}.</li>
- <li>Agrega una imagen a tu documento. Colócala debajo del párrafo, como {{web.link("/es/Learn/HTML/Introduction_to_HTML/Getting_started#Empty_elements", "se explicó anteriormente en el artículo")}}. Ganarás puntos extra si consigues enlazar a una imagen diferente (de tu propio ordenador o de cualquier otro lugar de la web).</li>
-</ul>
-
-<p>Si te equivocas, siempre puedes restablecer el código anterior pulsando el botón <em>Restablecer</em>. Si te quedas realmente atascado, pulsa el botón <em>Mostrar la solución</em> para ver la solución.</p>
-
-<div class="hidden">
-<h6 id="Código_reproducible_3">Código reproducible 3</h6>
-
-<pre class="brush: html notranslate">&lt;h2&gt;Salida en vivo&lt;/h2&gt;
-
-&lt;div class="output" style="min-height: 50px;"&gt;
-&lt;/div&gt;
-
-&lt;h2&gt;Código editable&lt;/h2&gt;
-&lt;p class="a11y-label"&gt;Pulsa Esc para quitar el foco del área de código (Tab inserta un carácter de tabulación).&lt;/p&gt;
-
-&lt;textarea id="code" class="input" style="min-height: 100px;width: 95%"&gt;
-  &amp;lt;p&amp;gt;Esta es mi página&amp;lt;/p&amp;gt;
-&lt;/textarea&gt;
-
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="reset" type="button" value="Restablecer"&gt;
-  &lt;input id="solution" type="button" value="Mostrar solución"&gt;
-&lt;/div&gt;</pre>
-
-<pre class="brush: css notranslate">html {
-  font-family: sans-serif;
-}
-
-h1 {
- color: blue;
-}
-
-h2 {
-  font-size: 16px;
-}
-
-.a11y-label {
-  margin: 0;
-  text-align: right;
-  font-size: 0.7rem;
-  width: 98%;
-}
-
-img {
-  max-width: 100%;
-}
-
-body {
-  margin: 10px;
-  background: #f5f9fa;
-}</pre>
-
-<pre class="brush: js notranslate">var textarea = document.getElementById('code');
-var reset = document.getElementById('reset');
-var solution = document.getElementById('solution');
-var output = document.querySelector('.output');
-var code = textarea.value;
-var userEntry = textarea.value;
-
-function updateCode() {
-  output.innerHTML = textarea.value;
-}
-
-reset.addEventListener('click', function() {
-  textarea.value = code;
-  userEntry = textarea.value;
-  solutionEntry = htmlSolution;
-  solution.value = 'Mostrar solución';
-  updateCode();
-});
-
-solution.addEventListener('click', function() {
-  if(solution.value === 'Mostrar solución') {
-    textarea.value = solutionEntry;
-    solution.value = 'Ocultar solución';
-  } else {
-    textarea.value = userEntry;
-    solution.value = 'Mostrar solución';
-  }
-  updateCode();
-});
-
-var htmlSolution = '&lt;h1&gt;Un poco de música&lt;/h1&gt;&lt;p&gt;Realmente disfruto &lt;strong&gt;tocar la batería&lt;/strong&gt;. Uno de mis bateristas favoritos es Neal Peart, que toca en la banda &lt;a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="artículo de Wikipedia de"&gt;Rush&lt;/a&gt;.\ Mi álbum favorito de Rush actualmente es &lt;a href="http://www.deezer.com/album/942295"&gt;Fotografías de la película&lt;/a&gt;.&lt;/p&gt;\ &lt;img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg"&gt;';
-var solutionEntry = htmlSolution;
-
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
-
-// captura la tecla de tabulación en el área de texto y en su lugar
-// hace que se escriba una tabulación en la posición del cursor
-
-textarea.onkeydown = function(e){
-  if (e.keyCode === 9) {
-    e.preventDefault();
-    insertAtCaret('\t');
-  }
-
-  if (e.keyCode === 27) {
-    textarea.blur();
-  }
-};
-
-function insertAtCaret(text) {
-  var scrollPos = textarea.scrollTop;
-  var caretPos = textarea.selectionStart;
-
-  var front = (textarea.value).substring(0, caretPos);
-  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
-  textarea.value = front + text + back;
-  caretPos = caretPos + text.length;
-  textarea.selectionStart = caretPos;
-  textarea.selectionEnd = caretPos;
-  textarea.focus();
-  textarea.scrollTop = scrollPos;
-}
-
-// Actualiza el userCode guardado cada vez que el usuario actualiza el código del área de texto
-
-textarea.onkeyup = function(){
-  // Solo queremos guardar el estado cuando se muestra el código de usuario,
-  // no es la solución, por lo que la solución no se guarda sobre el código del usuario
-  if(solution.value === 'Mostrar solución') {
-    userEntry = textarea.value;
-  } else {
-    solutionEntry = textarea.value;
-  }
-
-  updateCode();
-};</pre>
-</div>
-
-<p>{{ EmbedLiveSample('Código_reproducible_3', 700, 600, "", "", "hide-codepen-jsfiddle") }}</p>
-
-<h3 id="Los_espacios_en_blanco_en_HTML">Los espacios en blanco en HTML</h3>
-
-<p>En los ejemplos anteriores se han incluido espacios en blanco y saltos de línea en el código. Esto realmente no es necesario. Los dos siguientes fragmentos de código son equivalentes:</p>
-
-<pre class="brush: html notranslate">&lt;p&gt;Los perros son tontos.&lt;/p&gt;
-
-&lt;p&gt;Los    perros        son
-         tontos.&lt;/p&gt;</pre>
-
-<p>No importa cuántos espacios en blanco se utilicen (incluye tanto caracteres de espacio como saltos de línea) el intérprete de HTML reduce cada secuencia de espacio en blanco a un único espacio al interpretar el código. Entonces, ¿por qué utilizar espacios en blanco? La respuesta está en la legibilidad.<br>
- <br>
- Es más fácil comprender lo que está sucediendo en tu código si lo tienes bien formateado. En nuestro HTML cada elemento anidado está sangrado dos espacios más con respecto al exterior. Depende de ti qué estilo de formato utilizas (cuántos espacios para cada nivel de sangría, por ejemplo) pero debes plantearte el uso de algún tipo de formato.</p>
-
-<h2 id="Referencias_a_entidades_Inclusión_de_caracteres_especiales_en_HTML">Referencias a entidades: Inclusión de caracteres especiales en HTML</h2>
-
-<p>En HTML, los caracteres <code>&lt;</code>, <code>&gt;</code>,<code>"</code>,<code>'</code> y <code>&amp;</code> son caracteres especiales. Forman parte de la sintaxis HTML. Entonces, ¿cómo incluye uno de estos caracteres especiales en tu texto? Por ejemplo, si deseas utilizar un signo comercial o menor que, y no hacer que se interprete como código.</p>
-
-<p>Haces esto con referencias de caracteres. Estos son códigos especiales que representan caracteres, para ser usados en estas circunstancias exactas. Cada referencia de caracter comienza con un signo de ampersand (&amp;) y finaliza con un punto y coma (;).</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Caracter literal</th>
-   <th scope="col">Equivalente de referencia de caracteres</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>&lt;</td>
-   <td>&amp;lt;</td>
-  </tr>
-  <tr>
-   <td>&gt;</td>
-   <td>&amp;gt;</td>
-  </tr>
-  <tr>
-   <td>"</td>
-   <td>&amp;quot;</td>
-  </tr>
-  <tr>
-   <td>'</td>
-   <td>&amp;apos;</td>
-  </tr>
-  <tr>
-   <td>&amp;</td>
-   <td>&amp;amp;</td>
-  </tr>
- </tbody>
-</table>
-
-<p>El equivalente de referencia de caracter podría recordarse fácilmente porque el texto que utiliza se puede ver como menor que para '&amp;lt;' , cita para ' &amp;quot; ' y de manera similar para otros. Para obtener más información sobre la referencia de entidad, consulta {{interwiki("wikipedia", "Anexo:Referencias a entidades de caracteres XML y HTML")}} en (Wikipedia).<br>
- <br>
- Considera los dos siguientes párrafos:</p>
-
-<pre class="brush: html notranslate">&lt;p&gt;En HTML, defines un párrafo con el elemento &lt;p&gt;.&lt;/p&gt;
-
-&lt;p&gt;En HTML, defines un párrafo con el elemento &amp;lt;p&amp;gt;.&lt;/p&gt;</pre>
-
-<p>En la salida en vivo de abajo, puedes ver que el primer párrafo salió mal. El navegador interpreta la segunda instancia de <code>&lt;p&gt;</code> como el inicio de un nuevo párrafo. El segundo párrafo se ve bien porque hemos remplazado <code>&lt;</code> y <code>&gt;</code> por sus referencias correspondientes.</p>
-
-<p>{{ EmbedLiveSample('Referencias_a_entidades_Inclusión_de_caracteres_especiales_en_HTML', 700, 200) }}</p>
-
-<div class="note">
-<p><strong>Nota</strong>: En la Wikipedia se puede localizar un listado de todas las referencias de entidades de caracteres HTML disponibles: {{interwiki("wikipedia", "Anexo:Referencias a entidades de caracteres XML y HTML")}}. Observa que no necesitas usar ninguna referencia de entidad más para ningún otro de estos símbolos porque los navegadores modernos gestionan estos símbolos correctamente siempre y cuando en tu HTML hayas {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "establecido la codificación de el juego de caracteres universal UTF-8", "#Specifying_your_document's_character_encoding")}}.</p>
-</div>
-
-<h2 id="Comentarios_HTML">Comentarios HTML</h2>
-
-<p>En HTML hay un mecanismo para escribir comentarios en el código. Los comentarios son ignorados por el navegador y, por tanto, son invisibles para el usuario. El propósito de los comentarios es permitirte incluir notas en el código para explicar tu lógica o codificación. Esto es muy útil si regresas a un código base después de estar ausente el tiempo suficiente como para no recordarlo por completo. Del mismo modo, los comentarios son invaluables ya que diferentes personas están realizando cambios y actualizaciones.</p>
-
-<p>Para convertir en un comentario una sección de contenido de tu archivo HTML, debes delimitarlo con los marcadores especiales <code>&lt;!--</code> y <code>--&gt;</code>. Por ejemplo:</p>
-
-<pre class="brush: html notranslate">&lt;p&gt;No soy un comentario&lt;/p&gt;
-
-&lt;!-- &lt;p&gt;¡Yo sí!&lt;/p&gt; --&gt;</pre>
-
-<p>Como puedes ver a continuación, el primer párrafo aparece, pero el segundo no.</p>
-
-<p>{{ EmbedLiveSample('Comentarios_HTML', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p>
-
-<h2 id="Resumen">Resumen</h2>
-
-<p>Has llegado al final del artículo. Espero que hayas disfrutado del recorrido los conceptos básicos del HTML.<br>
- En este punto ya deberías entender el lenguaje, cómo funciona en un nivel básico y deberías poder escribir algunos elementos y atributos. También deberías poder escribir algunos elementos y atributos. Los artículos posteriores de este módulo profundizan en algunos de los temas aquí presentados, además de presentar otros conceptos del lenguaje.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: En este punto, a medida que empieces a aprender más sobre HTML, es posible que también desees comenzar a explorar los conceptos básicos de las Hojas de estilo en cascada (<em>Cascading style sheets</em>) o {{web.link("/es/docs/Learn/CSS", "CSS")}}. CSS, es el lenguaje utilizado para estilizar páginas web. (por ejemplo, cambiar fuentes o colores, o alterar el diseño de la página) HTML y CSS funcionan bien juntos, como pronto descubrirás.</p>
-</div>
-
-<h2 id="Ve_también">Ve también</h2>
-
-<ul>
- <li>{{web.link("/es/docs/Web/HTML/Applying_color", "Aplicación de color a elementos HTML mediante CSS")}}</li>
-</ul>
-
-<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div>
-
-
-
-<h2 id="En_este_módulo">En este módulo</h2>
-
-<ul>
- <li><a href="/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Empezar con HTML</a></li>
- <li><a href="/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">¿Qué hay en la cabecera? Metadatos en HTML</a></li>
- <li><a href="/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Fundamentos de texto HTML</a></li>
- <li><a href="/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creando hipervínculos</a></li>
- <li><a href="/es/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Formateo de texto avanzado</a></li>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Estructura web y documentación")}}</li>
- <li><a href="/es/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Depurar HTML</a></li>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Marcando para una carta")}}</li>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Estructuración del contenido de una página")}}</li>
-</ul>
diff --git a/files/es/learn/html/introduction_to_html/getting_started/index.md b/files/es/learn/html/introduction_to_html/getting_started/index.md
new file mode 100644
index 00000000000000..7d99bf22a40592
--- /dev/null
+++ b/files/es/learn/html/introduction_to_html/getting_started/index.md
@@ -0,0 +1,757 @@
+---
+title: Empezar con HTML
+slug: Learn/HTML/Introduction_to_HTML/Getting_started
+tags:
+  - Atributos
+  - Elemento
+  - Guía
+  - HTML
+  - Principiante
+  - comentários
+translation_of: Learn/HTML/Introduction_to_HTML/Getting_started
+original_slug: Learn/HTML/Introduccion_a_HTML/iniciar
+---
+{{LearnSidebar}}{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
+
+En este artículo vamos a exponer lo más básico del HTML. Para comenzar definiremos elementos, atributos y el resto de términos importantes que quizá ya te suenen y qué función cumplen dentro del lenguaje. También explica dónde encajan estos en HTML. Aprenderás cómo se estructuran los elementos HTML, cómo se estructura una página HTML típica y otras características básicas importantes del lenguaje. Por el camino, también iremos practicando con algo de HTML.
+
+<table>
+  <tbody>
+    <tr>
+      <th scope="row">Prerrequisitos:</th>
+      <td>
+        Conocimientos básicos de informática,
+        {{web.link("/es/docs/Learn/Getting_started_with_the_web/Installing_basic_software", "tener instalado el software básico")}}
+        y conocimientos básicos de cómo
+        {{web.link("/es/docs/Learn/Getting_started_with_the_web/Dealing_with_files", "trabajar con archivos")}}.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Objetivo:</th>
+      <td>
+        Familiarizarte con el lenguaje HTML, y adquirir algo de práctica
+        escribiendo unos pocos elementos HTML.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## ¿Qué es el HTML?
+
+{{Glossary("HTML")}} ("_Hypertext Markup Language_") no es un lenguaje de programación. Es un _lenguaje de marcado_ que le dice a los navegadores web cómo estructurar las páginas web que estás visitando. Puede ser tan complejo o tan simple como desee el desarrollador web. El HTML consiste en una serie de {{Glossary("Element", "elementos")}}, que puedes utilizar para encerrar, delimitar o _marcar_ diferentes partes del contenido para hacer que aparezcan de una cierta manera, o actúen de determinada forma. Las {{Glossary("Tag", "etiquetas")}} que delimitan un fragmento de contenido pueden hacer que dicho contenido enlace con otra página, ponga una palabra en cursiva, etcétera. Por ejemplo, dada la siguiente línea de contenido:
+
+```
+Mi gato es muy gruñón
+```
+
+Si queremos que la línea sea independiente de otras, podemos especificar que es un párrafo encerrándola con una etiqueta de elemento de párrafo ({{htmlelement("p")}}):
+
+```html
+<p>Mi gato es muy gruñón</p>
+```
+
+> **Nota:** Las etiquetas en HTML no distinguen entre mayúsculas y minúsculas. Así que se pueden escribir tanto en mayúsculas como en minúsculas. Por ejemplo, una etiqueta {{htmlelement("title")}} se puede escribir como `<title>`, `<TITLE>`, `<Title>`, `<TiTle>`, etc., y funcionará correctamente. La mejor práctica, sin embargo, es escribir todas las etiquetas en minúsculas para mantener la coherencia y legibilidad, entre otros motivos.
+
+## Anatomía de un elemento HTML
+
+Exploremos un poco el elemento párrafo:
+
+![Anatomía de los elementos HTML](https://mdn.mozillademos.org/files/11913/htmlexp.png)
+
+Las principales partes de nuestro elemento son:
+
+- La **etiqueta de apertura**: consiste en el nombre del elemento (en este caso, `p`), encerrado entre **paréntesis angulares** de apertura y cierre. Esta etiqueta de apertura marca dónde comienza el elemento o comienza a tener efecto. En este ejemplo, precede al comienzo del texto del párrafo.
+- El **contenido**: Este es el contenido del elemento. En este ejemplo, es el texto del párrafo.
+- La **etiqueta de cierre**: Es lo mismo que la etiqueta de apertura, excepto que incluye una barra diagonal antes del nombre del elemento. Esto indica dónde termina el elemento; en este caso, dónde finaliza el párrafo. No incluir una etiqueta de cierre es un error común de principiante, y puede conducir a extraños resultados.
+
+El **elemento** lo conforman la etiqueta de apertura, seguida del contenido, seguido de la etiqueta de cierre.
+
+### Aprendizaje activo: crear tu primer elemento HTML
+
+Edita la siguiente línea en el área _Entrada_ envolviéndola con las etiquetas `<em>` y `</em>`. Para _abrir el elemento_, coloca la etiqueta de apertura `<em>` al principio de la línea. Para _cerrar el elemento_, coloca la etiqueta de cierre `</em>` al final de la línea. ¡Obtienes una línea en cursiva! Puedes ver tus cambios actualizados automáticamente en la caja de texto de _Salida_.
+
+Si te equivocas, siempre puedes volver al código anterior mediante el botón _Restablecer_. Si te quedas realmente atascado, pulsa el botón _Mostrar la solución_ para ver la solución.
+
+```html hidden
+<h2>Salida en vivo</h2>
+<div class="output" style="min-height: 50px;">
+</div>
+
+<h2>Código editable</h2>
+<p class="a11y-label">Pulsa Esc para quitar el foco del área de código (Tab inserta un carácter de tabulación).</p>
+
+<textarea id="code" class="playable-code" style="min-height: 100px;width: 95%">
+Este es mi texto.
+</textarea>
+
+<div class="controls">
+<input id="reset" type="button" value="Restablecer" />
+<input id="solution" type="button" value="Mostrar solución" />
+</div>
+```
+
+```css hidden
+html {
+  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
+}
+
+h2 {
+font-size: 16px;
+}
+
+.a11y-label {
+margin: 0;
+text-align: right;
+font-size: 0.7rem;
+width: 98%;
+}
+
+body {
+margin: 10px;
+background: #f5f9fa;
+}
+```
+
+```js hidden
+var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+textarea.value = code;
+userEntry = textarea.value;
+solutionEntry = htmlSolution;
+solution.value = 'Mostrar solución';
+updateCode();
+});
+
+solution.addEventListener('click', function() {
+if(solution.value === 'Mostrar solución') {
+textarea.value = solutionEntry;
+solution.value = 'Ocultar solución';
+} else {
+textarea.value = userEntry;
+solution.value = 'Mostrar solución';
+}
+updateCode();
+});
+
+var htmlSolution = '<em>Este es mi texto.</em>';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// captura la tecla de tabulación en el área de texto y en su lugar
+// hace que se escriba una tabulación en la posición del cursor
+
+textarea.onkeydown = function(e){
+if (e.keyCode === 9) {
+e.preventDefault();
+insertAtCaret('\t');
+}
+
+if (e.keyCode === 27) {
+textarea.blur();
+}
+};
+
+function insertAtCaret(text) {
+var scrollPos = textarea.scrollTop;
+var caretPos = textarea.selectionStart;
+
+var front = (textarea.value).substring(0, caretPos);
+var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+textarea.value = front + text + back;
+caretPos = caretPos + text.length;
+textarea.selectionStart = caretPos;
+textarea.selectionEnd = caretPos;
+textarea.focus();
+textarea.scrollTop = scrollPos;
+}
+
+// Actualiza el userCode guardado cada vez que el usuario actualiza el código del área de texto
+
+textarea.onkeyup = function(){
+// Solo queremos guardar el estado cuando se muestra el código de usuario,
+// no es la solución, por lo que la solución no se guarda sobre el código del usuario
+if(solution.value === 'Mostrar solución') {
+userEntry = textarea.value;
+} else {
+solutionEntry = textarea.value;
+}
+
+updateCode();
+};
+```
+
+{{ EmbedLiveSample('Código_reproducible', 700, 400, "", "", "hide-codepen-jsfiddle") }}
+
+### Elementos anidados
+
+Se pueden poner elementos dentro de otros elementos. Esto se llama **anidamiento**. Si quisiéramos decir que nuestro gato es **muy** gruñón, podríamos encerrar la palabra _muy_ en un elemento {{htmlelement("strong")}} para que aparezca destacada.
+
+```html
+<p>Mi gato es <strong>muy</strong> gruñón.</p>
+```
+
+Hay una forma correcta e incorrecta de anidar. En el ejemplo anterior, primero abrimos el elemento `p`, luego abrimos el elemento `strong`. Para un anidamiento adecuado, primero debemos cerrar el elemento `strong`, antes de cerrar el `p`.
+
+El siguiente es un ejemplo de la forma _incorrecta_ de anidar:
+
+```html example-bad
+<p>Mi gato es <strong>muy gruñón.</p></strong>
+```
+
+Los elementos tienen que abrirse y cerrarse correctamente para que estén claramente dentro o fuera el uno del otro. Con el tipo de superposición en el ejemplo anterior, el navegador tiene que adivinar tu intención. Este tipo de adivinanzas puede producir resultados inesperados.
+
+### Elementos de bloque y elementos en línea
+
+Hay dos categorías importantes de elementos en HTML — Estos son los elementos de bloque y los elementos en línea.
+
+- Los elementos de bloque forman un bloque visible en la página. Aparecerán en una línea nueva después de cualquier contenido anterior. Cualquier contenido que vaya después también aparecerá en una línea nueva. Los elementos a nivel de bloque suelen ser elementos estructurales de la página. Por ejemplo, un elemento a nivel de bloque puede representar encabezados, párrafos, listas, menús de navegación o pies de página. Un elemento a nivel de bloque no estaría anidado dentro de un elemento en línea, pero podría estar anidado dentro de otro elemento a nivel de bloque.
+- Los elementos en línea están contenidos dentro de elementos de bloque y delimitan solo pequeñas partes del contenido del documento; (no párrafos enteros o agrupaciones de contenido) Un elemento en línea no hará que aparezca una nueva línea en el documento. Suele utilizarse con texto. Por ejemplo es el caso de un elemento {{htmlelement("a")}} (hipervínculo) o elementos de énfasis como {{htmlelement("em")}} o {{htmlelement("strong")}}.
+
+Considera el siguiente ejemplo:
+
+```html
+<em>primero</em><em>segundo</em><em>tercero</em>
+
+<p>cuarto</p><p>quinto</p><p>sexto</p>
+```
+
+{{htmlelement("em")}} es un elemento en línea. Así, como puedes observar, los tres primeros elementos se sitúan en la misma línea, uno tras otro sin espacio entre ellos. Por otro lado, {{htmlelement("p")}} es un elemento a nivel de bloque. Cada elemento _p_ aparece en una nueva línea, con un espacio arriba y abajo. (El espaciado se debe al {{web.link("/es/docs/Learn/CSS/Introduction_to_CSS", "estilo CSS")}} predeterminado que el navegador aplica a los párrafos).
+
+{{ EmbedLiveSample('Elementos_de_bloque_y_elementos_en_línea', 700, 200, "", "") }}
+
+> **Nota:** HTML5 redefinió las categorías de elementos: consulta [Categorías de contenido de elementos](https://html.spec.whatwg.org/multipage/indices.html#element-content-categories). Si bien estas definiciones son más precisas y menos ambiguas que sus predecesoras, las nuevas definiciones son mucho más complicadas de entender que _block_ e _inline_ . Este artículo seguirá con estos dos términos.
+
+> **Nota:** Los términos «en bloque» (block) y «en línea» (inline), tal como se usan en este tema, no se deberían confundir con {{web.link("/es/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes", "los tipos de casillas de CSS")}} que se conocen con el mismo nombre. Aunque de manera predeterminada están relacionados, el hecho de cambiar el tipo de aspecto visual del CSS no cambia la categoría del elemento ni afecta a aquellos elementos que pueda contener. Una de las razones por las que HTML5 abandonó el uso de estos términos fue para evitar este tipo de confusión.
+
+> **Nota:** Puedes encontrar referencias útiles que incluyen listas de elementos de bloque y elementos en línea. Consulta {{web.link("/es/docs/Web/HTML/Block-level_elements", "Elementos en bloque")}} y {{web.link("/es/docs/Web/HTML/Elementos_en_línea", "Elementos en línea")}}.
+
+### Elementos vacíos
+
+No todos los elementos siguen el patrón de etiqueta de apertura, contenido y etiqueta de cierre. Algunos elementos consisten solo en una etiqueta única, que se utiliza generalmente para insertar/incrustar algo en el documento en el lugar donde se le quiere incluir. Por ejemplo, el elemento {{htmlelement("img")}} inserta una imagen en la página:
+
+```html
+<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">
+```
+
+Este texto mostrará lo siguiente en tu página:
+
+{{ EmbedLiveSample('Elementos_vacíos', 700, 300, "", "", "hide-codepen-jsfiddle") }}
+
+> **Nota:** Los elementos vacíos en ocasiones también se llaman elementos _nulos_ o _vanos_ (_void elements_).
+
+## Atributos
+
+Los elementos también pueden tener atributos. Los atributos tienen este aspecto:
+
+![atributo html](https://mdn.mozillademos.org/files/11915/htmlatributos.png)
+
+Los atributos contienen información extra sobre el elemento que no se mostrará en el contenido. En este caso, el atributo `class` asigna al elemento un identificador que se puede utilizar para dotarlo de información de estilo.
+
+Un atributo debería tener:
+
+- Un espacio entre este y el nombre del elemento. (Para un elemento con más de un atributo, los atributos también deben estar separados por espacios).
+- El nombre del atributo, seguido por un signo igual.
+- Un valor del atributo, rodeado de comillas de apertura y cierre.
+
+### Aprendizaje activo: Añadir atributos a un elemento
+
+Otro ejemplo de un elemento es {{htmlelement("a")}}. Esto significa _ancla_. Una ancla puede convertir el texto que encierra en un hipervínculo. Las anclas pueden tener varios atributos, pero varios son como sigue:
+
+- **`href`**: El valor de este atributo indica la dirección web a la que se quiere que apunte el enlace, que será hacia donde nos lleve el navegador cuando se haga clic sobre el elemento. Por ejemplo, `href="https://www.mozilla.org/"`.
+- **`title`**: El atributo `title` añade información adicional sobre el enlace, como puede ser el título de la página que vinculas. Por ejemplo, `title="La página de inicio de Mozilla"`. Esta información aparecerá cuando se le pase el ratón por encima.
+- **`target`**: El atributo `target` especifica el contexto de navegación que va a usar para mostrar el enlace. Por ejemplo, `target="_blank"` abrirá el enlace en una nueva pestaña. Si quieres mostrar el enlace en la pestaña activa, simplemente omite este atributo.
+
+Edita la línea de abajo en el área de _Entrada_ para convertirlo en un enlace a tu sitio web favorito.
+
+1.  Añade el elemento `<a>`.
+2.  Añade el atributo `href` y el atributo `title`.
+3.  Especifica el atributo `target` para abrir el enlace en una nueva pestaña.
+
+Los cambios se actualizarán inmediatamente en la zona de _Salida_. Deberías ver un enlace que mostrará el contenido del atributo `title` cuando pases el ratón encima, y que te llevará a la dirección web indicada por el atributo `href` cuando hagas clic. Recuerda que debes incluir un espacio entre el nombre del elemento y cada atributo.
+
+Si te equivocas, siempre puedes restablecer el código anterior pulsando el botón _Restablecer_. Si te quedas realmente atascado, pulsa el botón _Mostrar la solución_ para ver la solución.
+
+```html hidden
+<h2>Salida en vivo</h2>
+
+<div class="output" style="min-height: 50px;">
+</div>
+
+<h2>Código editable</h2>
+<p class="a11y-label">Pulsa Esc para quitar el foco del área de código (Tab inserta un carácter de tabulación).</p>
+
+<textarea id="code" class="input" style="min-height: 100px;width: 95%">
+&#x26;lt;p&#x26;gt;Un enlace a mi sitio web favorito.&#x26;lt;/p&#x26;gt;
+</textarea>
+
+<div class="playable-buttons">
+<input id="reset" type="button" value="Restablecer">
+<input id="solution" type="button" value="Mostrar solución">
+</div>
+```
+
+```css hidden
+html {
+font-family: sans-serif;
+}
+
+h2 {
+font-size: 16px;
+}
+
+.a11y-label {
+margin: 0;
+text-align: right;
+font-size: 0.7rem;
+width: 98%;
+}
+
+body {
+margin: 10px;
+background: #f5f9fa;
+}
+```
+
+```js hidden
+var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+textarea.value = code;
+userEntry = textarea.value;
+solutionEntry = htmlSolution;
+solution.value = 'Mostrar solución';
+updateCode();
+});
+
+solution.addEventListener('click', function() {
+if(solution.value === 'Mostrar solución') {
+textarea.value = solutionEntry;
+solution.value = 'Ocultar solución';
+} else {
+textarea.value = userEntry;
+solution.value = 'Mostrar solución';
+}
+updateCode();
+});
+
+var htmlSolution = '<p>Un enlace a mi <a href="https://www.mozilla.org/" title="La página de inicio de Mozilla" target="\_blank">sitio web favorito</a>.</p>';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// captura la tecla de tabulación en el área de texto y en su lugar
+// hace que se escriba una tabulación en la posición del cursor
+
+textarea.onkeydown = function(e){
+if (e.keyCode === 9) {
+e.preventDefault();
+insertAtCaret('\t');
+}
+
+if (e.keyCode === 27) {
+textarea.blur();
+}
+};
+
+function insertAtCaret(text) {
+var scrollPos = textarea.scrollTop;
+var caretPos = textarea.selectionStart;
+
+var front = (textarea.value).substring(0, caretPos);
+var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+textarea.value = front + text + back;
+caretPos = caretPos + text.length;
+textarea.selectionStart = caretPos;
+textarea.selectionEnd = caretPos;
+textarea.focus();
+textarea.scrollTop = scrollPos;
+}
+
+// Actualiza el userCode guardado cada vez que el usuario actualiza el código del área de texto
+
+textarea.onkeyup = function(){
+// Solo queremos guardar el estado cuando se muestra el código de usuario,
+// no es la solución, por lo que la solución no se guarda sobre el código del usuario
+if(solution.value === 'Mostrar solución') {
+userEntry = textarea.value;
+} else {
+solutionEntry = textarea.value;
+}
+
+updateCode();
+};
+```
+
+{{ EmbedLiveSample('Código_reproducible_2', 700, 400, "", "", "hide-codepen-jsfiddle") }}
+
+### Atributos booleanos
+
+En ocasiones puedes ver atributos escritos sin valor. Esto está permitido. Estos se denominan atributos booleanos. Los atributos booleanos solo pueden tener un valor, que generalmente es el mismo que el nombre del atributo. Por ejemplo, considera el atributo {{htmlattrxref("disabled", "input")}}, que puedes asignar a los elementos de entrada del formulario. (Usa esto para _deshabilitar_ los elementos de entrada del formulario para que el usuario no pueda realizar entradas. Los elementos desactivados suelen tener una apariencia atenuada). Por ejemplo:
+
+```bash
+<input type="text" disabled="disabled">
+```
+
+De manera abreviada, también es posible escribirlo como se describe a continuación (además, se ha incluido un elemento de entrada de formulario no desactivado como referencia, para dar una idea más precisa de lo que sucede):
+
+```html
+<!-- el uso del atributo deshabilitado evita que el usuario final introduzca texto en el cuadro de entrada -->
+<input type="text" disabled>
+
+<!-- se permite la entrada de texto, ya que no contiene el atributo deshabilitado -->
+<input type="text">
+```
+
+Como referencia, el ejemplo anterior también incluye un elemento de entrada de formulario no deshabilitado. El HTML del ejemplo anterior produce este resultado:
+
+{{ EmbedLiveSample('Atributos_booleanos', 700, 100, "", "", "hide-codepen-jsfiddle") }}
+
+### Omitir comillas en valores de atributos
+
+Cuando observas diferentes páginas web, puedes encontrarte con todo tipo de estilos de etiquetado extraños, que incluyen valores de atributos sin comillas. Esto se permite en ciertas circunstancias, pero interrumpirá la edición en otras. Por ejemplo, si volvemos a revisar el ejemplo del enlace, sería posible escribir una versión básica con solo el atributo `href`, así:
+
+```html
+<a href=https://www.mozilla.org/>mi sitio web favorito</a>
+```
+
+Sin embargo, las cosas no funcionarán cuando a este estilo se añada el atributo `title`:
+
+```html example-bad
+<a href=https://www.mozilla.org/ title=The Mozilla homepage>mi sitio web favorito</a>
+```
+
+En este punto el navegador interpretará mal el cambio y pensará que el atributo `title` corresponde a tres atributos: un atributo `title` con el valor _The_ y dos atributos booleanos: `Mozilla` y `homepage`. ¡Obviamente, esta no es la intensión! Causará errores o comportamientos inesperados, como puedes ver en el ejemplo en vivo a continuación. ¡Intenta colocar el cursor sobre el enlace para ver el texto del título!
+
+{{ EmbedLiveSample('Omitir_comillas_en_valores_de_atributos', 700, 100, "", "", "hide-codepen-jsfiddle") }}
+
+Incluye **siempre** las comillas de atributos. Evita tales problemas y da como resultado un código más legible.
+
+### ¿Comillas simples o dobles?
+
+En este artículo todos los atributos se han incluido en comillas dobles. Sin embargo, se pueden ver comillas simples en algún código HTML. Es una cuestión de estilo. Puedes elegir libremente cuál prefieres. Ambas líneas de código son equivalentes:
+
+```html
+<a href="http://www.ejemplo.com">Un enlace a mi ejemplo.</a>
+
+<a href='http://www.ejemplo.com'>Un enlace a mi ejemplo.</a>
+```
+
+Asegúrate de no mezclar ambos tipos de comillas. El siguiente ejemplo muestra un tipo de mezcla de comillas que saldrá mal:
+
+```html example-bad
+<a href="http://www.ejemplo.com'>Un enlace a mi ejemplo.</a>
+```
+
+Si utilizas un tipo de comillas en tu documento HTML, puedes incluir el otro tipo de comillas para tus valores de atributo sin que esto te cause problemas:
+
+```html
+<a href="http://www.ejemplo.com" title="¿A que es 'divertido'">Un enlace a mi ejemplo.</a>
+```
+
+Sin embargo, si deseas anidar unas comillas dentro de otras del mismo tipo (ya sea simples o dobles), tendrás que utilizar entidades HTML para las comillas. Por ejemplo, el siguiente código no va a funcionar:
+
+```html example-bad
+<a href='http://www.ejemplo.com' title='¿A que es 'divertido'?'>Un enlace a mi ejemplo.</a>
+```
+
+Así que tendrás que hacer esto:
+
+```html
+<a href='http://www.ejemplo.com' title='¿A que es &apos;divertido&apos;?'>Un enlace a mi ejemplo.</a>
+```
+
+## Anatomía de un documento HTML
+
+Los elementos HTML no son muy útiles por sí mismos. Ahora veremos cómo combinar los elementos individuales para formar una página HTML completa:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Mi página de prueba</title>
+  </head>
+  <body>
+    <p>Esta es mi página</p>
+  </body>
+</html>
+```
+
+Aquí tenemos:
+
+1.  `<!DOCTYPE html>`: El elemento _doctype_. En sus inicios, cuando el HTML llevaba poco tiempo (alrededor de 1991-1992), los _doctypes_ servían como enlaces al conjunto de reglas que la página HTML debía seguir para que fuera considerado buen HTML. Un elemento _doctype_ de aquella época podía parecerse a esto:
+
+    ```html
+    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+    ```
+
+    En la actualidad se ignora y se considera un legado histórico que hay que incluir para que todo funcione correctamente. `<!DOCTYPE html>` es la secuencia de caracteres más corta que se acepta como elemento _doctype_ válido. Eso es lo único que realmente necesitas saber.
+
+2.  `<html></html>`: El elemento `<html>`. Este elemento envuelve todo el contenido de la página. A veces se lo conoce como el elemento raíz.
+3.  `<head></head>`: El elemento `<{{htmlelement("head")}}>` (cabecera). Este elemento actúa como contenedor para todos los parámetros que quieras incluir en el documento HTML que _no serán_ visibles a los visitantes de la página. Incluye cosas como palabras clave y la descripción de la página que quieras mostrar en los resultados de búsqueda, así como la hoja de estilo para formatear nuestro contenido, declaraciones de codificación de caracteres y más. Aprenderás más acerca de esto en el siguiente artículo de la serie.
+4.  `<meta charset="utf-8">`: Este elemento establece que tu documento HTML usará la codificación UTF-8, que incluye la gran mayoría de caracteres de todos los idiomas humanos escritos. En resumen: puede gestionar cualquier contenido textual que pongas en tu documento. No hay razón para no configurar este valor y te puede ayudar a evitar problemas más adelante.
+5.  `<title></title>`: El elemento {{htmlelement("title")}}. Este establece el título de la página, que es el título que aparece en la pestaña del navegador en la que se carga la página. El título de la página también se utiliza para describir la página cuando se marca como favorita.
+6.  `<body></body>`: El elemento `<body>`. Contiene todo el contenido que quieres mostrar a los usuarios cuando visitan tu página, ya sea texto, imágenes, vídeos, juegos, pistas de audio reproducibles o cualquier otra cosa.
+
+### Aprendizaje activo: Añadir algunas características a un documento HTML
+
+Si quieres escribir algo de HTML en tu ordenador local para experimentar, puedes:
+
+1.  Copiar el ejemplo de la página HTML del punto anterior.
+2.  Crear un archivo nuevo en un editor de texto.
+3.  Pegar el código en el nuevo archivo de texto.
+4.  Guardar el archivo como `index.html`.
+
+> **Nota:** También puedes encontrar esta plantilla básica de HTML en el [repositorio GitHub del Área MDN Learning](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html).
+
+Ahora puedes abrir este archivo en un navegador web para ver cómo se ve el código renderizado. Edita el código y actualiza el navegador para ver cuál es el resultado. En principio se verá algo así:
+
+![Una sencilla página HTML que dice esta es mi página](https://mdn.mozillademos.org/files/12279/template-screenshot.png)En este ejercicio, puedes editar el código en tu ordenador como se indica arriba, o puedes editarlo en la ventana editable que tienes a continuación (la ventana editable representa solo el contenido del elemento {{htmlelement("body")}}, en este caso). Intenta reproducir los siguientes pasos:
+
+- Justo debajo de la etiqueta de apertura {{htmlelement("body")}}, añade un título principal para el documento. Este deberá estar dentro de una etiqueta de apertura `<h1>` y una etiqueta de cierre `</h1>`.
+- Edita el contenido del párrafo e incluye algún texto sobre algo que te interese.
+- Pon las palabras importantes dentro de etiquetas `<strong>` de apertura y `</strong>` de cierre para que destaquen en negrita.
+- Añade un enlace a tu párrafo, como se ha explicado {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Active_learning_Adding_attributes_to_an_element", "anteriormente en este mismo artículo")}}.
+- Agrega una imagen a tu documento. Colócala debajo del párrafo, como {{web.link("/es/Learn/HTML/Introduction_to_HTML/Getting_started#Empty_elements", "se explicó anteriormente en el artículo")}}. Ganarás puntos extra si consigues enlazar a una imagen diferente (de tu propio ordenador o de cualquier otro lugar de la web).
+
+Si te equivocas, siempre puedes restablecer el código anterior pulsando el botón _Restablecer_. Si te quedas realmente atascado, pulsa el botón _Mostrar la solución_ para ver la solución.
+
+```html hidden
+<h2>Salida en vivo</h2>
+
+<div class="output" style="min-height: 50px;">
+</div>
+
+<h2>Código editable</h2>
+<p class="a11y-label">Pulsa Esc para quitar el foco del área de código (Tab inserta un carácter de tabulación).</p>
+
+<textarea id="code" class="input" style="min-height: 100px;width: 95%">
+&#x26;lt;p&#x26;gt;Esta es mi página&#x26;lt;/p&#x26;gt;
+</textarea>
+
+<div class="playable-buttons">
+<input id="reset" type="button" value="Restablecer">
+<input id="solution" type="button" value="Mostrar solución">
+</div>
+```
+
+```css hidden
+html {
+font-family: sans-serif;
+}
+
+h1 {
+color: blue;
+}
+
+h2 {
+font-size: 16px;
+}
+
+.a11y-label {
+margin: 0;
+text-align: right;
+font-size: 0.7rem;
+width: 98%;
+}
+
+img {
+max-width: 100%;
+}
+
+body {
+margin: 10px;
+background: #f5f9fa;
+}
+```
+
+```js hidden
+var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+textarea.value = code;
+userEntry = textarea.value;
+solutionEntry = htmlSolution;
+solution.value = 'Mostrar solución';
+updateCode();
+});
+
+solution.addEventListener('click', function() {
+if(solution.value === 'Mostrar solución') {
+textarea.value = solutionEntry;
+solution.value = 'Ocultar solución';
+} else {
+textarea.value = userEntry;
+solution.value = 'Mostrar solución';
+}
+updateCode();
+});
+
+var htmlSolution = '<h1>Un poco de música</h1><p>Realmente disfruto <strong>tocar la batería</strong>. Uno de mis bateristas favoritos es Neal Peart, que toca en la banda <a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="artículo de Wikipedia de">Rush</a>.\ Mi álbum favorito de Rush actualmente es <a href="http://www.deezer.com/album/942295">Fotografías de la película</a>.</p>\ <img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg">';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// captura la tecla de tabulación en el área de texto y en su lugar
+// hace que se escriba una tabulación en la posición del cursor
+
+textarea.onkeydown = function(e){
+if (e.keyCode === 9) {
+e.preventDefault();
+insertAtCaret('\t');
+}
+
+if (e.keyCode === 27) {
+textarea.blur();
+}
+};
+
+function insertAtCaret(text) {
+var scrollPos = textarea.scrollTop;
+var caretPos = textarea.selectionStart;
+
+var front = (textarea.value).substring(0, caretPos);
+var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+textarea.value = front + text + back;
+caretPos = caretPos + text.length;
+textarea.selectionStart = caretPos;
+textarea.selectionEnd = caretPos;
+textarea.focus();
+textarea.scrollTop = scrollPos;
+}
+
+// Actualiza el userCode guardado cada vez que el usuario actualiza el código del área de texto
+
+textarea.onkeyup = function(){
+// Solo queremos guardar el estado cuando se muestra el código de usuario,
+// no es la solución, por lo que la solución no se guarda sobre el código del usuario
+if(solution.value === 'Mostrar solución') {
+userEntry = textarea.value;
+} else {
+solutionEntry = textarea.value;
+}
+
+updateCode();
+};
+```
+
+{{ EmbedLiveSample('Código_reproducible_3', 700, 600, "", "", "hide-codepen-jsfiddle") }}
+
+### Los espacios en blanco en HTML
+
+En los ejemplos anteriores se han incluido espacios en blanco y saltos de línea en el código. Esto realmente no es necesario. Los dos siguientes fragmentos de código son equivalentes:
+
+```html
+<p>Los perros son tontos.</p>
+
+<p>Los    perros        son
+         tontos.</p>
+```
+
+No importa cuántos espacios en blanco se utilicen (incluye tanto caracteres de espacio como saltos de línea) el intérprete de HTML reduce cada secuencia de espacio en blanco a un único espacio al interpretar el código. Entonces, ¿por qué utilizar espacios en blanco? La respuesta está en la legibilidad.
+
+Es más fácil comprender lo que está sucediendo en tu código si lo tienes bien formateado. En nuestro HTML cada elemento anidado está sangrado dos espacios más con respecto al exterior. Depende de ti qué estilo de formato utilizas (cuántos espacios para cada nivel de sangría, por ejemplo) pero debes plantearte el uso de algún tipo de formato.
+
+## Referencias a entidades: Inclusión de caracteres especiales en HTML
+
+En HTML, los caracteres `<`, `>`,`"`,`'` y `&` son caracteres especiales. Forman parte de la sintaxis HTML. Entonces, ¿cómo incluye uno de estos caracteres especiales en tu texto? Por ejemplo, si deseas utilizar un signo comercial o menor que, y no hacer que se interprete como código.
+
+Haces esto con referencias de caracteres. Estos son códigos especiales que representan caracteres, para ser usados en estas circunstancias exactas. Cada referencia de caracter comienza con un signo de ampersand (&) y finaliza con un punto y coma (;).
+
+| Caracter literal | Equivalente de referencia de caracteres |
+| ---------------- | --------------------------------------- |
+| <                | \&lt;                                   |
+| >                | \&gt;                                   |
+| "                | \&quot;                                 |
+| '                | \&apos;                                 |
+| &                | \&amp;                                  |
+
+El equivalente de referencia de caracter podría recordarse fácilmente porque el texto que utiliza se puede ver como menor que para '\&lt;' , cita para ' \&quot; ' y de manera similar para otros. Para obtener más información sobre la referencia de entidad, consulta {{interwiki("wikipedia", "Anexo:Referencias a entidades de caracteres XML y HTML")}} en (Wikipedia).
+
+Considera los dos siguientes párrafos:
+
+```html
+<p>En HTML, defines un párrafo con el elemento <p>.</p>
+
+<p>En HTML, defines un párrafo con el elemento &lt;p&gt;.</p>
+```
+
+En la salida en vivo de abajo, puedes ver que el primer párrafo salió mal. El navegador interpreta la segunda instancia de `<p>` como el inicio de un nuevo párrafo. El segundo párrafo se ve bien porque hemos remplazado `<` y `>` por sus referencias correspondientes.
+
+{{ EmbedLiveSample('Referencias_a_entidades_Inclusión_de_caracteres_especiales_en_HTML', 700, 200) }}
+
+> **Nota:** En la Wikipedia se puede localizar un listado de todas las referencias de entidades de caracteres HTML disponibles: {{interwiki("wikipedia", "Anexo:Referencias a entidades de caracteres XML y HTML")}}. Observa que no necesitas usar ninguna referencia de entidad más para ningún otro de estos símbolos porque los navegadores modernos gestionan estos símbolos correctamente siempre y cuando en tu HTML hayas {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "establecido la codificación de el juego de caracteres universal UTF-8", "#Specifying_your_document's_character_encoding")}}.
+
+## Comentarios HTML
+
+En HTML hay un mecanismo para escribir comentarios en el código. Los comentarios son ignorados por el navegador y, por tanto, son invisibles para el usuario. El propósito de los comentarios es permitirte incluir notas en el código para explicar tu lógica o codificación. Esto es muy útil si regresas a un código base después de estar ausente el tiempo suficiente como para no recordarlo por completo. Del mismo modo, los comentarios son invaluables ya que diferentes personas están realizando cambios y actualizaciones.
+
+Para convertir en un comentario una sección de contenido de tu archivo HTML, debes delimitarlo con los marcadores especiales `<!--` y `-->`. Por ejemplo:
+
+```html
+<p>No soy un comentario</p>
+
+<!-- <p>¡Yo sí!</p> -->
+```
+
+Como puedes ver a continuación, el primer párrafo aparece, pero el segundo no.
+
+{{ EmbedLiveSample('Comentarios_HTML', 700, 100, "", "", "hide-codepen-jsfiddle") }}
+
+## Resumen
+
+Has llegado al final del artículo. Espero que hayas disfrutado del recorrido los conceptos básicos del HTML.
+En este punto ya deberías entender el lenguaje, cómo funciona en un nivel básico y deberías poder escribir algunos elementos y atributos. También deberías poder escribir algunos elementos y atributos. Los artículos posteriores de este módulo profundizan en algunos de los temas aquí presentados, además de presentar otros conceptos del lenguaje.
+
+> **Nota:** En este punto, a medida que empieces a aprender más sobre HTML, es posible que también desees comenzar a explorar los conceptos básicos de las Hojas de estilo en cascada (_Cascading style sheets_) o {{web.link("/es/docs/Learn/CSS", "CSS")}}. CSS, es el lenguaje utilizado para estilizar páginas web. (por ejemplo, cambiar fuentes o colores, o alterar el diseño de la página) HTML y CSS funcionan bien juntos, como pronto descubrirás.
+
+## Ve también
+
+- {{web.link("/es/docs/Web/HTML/Applying_color", "Aplicación de color a elementos HTML mediante CSS")}}
+
+{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
+
+## En este módulo
+
+- [Empezar con HTML](/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started)
+- [¿Qué hay en la cabecera? Metadatos en HTML](/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML)
+- [Fundamentos de texto HTML](/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals)
+- [Creando hipervínculos](/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks)
+- [Formateo de texto avanzado](/es/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting)
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Estructura web y documentación")}}
+- [Depurar HTML](/es/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML)
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Marcando para una carta")}}
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Estructuración del contenido de una página")}}
diff --git a/files/es/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/es/learn/html/introduction_to_html/html_text_fundamentals/index.html
deleted file mode 100644
index 26c7cf3963be03..00000000000000
--- a/files/es/learn/html/introduction_to_html/html_text_fundamentals/index.html
+++ /dev/null
@@ -1,971 +0,0 @@
----
-title: Fundamentos de texto en HTML
-slug: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals
-tags:
-  - CodingScripting
-  - Encabezados
-  - Estructuras
-  - Guía
-  - HTML
-  - Introducción a HTML
-  - Novato
-  - Principiante
-  - Párrafos
-  - Texto
-  - aprende
-  - semántica
-translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals
-original_slug: Learn/HTML/Introduccion_a_HTML/texto
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</div>
-
-<p class="summary">Una de las principales funciones de HTML es dar al texto estructura y significado (también conocido como {{Glossary("semantics", "semántica")}}), de forma que un navegador pueda mostrarlo correctamente. Este articulo explica la forma en que se puede usar {{Glossary("HTML")}} para estructurar una página de texto añadiendo encabezados y párrafos, enfatizando palabras, creando listas y más.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prerrequisitos:</th>
-   <td>Estar familiarizado con el HTML básico, que se expone en {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objetivo:</th>
-   <td>Aprender a marcar una página de texto básica para darle estructura y significado, incluidos párrafos, encabezados, listas, efectos de énfasis y citas.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Conceptos_básicos_Encabezados_y_párrafos">Conceptos básicos: Encabezados y párrafos</h2>
-
-<p>La mayor parte del texto estructurado está compuesto por encabezados y párrafos, independientemente de si lees una historia, un periódico, un libro de texto, una revista, etc.</p>
-
-<p><img alt="Un ejemplo de la portada de un periódico, que muestra el uso de un encabezado, subtítulos y párrafos de nivel superior." src="https://mdn.mozillademos.org/files/12371/newspaper_small.jpg" style="display: block; margin: 0 auto;"></p>
-
-<p>El contenido estructurado simplifica la experiencia en la lectura y se disfruta más.</p>
-
-<p>En HTML, cada párrafo tiene que estar delimitado por un elemento {{HTMLElement("p")}}, como en este ejemplo:</p>
-
-<pre class="brush: html notranslate">&lt;p&gt;Soy un párrafo, ¡desde luego que lo soy!&lt;/p&gt;</pre>
-
-<p>Cada sección tiene que estar delimitada por un elemento de encabezado:</p>
-
-<pre class="brush: html notranslate">&lt;h1&gt;Yo soy el título de la historia&lt;/h1&gt;</pre>
-
-<p>Hay seis elementos de encabezado: {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}} y {{HTMLElement("h6")}}. Cada elemento representa un nivel de contenido diferente en el documento; <code>&lt;h1&gt;</code> representa el título principal, <code>&lt;h2&gt;</code> representa el subtítulo, <code>&lt;h3&gt;</code> representa el subtítulo del subtítulo, y así sucesivamente.</p>
-
-<h3 id="Cómo_establecer_la_estructura_jerárquica">Cómo establecer la estructura jerárquica</h3>
-
-<p>Por ejemplo, en esta historia, <code>&lt;h1&gt;</code> representa el título de la historia, <code>&lt;h2&gt;</code> representará el título de cada capítulo y <code>&lt;h3&gt;</code> las diferentes secciones del capítulo, y así sucesivamente.</p>
-
-<pre class="brush: html notranslate">&lt;h1&gt;El agujero aplastante&lt;/h1&gt;
-
-&lt;p&gt;Por Chris Mills&lt;/p&gt;
-
-&lt;h2&gt;Capítulo 1: La oscura noche&lt;/h2&gt;
-
-&lt;p&gt;Era una noche oscura. En algún lugar, un búho ululó. La lluvia azotó el ...&lt;/p&gt;
-
-&lt;h2&gt;Capítulo 2: El silencio eterno&lt;/h2&gt;
-
-&lt;p&gt;Nuestro protagonista ni susurrar pudo al ver esa sombría figura ...&lt;/p&gt;
-
-&lt;h3&gt;El espectro habla&lt;/h3&gt;
-
-&lt;p&gt;Habían pasado varias horas más, cuando de repente el espectro se incorporó y exclamó: "¡Por favor, ten piedad de mi alma!"&lt;/p&gt;</pre>
-
-<p>Realmente es a tu elección lo que cada elemento involucrado represente, siempre y cuando la jerarquía tenga sentido. Solo es necesario que tengas en cuenta unas pocas buenas prácticas mientras creas la estructura:</p>
-
-<ul>
- <li>Preferentemente debes usar solo un <code>&lt;h1&gt;</code> por página; este es el nivel de título superior, y todos los demás se sitúan por debajo de él en la jerarquía.</li>
- <li>Asegúrate de que usas los títulos en el orden correcto en la jerarquía. No uses los <code>&lt;h3&gt;</code> para representar subtítulos, seguidos de los <code>&lt;h2&gt;</code> para representar los subtítulos de los subtítulos; eso no tiene sentido y provocará resultados extraños.</li>
- <li>De los seis niveles de títulos disponibles, debes procurar no usar más de tres por página, a menos que creas que es realmente necesario. Los documentos con muchos niveles (es decir, una jerarquía de títulos muy profunda) son de difícil manejo y navegación. En esos casos se recomienda, si es posible, separar el contenido en varias páginas.</li>
-</ul>
-
-<h3 id="¿Por_qué_necesitamos_estructura">¿Por qué necesitamos estructura?</h3>
-
-<p>Para responder a esta cuestión, echemos un vistazo a <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a>; el apartado inicial de nuestro ejemplo en curso para este artículo (una buena receta de hummus). Debes guardar una copia de este archivo en tu ordenador porque después la necesitarás para los ejercicios prácticos. El cuerpo (<code>&lt;body&gt;</code>) de este documento incluye varios elementos de contenido que no están marcados de ninguna manera pero están separados por saltos de línea (se ha pulsado <strong>Intro</strong>/<strong>Retorno</strong> para continuar en la siguiente línea).</p>
-
-<p>Sin embargo, cuando abres el documento en tu navegador, verás que el texto aparece... ¡como una masa enorme!</p>
-
-<p><img alt="Una página web que muestra un muro de texto sin formato, porque no hay elementos en la página para estructurarlo." src="https://mdn.mozillademos.org/files/12972/text-no-formatting.png" style="display: block; height: 420px; margin: 0px auto; width: 594px;"></p>
-
-<p>Esto se debe a que no hay elementos que den estructura al contenido, por lo que el navegador no sabe qué es un encabezado y qué es un párrafo. Además:</p>
-
-<ul>
- <li>Los usuarios que miran una página web tienden a escanearla rápidamente para encontrar el contenido relevante que hay en ella y a menudo empiezan por leer los encabezados para comenzar. (Solemos <a href="http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/">pasar muy poco tiempo en una página web</a>). Si no pueden ver nada útil en unos segundos, es probable que se sientan frustrados y se vayan a otro sitio.</li>
- <li>Los motores de búsqueda que indizan tu página consideran el contenido de los títulos como palabras clave importantes e influyen en la puntuación de búsqueda de la página. Sin encabezados, tu página tendrá un rendimiento bajo en términos de optimización de motores de búsqueda {{Glossary("SEO")}}.</li>
- <li>Las personas con discapacidad visual severa no suelen leer páginas web: en lugar de ello, las escuchan. Lo hacen con un software llamado {{interwiki("wikipedia", "Lector de pantalla")}}. Este software proporciona acceso rápido a un contenido textual dado. Entre las diversas técnicas que emplean, leen los encabezados para proporcionar un esquema del documento que permite a los usuarios encontrar rápidamente la información que quieren. Si no hay encabezados disponibles, se ven obligados a escuchar el documento entero. </li>
- <li>Para aplicar estilos al contenido con {{Glossary("CSS")}}, o para que haga cosas interesantes con {{Glossary("JavaScript")}}, necesitas tener elementos que delimiten el contenido relevante para que CSS/JavaScript se puedan focalizar en este efectivamente.</li>
-</ul>
-
-<p>Por lo tanto, debemos dar a nuestro contenido una estructura definida.</p>
-
-<h3 id="Aprendizaje_Activo_Dar_estructura_a_nuestro_contenido">Aprendizaje Activo: Dar estructura a nuestro contenido</h3>
-
-<p>Pasemos directamente a un ejemplo real. En el ejemplo de abajo, añade elementos al texto en bruto en el campo <em>Código editable</em> para que en el campo <em>Salida en vivo</em> aparezcan como un encabezado y dos párrafos.</p>
-
-<p>Si te equivocas, siempre puedes restablecer el código anterior pulsando el botón <em>Restablecer</em>. Si encallas, pulsa el botón <em>Mostrar solución</em> para ver la respuesta...</p>
-
-<div class="hidden">
-<h6 id="Código_reproducible">Código reproducible</h6>
-
-<pre class="brush: html notranslate">&lt;h2&gt;Salida en vivo&lt;/h2&gt;
-
-&lt;div class="output" style="min-height: 50px;"&gt;
-&lt;/div&gt;
-
-&lt;h2&gt;Código editable&lt;/h2&gt;
-&lt;p class="a11y-label"&gt;Pulsa Esc para quitar el foco del área de código (Tab inserta un carácter de tabulación).&lt;/p&gt;
-
-&lt;textarea id="code" class="input" style="min-height: 100px; width: 95%"&gt;Mi breve relato Soy estadístico y mi nombre es Trish.
-
-Mis piernas son de cartón y estoy casada con un pez.&lt;/textarea&gt;
-
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="reset" type="button" value="Restablecer"&gt;
-  &lt;input id="solution" type="button" value="Mostrar solución"&gt;
-&lt;/div&gt;</pre>
-
-<pre class="brush: css notranslate">html {
-  font-family: sans-serif;
-}
-
-h2 {
-  font-size: 16px;
-}
-
-.a11y-label {
-  margin: 0;
-  text-align: right;
-  font-size: 0.7rem;
-  width: 98%;
-}
-
-body {
-  margin: 10px;
-  background: #f5f9fa;
-}</pre>
-
-<pre class="brush: js notranslate">var textarea = document.getElementById('code');
-var reset = document.getElementById('reset');
-var solution = document.getElementById('solution');
-var output = document.querySelector('.output');
-var code = textarea.value;
-var userEntry = textarea.value;
-
-function updateCode() {
-  output.innerHTML = textarea.value;
-}
-
-reset.addEventListener('click', function() {
-  textarea.value = code;
-  userEntry = textarea.value;
-  solutionEntry = htmlSolution;
-  solution.value = 'Mostrar solución';
-  updateCode();
-});
-
-solution.addEventListener('click', function() {
-  if(solution.value === 'Mostrar solución') {
-    textarea.value = solutionEntry;
-    solution.value = 'Ocultar solución';
-  } else {
-    textarea.value = userEntry;
-    solution.value = 'Mostrar solución';
-  }
-  updateCode();
-});
-
-var htmlSolution = '&lt;h1&gt;Mi breve relato&lt;/h1&gt;\n&lt;p&gt;Soy estadístico y mi nombre es Trish.&lt;/p&gt;\n&lt;p&gt;Mis piernas son de cartón y estoy casada con un pez.&lt;/p&gt;';
-var solutionEntry = htmlSolution;
-
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
-
-// captura la tecla de tabulación en el área de texto y en su lugar
-// hace que se escriba una tabulación en la posición del cursor
-
-textarea.onkeydown = function(e){
-  if (e.keyCode === 9) {
-    e.preventDefault();
-    insertAtCaret('\t');
-  }
-
-  if (e.keyCode === 27) {
-    textarea.blur();
-  }
-};
-
-function insertAtCaret(text) {
-  var scrollPos = textarea.scrollTop;
-  var caretPos = textarea.selectionStart;
-
-  var front = (textarea.value).substring(0, caretPos);
-  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
-  textarea.value = front + text + back;
-  caretPos = caretPos + text.length;
-  textarea.selectionStart = caretPos;
-  textarea.selectionEnd = caretPos;
-  textarea.focus();
-  textarea.scrollTop = scrollPos;
-}
-
-// Actualiza el userCode guardado cada vez que el usuario actualiza el código del área de texto
-
-textarea.onkeyup = function(){
-  // Solo queremos guardar el estado cuando se muestra el código de usuario,
-  // no es la solución, por lo que la solución no se guarda sobre el código del usuario
-  if(solution.value === 'Mostrar solución') {
-    userEntry = textarea.value;
-  } else {
-    solutionEntry = textarea.value;
-  }
-
-  updateCode();
-};</pre>
-</div>
-
-<p>{{ EmbedLiveSample('Código_reproducible', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p>
-
-<h3 id="¿Por_qué_necesitamos_semántica">¿Por qué necesitamos semántica?</h3>
-
-<p>Contamos con la semántica para todo lo que nos rodea. Nos basamos en experiencias previas para conocer la función de cada objeto cotidiano; cuando miramos un objeto, sabemos cuál debe ser su función. Entonces, por ejemplo, esperamos que un semáforo en rojo signifique "alto" y que un semáforo en verde signifique "avance". Las cosas se pueden complicar muy rápidamente si se aplica la semántica incorrecta. (¿Algún país usa rojo para significar "avance"? Esperemos que no).</p>
-
-<p>De manera similar, debemos asegurarnos de que utilizamos los elementos adecuados y damos a nuestro contenido el significado y función correctos y la apariencia adecuada. En este mismo sentido, el elemento {{HTMLElement("h1")}} es un elemento semántico que da al texto al que delimita la función (o significado) de un <em>titular de primer nivel en tu página</em>.</p>
-
-<pre class="brush: html notranslate">&lt;h1&gt;Este es un titular de primer nivel&lt;/h1&gt;</pre>
-
-<p>De manera predeterminada, el navegador le asignará una fuente de gran tamaño para darle el aspecto de un titular (aunque se le podrá dar el estilo que se quisiera usando CSS). Lo más importante es que su valor semántico se va a usar de diferente manera, por ejemplo, por los motores de búsqueda y los lectores de pantalla (como se mencionó antes).</p>
-
-<p>Por otra parte, podrías hacer que cualquier elemento <em>parezca</em> un titular de primer rango. Considera lo siguiente:</p>
-
-<pre class="brush: html notranslate">&lt;span style="font-size: 32px; margin: 21px 0;"&gt;¿Es este un titular de primer rango?&lt;/span&gt;</pre>
-
-<p>Este es un elemento {{HTMLElement("span")}}. No tiene semántica. Se usa para delimitar contenido cuando se le quiere aplicar CSS (o tratarlo con JavaScript) sin proporcionarle ningún significado extra (encontrarás más información sobre este tipo de elemento más adelante en el curso). Hemos aplicado CSS a este elemento para que parezca un titular de primer nivel, pero al no tener valor semántico, no tiene ninguna de las ventajas añadidas que hemos descrito antes. Es una buena idea usar el elemento HTML apropiado para cada tarea.</p>
-
-<h2 id="Listas">Listas</h2>
-
-<p>Ahora volvamos nuestra atención hacia las listas. Las listas están en todos los aspectos de nuestra vida: desde la lista de compras a la lista de instrucciones que sigues inconscientemente para llegar a casa todos los días, o las listas de instrucciones que sigues en estos tutoriales. Las listas están en todos lados en la web también y hay tres diferentes tipos de las que nos vamos a ocupar.</p>
-
-<h3 id="Listas_no_ordenadas">Listas no ordenadas</h3>
-
-<p>Las listas no ordenadas se usan para marcar listas de artículos cuyo orden no es importante. Tomemos como ejemplo una lista de compras:</p>
-
-<pre class="brush: bash notranslate">leche
-huevos
-pan
-hummus</pre>
-
-<p>Cada lista desordenada comienza con un elemento {{HTMLElement("ul")}} («<em>unordered list</em>») que delimita todos los elementos de la lista:</p>
-
-<pre class="brush: html notranslate">&lt;ul&gt;
-leche
-huevos
-pan
-hummus
-&lt;/ul&gt;</pre>
-
-<p>El siguiente paso es delimitar cada artículo de la lista con un elemento {{HTMLElement("li")}} («<em>list item</em>»).</p>
-
-<pre class="brush: html notranslate">&lt;ul&gt;
-  &lt;li&gt;leche&lt;/li&gt;
-  &lt;li&gt;huevos&lt;/li&gt;
-  &lt;li&gt;pan&lt;/li&gt;
-  &lt;li&gt;hummus&lt;/li&gt;
-&lt;/ul&gt;</pre>
-
-<h4 id="Aprendizaje_activo_marcar_una_lista_no_ordenada">Aprendizaje activo: marcar una lista no ordenada</h4>
-
-<p>Edita el siguiente ejemplo para crear tu propia lista HTML no ordenada.</p>
-
-<div class="hidden">
-<h6 id="Código_reproducible_2">Código reproducible</h6>
-
-<pre class="brush: html notranslate">&lt;h2&gt;Salida en vivo&lt;/h2&gt;
-
-&lt;div class="output" style="min-height: 50px;"&gt;
-&lt;/div&gt;
-
-&lt;h2&gt;Código editable&lt;/h2&gt;
-&lt;p class="a11y-label"&gt;Pulsa Esc para quitar el foco del área de código (Tab inserta un carácter de tabulación).&lt;/p&gt;
-
-&lt;textarea id="code" class="input" style="min-height: 100px; width: 95%"&gt;leche
-huevos
-pan
-hummus&lt;/textarea&gt;
-
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="reset" type="button" value="Restablecer"&gt;
-  &lt;input id="solution" type="button" value="Mostrar solución"&gt;
-&lt;/div&gt;</pre>
-
-<pre class="brush: css notranslate">html {
-  font-family: sans-serif;
-}
-
-h2 {
-  font-size: 16px;
-}
-
-.a11y-label {
-  margin: 0;
-  text-align: right;
-  font-size: 0.7rem;
-  width: 98%;
-}
-
-body {
-  margin: 10px;
-  background: #f5f9fa;
-}</pre>
-
-<pre class="brush: js notranslate">var textarea = document.getElementById('code');
-var reset = document.getElementById('reset');
-var solution = document.getElementById('solution');
-var output = document.querySelector('.output');
-var code = textarea.value;
-var userEntry = textarea.value;
-
-function updateCode() {
-  output.innerHTML = textarea.value;
-}
-
-reset.addEventListener('click', function() {
-  textarea.value = code;
-  userEntry = textarea.value;
-  solutionEntry = htmlSolution;
-  solution.value = 'Mostrar solución';
-  updateCode();
-});
-
-solution.addEventListener('click', function() {
-  if(solution.value === 'Mostrar solución') {
-    textarea.value = solutionEntry;
-    solution.value = 'Ocultar solución';
-  } else {
-    textarea.value = userEntry;
-    solution.value = 'Mostrar solución';
-  }
-  updateCode();
-});
-
-var htmlSolution = '&lt;ul&gt;\n&lt;li&gt;leche&lt;/li&gt;\n&lt;li&gt;huevos&lt;/li&gt;\n&lt;li&gt;pan&lt;/li&gt;\n&lt;li&gt;hummus&lt;/li&gt;\n&lt;/ul&gt;';
-var solutionEntry = htmlSolution;
-
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
-
-// captura la tecla de tabulación en el área de texto y en su lugar
-// hace que se escriba una tabulación en la posición del cursor
-
-textarea.onkeydown = function(e){
-  if (e.keyCode === 9) {
-    e.preventDefault();
-    insertAtCaret('\t');
-  }
-
-  if (e.keyCode === 27) {
-    textarea.blur();
-  }
-};
-
-function insertAtCaret(text) {
-  var scrollPos = textarea.scrollTop;
-  var caretPos = textarea.selectionStart;
-
-  var front = (textarea.value).substring(0, caretPos);
-  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
-  textarea.value = front + text + back;
-  caretPos = caretPos + text.length;
-  textarea.selectionStart = caretPos;
-  textarea.selectionEnd = caretPos;
-  textarea.focus();
-  textarea.scrollTop = scrollPos;
-}
-
-// Actualiza el userCode guardado cada vez que el usuario actualiza el código del área de texto
-
-textarea.onkeyup = function(){
-  // Solo queremos guardar el estado cuando se muestra el código de usuario,
-  // no es la solución, por lo que la solución no se guarda sobre el código del usuario
-  if(solution.value === 'Mostrar solución') {
-    userEntry = textarea.value;
-  } else {
-    solutionEntry = textarea.value;
-  }
-
-  updateCode();
-};</pre>
-</div>
-
-<p>{{ EmbedLiveSample('Código_reproducible_2', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p>
-
-<h3 id="Listas_ordenadas">Listas ordenadas</h3>
-
-<p>Las listas ordenadas son aquellas en las que el orden de los elementos <em>sí</em> importa. Tomemos como ejemplo una lista de instrucciones para seguir un itinerario:</p>
-
-<pre class="brush: bash notranslate">Conduce hasta el final de la calle
-Gira a la derecha
-Sigue derecho por las dos primeras glorietas
-Gira a la izquierda en la tercer glorieta
-El colegio está a la derecha, 300 metros más adelante</pre>
-
-<p>La estructura de marcado es la misma que para las listas no ordenadas, excepto que debes delimitar los elementos de la lista con una etiqueta {{HTMLElement("ol")}} («ordered list»), en lugar de <code>&lt;ul&gt;</code>:</p>
-
-<pre class="brush: html notranslate">&lt;ol&gt;
-  &lt;li&gt;Conduce hasta el final de la calle&lt;/li&gt;
-  &lt;li&gt;Gira a la derecha&lt;/li&gt;
-  &lt;li&gt;Sigue derecho por las dos primeras glorietas&lt;/li&gt;
-  &lt;li&gt;Gira a la izquierda en la tercer glorieta&lt;/li&gt;
-  &lt;li&gt;El colegio está a tu derecha, 300 metros más adelante&lt;/li&gt;
-&lt;/ol&gt;</pre>
-
-<h4 id="Aprendizaje_activo_Marcar_una_lista_ordenada">Aprendizaje activo: Marcar una lista ordenada</h4>
-
-<p>Edita el siguiente ejemplo para crear tu propia lista ordenada en HTML.</p>
-
-<div class="hidden">
-<h6 id="Código_reproducible_3">Código reproducible</h6>
-
-<pre class="brush: html notranslate">&lt;h2&gt;Salida en vivo&lt;/h2&gt;
-
-&lt;div class="output" style="min-height: 50px;"&gt;
-&lt;/div&gt;
-
-&lt;h2&gt;Código editable&lt;/h2&gt;
-&lt;p class="a11y-label"&gt;Pulsa Esc para quitar el foco del área de código (Tab inserta un carácter de tabulación).&lt;/p&gt;
-
-&lt;textarea id="code" class="input" style="min-height: 200px; width: 95%"&gt;Conduce hasta el final de la calle
-Gira a la derecha
-Sigue derecho por las dos primeras glorietas
-Gira a la izquierda en la tercer glorieta
-La escuela está a tu derecha, 300 metros por más adelante&lt;/textarea&gt;
-
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="reset" type="button" value="Restablecer"&gt;
-  &lt;input id="solution" type="button" value="Mostrar solución"&gt;
-&lt;/div&gt;</pre>
-
-<pre class="brush: css notranslate">html {
-  font-family: sans-serif;
-}
-
-h2 {
-  font-size: 16px;
-}
-
-.a11y-label {
-  margin: 0;
-  text-align: right;
-  font-size: 0.7rem;
-  width: 98%;
-}
-
-body {
-  margin: 10px;
-  background: #f5f9fa;
-}</pre>
-
-<pre class="brush: js notranslate">var textarea = document.getElementById('code');
-var reset = document.getElementById('reset');
-var solution = document.getElementById('solution');
-var output = document.querySelector('.output');
-var code = textarea.value;
-var userEntry = textarea.value;
-
-function updateCode() {
-  output.innerHTML = textarea.value;
-}
-
-reset.addEventListener('click', function() {
-  textarea.value = code;
-  userEntry = textarea.value;
-  solutionEntry = htmlSolution;
-  solution.value = 'Mostrar solución';
-  updateCode();
-});
-
-solution.addEventListener('click', function() {
-  if(solution.value === 'Mostrar solución') {
-    textarea.value = solutionEntry;
-    solution.value = 'Ocultar solución';
-  } else {
-    textarea.value = userEntry;
-    solution.value = 'Mostrar solución';
-  }
-  updateCode();
-});
-
-var htmlSolution = '&lt;ol&gt;\n&lt;li&gt;Conduce hasta el final de la calle&lt;/li&gt;\n&lt;li&gt;Gira a la derecha&lt;/li&gt;\n&lt;li&gt;Sigue derecho por las dos primeras glorietas&lt;/li&gt;\n&lt;li&gt;Gira a la izquierda en la tercer glorieta&lt;/li&gt;\n&lt;li&gt;La escuela está a tu derecha, 300 metros más adelante&lt;/li&gt;\n&lt;/ol&gt;';
-var solutionEntry = htmlSolution;
-
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
-
-// captura la tecla de tabulación en el área de texto y en su lugar
-// hace que se escriba una tabulación en la posición del cursor
-
-textarea.onkeydown = function(e){
-  if (e.keyCode === 9) {
-    e.preventDefault();
-    insertAtCaret('\t');
-  }
-
-  if (e.keyCode === 27) {
-    textarea.blur();
-  }
-};
-
-function insertAtCaret(text) {
-  var scrollPos = textarea.scrollTop;
-  var caretPos = textarea.selectionStart;
-
-  var front = (textarea.value).substring(0, caretPos);
-  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
-  textarea.value = front + text + back;
-  caretPos = caretPos + text.length;
-  textarea.selectionStart = caretPos;
-  textarea.selectionEnd = caretPos;
-  textarea.focus();
-  textarea.scrollTop = scrollPos;
-}
-
-// Actualiza el userCode guardado cada vez que el usuario actualiza el código del área de texto
-
-textarea.onkeyup = function(){
-  // Solo queremos guardar el estado cuando se muestra el código de usuario,
-  // no es la solución, por lo que la solución no se guarda sobre el código del usuario
-  if(solution.value === 'Mostrar solución') {
-    userEntry = textarea.value;
-  } else {
-    solutionEntry = textarea.value;
-  }
-
-  updateCode();
-};</pre>
-</div>
-
-<p>{{ EmbedLiveSample('Código_reproducible_3', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p>
-
-<h3 id="Aprendizaje_activo_marcar_la_página_de_tu_receta">Aprendizaje activo: marcar la página de tu receta</h3>
-
-<p>Llegados a este punto del artículo, tienes toda la información necesaria para marcar la página de ejemplo con tu receta. Puedes escoger entre guardar una copia local del archivo inicial <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> y trabajar en él, o hacerlo sobre el ejemplo editable de abajo. Probablemente sea mejor trabajar en tu copia local porque podrás guardar tu progreso, mientras que si lo haces sobre el ejemplo editable, los cambios se perderán la próxima vez que cargues la página. Ambos métodos tienen pros y contras.</p>
-
-<div class="hidden">
-<h6 id="Código_reproducible_4">Código reproducible</h6>
-
-<pre class="brush: html notranslate">&lt;h2&gt;Salida en vivo&lt;/h2&gt;
-
-&lt;div class="output" style="min-height: 50px;"&gt;
-&lt;/div&gt;
-
-&lt;h2&gt;Código editable&lt;/h2&gt;
-&lt;p class="a11y-label"&gt;Pulsa Esc para quitar el foco del área de código (Tab inserta un carácter de tabulación).&lt;/p&gt;
-
-&lt;textarea id="code" class="input" style="min-height: 200px; width: 95%"&gt;Receta rápida de hummus
-
-  Esta receta hace un hummus rápido y sabroso, sin ensuciar. Ha sido adaptada de varias recetas diferentes que he leído a lo largo de los años.
-
-  El hummus es una deliciosa pasta espesa que se usa mucho en platos griegos y del Medio Oriente. Es muy sabroso con ensalada, carne a las brasas y pan de pitta.
-
-  Ingredientes
-
-  1 lata (400g) de garbanzos (garbanzos)
-  175g de tahini
-  6 tomates secos
-  Medio pimiento rojo
-  Una pizca de pimienta de cayena
-  1 diente de ajo
-  Una pizca de aceite de oliva
-
-  Instrucciones
-
-  Retira la piel del ajo y pica en trozos grandes.
-  Retira todas las semillas y el tallo del pimiento y pica en trozos grandes.
-  Agrega todos los ingredientes en un procesador de alimentos.
-  Procesa todos los ingredientes en una pasta
-  Si deseas un hummus "grueso", procésalo corto tiempo
-  Si deseas un hummus "suave", procésalo por más tiempo
-
-  Para un sabor diferente, puedes intentar mezclar en una pequeña medida de limón y cilantro, ají, lima y chipotle, harissa y menta, o espinacas y queso feta. Pruébalo y confirma que esté en su punto.
-
-  Almacenamiento
-
-  Refrigera el hummus terminado en un recipiente sellado. Deberías poder usarlo durante aproximadamente una semana después de haberlo hecho. Si comienza a burbujear, definitivamente debes desecharlo.
-
-  El hummus es apto para congelar; debes descongelarlo y usarlo en un par de meses.&lt;/textarea&gt;
-
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="reset" type="button" value="Restablecer"&gt;
-  &lt;input id="solution" type="button" value="Mostrar solución"&gt;
-&lt;/div&gt;</pre>
-
-<pre class="brush: css notranslate">html {
-  font-family: sans-serif;
-}
-
-h2 {
-  font-size: 16px;
-}
-
-.a11y-label {
-  margin: 0;
-  text-align: right;
-  font-size: 0.7rem;
-  width: 98%;
-}
-
-body {
-  margin: 10px;
-  background: #f5f9fa;
-}</pre>
-
-<pre class="brush: js notranslate">var textarea = document.getElementById('code');
-var reset = document.getElementById('reset');
-var solution = document.getElementById('solution');
-var output = document.querySelector('.output');
-var code = textarea.value;
-var userEntry = textarea.value;
-
-function updateCode() {
-  output.innerHTML = textarea.value;
-}
-
-reset.addEventListener('click', function() {
-  textarea.value = code;
-  userEntry = textarea.value;
-  solutionEntry = htmlSolution;
-  solution.value = 'Mostrar solución';
-  updateCode();
-});
-
-solution.addEventListener('click', function() {
-  if(solution.value === 'Mostrar solución') {
-    textarea.value = solutionEntry;
-    solution.value = 'Ocultar solución';
-  } else {
-    textarea.value = userEntry;
-    solution.value = 'Mostrar solución';
-  }
-  updateCode();
-});
-
-var htmlSolution = '&lt;h1&gt;Receta rápida de hummus&lt;/h1&gt;\n\n&lt;p&gt;Esta receta hace un hummus rápido y sabroso, sin ensuciar. Ha sido adaptada de varias recetas diferentes que he leído a lo largo de los años.&lt;/p&gt;\n\n&lt;p&gt;El hummus es una deliciosa pasta espesa que se usa mucho en platos griegos y del Medio Oriente. Es muy sabroso con ensalada, carne a las brasas y pan de pitta.&lt;/p&gt;\n\n&lt;h2&gt;Ingredientes&lt;/h2&gt;\n\n&lt;ul&gt;\n&lt;li&gt;1 lata (400g) de garbanzos (garbanzos)&lt;/li&gt;\n&lt;li&gt;175g de tahini&lt;/li&gt;\n&lt;li&gt;6 tomates secos&lt;/li&gt;\n&lt;li&gt;Medio pimiento rojo&lt;/li&gt;\n&lt;li&gt;Una pizca de pimienta de cayena&lt;/li&gt;\n&lt;li&gt;1 diente de ajo&lt;/li&gt;\n&lt;li&gt;Una pizca de aceite de oliva&lt;/li&gt;\n&lt;/ul&gt;\n\n&lt;h2&gt;Instrucciones&lt;/h2&gt;\n\n&lt;ol&gt;\n &lt;li&gt;Retira la piel del ajo y pica en trozos grandes.&lt;/li&gt;\n&lt;li&gt;Retira todas las semillas y el tallo del pimiento, y pica en trozos grandes.&lt;/li&gt;\n&lt;li&gt;Agrega todos los ingredientes en un procesador de alimentos.&lt;/li&gt;\n&lt;li&gt;Procesa todos los ingredientes en una pasta.&lt;/li&gt;\n&lt;li&gt;Si deseas un hummus "grueso", procésalo corto tiempo.&lt;/li&gt;\n&lt;li&gt;Si deseas un hummus "suave", procésalo por más tiempo.&lt;/li&gt;\n&lt;/ol&gt;\n\n&lt;p&gt;Para un sabor diferente, puedes intentar mezclar una pequeña medida de limón y cilantro, ají, lima y chipotle, harissa y menta, o espinacas y queso feta. Pruébalo y confirma que esté en su punto.&lt;/p&gt;\n\n&lt;h2&gt;Almacenamiento&lt;/h2&gt;\n\n&lt;p&gt;Refrigera el hummus terminado en un recipiente sellado. Deberías poder usarlo durante aproximadamente una semana después de haberlo hecho. Si comienza a burbujear, definitivamente debes desecharlo.&lt;/p&gt;\n\n&lt;p&gt;El hummus es adecuado para congelar; debes descongelarlo y usarlo en un par de meses.&lt;/p&gt;';
-var solutionEntry = htmlSolution;
-
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
-
-// captura la tecla de tabulación en el área de texto y en su lugar
-// hace que se escriba una tabulación en la posición del cursor
-
-textarea.onkeydown = function(e){
-  if (e.keyCode === 9) {
-    e.preventDefault();
-    insertAtCaret('\t');
-  }
-
-  if (e.keyCode === 27) {
-    textarea.blur();
-  }
-};
-
-function insertAtCaret(text) {
-  var scrollPos = textarea.scrollTop;
-  var caretPos = textarea.selectionStart;
-
-  var front = (textarea.value).substring(0, caretPos);
-  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
-  textarea.value = front + text + back;
-  caretPos = caretPos + text.length;
-  textarea.selectionStart = caretPos;
-  textarea.selectionEnd = caretPos;
-  textarea.focus();
-  textarea.scrollTop = scrollPos;
-}
-
-// Actualiza el userCode guardado cada vez que el usuario actualiza el código del área de texto
-
-textarea.onkeyup = function(){
-  // Solo queremos guardar el estado cuando se muestra el código de usuario,
-  // no es la solución, por lo que la solución no se guarda sobre el código del usuario
-  if(solution.value === 'Mostrar solución') {
-    userEntry = textarea.value;
-  } else {
-    solutionEntry = textarea.value;
-  }
-
-  updateCode();
-};</pre>
-</div>
-
-<p>{{ EmbedLiveSample('Código_reproducible_4', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p>
-
-<p>Si encallas, siempre puedes pulsar el botón <em>Mostrar solución</em> o comprobar el ejemplo completo <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-complete.html">text-complete.html</a> en nuestro repositorio de Github.</p>
-
-<h3 id="Listas_anidadas">Listas anidadas</h3>
-
-<p>Es perfectamente correcto anidar una lista dentro de otra. Posiblemente quieras tener subelementos bajo elementos de rango superior. Tomemos la segunda lista de nuestro ejemplo de la receta:</p>
-
-<pre class="brush: html notranslate">&lt;ol&gt;
-  &lt;li&gt;Pela el ajo y picarlo en trozos gruesos.&lt;/li&gt;
-  &lt;li&gt;Retira las semillas y el tallo del pimiento, y cortarlo en trozos gruesos.&lt;/li&gt;
-  &lt;li&gt;Mete todos los alimentos en un procesador de alimentos.&lt;/li&gt;
-  &lt;li&gt;Pica todos los ingredientes hasta conseguir una pasta.&lt;/li&gt;
-  &lt;li&gt;Si deseas un hummus "grueso", procésalo corto tiempo.&lt;/li&gt;
-  &lt;li&gt;Pica durante más tiempo si se desea obtener un hummus "suave".&lt;/li&gt;
-&lt;/ol&gt;</pre>
-
-<p>Puesto que los dos últimos elementos están estrechamente relacionados con el elemento anterior (se leen como subinstrucciones u opciones que encajan bajo ese elemento), puede tener sentido anidarlos dentro de su propia lista no ordenada e introducir esa lista bajo el cuarto elemento. Tendría el siguiente aspecto:</p>
-
-<pre class="brush: html notranslate">&lt;ol&gt;
-  &lt;li&gt;Pela el ajo y picarlo en trozos gruesos.&lt;/li&gt;
-  &lt;li&gt;Retira las semillas y el tallo del pimiento, y cortarlo en trozos gruesos.&lt;/li&gt;
-  &lt;li&gt;Mete todos los alimentos en un procesador de alimentos.&lt;/li&gt;
-  &lt;li&gt;Procesa todos los ingredientes hasta conseguir una pasta.
-    &lt;ul&gt;
-      &lt;li&gt;Si deseas un hummus "grueso", procésalo corto tiempo.&lt;/li&gt;
-      &lt;li&gt;Pica durante más tiempo si se desea obtener un hummus "suave".&lt;/li&gt;
-    &lt;/ul&gt;
-  &lt;/li&gt;
-&lt;/ol&gt;</pre>
-
-<p>Vuelve al ejemplo anterior y reescribe la lista de este modo.</p>
-
-<h2 id="Énfasis_e_importancia">Énfasis e importancia</h2>
-
-<p>En el lenguaje humano, a menudo enfatizamos ciertas palabras para alterar el significado de una frase, y a menudo queremos destacar ciertas palabras como importantes o diferentes en algún sentido. HTML nos dota de diversos elementos semánticos que nos permiten destacar contenido textual con tales efectos, y en esta sección veremos los más comunes.</p>
-
-<h3 id="Énfasis">Énfasis</h3>
-
-<p>Cuando queremos dar énfasis al lenguaje hablado, <em>acentuamos</em> ciertas palabras y así alteramos sutilmente el significado de lo que decimos. De manera similar, en el lenguaje escrito ponemos palabras en cursiva para destacarlas. Por ejemplo, las dos siguientes frases tienen diferente significado:</p>
-
-<p>Me alegro de que no llegues tarde.</p>
-
-<p>Me <em>alegro</em> de que no llegues <em>tarde</em>.</p>
-
-<p>La primera frase suena aliviada porque la persona no llega tarde. Por el contrario, la segunda suena sarcástica y un tanto pasivo-agresiva, expresa molestia porque la persona ha llegado algo tarde.</p>
-
-<p>En HTML usamos el elemento {{HTMLElement("em")}} («<em>emphasis</em>») para marcar estos casos. El documento logra entonces transmitir una lectura más interesante y además así lo reconocen los lectores de pantalla, que lo expresan con un diferente tono de voz. El navegador, de manera predeterminada, aplica el estilo de letra itálica, pero no debes utilizar esta etiqueta solamente para establecer el estilo de letra itálica. Para usar ese estilo, debes utilizar únicamente la etiqueta del elemento {{HTMLElement("span")}} y algo de CSS u otra etiqueta con el elemento {{HTMLElement("i")}} (ve abajo).</p>
-
-<pre class="brush: html notranslate">&lt;p&gt;Me &lt;em&gt;alegro&lt;/em&gt; de que no llegues &lt;em&gt;tarde&lt;/em&gt;.&lt;/p&gt;</pre>
-
-<h3 id="Importancia_fuerte">Importancia fuerte</h3>
-
-<p>Para enfatizar palabras importantes al hablar solemos acentuarlas, y al escribir lo hacemos en estilo <strong>negrita</strong>. Por ejemplo:</p>
-
-<p>Este líquido es <strong>altamente tóxico</strong>.</p>
-
-<p>Cuento contigo. <strong>¡No llegues tarde!</strong></p>
-
-<p>En HTML usamos el elemento {{HTMLElement("strong")}} (importancia fuerte) para marcar tales expresiones. El documento resulta entonces más útil, y de nuevo los lectores de pantalla reconocen estos elementos y el tono de voz cambia a uno más fuerte. El estilo negrita es el que aplican los navegadores por omisión, pero no debes usar esta etiqueta solamente para aplicar este estilo. Para hacer eso usa el elemento {{HTMLElement("span")}} y CSS, o un elemento  {{HTMLElement("b")}} (ve más abajo).</p>
-
-<pre class="brush: html notranslate">&lt;p&gt;Este líquido es &lt;strong&gt;altamente tóxico&lt;/strong&gt;.&lt;/p&gt;
-
-&lt;p&gt;Cuento contigo. &lt;strong&gt;¡No llegues tarde!&lt;/strong&gt;&lt;/p&gt;</pre>
-
-<p>Puedes anidar elementos de énfasis dentro de elementos de importancia y viceversa si lo deseas:</p>
-
-<pre class="brush: html notranslate">&lt;p&gt;Este líquido es &lt;strong&gt;altamente tóxico&lt;/strong&gt; —
-si lo bebes, &lt;strong&gt;podrías &lt;em&gt;morir&lt;/em&gt;&lt;/strong&gt;.&lt;/p&gt;</pre>
-
-<h3 id="Aprendizaje_activo_¡Seamos_importantes!">Aprendizaje activo: ¡Seamos importantes!</h3>
-
-<p>En esta sección de aprendizaje activo te proporcionamos un ejemplo editable. Practica un poco añadiendo algo de <em><strong>énfasis</strong></em> e <strong><em>importancia</em></strong> a las palabras que creas que lo necesitan.</p>
-
-<div class="hidden">
-<h6 id="Código_reproducible_5">Código reproducible</h6>
-
-<pre class="brush: html notranslate">&lt;h2&gt;Salida en vivo&lt;/h2&gt;
-
-&lt;div class="output" style="min-height: 50px;"&gt;
-&lt;/div&gt;
-
-&lt;h2&gt;Código editable&lt;/h2&gt;
-&lt;p class="a11y-label"&gt;Pulsa Esc para quitar el foco del área de código (Tab inserta un carácter de tabulación).&lt;/p&gt;
-
-&lt;textarea id="code" class="input" style="min-height: 200px; width: 95%"&gt;&lt;h1&gt;Aviso importante&lt;/h1&gt;
-&lt;p&gt;El domingo 9 de enero de 2019, fue vista una pandilla de góticos
-  robando varios gnomos de jardín de un
-  centro comercial en el centro de Milwaukee. Todos ellos
-  vistiendo monos verdes y tontos sombreros, y
-  al parecer estaban pasando un buen rato. Si alguien
-   tiene alguna información sobre este incidente, por favor
-    póngase en contacto con la policía ahora.&lt;/p&gt;&lt;/textarea&gt;
-
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="reset" type="button" value="Restablecer"&gt;
-  &lt;input id="solution" type="button" value="Mostrar solución"&gt;
-&lt;/div&gt;</pre>
-
-<pre class="brush: css notranslate">html {
-  font-family: sans-serif;
-}
-
-h2 {
-  font-size: 16px;
-}
-
-.a11y-label {
-  margin: 0;
-  text-align: right;
-  font-size: 0.7rem;
-  width: 98%;
-}
-
-body {
-  margin: 10px;
-  background: #f5f9fa;
-}</pre>
-
-<pre class="brush: js notranslate">var textarea = document.getElementById('code');
-var reset = document.getElementById('reset');
-var solution = document.getElementById('solution');
-var output = document.querySelector('.output');
-var code = textarea.value;
-var userEntry = textarea.value;
-
-function updateCode() {
-  output.innerHTML = textarea.value;
-}
-
-reset.addEventListener('click', function() {
-  textarea.value = code;
-  userEntry = textarea.value;
-  solutionEntry = htmlSolution;
-  solution.value = 'Mostrar solución';
-  updateCode();
-});
-
-solution.addEventListener('click', function() {
-  if(solution.value === 'Mostrar solución') {
-    textarea.value = solutionEntry;
-    solution.value = 'Ocultar solución';
-  } else {
-    textarea.value = userEntry;
-    solution.value = 'Mostrar solución';
-  }
-  updateCode();
-});
-
-var htmlSolution='&lt;h1&gt;Aviso importante&lt;/h1&gt;\n&lt;p&gt;El &lt;strong&gt;domingo 9 de enero de 2019&lt;/strong&gt;, fue vista una pandilla de &lt;em&gt;góticos&lt;/em&gt; robando &lt;strong&gt;varios &lt;em&gt;gnomos&lt;/em&gt; de jardín&lt;/strong&gt; de un centro comercial en el centro de &lt;strong&gt;Milwaukee&lt;/strong&gt;. Todos ellos vistiendo &lt;em&gt;monos verdes&lt;/em&gt; y &lt;em&gt;tontos sombreros&lt;/em&gt;, y al parecer estaban pasando un buen rato. Si alguien tiene &lt;strong&gt;alguna&lt;/strong&gt; información sobre este incidente, póngase en contacto con la policía &lt;strong&gt;ahora&lt;/strong&gt;.&lt;/p&gt;';
-var solutionEntry = htmlSolution;
-
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
-
-// captura la tecla de tabulación en el área de texto y en su lugar
-// hace que se escriba una tabulación en la posición del cursor
-
-textarea.onkeydown = function(e){
-  if (e.keyCode === 9) {
-    e.preventDefault();
-    insertAtCaret('\t');
-  }
-
-  if (e.keyCode === 27) {
-    textarea.blur();
-  }
-};
-
-function insertAtCaret(text) {
-  var scrollPos = textarea.scrollTop;
-  var caretPos = textarea.selectionStart;
-
-  var front = (textarea.value).substring(0, caretPos);
-  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
-  textarea.value = front + text + back;
-  caretPos = caretPos + text.length;
-  textarea.selectionStart = caretPos;
-  textarea.selectionEnd = caretPos;
-  textarea.focus();
-  textarea.scrollTop = scrollPos;
-}
-
-// Actualiza el userCode guardado cada vez que el usuario actualiza el código del área de texto
-
-textarea.onkeyup = function(){
-  // Solo queremos guardar el estado cuando se muestra el código de usuario,
-  // no es la solución, por lo que la solución no se guarda sobre el código del usuario
-  if(solution.value === 'Mostrar solución') {
-    userEntry = textarea.value;
-  } else {
-    solutionEntry = textarea.value;
-  }
-
-  updateCode();
-};</pre>
-</div>
-
-<p>{{ EmbedLiveSample('Código_reproducible_5', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p>
-
-<h3 id="Cursiva_negrita_subrayado...">Cursiva, negrita, subrayado...</h3>
-
-<p>Los elementos que hemos comentado hasta ahora tienen asociada una semántica clara. La situación con {{HTMLElement("b")}} (negrita o «<b>bold</b>»), {{HTMLElement("i")}} (cursiva o «<i>italic</i>») y{{HTMLElement("u")}} (subrayado o «<u>underline</u>») es algo más complicada. Surgieron para que las personas pudieran escribir textos en negrita, cursiva o subrayado en un tiempo en el que pocos navegadores o ninguno admitían el CSS. Elementos como estos, que solo afectan a la presentación y no a la semántica, se conocen como <strong>elementos de presentación</strong> y no se deberían usar porque, como hemos visto, la semántica es muy importante para la accesibilidad y el SEO, entre otros aspectos.</p>
-
-<p>HTML5 redefinió los elementos <code>&lt;b&gt;</code>, <code>&lt;i&gt;</code> y <code>&lt;u&gt;</code> con roles semánticos nuevos un tanto confusos.</p>
-
-<p>Esta es la regla de oro: el uso de <code>&lt;b&gt;</code>, <code>&lt;i&gt;</code> o <code>&lt;u&gt;</code> resulta adecuado cuando transmiten el significado que suele transmitir el uso tradicional de las negritas, itálicas o el subrayado, si no hay ningún otro elemento que resulte más adecuado. Sin embargo, siempre resulta crítico mantener una actitud orientada a la accesibilidad. El concepto de itálica no es demasiado útil para las personas que usan lectores de pantalla o para las personas que utilizan un sistema de escritura distinto del alfabeto latino.</p>
-
-<ul>
- <li>{{HTMLElement('i')}} se usa para transmitir el significado que tradicionalmente transmite la itálica: extranjerismos, clasificaciones taxonómicas, conceptos técnicos, un pensamiento...</li>
- <li>{{HTMLElement('b')}} se usa para transmitir el significado que tradicionalmente transmite la negrita: palabras clave, nombres de productos, frases principales...</li>
- <li>{{HTMLElement('u')}} se usa para transmitir el significado que tradicionalmente conlleva el subrayado: nombres propios, errores ortográficos...</li>
-</ul>
-
-<div class="note">
-<p>Una observación prudente acerca del subrayado: <strong>La gente suele asociar estrechamente el subrayado con los hipervínculos.</strong> Por ello en la web es mejor reservar el subrayado para los enlaces. Utiliza el elemento {{HTMLElement('u')}} cuando resulte apropiado semánticamente, pero considera usar CSS para cambiar el subrayado predeterminado por algo más adecuado en la web. El siguiente ejemplo ilustra cómo lo puedes hacer.</p>
-</div>
-
-<pre class="brush: html notranslate">&lt;!-- nombres científicos --&gt;
-&lt;p&gt;
-  El colibrí garganta de rubí (&lt;i&gt;Archilochus colubris&lt;/i&gt;)
-  es el colibrí más común en el este de América del Norte.
-&lt;/p&gt;
-
-&lt;!-- extranjerismos --&gt;
-&lt;p&gt;
-  El menú era un mar de palabras exóticas como &lt;i lang="uk-latn"&gt;vatrushka&lt;/i&gt;,
-  &lt;i lang="id"&gt;nasi goreng&lt;/i&gt; y &lt;i lang="fr"&gt;soupe à l'oignon&lt;/i&gt;.
-&lt;/p&gt;
-
-&lt;!-- un error ortográfico reconocido --&gt;
-&lt;p&gt;
-  Algún día aprenderé a <u>deletrear</u> mejor.
-&lt;/p&gt;
-
-&lt;!-- Palabras clave destacadas en una serie de instrucciones --&gt;
-&lt;ol&gt;
-  &lt;li&gt;
-    &lt;b&gt;Corta&lt;/b&gt; dos piezas de la hogaza de pan.
-  &lt;/li&gt;
-  &lt;li&gt;
-    &lt;b&gt;Inserta&lt;/b&gt; una rodaja de tomate y una hoja de
-    lechuga entre las rebanadas de pan.
-  &lt;/li&gt;
-&lt;/ol&gt;</pre>
-
-<h2 id="¡Pon_a_prueba_tus_habilidades!">¡Pon a prueba tus habilidades!</h2>
-
-<p>Has llegado al final de este artículo, pero ¿puedes recordar la información más importante? Encontrarás más ejercicios con los que comprobar que has retenido esta información antes de seguir adelante en {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_HTML_text_basics", "Pon a prueba tus habilidades: Prueba de conocimientos básicos de HTML")}}.</p>
-
-<h2 id="Resumen">Resumen</h2>
-
-<p>¡Eso es todo por ahora! Este artículo debería haberte dado una buena idea de cómo comenzar a marcar texto en HTML y te ha presentado algunos de los elementos más importantes en este ámbito. Hay muchos más elementos semánticos para desarrollar en esta área, y veremos muchos más en nuestro artículo {{web.link("/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Formateo de texto avanzado")}}, más adelante en el curso. En el siguiente artículo, veremos en detalle cómo {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "crear hipervínculos")}}, posiblemente el más importante elemento en la web.</p>
-
-<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</p>
-
-<h2 id="En_este_módulo">En este módulo</h2>
-
-<ul>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}</li>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "¿Qué hay en el «head»? Metadatos en HTML")}}</li>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Fundamentos de texto HTML")}}</li>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Crear hipervínculos")}}</li>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Formateo de texto avanzado")}}</li>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Estructura web y documentación")}}</li>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Depurar HTML")}}</li>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Marcado para una carta")}}</li>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Estructuración del contenido de una página")}}</li>
-</ul>
diff --git a/files/es/learn/html/introduction_to_html/html_text_fundamentals/index.md b/files/es/learn/html/introduction_to_html/html_text_fundamentals/index.md
new file mode 100644
index 00000000000000..4fbd701ea53577
--- /dev/null
+++ b/files/es/learn/html/introduction_to_html/html_text_fundamentals/index.md
@@ -0,0 +1,1008 @@
+---
+title: Fundamentos de texto en HTML
+slug: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals
+tags:
+  - CodingScripting
+  - Encabezados
+  - Estructuras
+  - Guía
+  - HTML
+  - Introducción a HTML
+  - Novato
+  - Principiante
+  - Párrafos
+  - Texto
+  - aprende
+  - semántica
+translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals
+original_slug: Learn/HTML/Introduccion_a_HTML/texto
+---
+{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}
+
+Una de las principales funciones de HTML es dar al texto estructura y significado (también conocido como {{Glossary("semantics", "semántica")}}), de forma que un navegador pueda mostrarlo correctamente. Este articulo explica la forma en que se puede usar {{Glossary("HTML")}} para estructurar una página de texto añadiendo encabezados y párrafos, enfatizando palabras, creando listas y más.
+
+<table>
+  <tbody>
+    <tr>
+      <th scope="row">Prerrequisitos:</th>
+      <td>
+        Estar familiarizado con el HTML básico, que se expone en
+        {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Objetivo:</th>
+      <td>
+        Aprender a marcar una página de texto básica para darle estructura y
+        significado, incluidos párrafos, encabezados, listas, efectos de énfasis
+        y citas.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## Conceptos básicos: Encabezados y párrafos
+
+La mayor parte del texto estructurado está compuesto por encabezados y párrafos, independientemente de si lees una historia, un periódico, un libro de texto, una revista, etc.
+
+![Un ejemplo de la portada de un periódico, que muestra el uso de un encabezado, subtítulos y párrafos de nivel superior.](https://mdn.mozillademos.org/files/12371/newspaper_small.jpg)
+
+El contenido estructurado simplifica la experiencia en la lectura y se disfruta más.
+
+En HTML, cada párrafo tiene que estar delimitado por un elemento {{HTMLElement("p")}}, como en este ejemplo:
+
+```html
+<p>Soy un párrafo, ¡desde luego que lo soy!</p>
+```
+
+Cada sección tiene que estar delimitada por un elemento de encabezado:
+
+```html
+<h1>Yo soy el título de la historia</h1>
+```
+
+Hay seis elementos de encabezado: {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}} y {{HTMLElement("h6")}}. Cada elemento representa un nivel de contenido diferente en el documento; `<h1>` representa el título principal, `<h2>` representa el subtítulo, `<h3>` representa el subtítulo del subtítulo, y así sucesivamente.
+
+### Cómo establecer la estructura jerárquica
+
+Por ejemplo, en esta historia, `<h1>` representa el título de la historia, `<h2>` representará el título de cada capítulo y `<h3>` las diferentes secciones del capítulo, y así sucesivamente.
+
+```html
+<h1>El agujero aplastante</h1>
+
+<p>Por Chris Mills</p>
+
+<h2>Capítulo 1: La oscura noche</h2>
+
+<p>Era una noche oscura. En algún lugar, un búho ululó. La lluvia azotó el ...</p>
+
+<h2>Capítulo 2: El silencio eterno</h2>
+
+<p>Nuestro protagonista ni susurrar pudo al ver esa sombría figura ...</p>
+
+<h3>El espectro habla</h3>
+
+<p>Habían pasado varias horas más, cuando de repente el espectro se incorporó y exclamó: "¡Por favor, ten piedad de mi alma!"</p>
+```
+
+Realmente es a tu elección lo que cada elemento involucrado represente, siempre y cuando la jerarquía tenga sentido. Solo es necesario que tengas en cuenta unas pocas buenas prácticas mientras creas la estructura:
+
+- Preferentemente debes usar solo un `<h1>` por página; este es el nivel de título superior, y todos los demás se sitúan por debajo de él en la jerarquía.
+- Asegúrate de que usas los títulos en el orden correcto en la jerarquía. No uses los `<h3>` para representar subtítulos, seguidos de los `<h2>` para representar los subtítulos de los subtítulos; eso no tiene sentido y provocará resultados extraños.
+- De los seis niveles de títulos disponibles, debes procurar no usar más de tres por página, a menos que creas que es realmente necesario. Los documentos con muchos niveles (es decir, una jerarquía de títulos muy profunda) son de difícil manejo y navegación. En esos casos se recomienda, si es posible, separar el contenido en varias páginas.
+
+### ¿Por qué necesitamos estructura?
+
+Para responder a esta cuestión, echemos un vistazo a [text-start.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html); el apartado inicial de nuestro ejemplo en curso para este artículo (una buena receta de hummus). Debes guardar una copia de este archivo en tu ordenador porque después la necesitarás para los ejercicios prácticos. El cuerpo (`<body>`) de este documento incluye varios elementos de contenido que no están marcados de ninguna manera pero están separados por saltos de línea (se ha pulsado **Intro**/**Retorno** para continuar en la siguiente línea).
+
+Sin embargo, cuando abres el documento en tu navegador, verás que el texto aparece... ¡como una masa enorme!
+
+![Una página web que muestra un muro de texto sin formato, porque no hay elementos en la página para estructurarlo.](https://mdn.mozillademos.org/files/12972/text-no-formatting.png)
+
+Esto se debe a que no hay elementos que den estructura al contenido, por lo que el navegador no sabe qué es un encabezado y qué es un párrafo. Además:
+
+- Los usuarios que miran una página web tienden a escanearla rápidamente para encontrar el contenido relevante que hay en ella y a menudo empiezan por leer los encabezados para comenzar. (Solemos [pasar muy poco tiempo en una página web](http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/)). Si no pueden ver nada útil en unos segundos, es probable que se sientan frustrados y se vayan a otro sitio.
+- Los motores de búsqueda que indizan tu página consideran el contenido de los títulos como palabras clave importantes e influyen en la puntuación de búsqueda de la página. Sin encabezados, tu página tendrá un rendimiento bajo en términos de optimización de motores de búsqueda {{Glossary("SEO")}}.
+- Las personas con discapacidad visual severa no suelen leer páginas web: en lugar de ello, las escuchan. Lo hacen con un software llamado {{interwiki("wikipedia", "Lector de pantalla")}}. Este software proporciona acceso rápido a un contenido textual dado. Entre las diversas técnicas que emplean, leen los encabezados para proporcionar un esquema del documento que permite a los usuarios encontrar rápidamente la información que quieren. Si no hay encabezados disponibles, se ven obligados a escuchar el documento entero.
+- Para aplicar estilos al contenido con {{Glossary("CSS")}}, o para que haga cosas interesantes con {{Glossary("JavaScript")}}, necesitas tener elementos que delimiten el contenido relevante para que CSS/JavaScript se puedan focalizar en este efectivamente.
+
+Por lo tanto, debemos dar a nuestro contenido una estructura definida.
+
+### Aprendizaje Activo: Dar estructura a nuestro contenido
+
+Pasemos directamente a un ejemplo real. En el ejemplo de abajo, añade elementos al texto en bruto en el campo _Código editable_ para que en el campo _Salida en vivo_ aparezcan como un encabezado y dos párrafos.
+
+Si te equivocas, siempre puedes restablecer el código anterior pulsando el botón _Restablecer_. Si encallas, pulsa el botón _Mostrar solución_ para ver la respuesta...
+
+```html hidden
+<h2>Salida en vivo</h2>
+
+<div class="output" style="min-height: 50px;">
+</div>
+
+<h2>Código editable</h2>
+<p class="a11y-label">Pulsa Esc para quitar el foco del área de código (Tab inserta un carácter de tabulación).</p>
+
+<textarea id="code" class="input" style="min-height: 100px; width: 95%">Mi breve relato Soy estadístico y mi nombre es Trish.
+
+Mis piernas son de cartón y estoy casada con un pez.</textarea>
+
+<div class="playable-buttons">
+<input id="reset" type="button" value="Restablecer">
+<input id="solution" type="button" value="Mostrar solución">
+</div>
+```
+
+```css hidden
+html {
+font-family: sans-serif;
+}
+
+h2 {
+font-size: 16px;
+}
+
+.a11y-label {
+margin: 0;
+text-align: right;
+font-size: 0.7rem;
+width: 98%;
+}
+
+body {
+margin: 10px;
+background: #f5f9fa;
+}
+```
+
+```js hidden
+var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+textarea.value = code;
+userEntry = textarea.value;
+solutionEntry = htmlSolution;
+solution.value = 'Mostrar solución';
+updateCode();
+});
+
+solution.addEventListener('click', function() {
+if(solution.value === 'Mostrar solución') {
+textarea.value = solutionEntry;
+solution.value = 'Ocultar solución';
+} else {
+textarea.value = userEntry;
+solution.value = 'Mostrar solución';
+}
+updateCode();
+});
+
+var htmlSolution = '<h1>Mi breve relato</h1>\n<p>Soy estadístico y mi nombre es Trish.</p>\n<p>Mis piernas son de cartón y estoy casada con un pez.</p>';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// captura la tecla de tabulación en el área de texto y en su lugar
+// hace que se escriba una tabulación en la posición del cursor
+
+textarea.onkeydown = function(e){
+if (e.keyCode === 9) {
+e.preventDefault();
+insertAtCaret('\t');
+}
+
+if (e.keyCode === 27) {
+textarea.blur();
+}
+};
+
+function insertAtCaret(text) {
+var scrollPos = textarea.scrollTop;
+var caretPos = textarea.selectionStart;
+
+var front = (textarea.value).substring(0, caretPos);
+var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+textarea.value = front + text + back;
+caretPos = caretPos + text.length;
+textarea.selectionStart = caretPos;
+textarea.selectionEnd = caretPos;
+textarea.focus();
+textarea.scrollTop = scrollPos;
+}
+
+// Actualiza el userCode guardado cada vez que el usuario actualiza el código del área de texto
+
+textarea.onkeyup = function(){
+// Solo queremos guardar el estado cuando se muestra el código de usuario,
+// no es la solución, por lo que la solución no se guarda sobre el código del usuario
+if(solution.value === 'Mostrar solución') {
+userEntry = textarea.value;
+} else {
+solutionEntry = textarea.value;
+}
+
+updateCode();
+};
+```
+
+{{ EmbedLiveSample('Código_reproducible', 700, 400, "", "", "hide-codepen-jsfiddle") }}
+
+### ¿Por qué necesitamos semántica?
+
+Contamos con la semántica para todo lo que nos rodea. Nos basamos en experiencias previas para conocer la función de cada objeto cotidiano; cuando miramos un objeto, sabemos cuál debe ser su función. Entonces, por ejemplo, esperamos que un semáforo en rojo signifique "alto" y que un semáforo en verde signifique "avance". Las cosas se pueden complicar muy rápidamente si se aplica la semántica incorrecta. (¿Algún país usa rojo para significar "avance"? Esperemos que no).
+
+De manera similar, debemos asegurarnos de que utilizamos los elementos adecuados y damos a nuestro contenido el significado y función correctos y la apariencia adecuada. En este mismo sentido, el elemento {{HTMLElement("h1")}} es un elemento semántico que da al texto al que delimita la función (o significado) de un _titular de primer nivel en tu página_.
+
+```html
+<h1>Este es un titular de primer nivel</h1>
+```
+
+De manera predeterminada, el navegador le asignará una fuente de gran tamaño para darle el aspecto de un titular (aunque se le podrá dar el estilo que se quisiera usando CSS). Lo más importante es que su valor semántico se va a usar de diferente manera, por ejemplo, por los motores de búsqueda y los lectores de pantalla (como se mencionó antes).
+
+Por otra parte, podrías hacer que cualquier elemento _parezca_ un titular de primer rango. Considera lo siguiente:
+
+```html
+<span style="font-size: 32px; margin: 21px 0;">¿Es este un titular de primer rango?</span>
+```
+
+Este es un elemento {{HTMLElement("span")}}. No tiene semántica. Se usa para delimitar contenido cuando se le quiere aplicar CSS (o tratarlo con JavaScript) sin proporcionarle ningún significado extra (encontrarás más información sobre este tipo de elemento más adelante en el curso). Hemos aplicado CSS a este elemento para que parezca un titular de primer nivel, pero al no tener valor semántico, no tiene ninguna de las ventajas añadidas que hemos descrito antes. Es una buena idea usar el elemento HTML apropiado para cada tarea.
+
+## Listas
+
+Ahora volvamos nuestra atención hacia las listas. Las listas están en todos los aspectos de nuestra vida: desde la lista de compras a la lista de instrucciones que sigues inconscientemente para llegar a casa todos los días, o las listas de instrucciones que sigues en estos tutoriales. Las listas están en todos lados en la web también y hay tres diferentes tipos de las que nos vamos a ocupar.
+
+### Listas no ordenadas
+
+Las listas no ordenadas se usan para marcar listas de artículos cuyo orden no es importante. Tomemos como ejemplo una lista de compras:
+
+```bash
+leche
+huevos
+pan
+hummus
+```
+
+Cada lista desordenada comienza con un elemento {{HTMLElement("ul")}} («_unordered list_») que delimita todos los elementos de la lista:
+
+```html
+<ul>
+leche
+huevos
+pan
+hummus
+</ul>
+```
+
+El siguiente paso es delimitar cada artículo de la lista con un elemento {{HTMLElement("li")}} («_list item_»).
+
+```html
+<ul>
+  <li>leche</li>
+  <li>huevos</li>
+  <li>pan</li>
+  <li>hummus</li>
+</ul>
+```
+
+#### Aprendizaje activo: marcar una lista no ordenada
+
+Edita el siguiente ejemplo para crear tu propia lista HTML no ordenada.
+
+```html hidden
+<h2>Salida en vivo</h2>
+
+<div class="output" style="min-height: 50px;">
+</div>
+
+<h2>Código editable</h2>
+<p class="a11y-label">Pulsa Esc para quitar el foco del área de código (Tab inserta un carácter de tabulación).</p>
+
+<textarea id="code" class="input" style="min-height: 100px; width: 95%">leche
+huevos
+pan
+hummus</textarea>
+
+<div class="playable-buttons">
+<input id="reset" type="button" value="Restablecer">
+<input id="solution" type="button" value="Mostrar solución">
+</div>
+```
+
+```css hidden
+html {
+font-family: sans-serif;
+}
+
+h2 {
+font-size: 16px;
+}
+
+.a11y-label {
+margin: 0;
+text-align: right;
+font-size: 0.7rem;
+width: 98%;
+}
+
+body {
+margin: 10px;
+background: #f5f9fa;
+}
+```
+
+```js hidden
+var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+textarea.value = code;
+userEntry = textarea.value;
+solutionEntry = htmlSolution;
+solution.value = 'Mostrar solución';
+updateCode();
+});
+
+solution.addEventListener('click', function() {
+if(solution.value === 'Mostrar solución') {
+textarea.value = solutionEntry;
+solution.value = 'Ocultar solución';
+} else {
+textarea.value = userEntry;
+solution.value = 'Mostrar solución';
+}
+updateCode();
+});
+
+var htmlSolution = '<ul>\n<li>leche</li>\n<li>huevos</li>\n<li>pan</li>\n<li>hummus</li>\n</ul>';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// captura la tecla de tabulación en el área de texto y en su lugar
+// hace que se escriba una tabulación en la posición del cursor
+
+textarea.onkeydown = function(e){
+if (e.keyCode === 9) {
+e.preventDefault();
+insertAtCaret('\t');
+}
+
+if (e.keyCode === 27) {
+textarea.blur();
+}
+};
+
+function insertAtCaret(text) {
+var scrollPos = textarea.scrollTop;
+var caretPos = textarea.selectionStart;
+
+var front = (textarea.value).substring(0, caretPos);
+var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+textarea.value = front + text + back;
+caretPos = caretPos + text.length;
+textarea.selectionStart = caretPos;
+textarea.selectionEnd = caretPos;
+textarea.focus();
+textarea.scrollTop = scrollPos;
+}
+
+// Actualiza el userCode guardado cada vez que el usuario actualiza el código del área de texto
+
+textarea.onkeyup = function(){
+// Solo queremos guardar el estado cuando se muestra el código de usuario,
+// no es la solución, por lo que la solución no se guarda sobre el código del usuario
+if(solution.value === 'Mostrar solución') {
+userEntry = textarea.value;
+} else {
+solutionEntry = textarea.value;
+}
+
+updateCode();
+};
+```
+
+{{ EmbedLiveSample('Código_reproducible_2', 700, 400, "", "", "hide-codepen-jsfiddle") }}
+
+### Listas ordenadas
+
+Las listas ordenadas son aquellas en las que el orden de los elementos _sí_ importa. Tomemos como ejemplo una lista de instrucciones para seguir un itinerario:
+
+```bash
+Conduce hasta el final de la calle
+Gira a la derecha
+Sigue derecho por las dos primeras glorietas
+Gira a la izquierda en la tercer glorieta
+El colegio está a la derecha, 300 metros más adelante
+```
+
+La estructura de marcado es la misma que para las listas no ordenadas, excepto que debes delimitar los elementos de la lista con una etiqueta {{HTMLElement("ol")}} («ordered list»), en lugar de `<ul>`:
+
+```html
+<ol>
+  <li>Conduce hasta el final de la calle</li>
+  <li>Gira a la derecha</li>
+  <li>Sigue derecho por las dos primeras glorietas</li>
+  <li>Gira a la izquierda en la tercer glorieta</li>
+  <li>El colegio está a tu derecha, 300 metros más adelante</li>
+</ol>
+```
+
+#### Aprendizaje activo: Marcar una lista ordenada
+
+Edita el siguiente ejemplo para crear tu propia lista ordenada en HTML.
+
+```html hidden
+<h2>Salida en vivo</h2>
+
+<div class="output" style="min-height: 50px;">
+</div>
+
+<h2>Código editable</h2>
+<p class="a11y-label">Pulsa Esc para quitar el foco del área de código (Tab inserta un carácter de tabulación).</p>
+
+<textarea id="code" class="input" style="min-height: 200px; width: 95%">Conduce hasta el final de la calle
+Gira a la derecha
+Sigue derecho por las dos primeras glorietas
+Gira a la izquierda en la tercer glorieta
+La escuela está a tu derecha, 300 metros por más adelante</textarea>
+
+<div class="playable-buttons">
+<input id="reset" type="button" value="Restablecer">
+<input id="solution" type="button" value="Mostrar solución">
+</div>
+```
+
+```css hidden
+html {
+font-family: sans-serif;
+}
+
+h2 {
+font-size: 16px;
+}
+
+.a11y-label {
+margin: 0;
+text-align: right;
+font-size: 0.7rem;
+width: 98%;
+}
+
+body {
+margin: 10px;
+background: #f5f9fa;
+}
+```
+
+```js hidden
+var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+textarea.value = code;
+userEntry = textarea.value;
+solutionEntry = htmlSolution;
+solution.value = 'Mostrar solución';
+updateCode();
+});
+
+solution.addEventListener('click', function() {
+if(solution.value === 'Mostrar solución') {
+textarea.value = solutionEntry;
+solution.value = 'Ocultar solución';
+} else {
+textarea.value = userEntry;
+solution.value = 'Mostrar solución';
+}
+updateCode();
+});
+
+var htmlSolution = '<ol>\n<li>Conduce hasta el final de la calle</li>\n<li>Gira a la derecha</li>\n<li>Sigue derecho por las dos primeras glorietas</li>\n<li>Gira a la izquierda en la tercer glorieta</li>\n<li>La escuela está a tu derecha, 300 metros más adelante</li>\n</ol>';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// captura la tecla de tabulación en el área de texto y en su lugar
+// hace que se escriba una tabulación en la posición del cursor
+
+textarea.onkeydown = function(e){
+if (e.keyCode === 9) {
+e.preventDefault();
+insertAtCaret('\t');
+}
+
+if (e.keyCode === 27) {
+textarea.blur();
+}
+};
+
+function insertAtCaret(text) {
+var scrollPos = textarea.scrollTop;
+var caretPos = textarea.selectionStart;
+
+var front = (textarea.value).substring(0, caretPos);
+var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+textarea.value = front + text + back;
+caretPos = caretPos + text.length;
+textarea.selectionStart = caretPos;
+textarea.selectionEnd = caretPos;
+textarea.focus();
+textarea.scrollTop = scrollPos;
+}
+
+// Actualiza el userCode guardado cada vez que el usuario actualiza el código del área de texto
+
+textarea.onkeyup = function(){
+// Solo queremos guardar el estado cuando se muestra el código de usuario,
+// no es la solución, por lo que la solución no se guarda sobre el código del usuario
+if(solution.value === 'Mostrar solución') {
+userEntry = textarea.value;
+} else {
+solutionEntry = textarea.value;
+}
+
+updateCode();
+};
+```
+
+{{ EmbedLiveSample('Código_reproducible_3', 700, 400, "", "", "hide-codepen-jsfiddle") }}
+
+### Aprendizaje activo: marcar la página de tu receta
+
+Llegados a este punto del artículo, tienes toda la información necesaria para marcar la página de ejemplo con tu receta. Puedes escoger entre guardar una copia local del archivo inicial [text-start.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html) y trabajar en él, o hacerlo sobre el ejemplo editable de abajo. Probablemente sea mejor trabajar en tu copia local porque podrás guardar tu progreso, mientras que si lo haces sobre el ejemplo editable, los cambios se perderán la próxima vez que cargues la página. Ambos métodos tienen pros y contras.
+
+```html hidden
+<h2>Salida en vivo</h2>
+
+<div class="output" style="min-height: 50px;">
+</div>
+
+<h2>Código editable</h2>
+<p class="a11y-label">Pulsa Esc para quitar el foco del área de código (Tab inserta un carácter de tabulación).</p>
+
+<textarea id="code" class="input" style="min-height: 200px; width: 95%">Receta rápida de hummus
+
+Esta receta hace un hummus rápido y sabroso, sin ensuciar. Ha sido adaptada de varias recetas diferentes que he leído a lo largo de los años.
+
+El hummus es una deliciosa pasta espesa que se usa mucho en platos griegos y del Medio Oriente. Es muy sabroso con ensalada, carne a las brasas y pan de pitta.
+
+Ingredientes
+
+1 lata (400g) de garbanzos (garbanzos)
+175g de tahini
+6 tomates secos
+Medio pimiento rojo
+Una pizca de pimienta de cayena
+1 diente de ajo
+Una pizca de aceite de oliva
+
+Instrucciones
+
+Retira la piel del ajo y pica en trozos grandes.
+Retira todas las semillas y el tallo del pimiento y pica en trozos grandes.
+Agrega todos los ingredientes en un procesador de alimentos.
+Procesa todos los ingredientes en una pasta
+Si deseas un hummus "grueso", procésalo corto tiempo
+Si deseas un hummus "suave", procésalo por más tiempo
+
+Para un sabor diferente, puedes intentar mezclar en una pequeña medida de limón y cilantro, ají, lima y chipotle, harissa y menta, o espinacas y queso feta. Pruébalo y confirma que esté en su punto.
+
+Almacenamiento
+
+Refrigera el hummus terminado en un recipiente sellado. Deberías poder usarlo durante aproximadamente una semana después de haberlo hecho. Si comienza a burbujear, definitivamente debes desecharlo.
+
+El hummus es apto para congelar; debes descongelarlo y usarlo en un par de meses.</textarea>
+
+<div class="playable-buttons">
+<input id="reset" type="button" value="Restablecer">
+<input id="solution" type="button" value="Mostrar solución">
+</div>
+```
+
+```css hidden
+html {
+font-family: sans-serif;
+}
+
+h2 {
+font-size: 16px;
+}
+
+.a11y-label {
+margin: 0;
+text-align: right;
+font-size: 0.7rem;
+width: 98%;
+}
+
+body {
+margin: 10px;
+background: #f5f9fa;
+}
+```
+
+```js hidden
+var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+textarea.value = code;
+userEntry = textarea.value;
+solutionEntry = htmlSolution;
+solution.value = 'Mostrar solución';
+updateCode();
+});
+
+solution.addEventListener('click', function() {
+if(solution.value === 'Mostrar solución') {
+textarea.value = solutionEntry;
+solution.value = 'Ocultar solución';
+} else {
+textarea.value = userEntry;
+solution.value = 'Mostrar solución';
+}
+updateCode();
+});
+
+var htmlSolution = '<h1>Receta rápida de hummus</h1>\n\n<p>Esta receta hace un hummus rápido y sabroso, sin ensuciar. Ha sido adaptada de varias recetas diferentes que he leído a lo largo de los años.</p>\n\n<p>El hummus es una deliciosa pasta espesa que se usa mucho en platos griegos y del Medio Oriente. Es muy sabroso con ensalada, carne a las brasas y pan de pitta.</p>\n\n<h2>Ingredientes</h2>\n\n<ul>\n<li>1 lata (400g) de garbanzos (garbanzos)</li>\n<li>175g de tahini</li>\n<li>6 tomates secos</li>\n<li>Medio pimiento rojo</li>\n<li>Una pizca de pimienta de cayena</li>\n<li>1 diente de ajo</li>\n<li>Una pizca de aceite de oliva</li>\n</ul>\n\n<h2>Instrucciones</h2>\n\n<ol>\n <li>Retira la piel del ajo y pica en trozos grandes.</li>\n<li>Retira todas las semillas y el tallo del pimiento, y pica en trozos grandes.</li>\n<li>Agrega todos los ingredientes en un procesador de alimentos.</li>\n<li>Procesa todos los ingredientes en una pasta.</li>\n<li>Si deseas un hummus "grueso", procésalo corto tiempo.</li>\n<li>Si deseas un hummus "suave", procésalo por más tiempo.</li>\n</ol>\n\n<p>Para un sabor diferente, puedes intentar mezclar una pequeña medida de limón y cilantro, ají, lima y chipotle, harissa y menta, o espinacas y queso feta. Pruébalo y confirma que esté en su punto.</p>\n\n<h2>Almacenamiento</h2>\n\n<p>Refrigera el hummus terminado en un recipiente sellado. Deberías poder usarlo durante aproximadamente una semana después de haberlo hecho. Si comienza a burbujear, definitivamente debes desecharlo.</p>\n\n<p>El hummus es adecuado para congelar; debes descongelarlo y usarlo en un par de meses.</p>';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// captura la tecla de tabulación en el área de texto y en su lugar
+// hace que se escriba una tabulación en la posición del cursor
+
+textarea.onkeydown = function(e){
+if (e.keyCode === 9) {
+e.preventDefault();
+insertAtCaret('\t');
+}
+
+if (e.keyCode === 27) {
+textarea.blur();
+}
+};
+
+function insertAtCaret(text) {
+var scrollPos = textarea.scrollTop;
+var caretPos = textarea.selectionStart;
+
+var front = (textarea.value).substring(0, caretPos);
+var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+textarea.value = front + text + back;
+caretPos = caretPos + text.length;
+textarea.selectionStart = caretPos;
+textarea.selectionEnd = caretPos;
+textarea.focus();
+textarea.scrollTop = scrollPos;
+}
+
+// Actualiza el userCode guardado cada vez que el usuario actualiza el código del área de texto
+
+textarea.onkeyup = function(){
+// Solo queremos guardar el estado cuando se muestra el código de usuario,
+// no es la solución, por lo que la solución no se guarda sobre el código del usuario
+if(solution.value === 'Mostrar solución') {
+userEntry = textarea.value;
+} else {
+solutionEntry = textarea.value;
+}
+
+updateCode();
+};
+```
+
+{{ EmbedLiveSample('Código_reproducible_4', 700, 400, "", "", "hide-codepen-jsfiddle") }}
+
+Si encallas, siempre puedes pulsar el botón _Mostrar solución_ o comprobar el ejemplo completo [text-complete.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-complete.html) en nuestro repositorio de Github.
+
+### Listas anidadas
+
+Es perfectamente correcto anidar una lista dentro de otra. Posiblemente quieras tener subelementos bajo elementos de rango superior. Tomemos la segunda lista de nuestro ejemplo de la receta:
+
+```html
+<ol>
+  <li>Pela el ajo y picarlo en trozos gruesos.</li>
+  <li>Retira las semillas y el tallo del pimiento, y cortarlo en trozos gruesos.</li>
+  <li>Mete todos los alimentos en un procesador de alimentos.</li>
+  <li>Pica todos los ingredientes hasta conseguir una pasta.</li>
+  <li>Si deseas un hummus "grueso", procésalo corto tiempo.</li>
+  <li>Pica durante más tiempo si se desea obtener un hummus "suave".</li>
+</ol>
+```
+
+Puesto que los dos últimos elementos están estrechamente relacionados con el elemento anterior (se leen como subinstrucciones u opciones que encajan bajo ese elemento), puede tener sentido anidarlos dentro de su propia lista no ordenada e introducir esa lista bajo el cuarto elemento. Tendría el siguiente aspecto:
+
+```html
+<ol>
+  <li>Pela el ajo y picarlo en trozos gruesos.</li>
+  <li>Retira las semillas y el tallo del pimiento, y cortarlo en trozos gruesos.</li>
+  <li>Mete todos los alimentos en un procesador de alimentos.</li>
+  <li>Procesa todos los ingredientes hasta conseguir una pasta.
+    <ul>
+      <li>Si deseas un hummus "grueso", procésalo corto tiempo.</li>
+      <li>Pica durante más tiempo si se desea obtener un hummus "suave".</li>
+    </ul>
+  </li>
+</ol>
+```
+
+Vuelve al ejemplo anterior y reescribe la lista de este modo.
+
+## Énfasis e importancia
+
+En el lenguaje humano, a menudo enfatizamos ciertas palabras para alterar el significado de una frase, y a menudo queremos destacar ciertas palabras como importantes o diferentes en algún sentido. HTML nos dota de diversos elementos semánticos que nos permiten destacar contenido textual con tales efectos, y en esta sección veremos los más comunes.
+
+### Énfasis
+
+Cuando queremos dar énfasis al lenguaje hablado, _acentuamos_ ciertas palabras y así alteramos sutilmente el significado de lo que decimos. De manera similar, en el lenguaje escrito ponemos palabras en cursiva para destacarlas. Por ejemplo, las dos siguientes frases tienen diferente significado:
+
+Me alegro de que no llegues tarde.
+
+Me _alegro_ de que no llegues _tarde_.
+
+La primera frase suena aliviada porque la persona no llega tarde. Por el contrario, la segunda suena sarcástica y un tanto pasivo-agresiva, expresa molestia porque la persona ha llegado algo tarde.
+
+En HTML usamos el elemento {{HTMLElement("em")}} («_emphasis_») para marcar estos casos. El documento logra entonces transmitir una lectura más interesante y además así lo reconocen los lectores de pantalla, que lo expresan con un diferente tono de voz. El navegador, de manera predeterminada, aplica el estilo de letra itálica, pero no debes utilizar esta etiqueta solamente para establecer el estilo de letra itálica. Para usar ese estilo, debes utilizar únicamente la etiqueta del elemento {{HTMLElement("span")}} y algo de CSS u otra etiqueta con el elemento {{HTMLElement("i")}} (ve abajo).
+
+```html
+<p>Me <em>alegro</em> de que no llegues <em>tarde</em>.</p>
+```
+
+### Importancia fuerte
+
+Para enfatizar palabras importantes al hablar solemos acentuarlas, y al escribir lo hacemos en estilo **negrita**. Por ejemplo:
+
+Este líquido es **altamente tóxico**.
+
+Cuento contigo. **¡No llegues tarde!**
+
+En HTML usamos el elemento {{HTMLElement("strong")}} (importancia fuerte) para marcar tales expresiones. El documento resulta entonces más útil, y de nuevo los lectores de pantalla reconocen estos elementos y el tono de voz cambia a uno más fuerte. El estilo negrita es el que aplican los navegadores por omisión, pero no debes usar esta etiqueta solamente para aplicar este estilo. Para hacer eso usa el elemento {{HTMLElement("span")}} y CSS, o un elemento {{HTMLElement("b")}} (ve más abajo).
+
+```html
+<p>Este líquido es <strong>altamente tóxico</strong>.</p>
+
+<p>Cuento contigo. <strong>¡No llegues tarde!</strong></p>
+```
+
+Puedes anidar elementos de énfasis dentro de elementos de importancia y viceversa si lo deseas:
+
+```html
+<p>Este líquido es <strong>altamente tóxico</strong> —
+si lo bebes, <strong>podrías <em>morir</em></strong>.</p>
+```
+
+### Aprendizaje activo: ¡Seamos importantes!
+
+En esta sección de aprendizaje activo te proporcionamos un ejemplo editable. Practica un poco añadiendo algo de _**énfasis**_ e **_importancia_** a las palabras que creas que lo necesitan.
+
+```html hidden
+<h2>Salida en vivo</h2>
+
+<div class="output" style="min-height: 50px;">
+</div>
+
+<h2>Código editable</h2>
+<p class="a11y-label">Pulsa Esc para quitar el foco del área de código (Tab inserta un carácter de tabulación).</p>
+
+<textarea id="code" class="input" style="min-height: 200px; width: 95%"><h1>Aviso importante</h1>
+<p>El domingo 9 de enero de 2019, fue vista una pandilla de góticos
+robando varios gnomos de jardín de un
+centro comercial en el centro de Milwaukee. Todos ellos
+vistiendo monos verdes y tontos sombreros, y
+al parecer estaban pasando un buen rato. Si alguien
+tiene alguna información sobre este incidente, por favor
+póngase en contacto con la policía ahora.</p></textarea>
+
+<div class="playable-buttons">
+<input id="reset" type="button" value="Restablecer">
+<input id="solution" type="button" value="Mostrar solución">
+</div>
+```
+
+```css hidden
+html {
+font-family: sans-serif;
+}
+
+h2 {
+font-size: 16px;
+}
+
+.a11y-label {
+margin: 0;
+text-align: right;
+font-size: 0.7rem;
+width: 98%;
+}
+
+body {
+margin: 10px;
+background: #f5f9fa;
+}
+```
+
+```js hidden
+var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+textarea.value = code;
+userEntry = textarea.value;
+solutionEntry = htmlSolution;
+solution.value = 'Mostrar solución';
+updateCode();
+});
+
+solution.addEventListener('click', function() {
+if(solution.value === 'Mostrar solución') {
+textarea.value = solutionEntry;
+solution.value = 'Ocultar solución';
+} else {
+textarea.value = userEntry;
+solution.value = 'Mostrar solución';
+}
+updateCode();
+});
+
+var htmlSolution='<h1>Aviso importante</h1>\n<p>El <strong>domingo 9 de enero de 2019</strong>, fue vista una pandilla de <em>góticos</em> robando <strong>varios <em>gnomos</em> de jardín</strong> de un centro comercial en el centro de <strong>Milwaukee</strong>. Todos ellos vistiendo <em>monos verdes</em> y <em>tontos sombreros</em>, y al parecer estaban pasando un buen rato. Si alguien tiene <strong>alguna</strong> información sobre este incidente, póngase en contacto con la policía <strong>ahora</strong>.</p>';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// captura la tecla de tabulación en el área de texto y en su lugar
+// hace que se escriba una tabulación en la posición del cursor
+
+textarea.onkeydown = function(e){
+if (e.keyCode === 9) {
+e.preventDefault();
+insertAtCaret('\t');
+}
+
+if (e.keyCode === 27) {
+textarea.blur();
+}
+};
+
+function insertAtCaret(text) {
+var scrollPos = textarea.scrollTop;
+var caretPos = textarea.selectionStart;
+
+var front = (textarea.value).substring(0, caretPos);
+var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+textarea.value = front + text + back;
+caretPos = caretPos + text.length;
+textarea.selectionStart = caretPos;
+textarea.selectionEnd = caretPos;
+textarea.focus();
+textarea.scrollTop = scrollPos;
+}
+
+// Actualiza el userCode guardado cada vez que el usuario actualiza el código del área de texto
+
+textarea.onkeyup = function(){
+// Solo queremos guardar el estado cuando se muestra el código de usuario,
+// no es la solución, por lo que la solución no se guarda sobre el código del usuario
+if(solution.value === 'Mostrar solución') {
+userEntry = textarea.value;
+} else {
+solutionEntry = textarea.value;
+}
+
+updateCode();
+};
+```
+
+{{ EmbedLiveSample('Código_reproducible_5', 700, 400, "", "", "hide-codepen-jsfiddle") }}
+
+### Cursiva, negrita, subrayado...
+
+Los elementos que hemos comentado hasta ahora tienen asociada una semántica clara. La situación con {{HTMLElement("b")}} (negrita o «**bold**»), {{HTMLElement("i")}} (cursiva o «_italic_») y {{HTMLElement("u")}} (subrayado o «__underline__») es algo más complicada. Surgieron para que las personas pudieran escribir textos en negrita, cursiva o subrayado en un tiempo en el que pocos navegadores o ninguno admitían el CSS. Elementos como estos, que solo afectan a la presentación y no a la semántica, se conocen como **elementos de presentación** y no se deberían usar porque, como hemos visto, la semántica es muy importante para la accesibilidad y el SEO, entre otros aspectos.
+
+HTML5 redefinió los elementos `<b>`, `<i>` y `<u>` con roles semánticos nuevos un tanto confusos.
+
+Esta es la regla de oro: el uso de `<b>`, `<i>` o `<u>` resulta adecuado cuando transmiten el significado que suele transmitir el uso tradicional de las negritas, itálicas o el subrayado, si no hay ningún otro elemento que resulte más adecuado. Sin embargo, siempre resulta crítico mantener una actitud orientada a la accesibilidad. El concepto de itálica no es demasiado útil para las personas que usan lectores de pantalla o para las personas que utilizan un sistema de escritura distinto del alfabeto latino.
+
+- {{HTMLElement('i')}} se usa para transmitir el significado que tradicionalmente transmite la itálica: extranjerismos, clasificaciones taxonómicas, conceptos técnicos, un pensamiento...
+- {{HTMLElement('b')}} se usa para transmitir el significado que tradicionalmente transmite la negrita: palabras clave, nombres de productos, frases principales...
+- {{HTMLElement('u')}} se usa para transmitir el significado que tradicionalmente conlleva el subrayado: nombres propios, errores ortográficos...
+
+> **Nota:** Una observación prudente acerca del subrayado: **La gente suele asociar estrechamente el subrayado con los hipervínculos.** Por ello en la web es mejor reservar el subrayado para los enlaces. Utiliza el elemento {{HTMLElement('u')}} cuando resulte apropiado semánticamente, pero considera usar CSS para cambiar el subrayado predeterminado por algo más adecuado en la web. El siguiente ejemplo ilustra cómo lo puedes hacer.
+
+```html
+<!-- nombres científicos -->
+<p>
+  El colibrí garganta de rubí (<i>Archilochus colubris</i>)
+  es el colibrí más común en el este de América del Norte.
+</p>
+
+<!-- extranjerismos -->
+<p>
+  El menú era un mar de palabras exóticas como <i lang="uk-latn">vatrushka</i>,
+  <i lang="id">nasi goreng</i> y <i lang="fr">soupe à l'oignon</i>.
+</p>
+
+<!-- un error ortográfico reconocido -->
+<p>
+  Algún día aprenderé a deletrear mejor.
+</p>
+
+<!-- Palabras clave destacadas en una serie de instrucciones -->
+<ol>
+  <li>
+    <b>Corta</b> dos piezas de la hogaza de pan.
+  </li>
+  <li>
+    <b>Inserta</b> una rodaja de tomate y una hoja de
+    lechuga entre las rebanadas de pan.
+  </li>
+</ol>
+```
+
+## ¡Pon a prueba tus habilidades!
+
+Has llegado al final de este artículo, pero ¿puedes recordar la información más importante? Encontrarás más ejercicios con los que comprobar que has retenido esta información antes de seguir adelante en {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_HTML_text_basics", "Pon a prueba tus habilidades: Prueba de conocimientos básicos de HTML")}}.
+
+## Resumen
+
+¡Eso es todo por ahora! Este artículo debería haberte dado una buena idea de cómo comenzar a marcar texto en HTML y te ha presentado algunos de los elementos más importantes en este ámbito. Hay muchos más elementos semánticos para desarrollar en esta área, y veremos muchos más en nuestro artículo {{web.link("/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Formateo de texto avanzado")}}, más adelante en el curso. En el siguiente artículo, veremos en detalle cómo {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "crear hipervínculos")}}, posiblemente el más importante elemento en la web.
+
+{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}
+
+## En este módulo
+
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "¿Qué hay en el «head»? Metadatos en HTML")}}
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Fundamentos de texto HTML")}}
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Crear hipervínculos")}}
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Formateo de texto avanzado")}}
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Estructura web y documentación")}}
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Depurar HTML")}}
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Marcado para una carta")}}
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Estructuración del contenido de una página")}}
diff --git a/files/es/learn/html/introduction_to_html/index.html b/files/es/learn/html/introduction_to_html/index.html
deleted file mode 100644
index 8f320aff076142..00000000000000
--- a/files/es/learn/html/introduction_to_html/index.html
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: Introducción a HTML
-slug: Learn/HTML/Introduction_to_HTML
-tags:
-  - CodingScripting
-  - Enlaces
-  - Estructura
-  - HTML
-  - Introducción a HTML
-  - Texto
-  - semántica
-translation_of: Learn/HTML/Introduction_to_HTML
-original_slug: Learn/HTML/Introduccion_a_HTML
----
-<div>{{LearnSidebar}}</div>
-
-<p class="summary">En su corazón, {{glossary("HTML")}} es un lenguaje muy sencillo compuesto de {{Glossary("Element", "elementos")}}, que se pueden aplicar a piezas de texto para darles un significado diferente en un documento (¿Esto es un párrafo? ¿Esto es una lista con viñetas? ¿Esto es parte de una tabla?), estructura un documento en secciones lógicas (¿Tiene una cabecera? ¿Tres columnas de contenido? ¿Un menú de navegación?), e incrusta contenido como imágenes y vídeos en una página. Este módulo introducirá los dos primeros de estos, e introduce conceptos fundamentales y la sintaxis que necesitas para entender HTML.</p>
-
-<div class="callout">
-<h3 id="¿Quieres_transformarte_en_un_desarrollador_de_la_interfaz_de_usuario_web">¿Quieres transformarte en un desarrollador de la interfaz de usuario web?</h3>
-
-<p>Hemos elaborado un curso que incluye toda la información esencial que necesitas para trabajar hacia tu objetivo.</p>
-
-<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Empieza aquí</a></p>
-</div>
-
-<h2 id="Prerrequisitos">Prerrequisitos</h2>
-
-<p>Antes de empezar este módulo, no necesitas conocimientos previos de HTML, pero deberías estar, por lo menos, familiarizado con el uso básico de computadoras, y usar la Web pasivamente (es decir, sólo revisándola y consumiendo el contenido). Debes tener configurado un entorno de trabajo básico (como se detalla en {{web.link("/es/docs/Learn/Getting_started_with_the_web/Installing_basic_software", "Instalación de software básico")}}), y comprender cómo crear y administrar archivos (como se detalla en {{web.link("/es/docs/Learn/Getting_started_with_the_web/Dealing_with_files", "Manejo de archivos")}}). Ambos son parte de nuestro módulo completo {{web.link("/es/docs/Learn/Getting_started_with_the_web", "Introducción a la web")}} para principiantes.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: Si estás trabajando en una computadora, tablet u otro dispositivo en donde no tengas la capacidad de crear tus propios archivos, podrías probar (en su mayoría) el código de los ejemplos en un programa para escribir código en línea como <a href="http://jsbin.com/">JSBin</a> o <a href="">Glitch</a>.</p>
-</div>
-
-<h2 id="Guías">Guías</h2>
-
-<p>Este módulo contiene los siguientes artículos, que te llevarán a través de toda la teoría básica de HTML, y te proporcionarán una amplia oportunidad de probar algunas habilidades.</p>
-
-<dl>
- <dt><a href="/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Empezar con HTML</a></dt>
- <dd>Cubre las bases absolutas de HTML, para que puedas empezar — definimos elementos, atributos, y todas los otros términos importantes que puedas haber escuchado, y en donde encajan en el lenguaje. También mostramos cómo está estructurado un elemento HTML, cómo está estructurada una página HTML típica, y explica otras características importantes. <span id="result_box" lang="es">En el camino, vamos a tener un juego con algo de HTML, ¡para alimentar tu intereses!</span></dd>
- <dt><a href="/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">¿Qué hay en la cabecera? Metadatos en HTML</a></dt>
- <dd>La cabecera de un documento HTML es la parte que <strong>no</strong> se muestra en el navegador web cuando se carga una página. Esta contiene información como el título ({{htmlelement("title")}}) de la página, enlaces a {{glossary("CSS")}} (si quieres estilizar tu contenido HTML con CSS), enlaces a favicons personalizados, y metadatos (que son los datos sobre el HTML, como quién lo escribió, y palabras clave que describen el documento).</dd>
- <dt><a href="/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Fundamentos de texto HTML</a></dt>
- <dd>Uno de los principales trabajos de HTML es darle significado al texto (también conocido como <strong>semántica</strong>) para que el navegador sepa cómo mostrarlo correctamente. Este artículo trata cómo usar HTML para convertir un bloque de texto en una estructura de encabezados y párrafos, agregar énfasis o importancia a las palabras, crear listas y más.</dd>
- <dt><a href="/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creando hipervínculos</a></dt>
- <dd>Los hipervínculos realmente son importantes — estos son los que hacen la Web. Este artículo muestra la sintaxis requerida para hacer un enlace, y explica las mejores prácticas sobre enlaces.</dd>
- <dt><a href="/es/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Formateo de texto avanzado</a></dt>
- <dd>Hay muchos otros elementos en HTML para formatear texto, que no hemos tratado en los artículos {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "fundamentos de texto HTML")}}. Los siguientes elementos son menos conocidos, pero sigue siendo útil conocerlos. Aquí aprenderás sobre el marcado de citas, listas de descripción, código de computadoras y otros textos relacionados, <span id="result_box" lang="es"><span> subíndices y superíndices, información de contacto, y mucho más</span>.</span></dd>
- <dt>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Estructura web y documentación")}}</dt>
- <dd>Así como definimos las partes individuales de tu página (como "un párrafo" o "una imagen"), HTML también se usa para definir las áreas de tu sitio web (como "la cabecera", "el menú de navegación", "la columna de contenido principal"). Este artículo trata sobre cómo planear una estructura básica del sitio web, y escribir el HTML para representar esa estructura.</dd>
- <dt><a href="/es/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Depurar HTML</a></dt>
- <dd>Escribir HTML está bien, pero ¿Qué pasa si algo está mal, y no puedes encontrar en dónde está el error en el código? Este artículo introducirá algunas herramientas que te podrán ayudar.</dd>
-</dl>
-
-<h2 id="Evaluaciones">Evaluaciones</h2>
-
-<p>Las siguientes evaluaciones probarán tu entendimiento de las bases de HTML cubiertas en las guías anteriores.</p>
-
-<dl>
- <dt>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Marcando para una carta")}}</dt>
- <dd><span id="result_box" lang="es">Todos aprendemos a escribir una carta, tarde o temprano; ¡Este también es un ejemplo útil para poner a prueba nuestras habilidades de formato de texto! Así que en esta evaluación se te dará una carta a la cual le tendrás que dar un marcado HTML.</span></dd>
- <dt>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Estructuración del contenido de una página")}}</dt>
- <dd>Esta evaluación prueba tu capacidad para usar HTML para estructurar el contenido de una sencilla página, esta tiene una cabecera, pie de página, menú de navegación, contenido principal, y una barra lateral.</dd>
-</dl>
-
-<h2 id="Ve_también">Ve también</h2>
-
-<dl>
- <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">Bases de la alfabetización Web 1</a></dt>
- <dd>Un curso excelente de la fundación Mozilla que explora y pone a prueba muchas de las habilidades sobre las cuales hablamos en el módulo de <em>Introducción a HTML</em>. Los estudiantes se familiarizan con la lectura, escritura y participan de la web en este módulo de seis partes. Descubre los fundamentos de la web a través de la producción y colaboración.</dd>
-</dl>
-
-<div class="note">
-<h2 id="Retroalimentación">Retroalimentación</h2>
-
-<p>Ayúdanos a mejorar nuestras guías y tutoriales como esta respondiendo {{web.link("https://www.surveygizmo.com/s3/4871248/MDN-Guides-Survey", "nuestra encuesta aquí")}}.</p>
-</div>
diff --git a/files/es/learn/html/introduction_to_html/index.md b/files/es/learn/html/introduction_to_html/index.md
new file mode 100644
index 00000000000000..e1d2578d3d3744
--- /dev/null
+++ b/files/es/learn/html/introduction_to_html/index.md
@@ -0,0 +1,66 @@
+---
+title: Introducción a HTML
+slug: Learn/HTML/Introduction_to_HTML
+tags:
+  - CodingScripting
+  - Enlaces
+  - Estructura
+  - HTML
+  - Introducción a HTML
+  - Texto
+  - semántica
+translation_of: Learn/HTML/Introduction_to_HTML
+original_slug: Learn/HTML/Introduccion_a_HTML
+---
+{{LearnSidebar}}
+
+En su corazón, {{glossary("HTML")}} es un lenguaje muy sencillo compuesto de {{Glossary("Element", "elementos")}}, que se pueden aplicar a piezas de texto para darles un significado diferente en un documento (¿Esto es un párrafo? ¿Esto es una lista con viñetas? ¿Esto es parte de una tabla?), estructura un documento en secciones lógicas (¿Tiene una cabecera? ¿Tres columnas de contenido? ¿Un menú de navegación?), e incrusta contenido como imágenes y vídeos en una página. Este módulo introducirá los dos primeros de estos, e introduce conceptos fundamentales y la sintaxis que necesitas para entender HTML.
+
+> #### ¿Quieres transformarte en un desarrollador de la interfaz de usuario web?
+>
+> Hemos elaborado un curso que incluye toda la información esencial que necesitas para trabajar hacia tu objetivo.
+>
+> [Empieza aquí](/es/docs/Learn/Front-end_web_developer)
+
+## Prerrequisitos
+
+Antes de empezar este módulo, no necesitas conocimientos previos de HTML, pero deberías estar, por lo menos, familiarizado con el uso básico de computadoras, y usar la Web pasivamente (es decir, sólo revisándola y consumiendo el contenido). Debes tener configurado un entorno de trabajo básico (como se detalla en {{web.link("/es/docs/Learn/Getting_started_with_the_web/Installing_basic_software", "Instalación de software básico")}}), y comprender cómo crear y administrar archivos (como se detalla en {{web.link("/es/docs/Learn/Getting_started_with_the_web/Dealing_with_files", "Manejo de archivos")}}). Ambos son parte de nuestro módulo completo {{web.link("/es/docs/Learn/Getting_started_with_the_web", "Introducción a la web")}} para principiantes.
+
+> **Nota:** Si estás trabajando en una computadora, tablet u otro dispositivo en donde no tengas la capacidad de crear tus propios archivos, podrías probar (en su mayoría) el código de los ejemplos en un programa para escribir código en línea como [JSBin](http://jsbin.com/) o [Glitch]().
+
+## Guías
+
+Este módulo contiene los siguientes artículos, que te llevarán a través de toda la teoría básica de HTML, y te proporcionarán una amplia oportunidad de probar algunas habilidades.
+
+- [Empezar con HTML](/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started)
+  - : Cubre las bases absolutas de HTML, para que puedas empezar — definimos elementos, atributos, y todas los otros términos importantes que puedas haber escuchado, y en donde encajan en el lenguaje. También mostramos cómo está estructurado un elemento HTML, cómo está estructurada una página HTML típica, y explica otras características importantes. En el camino, vamos a tener un juego con algo de HTML, ¡para alimentar tu intereses!
+- [¿Qué hay en la cabecera? Metadatos en HTML](/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML)
+  - : La cabecera de un documento HTML es la parte que **no** se muestra en el navegador web cuando se carga una página. Esta contiene información como el título ({{htmlelement("title")}}) de la página, enlaces a {{glossary("CSS")}} (si quieres estilizar tu contenido HTML con CSS), enlaces a favicons personalizados, y metadatos (que son los datos sobre el HTML, como quién lo escribió, y palabras clave que describen el documento).
+- [Fundamentos de texto HTML](/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals)
+  - : Uno de los principales trabajos de HTML es darle significado al texto (también conocido como **semántica**) para que el navegador sepa cómo mostrarlo correctamente. Este artículo trata cómo usar HTML para convertir un bloque de texto en una estructura de encabezados y párrafos, agregar énfasis o importancia a las palabras, crear listas y más.
+- [Creando hipervínculos](/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks)
+  - : Los hipervínculos realmente son importantes — estos son los que hacen la Web. Este artículo muestra la sintaxis requerida para hacer un enlace, y explica las mejores prácticas sobre enlaces.
+- [Formateo de texto avanzado](/es/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting)
+  - : Hay muchos otros elementos en HTML para formatear texto, que no hemos tratado en los artículos [fundamentos de texto HTML](https://developer.mozilla.org/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals). Los siguientes elementos son menos conocidos, pero sigue siendo útil conocerlos. Aquí aprenderás sobre el marcado de citas, listas de descripción, código de computadoras y otros textos relacionados,  subíndices y superíndices, información de contacto, y mucho más.
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Estructura web y documentación")}}
+  - : Así como definimos las partes individuales de tu página (como "un párrafo" o "una imagen"), HTML también se usa para definir las áreas de tu sitio web (como "la cabecera", "el menú de navegación", "la columna de contenido principal"). Este artículo trata sobre cómo planear una estructura básica del sitio web, y escribir el HTML para representar esa estructura.
+- [Depurar HTML](/es/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML)
+  - : Escribir HTML está bien, pero ¿Qué pasa si algo está mal, y no puedes encontrar en dónde está el error en el código? Este artículo introducirá algunas herramientas que te podrán ayudar.
+
+## Evaluaciones
+
+Las siguientes evaluaciones probarán tu entendimiento de las bases de HTML cubiertas en las guías anteriores.
+
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Marcando para una carta")}}
+  - : Todos aprendemos a escribir una carta, tarde o temprano; ¡Este también es un ejemplo útil para poner a prueba nuestras habilidades de formato de texto! Así que en esta evaluación se te dará una carta a la cual le tendrás que dar un marcado HTML.
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Estructuración del contenido de una página")}}
+  - : Esta evaluación prueba tu capacidad para usar HTML para estructurar el contenido de una sencilla página, esta tiene una cabecera, pie de página, menú de navegación, contenido principal, y una barra lateral.
+
+## Ve también
+
+- [Bases de la alfabetización Web 1](https://teach.mozilla.org/activities/web-lit-basics/)
+  - : Un curso excelente de la fundación Mozilla que explora y pone a prueba muchas de las habilidades sobre las cuales hablamos en el módulo de _Introducción a HTML_. Los estudiantes se familiarizan con la lectura, escritura y participan de la web en este módulo de seis partes. Descubre los fundamentos de la web a través de la producción y colaboración.
+
+> **Nota:** Retroalimentación
+>
+> Ayúdanos a mejorar nuestras guías y tutoriales como esta respondiendo {{web.link("https://www.surveygizmo.com/s3/4871248/MDN-Guides-Survey", "nuestra encuesta aquí")}}.
diff --git a/files/es/learn/html/introduction_to_html/marking_up_a_letter/index.html b/files/es/learn/html/introduction_to_html/marking_up_a_letter/index.html
deleted file mode 100644
index 5e1f868f5a6c57..00000000000000
--- a/files/es/learn/html/introduction_to_html/marking_up_a_letter/index.html
+++ /dev/null
@@ -1,89 +0,0 @@
----
-title: Marcando una Carta
-slug: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter
-tags:
-  - Cabecera
-  - Codificación
-  - Enlaces
-  - Evaluación
-  - Principiante
-  - Texto
-translation_of: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter
-original_slug: Learn/HTML/Introduccion_a_HTML/Marking_up_a_letter
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}</div>
-
-<p class="summary">Todos aprendemos a escribir una carta más tarde o más temprano; es también práctico practicar con nuestras habilidades para dar forma a los textos. En esta prueba deberás demostrar tus habilidades para dar forma a textos, incluyendo enlaces, además pondremos a prueba tu familiaridad con algunos contenidos de encabezamiento <code>&lt;head&gt;</code> en HTML.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prerrequisitos:</th>
-   <td>Antes de intentar este examen deberías haber trabajado los artículos <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a>, <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What's in the head? Metadata in HTML</a>, <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a>, <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a>, y <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objetivos:</th>
-   <td>Probar las habilidades básicas y avanzadas de formateo de texto e hyperlinks, y el conocimiento de los encabezamientos en HTML.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Punto_de_partida">Punto de partida</h2>
-
-<p>Para comenzar esta prueba, deberemos copiar <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/letter-text.txt">el texto que deberemos trabajar</a>, y el <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/css.txt">CSS que necesitaremos incluir</a> en nuestro HTML. Crearemos un archivo nuevo <code>.html</code> usando nuestro editor de texto (o alternativamente usaremos otros como <a class="external external-icon" href="http://jsbin.com/">JSBin</a> o <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> para hacer nuestra prueba).</p>
-
-<h2 id="Resumen_del_proyecto_a_desarrollar">Resumen del proyecto a desarrollar</h2>
-
-<p>En este proyecto tu tarea será publicar una carta que debe estar alojada en la intranet de una universidad. La carta es la respuesta de un compañero investigador a un posible estudiante de postgrado en relación a su deseo de trabajar en la universidad.</p>
-
-<p>Semánticas de bloque/estructurales:</p>
-
-<ul>
- <li>Estructura el documento completo incluyendo los elementos (doctype), {{htmlelement("html")}}, {{htmlelement("head")}} y {{htmlelement("body")}}.</li>
- <li>Incluye los elementos correspondientes de marcado en la carta tales como párrafos y títulos, a excepción de los siguientes. Hay un título principal (la línea que comienza por "Re:") y tres títulos secundarios.</li>
- <li>Las fechas de comienzo de los semestres, las materias y los bailes exóticos deben ser marcados con los correspondientes tipos de lista.</li>
- <li>Colocar las dos direcciones dentro de elementos {{htmlelement("address")}}. Cada línea de la dirección debe comenzar en una línea nueva, pero no en un párrafo nuevo.</li>
-</ul>
-
-<p>Semánticas intralínea:</p>
-
-<ul>
- <li>Los nombres de remitente y destinatario (también "Tel" e "Email") deben ser marcado con importancia (strong).</li>
- <li>Deberás usar los elementos apropiados en las cuatro fechas contenidas en el documento para que puedan ser leidas por los motores de lectura automática.</li>
- <li>La primera dirección y la primera fecha en la carta deben ser asignadas a un atributo de clase llamado "sender-column"; el código CSS lo añadirás posteriormente para que quede bien alineado, como debe ser en un formato de carta clásico.</li>
- <li>Deberás utilizar el elemento apropiado para los cinco acrónimos/abreviaciones contenidos en el texto principal, proporcionándoles las extensiones correspondientes.</li>
- <li>Marca apropiadamente los seis sub/superíndices.</li>
- <li>Los símbolos de los grados, los mayor que y los símbolos de multiplicar deben ser marcados usando las referencias correctas.</li>
- <li>Marca al menos dos palabras en el texto con fuerte importancia/énfasis.</li>
- <li>Hay dos lugares donde deberíamos añadir hyperlinks; añádelos con títulos. Como sitio donde apuntan simplemente usa: http://example.com.</li>
- <li>Marca con el elemento apropiado el lema de la universidad y la cita del autor.</li>
-</ul>
-
-<p>El encabezamiento del documento:</p>
-
-<ul>
- <li>El juego de caracteres del documento deberá ser utf-8 usando una etiqueta meta adecuada.</li>
- <li>El autor de la carta debe estar especificado con la etiqueta meta correspondiente.</li>
- <li>El CSS proporcionado deberá estar incluido dentro de la etiqueta adecuada.</li>
-</ul>
-
-<h2 id="Pistas_y_recomendaciones">Pistas y recomendaciones</h2>
-
-<ul>
- <li>Utiliza el <a href="https://validator.w3.org/">Validador de HTML W3C HTML</a> para validar tu HTML; recibirás puntos de bonificación si se valida.</li>
- <li>No necesitas conocer CSS para hacer este ejercicio; solo debes poner el CSS proporcionado en el elemento HTML adecuado.</li>
-</ul>
-
-<h2 id="Example">Example</h2>
-
-<p>The following screenshot shows an example of what the letter might look like after being marked up.</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/12291/letter-screengrab.png" style="border: 1px solid black; display: block; margin: 0px auto;"></p>
-
-<h2 id="Evaluación">Evaluación</h2>
-
-<p>Si estás haciendo esta prueba como parte de un curso organizado, deberías entregar tu trabajo al profesor para que lo corrija. Si estás auto-aprendiendo puedes conseguir la guía de corrección fácilmente pidiendola en el <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">Hilo del area de aprendizaje</a>, o en el canal IRC de <a href="irc://irc.mozilla.org/mdn">#mdn</a> en <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Intenta hacerlo primero — no ganarás nada haciendo trampas.</p>
-
-<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}</p>
diff --git a/files/es/learn/html/introduction_to_html/marking_up_a_letter/index.md b/files/es/learn/html/introduction_to_html/marking_up_a_letter/index.md
new file mode 100644
index 00000000000000..670e025d1d0302
--- /dev/null
+++ b/files/es/learn/html/introduction_to_html/marking_up_a_letter/index.md
@@ -0,0 +1,103 @@
+---
+title: Marcando una Carta
+slug: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter
+tags:
+  - Cabecera
+  - Codificación
+  - Enlaces
+  - Evaluación
+  - Principiante
+  - Texto
+translation_of: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter
+original_slug: Learn/HTML/Introduccion_a_HTML/Marking_up_a_letter
+---
+{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}
+
+Todos aprendemos a escribir una carta más tarde o más temprano; es también práctico practicar con nuestras habilidades para dar forma a los textos. En esta prueba deberás demostrar tus habilidades para dar forma a textos, incluyendo enlaces, además pondremos a prueba tu familiaridad con algunos contenidos de encabezamiento `<head>` en HTML.
+
+<table>
+  <tbody>
+    <tr>
+      <th scope="row">Prerrequisitos:</th>
+      <td>
+        Antes de intentar este examen deberías haber trabajado los artículos
+        <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started"
+          >Getting started with HTML</a
+        >,
+        <a
+          href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML"
+          >What's in the head? Metadata in HTML</a
+        >,
+        <a
+          href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals"
+          >HTML text fundamentals</a
+        >,
+        <a
+          href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks"
+          >Creating hyperlinks</a
+        >, y
+        <a
+          href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting"
+          >Advanced text formatting</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Objetivos:</th>
+      <td>
+        Probar las habilidades básicas y avanzadas de formateo de texto e
+        hyperlinks, y el conocimiento de los encabezamientos en HTML.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## Punto de partida
+
+Para comenzar esta prueba, deberemos copiar [el texto que deberemos trabajar](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/letter-text.txt), y el [CSS que necesitaremos incluir](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/css.txt) en nuestro HTML. Crearemos un archivo nuevo `.html` usando nuestro editor de texto (o alternativamente usaremos otros como [JSBin](http://jsbin.com/) o [Thimble](https://thimble.mozilla.org/) para hacer nuestra prueba).
+
+## Resumen del proyecto a desarrollar
+
+En este proyecto tu tarea será publicar una carta que debe estar alojada en la intranet de una universidad. La carta es la respuesta de un compañero investigador a un posible estudiante de postgrado en relación a su deseo de trabajar en la universidad.
+
+Semánticas de bloque/estructurales:
+
+- Estructura el documento completo incluyendo los elementos (doctype), {{htmlelement("html")}}, {{htmlelement("head")}} y {{htmlelement("body")}}.
+- Incluye los elementos correspondientes de marcado en la carta tales como párrafos y títulos, a excepción de los siguientes. Hay un título principal (la línea que comienza por "Re:") y tres títulos secundarios.
+- Las fechas de comienzo de los semestres, las materias y los bailes exóticos deben ser marcados con los correspondientes tipos de lista.
+- Colocar las dos direcciones dentro de elementos {{htmlelement("address")}}. Cada línea de la dirección debe comenzar en una línea nueva, pero no en un párrafo nuevo.
+
+Semánticas intralínea:
+
+- Los nombres de remitente y destinatario (también "Tel" e "Email") deben ser marcado con importancia (strong).
+- Deberás usar los elementos apropiados en las cuatro fechas contenidas en el documento para que puedan ser leidas por los motores de lectura automática.
+- La primera dirección y la primera fecha en la carta deben ser asignadas a un atributo de clase llamado "sender-column"; el código CSS lo añadirás posteriormente para que quede bien alineado, como debe ser en un formato de carta clásico.
+- Deberás utilizar el elemento apropiado para los cinco acrónimos/abreviaciones contenidos en el texto principal, proporcionándoles las extensiones correspondientes.
+- Marca apropiadamente los seis sub/superíndices.
+- Los símbolos de los grados, los mayor que y los símbolos de multiplicar deben ser marcados usando las referencias correctas.
+- Marca al menos dos palabras en el texto con fuerte importancia/énfasis.
+- Hay dos lugares donde deberíamos añadir hyperlinks; añádelos con títulos. Como sitio donde apuntan simplemente usa: http\://example.com.
+- Marca con el elemento apropiado el lema de la universidad y la cita del autor.
+
+El encabezamiento del documento:
+
+- El juego de caracteres del documento deberá ser utf-8 usando una etiqueta meta adecuada.
+- El autor de la carta debe estar especificado con la etiqueta meta correspondiente.
+- El CSS proporcionado deberá estar incluido dentro de la etiqueta adecuada.
+
+## Pistas y recomendaciones
+
+- Utiliza el [Validador de HTML W3C HTML](https://validator.w3.org/) para validar tu HTML; recibirás puntos de bonificación si se valida.
+- No necesitas conocer CSS para hacer este ejercicio; solo debes poner el CSS proporcionado en el elemento HTML adecuado.
+
+## Example
+
+The following screenshot shows an example of what the letter might look like after being marked up.
+
+![](https://mdn.mozillademos.org/files/12291/letter-screengrab.png)
+
+## Evaluación
+
+Si estás haciendo esta prueba como parte de un curso organizado, deberías entregar tu trabajo al profesor para que lo corrija. Si estás auto-aprendiendo puedes conseguir la guía de corrección fácilmente pidiendola en el [Hilo del area de aprendizaje](https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294), o en el canal IRC de [#mdn](irc://irc.mozilla.org/mdn) en [Mozilla IRC](https://wiki.mozilla.org/IRC). Intenta hacerlo primero — no ganarás nada haciendo trampas.
+
+{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}
diff --git a/files/es/learn/html/introduction_to_html/structuring_a_page_of_content/index.html b/files/es/learn/html/introduction_to_html/structuring_a_page_of_content/index.html
deleted file mode 100644
index 9631dcc746ae6e..00000000000000
--- a/files/es/learn/html/introduction_to_html/structuring_a_page_of_content/index.html
+++ /dev/null
@@ -1,106 +0,0 @@
----
-title: Estructuración de una Página de contenido
-slug: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content
-tags:
-  - Aprendizaje
-  - Diseño
-  - Escribir Código
-  - Estructuración
-  - Evaluación
-  - HTML
-  - Principiante
-  - Prototipado
-  - semántica
-translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content
-original_slug: Learn/HTML/Introduccion_a_HTML/Estructuración_de_una_página_de_contenido
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}} </div>
-
-<p class="summary"><span id="result_box" lang="es"><span>La estructuración de una página de contenido lista para su uso mediante CSS es una habilidad muy importante para dominar, por lo que en esta evaluación  verá  su capacidad para pensar en cómo  podría finalizar una página  buscando y eligiendo la semántica estructural adecuada para construir</span> <span>un diseño en la parte superior.</span></span></p>
-
-<div id="gt-res-content">
-<div dir="ltr" style="zoom: 1;"> </div>
-</div>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prerequisitos:</th>
-   <td><span id="result_box" lang="es"><span>Antes de intentar esta evaluación, usted debería haber trabajado ya en el resto del curso, con un énfasis particular en la </span></span><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Estructura del Documento y del Sitio Web.</a><a href="https://developer.mozilla.org/es/docs/Learn/HTML/Introduccion_a_HTML/estructura">.</a></td>
-  </tr>
-  <tr>
-   <th scope="row">Objetivo:</th>
-   <td><span id="result_box" lang="es"><span>Probar el conocimiento de las estructuras de páginas web y cómo representar un prototipado de diseño prospectivo en el marcado.</span></span></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Punto_de_partida">Punto de partida</h2>
-
-<p>Para comenzar esta evaluación, debería tomar el  <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/structuring-a-page-of-content-start/assets.zip?raw=true"> archivo zip  que contiene todos los activos de inicio</a>. El archivo zip contiene:</p>
-
-<ul>
- <li>El HTML que necesitas para añadir marcado estructural.</li>
- <li>CSS para dar el estilo a tu marcado.</li>
- <li>Las imágenes que serán utilizadas en la página.</li>
-</ul>
-
-<p>Crée el ejemplo en su ordenador personal, o como alternativa utilize un sitio como <a class="external external-icon" href="http://jsbin.com/">JSBin</a> o <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> para hacer su evaluación.</p>
-
-<h2 id="Breve_Proyecto">Breve Proyecto</h2>
-
-<p>Para este proyecto, su tarea es tomar el contenido de la página principal de un sitio web de observación de aves y añadir elementos estructurales a la misma para que pueda tener un diseño de página aplicado a ella. Necesita tener:</p>
-
-<ul>
- <li> Un encabezado que abarca todo el ancho del sitio que contiene el título principal de la página, el logotipo del sitio y el menú de navegación. El título y el logotipo aparecen lado a lado una vez que se aplica el estilo, y la navegación aparece debajo de esos dos elementos.</li>
- <li>  Un área de contenido principal que contiene dos columnas: un bloque principal para contener el texto de bienvenida y una barra lateral para contener miniaturas de imágenes.</li>
- <li>  Un pie de página que contiene información sobre derechos de autor y créditos.</li>
-</ul>
-
-<p>Debe agregar una presentación adecuada para:</p>
-
-<ul>
- <li>El encabezado</li>
- <li>El menú de navegación</li>
- <li>El contenido principal</li>
- <li>El texto de bienvenida</li>
- <li>La barra lateral de imágenes</li>
- <li>El pié de página</li>
-</ul>
-
-<p>También debería:</p>
-
-<ul>
- <li> Aplicar el CSS proporcionado a la página agregando otro elemento {{htmlelement ("link")}} justo debajo del existente que se proporciona al principio.</li>
-</ul>
-
-<h2 id="Consejos">Consejos</h2>
-
-<ul>
- <li>Utilize el <a href="https://validator.w3.org/">validador de HTML  W3C  </a> para validar su  HTML; Obtendrá puntos de bonificación si valida tanto como sea posible (la línea "googleapis" es una línea utilizada para importar fuentes personalizadas en la página del servicio Google Fonts, no se valida, así que no te preocupes. )</li>
- <li>No necesita saber CSS para hacer esta evaluación; Sólo tiene que poner el CSS proporcionado dentro de un elemento HTML.</li>
- <li>El CSS proporcionado está diseñado para que cuando se agreguen los elementos estructurales correctos al marcado, aparezcan verdes en la página representada.</li>
- <li>Si se está quedando atascado y no puede imaginar ni qué elementos poner ni donde ponerlos , a menudo ayuda a dibujar un diagrama de bloques simple del diseño de página, y escribir en los elementos que usted piensa que debe envolver cada bloque.</li>
-</ul>
-
-<h2 id="Ejemplo">Ejemplo</h2>
-
-<p>La siguiente captura de pantalla muestra un ejemplo de cómo podría verse la letra después de haber sido marcada.</p>
-
-<p><img alt='The finished example for the assessment; a simple webpage about birdwatching, including a heading of "Birdwatching", bird photos, and a welcome message' src="https://mdn.mozillademos.org/files/12449/example-page.png" style="display: block; margin: 0 auto;"></p>
-
-<h2 id="Evaluación">Evaluación</h2>
-
-<p>Si está siguiendo esta evaluación como parte de un curso organizado, debe ser capaz de dar su trabajo a su maestro / mentor para el marcado. Si usted está aprendiendo por si mismo, entonces  puede obtener la guía de marcado con bastante facilidad preguntando sobre ello en la lista de correo<a href="https://lists.mozilla.org/listinfo/dev-mdc">  dev-mdc</a> , o en el canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a>  en <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Pruebe a hacer el ejercicio primero - ¡No hay nada que ganar por hacer trampa!</p>
-
-<p>{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</p>
-
-<div class="s3gt_translate_tooltip" id="s3gt_translate_tooltip" style="position: absolute; left: 61px; top: 1812px; opacity: 0.7;">
-<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_logo" title="Traducir texto seleccionado"> </div>
-
-<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_sound" title="Reproducir"> </div>
-
-<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_copy" title="Copy text to Clipboard"> </div>
-</div>
diff --git a/files/es/learn/html/introduction_to_html/structuring_a_page_of_content/index.md b/files/es/learn/html/introduction_to_html/structuring_a_page_of_content/index.md
new file mode 100644
index 00000000000000..d910b8a9e1bb07
--- /dev/null
+++ b/files/es/learn/html/introduction_to_html/structuring_a_page_of_content/index.md
@@ -0,0 +1,103 @@
+---
+title: Estructuración de una Página de contenido
+slug: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content
+tags:
+  - Aprendizaje
+  - Diseño
+  - Escribir Código
+  - Estructuración
+  - Evaluación
+  - HTML
+  - Principiante
+  - Prototipado
+  - semántica
+translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content
+original_slug: Learn/HTML/Introduccion_a_HTML/Estructuración_de_una_página_de_contenido
+---
+{{LearnSidebar}}{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}
+
+La estructuración de una página de contenido lista para su uso mediante CSS es una habilidad muy importante para dominar, por lo que en esta evaluación verá su capacidad para pensar en cómo podría finalizar una página buscando y eligiendo la semántica estructural adecuada para construir un diseño en la parte superior.
+
+<table>
+  <tbody>
+    <tr>
+      <th scope="row">Prerequisitos:</th>
+      <td>
+        <span id="result_box" lang="es"
+          ><span
+            >Antes de intentar esta evaluación, usted debería haber trabajado ya
+            en el resto del curso, con un énfasis particular en la
+          </span></span
+        ><a
+          href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure"
+          >Estructura del Documento y del Sitio Web.</a
+        ><a
+          href="https://developer.mozilla.org/es/docs/Learn/HTML/Introduccion_a_HTML/estructura"
+          >.</a
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Objetivo:</th>
+      <td>
+        <span id="result_box" lang="es"
+          ><span
+            >Probar el conocimiento de las estructuras de páginas web y cómo
+            representar un prototipado de diseño prospectivo en el
+            marcado.</span
+          ></span
+        >
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## Punto de partida
+
+Para comenzar esta evaluación, debería tomar el [archivo zip que contiene todos los activos de inicio](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/structuring-a-page-of-content-start/assets.zip?raw=true). El archivo zip contiene:
+
+- El HTML que necesitas para añadir marcado estructural.
+- CSS para dar el estilo a tu marcado.
+- Las imágenes que serán utilizadas en la página.
+
+Crée el ejemplo en su ordenador personal, o como alternativa utilize un sitio como [JSBin](http://jsbin.com/) o [Thimble](https://thimble.mozilla.org/) para hacer su evaluación.
+
+## Breve Proyecto
+
+Para este proyecto, su tarea es tomar el contenido de la página principal de un sitio web de observación de aves y añadir elementos estructurales a la misma para que pueda tener un diseño de página aplicado a ella. Necesita tener:
+
+- Un encabezado que abarca todo el ancho del sitio que contiene el título principal de la página, el logotipo del sitio y el menú de navegación. El título y el logotipo aparecen lado a lado una vez que se aplica el estilo, y la navegación aparece debajo de esos dos elementos.
+- Un área de contenido principal que contiene dos columnas: un bloque principal para contener el texto de bienvenida y una barra lateral para contener miniaturas de imágenes.
+- Un pie de página que contiene información sobre derechos de autor y créditos.
+
+Debe agregar una presentación adecuada para:
+
+- El encabezado
+- El menú de navegación
+- El contenido principal
+- El texto de bienvenida
+- La barra lateral de imágenes
+- El pié de página
+
+También debería:
+
+- Aplicar el CSS proporcionado a la página agregando otro elemento {{htmlelement ("link")}} justo debajo del existente que se proporciona al principio.
+
+## Consejos
+
+- Utilize el [validador de HTML W3C ](https://validator.w3.org/)para validar su HTML; Obtendrá puntos de bonificación si valida tanto como sea posible (la línea "googleapis" es una línea utilizada para importar fuentes personalizadas en la página del servicio Google Fonts, no se valida, así que no te preocupes. )
+- No necesita saber CSS para hacer esta evaluación; Sólo tiene que poner el CSS proporcionado dentro de un elemento HTML.
+- El CSS proporcionado está diseñado para que cuando se agreguen los elementos estructurales correctos al marcado, aparezcan verdes en la página representada.
+- Si se está quedando atascado y no puede imaginar ni qué elementos poner ni donde ponerlos , a menudo ayuda a dibujar un diagrama de bloques simple del diseño de página, y escribir en los elementos que usted piensa que debe envolver cada bloque.
+
+## Ejemplo
+
+La siguiente captura de pantalla muestra un ejemplo de cómo podría verse la letra después de haber sido marcada.
+
+![The finished example for the assessment; a simple webpage about birdwatching, including a heading of "Birdwatching", bird photos, and a welcome message](https://mdn.mozillademos.org/files/12449/example-page.png)
+
+## Evaluación
+
+Si está siguiendo esta evaluación como parte de un curso organizado, debe ser capaz de dar su trabajo a su maestro / mentor para el marcado. Si usted está aprendiendo por si mismo, entonces puede obtener la guía de marcado con bastante facilidad preguntando sobre ello en la lista de correo[ dev-mdc](https://lists.mozilla.org/listinfo/dev-mdc) , o en el canal IRC [#mdn](irc://irc.mozilla.org/mdn) en [Mozilla IRC](https://wiki.mozilla.org/IRC). Pruebe a hacer el ejercicio primero - ¡No hay nada que ganar por hacer trampa!
+
+{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}
diff --git a/files/es/learn/html/introduction_to_html/test_your_skills_colon__advanced_html_text/index.html b/files/es/learn/html/introduction_to_html/test_your_skills_colon__advanced_html_text/index.html
deleted file mode 100644
index 1df0ab4e69cd52..00000000000000
--- a/files/es/learn/html/introduction_to_html/test_your_skills_colon__advanced_html_text/index.html
+++ /dev/null
@@ -1,68 +0,0 @@
----
-title: 'Pon a prueba tus habilidades: texto HTML avanzado'
-slug: Learn/HTML/Introduction_to_HTML/Test_your_skills:_Advanced_HTML_text
-translation_of: Learn/HTML/Introduction_to_HTML/Test_your_skills:_Advanced_HTML_text
-original_slug: Learn/HTML/Introduccion_a_HTML/Test_your_skills:_Advanced_HTML_text
----
-<div>{{learnsidebar}}</div>
-
-<p><span class="tlid-translation translation" lang="es"><span title="">El objetivo de esta prueba de habilidad es evaluar si ha entendido nuestras </span></span>  <u><a href="/es/docs//en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">formato de texto avanzado</a></u> articulo.</p>
-
-<div class="blockIndicator note">
-<p><strong>NOTA</strong>:<span class="tlid-translation translation" lang="es"><span title="">Puede probar soluciones en los editores interactivos a continuación;</span> <span title="">sin embargo, puede resultar útil descargar el código y utilizar una herramienta en línea como</span></span>  <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, o <a href="https://glitch.com/">Glitch </a><span class="tlid-translation translation" lang="es"><span title="">trabajar en las tareas.</span></span><br>
- <br>
- <span class="tlid-translation translation" lang="es"><span title="">Si se atasca, pídanos ayuda; consulte la</span></span> <a href="#assessment_or_further_help">Assessment or further help</a> section at the bottom of this page.</p>
-</div>
-
-<h2 id="Texto_HTML_avanzado_1"><span class="tlid-translation translation" lang="es"><span title="">Texto HTML avanzado 1</span></span></h2>
-
-<p><span class="tlid-translation translation" lang="es"><span title="">En esta tarea, queremos que convierta los animales proporcionados y sus definiciones en una lista de descripción.</span><br>
- <br>
- <span title="">Intente actualizar el código en vivo a continuación para recrear el ejemplo terminado:</span></span></p>
-
-<p>{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/advanced-text/advanced-text1.html", '100%', 700)}}</p>
-
-<div class="blockIndicator note">
-<p><a href="/es/docs/https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/tasks/advanced-text/advanced-text1-download.html">Descarga el puno de partida para esta tarea</a> to work in your own editor or in an online editor.</p>
-</div>
-
-<h2 id="Texto_HTML_avanzado_2"><span class="tlid-translation translation" lang="es"><span title="">Texto HTML avanzado 2</span></span></h2>
-
-<p><span class="tlid-translation translation" lang="es"><span title="">En esta tarea, queremos que agregue algo de semántica al HTML proporcionado de la siguiente manera:</span></span></p>
-
-<ul>
- <li><span class="tlid-translation translation" lang="es"><span title="">Convierta el segundo párrafo en una cita a nivel de bloque e indique semánticamente que la cita se toma de</span></span> <a href="/en-US/docs/Learn/Accessibility">Accesibilidad</a>.</li>
- <li><span class="tlid-translation translation" lang="es"><span title="">Marque semánticamente "HTML" y "CSS" como acrónimos, proporcionando expansiones como información sobre herramientas.</span></span></li>
- <li><span class="tlid-translation translation" lang="es"><span title="">Asocia semánticamente fechas legibles por máquina con las fechas en el texto.</span></span></li>
- <li><span class="tlid-translation translation" lang="es"><span title="">Utilice subíndice y superíndice para proporcionar la semántica correcta para las fórmulas químicas y fechas, y hacer que se muestren correctamente.</span></span></li>
-</ul>
-
-<p><span class="tlid-translation translation" lang="es"><span title="">Intente actualizar el código en vivo a continuación para recrear el ejemplo terminado:</span></span></p>
-
-<p>{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/advanced-text/advanced-text2.html", '100%', 700)}}</p>
-
-<div class="blockIndicator note">
-<p><a href="/es/docs/https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/tasks/advanced-text/advanced-text2-download.html">Descarga el punto de partida para esta tarea </a><span class="tlid-translation translation" lang="es"><span title="">para trabajar en su propio editor o en un editor en línea.</span></span></p>
-</div>
-
-<h2 id="Evaluación_o_ayuda_adicional"><span class="tlid-translation translation" lang="es"><span title="">Evaluación o ayuda adicional</span></span></h2>
-
-<div class="text-wrap tlid-copy-target">
-<div class="result-shield-container tlid-copy-target"><span class="tlid-translation translation" lang="es"><span title="">Puede practicar estos ejemplos en los editores interactivos anteriores.</span><br>
-<br>
-<span title="">Si desea que se evalúe su trabajo, o está atascado y desea pedir ayuda:</span></span></div>
-
-<div class="result-shield-container tlid-copy-target"></div>
-</div>
-
-<ol>
- <li><span class="tlid-translation translation" lang="es"><span title="">Pon tu trabajo en un editor que se pueda compartir en línea, como</span></span>  <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, o <a href="https://glitch.com/">Glitch</a>. <span class="tlid-translation translation" lang="es"><span title="">Puede escribir el código usted mismo o utilizar los archivos de punto de inicio vinculados en las secciones anteriores.</span></span></li>
- <li><span class="tlid-translation translation" lang="es"><span title="">Escriba una publicación solicitando evaluación y / o ayuda en el</span></span>  <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. <span class="tlid-translation translation" lang="es"><span title="">Tu publicación debe incluir:</span></span>
-  <ul>
-   <li><span class="tlid-translation translation" lang="es"><span title="">Un título descriptivo como "Se busca evaluación para la prueba de habilidad de texto avanzado HTML 1".</span></span></li>
-   <li><span class="tlid-translation translation" lang="es"><span title="">Detalles de lo que ya ha probado y lo que le gustaría que hiciéramos, p. Ej.</span> <span title="">si está atascado y necesita ayuda, o quiere una evaluación.</span></span></li>
-   <li><span class="tlid-translation translation" lang="es"><span title="">Un enlace al ejemplo que desea evaluar o con el que necesita ayuda, en un editor que se puede compartir en línea (como se mencionó en el paso 1 anterior).</span> <span title="">Esta es una buena práctica para entrar: es muy difícil ayudar a alguien con un problema de codificación si no puede ver su código.</span></span></li>
-   <li><span class="tlid-translation translation" lang="es"><span title="">Un enlace a la página de la tarea o evaluación real, para que podamos encontrar la pregunta con la que desea ayuda.</span></span></li>
-  </ul>
- </li>
-</ol>
diff --git a/files/es/learn/html/introduction_to_html/test_your_skills_colon__advanced_html_text/index.md b/files/es/learn/html/introduction_to_html/test_your_skills_colon__advanced_html_text/index.md
new file mode 100644
index 00000000000000..56ca8b3d471283
--- /dev/null
+++ b/files/es/learn/html/introduction_to_html/test_your_skills_colon__advanced_html_text/index.md
@@ -0,0 +1,52 @@
+---
+title: 'Pon a prueba tus habilidades: texto HTML avanzado'
+slug: Learn/HTML/Introduction_to_HTML/Test_your_skills:_Advanced_HTML_text
+translation_of: Learn/HTML/Introduction_to_HTML/Test_your_skills:_Advanced_HTML_text
+original_slug: Learn/HTML/Introduccion_a_HTML/Test_your_skills:_Advanced_HTML_text
+---
+{{learnsidebar}}
+
+El objetivo de esta prueba de habilidad es evaluar si ha entendido nuestras __[formato de texto avanzado](/es/docs//en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting)__ articulo.
+
+> **Nota:** Puede probar soluciones en los editores interactivos a continuación; sin embargo, puede resultar útil descargar el código y utilizar una herramienta en línea como [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), o [Glitch ](https://glitch.com/)trabajar en las tareas.
+>
+> Si se atasca, pídanos ayuda; consulte la [Assessment or further help](#assessment_or_further_help) section at the bottom of this page.
+
+## Texto HTML avanzado 1
+
+En esta tarea, queremos que convierta los animales proporcionados y sus definiciones en una lista de descripción.
+
+Intente actualizar el código en vivo a continuación para recrear el ejemplo terminado:
+
+{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/advanced-text/advanced-text1.html", '100%', 700)}}
+
+> **Nota:** [Descarga el puno de partida para esta tarea](/es/docs/https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/tasks/advanced-text/advanced-text1-download.html) to work in your own editor or in an online editor.
+
+## Texto HTML avanzado 2
+
+En esta tarea, queremos que agregue algo de semántica al HTML proporcionado de la siguiente manera:
+
+- Convierta el segundo párrafo en una cita a nivel de bloque e indique semánticamente que la cita se toma de [Accesibilidad](/es/docs/Learn/Accessibility).
+- Marque semánticamente "HTML" y "CSS" como acrónimos, proporcionando expansiones como información sobre herramientas.
+- Asocia semánticamente fechas legibles por máquina con las fechas en el texto.
+- Utilice subíndice y superíndice para proporcionar la semántica correcta para las fórmulas químicas y fechas, y hacer que se muestren correctamente.
+
+Intente actualizar el código en vivo a continuación para recrear el ejemplo terminado:
+
+{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/advanced-text/advanced-text2.html", '100%', 700)}}
+
+> **Nota:** [Descarga el punto de partida para esta tarea ](/es/docs/https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/tasks/advanced-text/advanced-text2-download.html)para trabajar en su propio editor o en un editor en línea.
+
+## Evaluación o ayuda adicional
+
+Puede practicar estos ejemplos en los editores interactivos anteriores.
+
+Si desea que se evalúe su trabajo, o está atascado y desea pedir ayuda:
+
+1.  Pon tu trabajo en un editor que se pueda compartir en línea, como [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), o [Glitch](https://glitch.com/). Puede escribir el código usted mismo o utilizar los archivos de punto de inicio vinculados en las secciones anteriores.
+2.  Escriba una publicación solicitando evaluación y / o ayuda en el [MDN Discourse forum Learning category](https://discourse.mozilla.org/c/mdn/learn). Tu publicación debe incluir:
+
+    - Un título descriptivo como "Se busca evaluación para la prueba de habilidad de texto avanzado HTML 1".
+    - Detalles de lo que ya ha probado y lo que le gustaría que hiciéramos, p. Ej. si está atascado y necesita ayuda, o quiere una evaluación.
+    - Un enlace al ejemplo que desea evaluar o con el que necesita ayuda, en un editor que se puede compartir en línea (como se mencionó en el paso 1 anterior). Esta es una buena práctica para entrar: es muy difícil ayudar a alguien con un problema de codificación si no puede ver su código.
+    - Un enlace a la página de la tarea o evaluación real, para que podamos encontrar la pregunta con la que desea ayuda.
diff --git a/files/es/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.html b/files/es/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.html
deleted file mode 100644
index f319eb7da47e69..00000000000000
--- a/files/es/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
----
-title: 'Prueba tus habilidades: Texto básico HTML'
-slug: Learn/HTML/Introduction_to_HTML/Test_your_skills:_HTML_text_basics
-tags:
-  - Aprendizaje
-  - HTML
-  - Principiante
-  - Prueba tus habilidades
-  - Texto
-translation_of: Learn/HTML/Introduction_to_HTML/Test_your_skills:_HTML_text_basics
-original_slug: Learn/HTML/Introduccion_a_HTML/Prueba_tus_habilidades:_Texto_básico_HTML
----
-<div>{{learnsidebar}}</div>
-
-<p>El objetivo de esta prueba de habilidad es evaluar si has comprendido el artículo <a href="/es/docs/Learn/HTML/Introduccion_a_HTML/texto">Fundamentos de texto en HTML</a>.</p>
-
-<div class="blockIndicator note">
-<p><strong>Nota:</strong> Puedes intentar resolverlo en los editores interactivos de más abajo, sin embargo puede ser muy úytil descargar el código y usar una herramienta en línea como <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, o <a href="https://glitch.com/">Glitch</a> para trabajar en las tareas.<br>
- <br>
- Si te atascas, entonces pídenos ayuda — busca en la sección <a href="#assessment_or_further_help">Assessment or further help</a> al final de esta página.</p>
-</div>
-
-<h2 id="Texto_básico_HTML_1">Texto básico HTML 1</h2>
-
-<p>En esta tarea queremos que etiquetes el HTML entregado utilizando elementos semánticos de encabezado y párrafo. Intenta actualizando el código más abajo para recrear el ejemplo terminado:</p>
-
-<p>{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text1.html", '100%', 700)}}</p>
-
-<div class="blockIndicator note">
-<p><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/tasks/basic-text/basic-text1-download.html">Descarga el punto de inicio de esta tarea</a> para trabajar en tu propio editor o en un editor en línea.</p>
-</div>
-
-<h2 id="Texto_básico_HTML_2">Texto básico HTML 2</h2>
-
-<p>En esta tarea necesitamos que cambies la primera lista no marcada en una lista no ordenada, y la segunda en una lista ordenada.</p>
-
-<p>Intenta actualizando el código más abajo para recrear el ejemplo terminado:</p>
-
-<p>{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text2.html", '100%', 700)}}</p>
-
-<div class="blockIndicator note">
-<p><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/tasks/basic-text/basic-text2-download.html">Descarga el punto de inicio de esta tarea</a> para trabajar en tu propio editor o en un editor en línea.</p>
-</div>
-
-<h2 id="Texto_básico_HTML_3">Texto básico HTML 3</h2>
-
-<p>En esta tarea se te entrega un párrafo, y tu objetivo es usar algunos elementos en línea para marcar algunas palabras con importancia, y otras con énfasis</p>
-
-<p>Intenta actualizando el código más abajo para recrear el ejemplo terminado:</p>
-
-<p>{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text3.html", '100%', 700)}}</p>
-
-<div class="blockIndicator note">
-<p><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/tasks/basic-text/basic-text3-download.html">Descarga el punto de inicio de esta tarea</a> para trabajar en tu propio editor o en un editor en línea.</p>
-</div>
-
-<h2 id="Evaluación_o_ayuda_adicional">Evaluación o ayuda adicional</h2>
-
-<p>Puedes practicar estos ejemplos en los editores interactivos que se encuentran más arriba.</p>
-
-<p>Si deseas que tu trabajo sea evaluado, o estás atorado y quieres solicitar ayuda:</p>
-
-<ol>
- <li>Pon tu trabajo en un editor en línea con capacidad de compartir como <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, o <a href="https://glitch.com/">Glitch</a>. Puedes escribir el código por ti mismo, o usar los archivos de punto de inicio enlazados en las secciones superiores.</li>
- <li>Escribe una publicación solicitando evaluacion y/o ayuda en el <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. Tu publicación debería incluir:
-  <ul>
-   <li>Un título descriptivo como "Solicito evaluacion para la prueba de habilidad de texto básico HTML 1".</li>
-   <li>Detalles de lo que ya has intentado, y que te gustaría que hiciéramos, por ejemplo, si estas atascado y necesitas ayuda, o quieres una evaluación.</li>
-   <li>Un enlace al ejemplo que quieres que sea evaluado o por el que necesitas ayuda en un  editor en linea con capacidad de compartir (como se mencionó en el paso 1 más arriba). Esta es una buena práctica  - Es muy dificil ayudar a alguien con un problema de codificación si no puedes ver su código.</li>
-   <li>Un enlace a la tarea o página de evaluacion actual, para que podamos encontrar la pregunta con la cual necesitas ayuda.</li>
-  </ul>
- </li>
-</ol>
diff --git a/files/es/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.md b/files/es/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.md
new file mode 100644
index 00000000000000..b19fb3b105bbd2
--- /dev/null
+++ b/files/es/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.md
@@ -0,0 +1,61 @@
+---
+title: 'Prueba tus habilidades: Texto básico HTML'
+slug: Learn/HTML/Introduction_to_HTML/Test_your_skills:_HTML_text_basics
+tags:
+  - Aprendizaje
+  - HTML
+  - Principiante
+  - Prueba tus habilidades
+  - Texto
+translation_of: Learn/HTML/Introduction_to_HTML/Test_your_skills:_HTML_text_basics
+original_slug: Learn/HTML/Introduccion_a_HTML/Prueba_tus_habilidades:_Texto_básico_HTML
+---
+{{learnsidebar}}
+
+El objetivo de esta prueba de habilidad es evaluar si has comprendido el artículo [Fundamentos de texto en HTML](/es/docs/Learn/HTML/Introduccion_a_HTML/texto).
+
+> **Nota:** Puedes intentar resolverlo en los editores interactivos de más abajo, sin embargo puede ser muy úytil descargar el código y usar una herramienta en línea como [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), o [Glitch](https://glitch.com/) para trabajar en las tareas.
+>
+> Si te atascas, entonces pídenos ayuda — busca en la sección [Assessment or further help](#assessment_or_further_help) al final de esta página.
+
+## Texto básico HTML 1
+
+En esta tarea queremos que etiquetes el HTML entregado utilizando elementos semánticos de encabezado y párrafo. Intenta actualizando el código más abajo para recrear el ejemplo terminado:
+
+{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text1.html", '100%', 700)}}
+
+> **Nota:** [Descarga el punto de inicio de esta tarea](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/tasks/basic-text/basic-text1-download.html) para trabajar en tu propio editor o en un editor en línea.
+
+## Texto básico HTML 2
+
+En esta tarea necesitamos que cambies la primera lista no marcada en una lista no ordenada, y la segunda en una lista ordenada.
+
+Intenta actualizando el código más abajo para recrear el ejemplo terminado:
+
+{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text2.html", '100%', 700)}}
+
+> **Nota:** [Descarga el punto de inicio de esta tarea](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/tasks/basic-text/basic-text2-download.html) para trabajar en tu propio editor o en un editor en línea.
+
+## Texto básico HTML 3
+
+En esta tarea se te entrega un párrafo, y tu objetivo es usar algunos elementos en línea para marcar algunas palabras con importancia, y otras con énfasis
+
+Intenta actualizando el código más abajo para recrear el ejemplo terminado:
+
+{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text3.html", '100%', 700)}}
+
+> **Nota:** [Descarga el punto de inicio de esta tarea](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/tasks/basic-text/basic-text3-download.html) para trabajar en tu propio editor o en un editor en línea.
+
+## Evaluación o ayuda adicional
+
+Puedes practicar estos ejemplos en los editores interactivos que se encuentran más arriba.
+
+Si deseas que tu trabajo sea evaluado, o estás atorado y quieres solicitar ayuda:
+
+1.  Pon tu trabajo en un editor en línea con capacidad de compartir como [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), o [Glitch](https://glitch.com/). Puedes escribir el código por ti mismo, o usar los archivos de punto de inicio enlazados en las secciones superiores.
+2.  Escribe una publicación solicitando evaluacion y/o ayuda en el [MDN Discourse forum Learning category](https://discourse.mozilla.org/c/mdn/learn). Tu publicación debería incluir:
+
+    - Un título descriptivo como "Solicito evaluacion para la prueba de habilidad de texto básico HTML 1".
+    - Detalles de lo que ya has intentado, y que te gustaría que hiciéramos, por ejemplo, si estas atascado y necesitas ayuda, o quieres una evaluación.
+    - Un enlace al ejemplo que quieres que sea evaluado o por el que necesitas ayuda en un editor en linea con capacidad de compartir (como se mencionó en el paso 1 más arriba). Esta es una buena práctica - Es muy dificil ayudar a alguien con un problema de codificación si no puedes ver su código.
+    - Un enlace a la tarea o página de evaluacion actual, para que podamos encontrar la pregunta con la cual necesitas ayuda.
diff --git a/files/es/learn/html/introduction_to_html/test_your_skills_colon__links/index.html b/files/es/learn/html/introduction_to_html/test_your_skills_colon__links/index.html
deleted file mode 100644
index ba21453e7c6e5c..00000000000000
--- a/files/es/learn/html/introduction_to_html/test_your_skills_colon__links/index.html
+++ /dev/null
@@ -1,100 +0,0 @@
----
-title: 'Prueba tus habilidades: Enlaces'
-slug: Learn/HTML/Introduction_to_HTML/Test_your_skills:_Links
-translation_of: Learn/HTML/Introduction_to_HTML/Test_your_skills:_Links
-original_slug: Learn/HTML/Introduccion_a_HTML/Prueba_tus_habilidades:_Enlaces
----
-<div>{{learnsidebar}}</div>
-
-<p>El objetivo de esta pueba de habilidad es evaluar si has comprendido nuestro artículo <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creando hipervínculos</a>.</p>
-
-<div class="blockIndicator note">
-<p><strong>Nota</strong>: Puedes intentar resolver esta prueba en los editores interactivos más abajo, sin embargo, puede ser útil descargar el código y usar una herramienta en línea como <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, o <a href="https://glitch.com/">Glitch</a> para trabajar en las tareas.<br>
- <br>
- Si te atascas, pide ayuda — mira la sección <a href="#evaluación_o_ayuda_adicional">Evaluación o ayuda adicional</a> al final de esta página.</p>
-</div>
-
-<h2 id="Enlaces_1">Enlaces 1</h2>
-
-<p>En esta tarea necesitamos tu ayuda para completar los enlaces en nuestra página de información sobre Ballenas:</p>
-
-<ul>
- <li>El primer enlace debería estar vinculado a una página llamada <code>whales.html</code>, que está en el mismo directorio que la página actual.</li>
- <li>También queremos agregarle un cuadro de información ("tooltip") cuando pase el puntero sobre el enlace, que le diga al usuario que la página incluye informacion sobre las Ballenas azules y las Ballenas blancas.</li>
- <li>El segundo enlace deberá convertirse en un vínculo que abra un correo electrónico en la aplicación de correo por defecto del usuario, con el destinatario "whales@example.com".</li>
- <li>Conseguirás un punto de bonificación si tambien configuras que la línea del asunto del correo electrónico tenga como texto predeterminado "Preguntas sobre Ballenas".</li>
-</ul>
-
-<div class="blockIndicator note">
-<p><strong>Nota:</strong> El primer enlace en el ejemplo tiene el atributo <code>target="_blank"</code> , así que cuando haces click en él, abre la página en una pestaña nueva. Esto no es estrictamente una buena práctica, pero lo hemos hecho aquí para que la página no se abra en el <code>&lt;iframe&gt;</code> incrustado, ¡eliminando el código de ejemplo en el proceso!</p>
-</div>
-
-<p>Intenta actualizar el código en vivo más abajo para mostrar el ejemplo terminado:</p>
-
-<p>{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/links/links1.html", '100%', 700)}}</p>
-
-<div class="blockIndicator note">
-<p><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/tasks/links/links1-download.html">Descarga el inicio de esta tarea</a> para trabajar en tu propio editor o en un editor en línea.</p>
-</div>
-
-<h2 id="Enlaces_2">Enlaces 2</h2>
-
-<p>En esta tarea queremos que completes los cuatro enlaces para que se dirijan al lugar apropiado:</p>
-
-<ul>
- <li>El primer enlace debería vincular a una imagen llamada <code>blue-whale.jpg</code>, que se encuentra en una carpeta llamada <code>blue</code> dentro de la carpeta actual.</li>
- <li>El segundo enlace debería vincular a una imagen llamada <code>narwhal.jpg</code>, que se encuentra en una carpeta llamada <code>narwhal</code>, que se encuentra en un nivel de carpetas sobre la carpeta actual.</li>
- <li>El tercer enlace deberia vincular al sitio de búsqueda de imágenes de Google del Reino Unido. La URL base es <code>https://www.google.co.uk</code>, y la búsqueda de imágenes se ubica en un subdirectorio llamado <code>imghp</code>.</li>
- <li>El cuarto enlace debería vincular al párrafo más al final de la página actual. Que tiene la ID <code>bottom</code>.</li>
-</ul>
-
-<div class="blockIndicator note">
-<p><strong>Nota:</strong> Los primeros tres enlaces en el ejemplo tienen el atributo <code>target="_blank"</code> especificado en ellos, abren la página enlazada en una nueva pestaña del navegador. Esto no es estrictamente una buena práctica, pero hemos hecho esto aquí para que las páginas no se abran dentro del <code>&lt;iframe&gt;</code> incrustado, ¡eliminando el código de ejemplo en el proceso!</p>
-</div>
-
-<p>Intenta actualizar el código en vivo más abajo para mostrar el ejemplo terminado:</p>
-
-<p>{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/links/links2.html", '100%', 700)}}</p>
-
-<div class="blockIndicator note">
-<p><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/tasks/links/links2-download.html">Descarga el inicio de esta tarea</a> para trabajar en tu propio editor o en un editor en línea.</p>
-</div>
-
-<h2 id="Enlaces_3">Enlaces 3</h2>
-
-<p>Los siguientes enlaces dirigen a una página informativa acerca de los Narvales, una dirección de correo electrónico de soporte, y un documento PDF cuyo tamaño es 4MB. En esta tarea queremos que:</p>
-
-<ul>
- <li>Tomes los párrafos existentes con enlaces pobremente escritos, y los reescribas para que tengan un buen texto de enlace.</li>
- <li>Agregues una advertencia a cualquier enlace que necesite una advertencia.</li>
-</ul>
-
-<div class="blockIndicator note">
-<p><strong>Nota:</strong> Los primeros tres enlaces en el ejemplo tienen el atributo <code>target="_blank"</code> especificado en ellos, abren la página enlazada en una nueva pestaña del navegador. Esto no es estrictamente una buena práctica, pero hemos hecho esto aquí para que las páginas no se abran dentro del <code>&lt;iframe&gt;</code> incrustado, ¡eliminando el código de ejemplo en el proceso!</p>
-</div>
-
-<p>Intenta actualizar el código en vivo más abajo para mostrar el ejemplo terminado:</p>
-
-<p>{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/links/links3.html", '100%', 700)}}</p>
-
-<div class="blockIndicator note">
-<p><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/tasks/links/links3-download.html">Descarga el inicio de esta tarea</a> para trabajar en tu propio editor o en un editor en línea.</p>
-</div>
-
-<h2 id="Evaluación_o_ayuda_adicional">Evaluación o ayuda adicional</h2>
-
-<p>Puedes practicar estos ejemplos en los editores interactivos que se encuentran más arriba.</p>
-
-<p>Si deseas que tu trabajo sea evaluado, o estás atorado y quieres solicitar ayuda:</p>
-
-<ol>
- <li>Pon tu trabajo en un editor en línea con capacidad de compartir como <a href="https://codepen.io/" rel="noopener">CodePen</a>, <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a>, o <a href="https://glitch.com/" rel="noopener">Glitch</a>. Puedes escribir el código por ti mismo, o usar los archivos de punto de inicio enlazados en las secciones superiores.</li>
- <li>Escribe una publicación solicitando evaluacion y/o ayuda en el <a href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. Tu publicación debería incluir:
-  <ul>
-   <li>Un título descriptivo como "Solicito evaluacion para la prueba de habilidad de texto básico HTML 1".</li>
-   <li>Detalles de lo que ya has intentado, y que te gustaría que hiciéramos, por ejemplo, si estas atascado y necesitas ayuda, o quieres una evaluación.</li>
-   <li>Un enlace al ejemplo que quieres que sea evaluado o por el que necesitas ayuda en un  editor en linea con capacidad de compartir (como se mencionó en el paso 1 más arriba). Esta es una buena práctica  - Es muy dificil ayudar a alguien con un problema de codificación si no puedes ver su código.</li>
-   <li>Un enlace a la tarea o página de evaluacion actual, para que podamos encontrar la pregunta con la cual necesitas ayuda.</li>
-  </ul>
- </li>
-</ol>
diff --git a/files/es/learn/html/introduction_to_html/test_your_skills_colon__links/index.md b/files/es/learn/html/introduction_to_html/test_your_skills_colon__links/index.md
new file mode 100644
index 00000000000000..56ecac9ba4da06
--- /dev/null
+++ b/files/es/learn/html/introduction_to_html/test_your_skills_colon__links/index.md
@@ -0,0 +1,76 @@
+---
+title: 'Prueba tus habilidades: Enlaces'
+slug: Learn/HTML/Introduction_to_HTML/Test_your_skills:_Links
+translation_of: Learn/HTML/Introduction_to_HTML/Test_your_skills:_Links
+original_slug: Learn/HTML/Introduccion_a_HTML/Prueba_tus_habilidades:_Enlaces
+---
+{{learnsidebar}}
+
+El objetivo de esta pueba de habilidad es evaluar si has comprendido nuestro artículo [Creando hipervínculos](/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks).
+
+> **Nota:** Puedes intentar resolver esta prueba en los editores interactivos más abajo, sin embargo, puede ser útil descargar el código y usar una herramienta en línea como [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), o [Glitch](https://glitch.com/) para trabajar en las tareas.
+>
+> Si te atascas, pide ayuda — mira la sección [Evaluación o ayuda adicional](#evaluación_o_ayuda_adicional) al final de esta página.
+
+## Enlaces 1
+
+En esta tarea necesitamos tu ayuda para completar los enlaces en nuestra página de información sobre Ballenas:
+
+- El primer enlace debería estar vinculado a una página llamada `whales.html`, que está en el mismo directorio que la página actual.
+- También queremos agregarle un cuadro de información ("tooltip") cuando pase el puntero sobre el enlace, que le diga al usuario que la página incluye informacion sobre las Ballenas azules y las Ballenas blancas.
+- El segundo enlace deberá convertirse en un vínculo que abra un correo electrónico en la aplicación de correo por defecto del usuario, con el destinatario "whales\@example.com".
+- Conseguirás un punto de bonificación si tambien configuras que la línea del asunto del correo electrónico tenga como texto predeterminado "Preguntas sobre Ballenas".
+
+> **Nota:** El primer enlace en el ejemplo tiene el atributo `target="_blank"` , así que cuando haces click en él, abre la página en una pestaña nueva. Esto no es estrictamente una buena práctica, pero lo hemos hecho aquí para que la página no se abra en el `<iframe>` incrustado, ¡eliminando el código de ejemplo en el proceso!
+
+Intenta actualizar el código en vivo más abajo para mostrar el ejemplo terminado:
+
+{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/links/links1.html", '100%', 700)}}
+
+> **Nota:** [Descarga el inicio de esta tarea](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/tasks/links/links1-download.html) para trabajar en tu propio editor o en un editor en línea.
+
+## Enlaces 2
+
+En esta tarea queremos que completes los cuatro enlaces para que se dirijan al lugar apropiado:
+
+- El primer enlace debería vincular a una imagen llamada `blue-whale.jpg`, que se encuentra en una carpeta llamada `blue` dentro de la carpeta actual.
+- El segundo enlace debería vincular a una imagen llamada `narwhal.jpg`, que se encuentra en una carpeta llamada `narwhal`, que se encuentra en un nivel de carpetas sobre la carpeta actual.
+- El tercer enlace deberia vincular al sitio de búsqueda de imágenes de Google del Reino Unido. La URL base es `https://www.google.co.uk`, y la búsqueda de imágenes se ubica en un subdirectorio llamado `imghp`.
+- El cuarto enlace debería vincular al párrafo más al final de la página actual. Que tiene la ID `bottom`.
+
+> **Nota:** Los primeros tres enlaces en el ejemplo tienen el atributo `target="_blank"` especificado en ellos, abren la página enlazada en una nueva pestaña del navegador. Esto no es estrictamente una buena práctica, pero hemos hecho esto aquí para que las páginas no se abran dentro del `<iframe>` incrustado, ¡eliminando el código de ejemplo en el proceso!
+
+Intenta actualizar el código en vivo más abajo para mostrar el ejemplo terminado:
+
+{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/links/links2.html", '100%', 700)}}
+
+> **Nota:** [Descarga el inicio de esta tarea](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/tasks/links/links2-download.html) para trabajar en tu propio editor o en un editor en línea.
+
+## Enlaces 3
+
+Los siguientes enlaces dirigen a una página informativa acerca de los Narvales, una dirección de correo electrónico de soporte, y un documento PDF cuyo tamaño es 4MB. En esta tarea queremos que:
+
+- Tomes los párrafos existentes con enlaces pobremente escritos, y los reescribas para que tengan un buen texto de enlace.
+- Agregues una advertencia a cualquier enlace que necesite una advertencia.
+
+> **Nota:** Los primeros tres enlaces en el ejemplo tienen el atributo `target="_blank"` especificado en ellos, abren la página enlazada en una nueva pestaña del navegador. Esto no es estrictamente una buena práctica, pero hemos hecho esto aquí para que las páginas no se abran dentro del `<iframe>` incrustado, ¡eliminando el código de ejemplo en el proceso!
+
+Intenta actualizar el código en vivo más abajo para mostrar el ejemplo terminado:
+
+{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/links/links3.html", '100%', 700)}}
+
+> **Nota:** [Descarga el inicio de esta tarea](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/tasks/links/links3-download.html) para trabajar en tu propio editor o en un editor en línea.
+
+## Evaluación o ayuda adicional
+
+Puedes practicar estos ejemplos en los editores interactivos que se encuentran más arriba.
+
+Si deseas que tu trabajo sea evaluado, o estás atorado y quieres solicitar ayuda:
+
+1.  Pon tu trabajo en un editor en línea con capacidad de compartir como [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), o [Glitch](https://glitch.com/). Puedes escribir el código por ti mismo, o usar los archivos de punto de inicio enlazados en las secciones superiores.
+2.  Escribe una publicación solicitando evaluacion y/o ayuda en el [MDN Discourse forum Learning category](https://discourse.mozilla.org/c/mdn/learn). Tu publicación debería incluir:
+
+    - Un título descriptivo como "Solicito evaluacion para la prueba de habilidad de texto básico HTML 1".
+    - Detalles de lo que ya has intentado, y que te gustaría que hiciéramos, por ejemplo, si estas atascado y necesitas ayuda, o quieres una evaluación.
+    - Un enlace al ejemplo que quieres que sea evaluado o por el que necesitas ayuda en un editor en linea con capacidad de compartir (como se mencionó en el paso 1 más arriba). Esta es una buena práctica - Es muy dificil ayudar a alguien con un problema de codificación si no puedes ver su código.
+    - Un enlace a la tarea o página de evaluacion actual, para que podamos encontrar la pregunta con la cual necesitas ayuda.
diff --git a/files/es/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/es/learn/html/introduction_to_html/the_head_metadata_in_html/index.html
deleted file mode 100644
index 3bb36fb04bdd07..00000000000000
--- a/files/es/learn/html/introduction_to_html/the_head_metadata_in_html/index.html
+++ /dev/null
@@ -1,300 +0,0 @@
----
-title: ¿Qué hay en la cabecera? Metadatos en HTML
-slug: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
-tags:
-  - Cabecera
-  - CodingScripting
-  - Guía
-  - HTML
-  - Meta
-  - Metadatos
-  - Novato
-  - Principiante
-  - favicon
-  - head
-  - lang
-  - metadata
-translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
-original_slug: Learn/HTML/Introduccion_a_HTML/Metados_en
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</div>
-
-<p class="summary">El elemento {{Glossary("Head", "head")}} de un documento HTML es la parte que no se muestra en el navegador cuando se carga la página. Contiene información como el título ({{htmlelement("title")}}) de la página, enlaces al {{Glossary("CSS")}} (si quieres aplicar estilo a tu contenido HTML con CSS), enlaces para personalizar <code>favicon</code>, y otros metadatos (datos sobre el HTML, como quién lo escribió y palabras claves importantes que describen el documento). En este artículo abarcaremos todo esto y más, para darte bases sólidas en el manejo del marcado y otro código que debería estar presente en tu cabecera.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prerrequisitos:</th>
-   <td>Estar familiarizado con el HTML básico, que se expone en {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con el HTML")}}.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objetivo:</th>
-   <td>Aprender acerca de la cabecera HTML {{Glossary("Head", "head")}}, cuál es su propósito, los elementos más importantes que puede contener, y qué efecto puede tener sobre el documento HTML.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="¿Qué_hay_en_la_cabecera_HTML">¿Qué hay en la cabecera HTML?</h2>
-
-<p>Vamos a revisar el {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document", "documento HTML que se revisó en el artículo anterior")}}:</p>
-
-<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;meta charset="utf-8"&gt;
-    &lt;title&gt;Mi página de prueba&lt;/title&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;p&gt;Esta es mi página&lt;/p&gt;
-  &lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<p>La cabecera HTML es el contenido del elemento {{htmlelement("head")}} — a diferencia del contenido del elemento {{htmlelement("body")}} (que sí se muestra en la página cuando se carga en el navegador), el contenido de la cabecera no se muestra en la página. Por el contrario, la función de la cabecera es contener los {{Glossary("Metadata", "metadatos")}} del documento. En el ejemplo anterior, la cabecera es bastante reducida:</p>
-
-<pre class="brush: html notranslate">&lt;head&gt;
-  &lt;meta charset="utf-8"&gt;
-  &lt;title&gt;Mi página de prueba&lt;/title&gt;
-&lt;/head&gt; </pre>
-
-<p>En páginas más grandes, sin embargo, la cabecera puede llegar a contener bastantes elementos. Prueba a ir a algunos de tus sitios web favoritos y comprueba el contenido de la cabecera usando las {{web.link("/es/docs/Learn/Common_questions/What_are_browser_developer_tools", "herramientas para el desarrollador")}}. Nuestro objetivo aquí no es mostrarte cómo usar todo lo que puedes incluir en la cabecera, sino enseñarte cómo usar los elementos principales que vas a incluir en la cabecera y que te familiarices con ellos. Empecemos.</p>
-
-<h2 id="Añadir_un_título">Añadir un título</h2>
-
-<p>Ya hemos visto el elemento {{htmlelement("title")}} en acción — se puede usar para poner un título al documento. Sin embargo, esto se puede confundir con el elemento {{htmlelement("h1")}}, que se utiliza para poner un encabezado de nivel superior al cuerpo de tu contenido — esto también se conoce como el título de la página. ¡Pero son cosas diferentes!</p>
-
-<ul>
- <li>El elemento {{htmlelement("h1")}} aparece en la página cuando se carga en el navegador — en general debería haber uno solo por página, para especificar el título del contenido de tu página (el título de tu historia, el título de la noticia, o de lo que sea apropiado según el uso que le des).</li>
- <li>El elemento {{htmlelement("title")}} es un metadato que representa el título de todo el documento HTML (no del contenido del documento).</li>
-</ul>
-
-<h3 id="Aprendizaje_activo_Análisis_de_un_ejemplo_sencillo">Aprendizaje activo: Análisis de un ejemplo sencillo</h3>
-
-<ol>
- <li>Para comenzar este aprendizaje activo, te proponemos ir a nuestro repositorio de GitHub y descargues una copia de nuestra página <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html</a>. Lo puedes hacer de las siguientes maneras:
-
-  <ol>
-   <li>Copia y pega el código de la página en un archivo de texto nuevo en tu editor de código, luego guárdalo en un lugar conveniente.</li>
-   <li>Presiona el botón "Raw" en la página de GitHub, lo cual hace que aparezca el código sin procesar (posiblemente en una nueva pestaña del navegador). A continuación, en el menú de tu navegador elige <em>Archivo → Guardar página como...</em> y selecciona un lugar adecuado para guardar el archivo.</li>
-  </ol>
- </li>
- <li>Ahora abre el archivo en tu navegador. Deberías ver algo como esto:
-  <p><img alt="Una sencilla página web con el título configurado a &lt;title> element, y el &lt;h1> configurado a &lt;h1> element." src="https://mdn.mozillademos.org/files/12323/title-example.png" style="display: block; margin: 0 auto;">Ahora debería quedar claro dónde aparece el contenido de <code>&lt;h1&gt;</code> y dónde aparece el contenido de <code>&lt;title&gt;</code>.</p>
- </li>
- <li>También podrías probar a abrir el código en tu editor de código, editar el contenido de estos elementos y luego actualizar la página en tu navegador. Juega un poco con ello.</li>
-</ol>
-
-<p>El contenido del elemento <code>&lt;title&gt;</code> también se usa de otras formas. Por ejemplo, si intentas marcar la página como favorita (<strong>Marcadores → Marcar esta página</strong>, o el icono en forma de estrella de Firefox), verás que el nombre que se sugiere para el marcado es el contenido del elemento <code>&lt;title&gt;</code>.</p>
-
-<p><img alt="Se está marcando una página web en Firefox; el nombre del marcador se ha completado automáticamente con el contenido del elemento &lt;title>" src="https://mdn.mozillademos.org/files/12337/bookmark-example.png" style="display: block; margin: 0 auto;"></p>
-
-<p>El contenido de <code>&lt;title&gt;</code> también se usa en el resultado de las búsquedas, como verás a continuación.</p>
-
-<h2 id="Metadatos_el_elemento_&lt;meta>">Metadatos: el elemento &lt;meta&gt;</h2>
-
-<p>Los metadatos son datos que describen datos, y HTML tiene una forma «oficial» de introducir metadatos en un documento — el elemento {{htmlelement("meta")}}. Por supuesto, el resto de los elementos de los que hablaremos en este artículo también se podrían considerar metadatos. Hay muchos diferentes tipos de elementos <code>&lt;meta&gt;</code> que se pueden incluir en el &lt;head&gt; de tu página, pero no vamos a intentar explicarlos todos en esta etapa porque resultaría demasiado confuso. En lugar de ello vamos a explicar algunas cuestiones con las que seguramente te vas a encontrar, solo para que te hagas una idea.</p>
-
-<h3 id="La_codificación_de_caracteres_de_tu_documento">La codificación de caracteres de tu documento</h3>
-
-<p>El ejemplo que vimos arriba incluía esta línea:</p>
-
-<pre class="brush: html notranslate">&lt;meta charset="utf-8"&gt;</pre>
-
-<p>Este elemento simplemente especifica la codificación de caracteres del documento — es decir, el conjunto de caracteres que el documento puede usar. <code>utf-8</code> es un conjunto de caracteres universal que incluye casi todos los caracteres de casi cualquier idioma humano. Esto significa que tu página web podrá gestionar la visualización de cualquier idioma; por lo tanto, resulta una buena idea configurarlo en cada página web que crees. Por ejemplo, tu página podría gestionar inglés y japonés sin problemas:</p>
-
-<p><img alt="Una página web que contiene caracteres en inglés y japonés, con la codificación de caracteres establecida en universal o utf-8. Ambos idiomas se muestran bien." src="https://mdn.mozillademos.org/files/12343/correct-encoding.png" style="display: block; margin: 0 auto;">Si configuras tu codificación de caracteres en <code>ISO-8859-1</code>, por ejemplo (el juego de caracteres para el alfabeto latino), la representación de tu página puede aparecer desordenada:</p>
-
-<p><img alt="una página web que contiene caracteres en inglés y japonés, con la codificación de caracteres configurada en latín. Los caracteres japoneses no se muestran correctamente" src="https://mdn.mozillademos.org/files/12341/bad-encoding.png" style="display: block; height: 365px; margin: 0px auto; width: 604px;"></p>
-
-<div class="note">
-<p><strong>Nota</strong>: Algunos navegadores (Chrome, por ejemplo) automáticamente arreglan la codificación de caracteres incorrecta, de modo que según el navegador que uses, puede que no te topes con este problema. Aun así, deberías incluir una codificación de caracteres <code>utf-8</code> en tu página web para evitar que se presenten potenciales problemas con otros navegadores.</p>
-</div>
-
-<h3 id="Aprendizaje_activo_Experimenta_con_la_codificación_de_caracteres">Aprendizaje activo: Experimenta con la codificación de caracteres</h3>
-
-<p>Para probar esto, vuelve a visitar la plantilla HTML simple que obtuviste en la sección anterior sobre <code>&lt;title&gt;</code> (la página <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html</a>) e intenta cambiar el valor de la propiedad <code>meta charset</code> por <code>ISO-8859-1</code> y añade el japonés a tu página. Este es el código que usamos:</p>
-
-<pre class="brush: html notranslate">&lt;p&gt;Ejemplo en japonés: ご飯が熱い。&lt;/p&gt;</pre>
-
-<h3 id="Añadir_un_autor_y_descripción">Añadir un autor y descripción</h3>
-
-<p>Muchos elementos <code>&lt;meta&gt;</code> incluyen atributos <code>name</code> y <code>content</code>:</p>
-
-<ul>
- <li><code>name</code> especifica el tipo de metadato del que se trata; es decir, qué tipo de información contiene.</li>
- <li><code>content</code> especifica el contenido del metadato en sí.</li>
-</ul>
-
-<p>Dos de esos metadatos que resultan útiles de incluir en tu página definen al autor de la página y proporcionan una descripción concisa de la página. Veamos un ejemplo:</p>
-
-<pre class="brush: html notranslate">&lt;meta name="author" content="Chris Mills"&gt;
-&lt;meta name="description" content="El área de aprendizaje de MDN pretende
-proporcionar a los recién llegados a la web todo lo que deben
-saber para empezar a desarrollar páginas web y aplicaciones web."&gt;</pre>
-
-<p>Especificar un autor resulta ventajoso por diversos motivos: es útil saber quién escribió la página para poder ponerte en contacto con el autor si tienes preguntas sobre el contenido. Algunos sistemas de gestión de contenido tienen herramientas para extraer automáticamente la información del autor de la página y ponerla a disposición para tales fines.</p>
-
-<p>Especificar una descripción que incluya palabras clave relacionadas con el contenido de tu página resulta útil porque tiene el potencial de hacer que la página aparezca más arriba en las búsquedas relevantes que efectúan los motores de búsqueda (tales actividades se denominan optimizaciones del motor de búsqueda ({{web.link("/es/docs/Glossary/SEO", "Optimización de motores de búsqueda")}}) o {{Glossary("SEO")}}.)</p>
-
-<h3 id="Aprendizaje_activo_El_uso_de_la_descripción_en_los_motores_de_búsqueda">Aprendizaje activo: El uso de la descripción en los motores de búsqueda</h3>
-
-<p>La descripción también se usa en las páginas de resultados del motor de búsqueda. Repasemos un ejercicio para explorar esto:</p>
-
-<ol>
- <li>Ve a la página de inicio de <a href="https://developer.mozilla.org/es/">Mozilla Developer Network</a>.</li>
- <li>Observa el código fuente de la página (<kbd>Ctrl</kbd>+clic o clic con el botón derecho en la página y selecciona la opción del menú <strong>Ver código fuente de la página</strong>).</li>
- <li>Encuentra la etiqueta del metadato <strong>description</strong>. Se verá más o menos así (aunque puede cambiar con el tiempo):
-  <pre class="brush: html notranslate">&lt;meta name="description" content="The Mozilla Developer
-  Network (MDN) proporciona información sobre tecnologías
-  de código abierto que incluyen HTML, CSS y APIs tanto para sitios web como para aplicaciones HTML5.
-  También documenta productos Mozilla como el sistema operativo Firefox."&gt;</pre>
- </li>
- <li>Ahora busca "Mozilla Developer Network" en tu motor de búsqueda favorito (nosotros hemos utilizado Google). Observarás que efectivamente merece la pena que tener el contenido de la descripción <code>&lt;meta&gt;</code> y el elemento <code>&lt;title&gt;</code> que se utiliza en la búsqueda.
-  <p><img alt='Resultado de búsqueda en Yahoo para "Mozilla Developer Network"' src="https://mdn.mozillademos.org/files/16074/mdn-search-result.png" style="border-style: solid; border-width: 1px; display: block; height: 982px; margin: 0px auto; width: 1302px;"></p>
- </li>
-</ol>
-
-<div class="note">
-<p><strong>Nota</strong>: En Google verás algunas subpáginas relevantes de MDN enumeradas debajo del enlace principal a la página principal de MDN (se trata de los llamados <strong>sitelinks</strong> y se pueden configurar con las <a href="http://www.google.com/webmasters/tools/">Herramientas de administrador de Google</a>), una forma de mejorar los resultados para tu sitio con el motor de búsqueda de Google.</p>
-</div>
-
-<div class="note">
-<p><strong>Nota</strong>: Muchas características <code>&lt;meta&gt;</code> ya no se usan. Por ejemplo, los motores de búsqueda ignoran el elemento <code>&lt;meta&gt;</code> (<code>&lt;meta name="keywords" content="pon, tus, palabras clave, aquí"&gt;</code>), que se supone que facilita palabras clave para motores de búsqueda de forma que se determine la relevancia de esa página según diferentes términos de búsqueda, porque los <strong>spammers</strong> rellenaban la lista de palabras clave con cientos de palabras clave que sesgaban los resultados.</p>
-</div>
-
-<h3 id="Otros_tipos_de_metadatos">Otros tipos de metadatos</h3>
-
-<p>Al navegar por la web también puedes encontrar otros tipos de metadatos. Muchas de las funciones que verás en los sitios web son creaciones propietarias diseñadas para proporcionar a ciertos sitios (como los sitios de redes sociales) información específica que puedan usar.</p>
-
-<p>Por ejemplo, <a href="http://ogp.me/">Open Graph Data</a> es un protocolo de metadatos que Facebook inventó para proveer metadatos más ricos para los sitios web. En las fuentes de código de MDN, encontrarás esto:</p>
-
-<pre class="brush: html notranslate">&lt;meta property="og:image" content="https://developer.mozilla.org/static/img/opengraph-logo.png"&gt;
-&lt;meta property="og:description" content="The Mozilla Developer Network (MDN) proporciona información
-sobre tecnologías Open Web, incluidas HTML, CSS y APIs para ambos sitios web
-y aplicaciones HTML5. También documenta productos Mozilla, como el sistema operativo Firefox."&gt;
-&lt;meta property="og:title" content="Mozilla Developer Network"&gt;</pre>
-
-<p>Un efecto de esto es que cuando desde Facebook enlazas a un MDN, el enlace aparece con una imagen y una descripción, lo que resulta en una experiencia más enriquecedora para los usuarios.</p>
-
-<p><img alt="Datos abiertos del protocolo de gráficos de la página de inicio de MDN como se muestra en Facebook, mostrando una imagen, título y descripción." src="https://mdn.mozillademos.org/files/12349/facebook-output.png" style="display: block; margin: 0 auto;"></p>
-
-<p>Twitter también tiene sus metadatos propios, las <a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards">Twitter Cards</a>, que tienen un efecto similar cuando la URL del sitio se muestra en twitter.com. Por ejemplo:</p>
-
-<pre class="brush: html notranslate">&lt;meta name="twitter:title" content="Mozilla Developer Network"&gt;</pre>
-
-<h2 id="Agregar_iconos_personalizados_a_tu_sitio">Agregar iconos personalizados a tu sitio</h2>
-
-<p>Para enriquecer un poco más el diseño de tu sitio puedes añadir en tus metadatos referencias a iconos personalizados, que se mostrarán en determinados contextos. El más común de ellos es el <strong>favicon</strong> (abreviatura de <strong><em>favorite icon</em></strong> —<strong>icono </strong>«<strong>favorito</strong>», referido al uso que se le da en las listas de «favoritos» o de marcadores («<strong>bookmarks</strong>»).</p>
-
-<p>El humilde <code>favicon</code> ha existido durante muchos años. Es el primer icono de este tipo: un icono cuadrado de 16 píxeles que se utiliza en varios lugares. Es posible que veas (según el navegador) <code>favicon</code>s que se muestran en la pestaña del navegador que contiene cada página abierta y junto a las páginas marcadas en el panel de marcadores.</p>
-
-<p>Para añadir un <code>favicon</code> a tu página:</p>
-
-<ol>
- <li>Guárdalo en el mismo directorio que la página <strong>index</strong> de tu sitio, en formato <code>.ico</code> (la mayoría de los buscadores admiten <code>favicon</code> en los formatos más comunes como <code>.gif</code> o <code>.png</code>, pero usar el formato <em>ICO</em> garantiza que funcionará hasta en Internet Explorer 6.)</li>
- <li>Añade la siguiente línea de referencia en el {{HTMLElement("head")}} de tu HTML:
-  <pre class="brush: html notranslate">&lt;link rel="shortcut icon" href="favicon.ico" type="image/x-icon"&gt;</pre>
- </li>
-</ol>
-
-<p>Los navegadores modernos usan <code>favicon</code>s en diversos lugares, como en la etiqueta de la página que está abierta y en el panel de favoritos cuando la añades a tu lista de páginas favoritas:</p>
-
-<p><img alt="El panel de marcadores de Firefox, que muestra un ejemplo marcado con un favicon junto a él." src="https://mdn.mozillademos.org/files/12351/bookmark-favicon.png" style="display: block; margin: 0 auto;"></p>
-
-<p>Hoy día hay un montón de otros tipos de iconos a tener presentes. Por ejemplo, los encontrarás en el código fuente de la página de inicio de MDN:</p>
-
-<pre class="brush: html notranslate">&lt;!-- iPad de tercera generación con pantalla de alta resolución: --&gt;
-&lt;link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.png"&gt;
-&lt;!-- iPhone con pantalla de alta resolución: --&gt;
-&lt;link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.mozilla.org/static/img/favicon114.png"&gt;
-&lt;!-- iPad de primera y segunda generación: --&gt;
-&lt;link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.mozilla.org/static/img/favicon72.png"&gt;
-&lt;!-- Dispositivos iPhone sin pantalla Retina, iPod Touch y Android 2.1+: --&gt;
-&lt;link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon57.png"&gt;
-&lt;!-- favicon básico --&gt;
-&lt;link rel="shortcut icon" href="https://developer.mozilla.org/static/img/favicon32.png"&gt;</pre>
-
-<p>Los comentarios explican para qué se usa cada icono (estos elementos abarcan situaciones como aportar un buen icono de alta resolución para usarlo cuando la página web se guarda en la página de inicio de un iPad).</p>
-
-<p>No te preocupes demasiado sobre la implementación de todos estos tipos de iconos por el momento; se trata de una característica bastante avanzada y no se espera que tengas conocimientos de ello para avanzar en el curso. El propósito principal aquí es darte a conocer estos elementos por si te los encuentras mientras examinas el código fuente de otros sitios web.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: Si tu sitio web utiliza una política de seguridad de contenido (<em>content security policy o CSP</em>) para mejorar la seguridad, la política afecta al <code>favicon</code>. Si te encuentras con problemas como que el <code>favicon</code> no se carga, comprueba que la respuesta a {{HTTPHeader("Content-Security-Policy")}} del <code>header</code> <a href="">Content-Security-Policy</a> para la <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src"> directriz <code>img-src</code></a> en la cabecera no impide el acceso a este.</p>
-</div>
-
-<h2 id="Aplicar_CSS_y_JavaScript_a_HTML">Aplicar CSS y JavaScript a HTML</h2>
-
-<p>Prácticamente todos los sitios web usan {{Glossary("CSS")}} para darles un buen aspecto y {{Glossary("JavaScript")}} para añadir funcionalidades interactivas, como reproductores de vídeo, mapas, juegos y demás. La manera más habitual de añadir CSS y JavaScript a una página web es con los elementos <code>&lt;link&gt;</code> y el elemento <code>&lt;script&gt;</code>, respectivamente.</p>
-
-<ul>
- <li>
-  <p>El elemento {{HTMLElement("link")}} siempre debe ir dentro del {{HTMLElement("head")}} de tu documento. Este toma dos atributos, <code>rel="stylesheet"</code>, que indica que es la hoja de estilo del documento, y <code>href</code>, que contiene la ruta al archivo de la hoja de estilo:</p>
-
-  <pre class="brush: html notranslate">&lt;link rel="stylesheet" href="my-css-file.css"&gt;</pre>
- </li>
- <li>
-  <p>El elemento <code>&lt;script&gt;</code> también debería ir en el <code>head</code>, y debería incluir un atributo <code>src</code> con la ruta al JavaScript que quieres cargar, y <code>defer</code>, que básicamente le dice al navegador que cargue el JavaScript al mismo tiempo que el HTML de la página. Esto es útil porque hace que todo el HTML se cargue antes de ejecutar el JavaScript, para que no haya errores porque el JavaScript ha intentado acceder a un elemento HTML que todavía no existe. De hecho hay múltiples formas de gestionar la carga del JavaScript en una página, pero esta es «a prueba de bombas» para los navegadores modernos (para el resto de las formas, lee el artículo {{web.link("/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript#Script_loading_strategies", "Estrategias de carga de scripts")}}).</p>
-
-  <pre class="brush: html notranslate">&lt;script src="my-js-file.js"&gt;&lt;/script&gt;</pre>
-
-  <div class="blockIndicator note">
-  <p><strong>Nota</strong>: El elemento <code>&lt;script&gt;</code> puede parecer un elemento vacío pero no lo es, y por lo tanto necesita una etiqueta de cierre. En vez de apuntar a un archivo de <code>script</code> externo, también puedes colocar tu código dentro del elemento <code>&lt;script&gt;</code>.</p>
-  </div>
- </li>
-</ul>
-
-<h3 id="Aprendizaje_activo_aplicar_CSS_y_JavaScript_a_una_página">Aprendizaje activo: aplicar CSS y JavaScript a una página</h3>
-
-<ol>
- <li>Para iniciar este aprendizaje activo, haz una copia de nuestros archivos <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/script.js">script.js</a> y <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/style.css">style.css</a>, y guárdalos en un mismo directorio de tu ordenador. Asegúrate de que se guardan con los nombres y extensiones correctas.</li>
- <li>Abre el archivo HTML tanto en tu navegador como en tu editor de texto.</li>
- <li>Sigue la información facilitada anteriormente y añade los elementos <code>&lt;link&gt;</code> y <code>&lt;script&gt;</code> a tu HTML para aplicarle CSS y JavaScript.</li>
-</ol>
-
-<p>Si lo has hecho correctamente, al guardar tu HTML y actualizar tu navegador, deberías poder ver que las cosas han cambiado:</p>
-
-<p><img alt="Ejemplo que muestra una página con CSS y JavaScript aplicados. El CSS ha hecho que la página se vuelva verde, mientras que JavaScript ha agregado una lista dinámica a la página" src="https://mdn.mozillademos.org/files/12359/js-and-css.png" style="display: block; margin: 0 auto;"></p>
-
-<ul>
- <li>El JavaScript ha añadido una lista vacía a la página. Ahora, cuando haces clic en cualquier sitio de la lista, aparece un cuadro de diálogo que te solicita que introduzcas el texto para un nuevo elemento de la lista. Cuando pulsas el botón OK, se añade a la lista el elemento con el texto nuevo. Cuando haces clic a un elemento de la lista aparece un cuadro de diálogo que te permite cambiar el texto del elemento.</li>
- <li>El CSS ha pintado el fondo de verde y ha agrandado el texto. También ha aplicado estilo a algún contenido que el JavaScript ha añadido a la página (la barra roja con el borde negro es el estilo que el CSS ha aplicado a la lista generada con JavaScript).</li>
-</ul>
-
-<div class="note">
-<p><strong>Nota</strong>: Si te encallas en este ejercicio y no logras ejecutar los archivos CSS/JS, comprueba tu página de ejemplo <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/css-and-js.html">css-and-js.html</a>.</p>
-</div>
-
-<h2 id="Establecer_el_idioma_principal_del_documento">Establecer el idioma principal del documento</h2>
-
-<p>Por último, merece la pena mencionar que puedes (y realmente deberías) especificar el idioma de tu página. Esto se puede hacer añadiendo el atributo {{web.link("/es/docs/Web/HTML/Global_attributes/lang", "lang")}} a la etiqueta de apertura del HTML (como se ve en el <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a> y se muestra abajo).</p>
-
-<pre class="brush: html notranslate">&lt;html lang="es-MX"&gt;</pre>
-
-<p>Esto resulta útil en muchos sentidos. Los motores de búsqueda indizarán tu documento HTML de modo más efectivo si estableces el idioma (permitiendo, por ejemplo, que aparezca correctamente en los resultados del idioma especificado), y resulta útil para que las personas con discapacidad visual que utilizan los lectores de pantalla (por ejemplo, la palabra «six» existe tanto en francés como en inglés, pero su pronunciación es diferente).</p>
-
-<p>También puedes establecer que las subsecciones de tu documento se reconozcan en diferentes idiomas. Por ejemplo, podemos establecer que nuestra sección de japonés se reconozca como japonés, de la siguiente manera:</p>
-
-<pre class="brush: html notranslate">&lt;p&gt;Ejemplo Japonés: &lt;span lang="ja"&gt;ご飯が熱い。&lt;/span&gt;.&lt;/p&gt;</pre>
-
-<p>El estándar {{interwiki("wikipedia", "ISO_639-1")}} define estos códigos. Puedes encontrar más información sobre ello en <a href="https://www.w3.org/International/articles/language-tags/">Etiquetas de idioma en HTML y XML</a>.</p>
-
-<h2 id="Resumen">Resumen</h2>
-
-<p>Esto marca el final de nuestra guía rápida del {{Glossary("head")}} de HTML — aún hay muchas más cosas que puedes hacer aquí, pero una guía exhaustiva puede ser aburrida y confusa a estas alturas, ¡y nosotros queremos darte una idea de las cuestiones más comunes con las que te encontrarás aquí por ahora! En el siguiente artículo veremos los fundamentos de texto de HTML.</p>
-
-<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</p>
-
-<h2 id="En_este_módulo">En este módulo</h2>
-
-<ul>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}</li>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "¿Qué hay en el «head»? Metadatos en HTML")}}</li>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Fundamentos de texto HTML")}}</li>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Creando hipervínculos")}}</li>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Formateo de texto avanzado")}}</li>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Estructura web y documentación")}}</li>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Depurar HTML")}}</li>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Marcado para una carta")}}</li>
- <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Estructuración del contenido de una página")}}</li>
-</ul>
diff --git a/files/es/learn/html/introduction_to_html/the_head_metadata_in_html/index.md b/files/es/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
new file mode 100644
index 00000000000000..3e801632b5fbd3
--- /dev/null
+++ b/files/es/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
@@ -0,0 +1,306 @@
+---
+title: ¿Qué hay en la cabecera? Metadatos en HTML
+slug: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
+tags:
+  - Cabecera
+  - CodingScripting
+  - Guía
+  - HTML
+  - Meta
+  - Metadatos
+  - Novato
+  - Principiante
+  - favicon
+  - head
+  - lang
+  - metadata
+translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
+original_slug: Learn/HTML/Introduccion_a_HTML/Metados_en
+---
+{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}
+
+El elemento {{Glossary("Head", "head")}} de un documento HTML es la parte que no se muestra en el navegador cuando se carga la página. Contiene información como el título ({{htmlelement("title")}}) de la página, enlaces al {{Glossary("CSS")}} (si quieres aplicar estilo a tu contenido HTML con CSS), enlaces para personalizar `favicon`, y otros metadatos (datos sobre el HTML, como quién lo escribió y palabras claves importantes que describen el documento). En este artículo abarcaremos todo esto y más, para darte bases sólidas en el manejo del marcado y otro código que debería estar presente en tu cabecera.
+
+<table>
+  <tbody>
+    <tr>
+      <th scope="row">Prerrequisitos:</th>
+      <td>
+        Estar familiarizado con el HTML básico, que se expone en
+        {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con el HTML")}}.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Objetivo:</th>
+      <td>
+        Aprender acerca de la cabecera HTML
+        {{Glossary("Head", "head")}}, cuál es su propósito, los
+        elementos más importantes que puede contener, y qué efecto puede tener
+        sobre el documento HTML.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## ¿Qué hay en la cabecera HTML?
+
+Vamos a revisar el {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document", "documento HTML que se revisó en el artículo anterior")}}:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Mi página de prueba</title>
+  </head>
+  <body>
+    <p>Esta es mi página</p>
+  </body>
+</html>
+```
+
+La cabecera HTML es el contenido del elemento {{htmlelement("head")}} — a diferencia del contenido del elemento {{htmlelement("body")}} (que sí se muestra en la página cuando se carga en el navegador), el contenido de la cabecera no se muestra en la página. Por el contrario, la función de la cabecera es contener los {{Glossary("Metadata", "metadatos")}} del documento. En el ejemplo anterior, la cabecera es bastante reducida:
+
+```html
+<head>
+  <meta charset="utf-8">
+  <title>Mi página de prueba</title>
+</head>
+```
+
+En páginas más grandes, sin embargo, la cabecera puede llegar a contener bastantes elementos. Prueba a ir a algunos de tus sitios web favoritos y comprueba el contenido de la cabecera usando las {{web.link("/es/docs/Learn/Common_questions/What_are_browser_developer_tools", "herramientas para el desarrollador")}}. Nuestro objetivo aquí no es mostrarte cómo usar todo lo que puedes incluir en la cabecera, sino enseñarte cómo usar los elementos principales que vas a incluir en la cabecera y que te familiarices con ellos. Empecemos.
+
+## Añadir un título
+
+Ya hemos visto el elemento {{htmlelement("title")}} en acción — se puede usar para poner un título al documento. Sin embargo, esto se puede confundir con el elemento {{htmlelement("h1")}}, que se utiliza para poner un encabezado de nivel superior al cuerpo de tu contenido — esto también se conoce como el título de la página. ¡Pero son cosas diferentes!
+
+- El elemento {{htmlelement("h1")}} aparece en la página cuando se carga en el navegador — en general debería haber uno solo por página, para especificar el título del contenido de tu página (el título de tu historia, el título de la noticia, o de lo que sea apropiado según el uso que le des).
+- El elemento {{htmlelement("title")}} es un metadato que representa el título de todo el documento HTML (no del contenido del documento).
+
+### Aprendizaje activo: Análisis de un ejemplo sencillo
+
+1.  Para comenzar este aprendizaje activo, te proponemos ir a nuestro repositorio de GitHub y descargues una copia de nuestra página [title-example.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html). Lo puedes hacer de las siguientes maneras:
+
+    1.  Copia y pega el código de la página en un archivo de texto nuevo en tu editor de código, luego guárdalo en un lugar conveniente.
+    2.  Presiona el botón "Raw" en la página de GitHub, lo cual hace que aparezca el código sin procesar (posiblemente en una nueva pestaña del navegador). A continuación, en el menú de tu navegador elige _Archivo → Guardar página como..._ y selecciona un lugar adecuado para guardar el archivo.
+
+2.  Ahora abre el archivo en tu navegador. Deberías ver algo como esto:
+
+    ![Una sencilla página web con el título configurado a <title> element, y el <h1> configurado a <h1> element.](https://mdn.mozillademos.org/files/12323/title-example.png)Ahora debería quedar claro dónde aparece el contenido de `<h1>` y dónde aparece el contenido de `<title>`.
+
+3.  También podrías probar a abrir el código en tu editor de código, editar el contenido de estos elementos y luego actualizar la página en tu navegador. Juega un poco con ello.
+
+El contenido del elemento `<title>` también se usa de otras formas. Por ejemplo, si intentas marcar la página como favorita (**Marcadores → Marcar esta página**, o el icono en forma de estrella de Firefox), verás que el nombre que se sugiere para el marcado es el contenido del elemento `<title>`.
+
+![Se está marcando una página web en Firefox; el nombre del marcador se ha completado automáticamente con el contenido del elemento <title>](https://mdn.mozillademos.org/files/12337/bookmark-example.png)
+
+El contenido de `<title>` también se usa en el resultado de las búsquedas, como verás a continuación.
+
+## Metadatos: el elemento \<meta>
+
+Los metadatos son datos que describen datos, y HTML tiene una forma «oficial» de introducir metadatos en un documento — el elemento {{htmlelement("meta")}}. Por supuesto, el resto de los elementos de los que hablaremos en este artículo también se podrían considerar metadatos. Hay muchos diferentes tipos de elementos `<meta>` que se pueden incluir en el \<head> de tu página, pero no vamos a intentar explicarlos todos en esta etapa porque resultaría demasiado confuso. En lugar de ello vamos a explicar algunas cuestiones con las que seguramente te vas a encontrar, solo para que te hagas una idea.
+
+### La codificación de caracteres de tu documento
+
+El ejemplo que vimos arriba incluía esta línea:
+
+```html
+<meta charset="utf-8">
+```
+
+Este elemento simplemente especifica la codificación de caracteres del documento — es decir, el conjunto de caracteres que el documento puede usar. `utf-8` es un conjunto de caracteres universal que incluye casi todos los caracteres de casi cualquier idioma humano. Esto significa que tu página web podrá gestionar la visualización de cualquier idioma; por lo tanto, resulta una buena idea configurarlo en cada página web que crees. Por ejemplo, tu página podría gestionar inglés y japonés sin problemas:
+
+![Una página web que contiene caracteres en inglés y japonés, con la codificación de caracteres establecida en universal o utf-8. Ambos idiomas se muestran bien.](https://mdn.mozillademos.org/files/12343/correct-encoding.png)Si configuras tu codificación de caracteres en `ISO-8859-1`, por ejemplo (el juego de caracteres para el alfabeto latino), la representación de tu página puede aparecer desordenada:
+
+![una página web que contiene caracteres en inglés y japonés, con la codificación de caracteres configurada en latín. Los caracteres japoneses no se muestran correctamente](https://mdn.mozillademos.org/files/12341/bad-encoding.png)
+
+> **Nota:** Algunos navegadores (Chrome, por ejemplo) automáticamente arreglan la codificación de caracteres incorrecta, de modo que según el navegador que uses, puede que no te topes con este problema. Aun así, deberías incluir una codificación de caracteres `utf-8` en tu página web para evitar que se presenten potenciales problemas con otros navegadores.
+
+### Aprendizaje activo: Experimenta con la codificación de caracteres
+
+Para probar esto, vuelve a visitar la plantilla HTML simple que obtuviste en la sección anterior sobre `<title>` (la página [title-example.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html)) e intenta cambiar el valor de la propiedad `meta charset` por `ISO-8859-1` y añade el japonés a tu página. Este es el código que usamos:
+
+```html
+<p>Ejemplo en japonés: ご飯が熱い。</p>
+```
+
+### Añadir un autor y descripción
+
+Muchos elementos `<meta>` incluyen atributos `name` y `content`:
+
+- `name` especifica el tipo de metadato del que se trata; es decir, qué tipo de información contiene.
+- `content` especifica el contenido del metadato en sí.
+
+Dos de esos metadatos que resultan útiles de incluir en tu página definen al autor de la página y proporcionan una descripción concisa de la página. Veamos un ejemplo:
+
+```html
+<meta name="author" content="Chris Mills">
+<meta name="description" content="El área de aprendizaje de MDN pretende
+proporcionar a los recién llegados a la web todo lo que deben
+saber para empezar a desarrollar páginas web y aplicaciones web.">
+```
+
+Especificar un autor resulta ventajoso por diversos motivos: es útil saber quién escribió la página para poder ponerte en contacto con el autor si tienes preguntas sobre el contenido. Algunos sistemas de gestión de contenido tienen herramientas para extraer automáticamente la información del autor de la página y ponerla a disposición para tales fines.
+
+Especificar una descripción que incluya palabras clave relacionadas con el contenido de tu página resulta útil porque tiene el potencial de hacer que la página aparezca más arriba en las búsquedas relevantes que efectúan los motores de búsqueda (tales actividades se denominan optimizaciones del motor de búsqueda ({{web.link("/es/docs/Glossary/SEO", "Optimización de motores de búsqueda")}}) o {{Glossary("SEO")}}.)
+
+### Aprendizaje activo: El uso de la descripción en los motores de búsqueda
+
+La descripción también se usa en las páginas de resultados del motor de búsqueda. Repasemos un ejercicio para explorar esto:
+
+1.  Ve a la página de inicio de [Mozilla Developer Network](https://developer.mozilla.org/es/).
+2.  Observa el código fuente de la página (
+
+    <kbd>Ctrl</kbd>
+
+    \+clic o clic con el botón derecho en la página y selecciona la opción del menú **Ver código fuente de la página**).
+
+3.  Encuentra la etiqueta del metadato **description**. Se verá más o menos así (aunque puede cambiar con el tiempo):
+
+    ```html
+    <meta name="description" content="The Mozilla Developer
+      Network (MDN) proporciona información sobre tecnologías
+      de código abierto que incluyen HTML, CSS y APIs tanto para sitios web como para aplicaciones HTML5.
+      También documenta productos Mozilla como el sistema operativo Firefox.">
+    ```
+
+4.  Ahora busca "Mozilla Developer Network" en tu motor de búsqueda favorito (nosotros hemos utilizado Google). Observarás que efectivamente merece la pena que tener el contenido de la descripción `<meta>` y el elemento `<title>` que se utiliza en la búsqueda.
+
+    ![Resultado de búsqueda en Yahoo para "Mozilla Developer Network"](https://mdn.mozillademos.org/files/16074/mdn-search-result.png)
+
+> **Nota:** En Google verás algunas subpáginas relevantes de MDN enumeradas debajo del enlace principal a la página principal de MDN (se trata de los llamados **sitelinks** y se pueden configurar con las [Herramientas de administrador de Google](http://www.google.com/webmasters/tools/)), una forma de mejorar los resultados para tu sitio con el motor de búsqueda de Google.
+
+> **Nota:** Muchas características `<meta>` ya no se usan. Por ejemplo, los motores de búsqueda ignoran el elemento `<meta>` (`<meta name="keywords" content="pon, tus, palabras clave, aquí">`), que se supone que facilita palabras clave para motores de búsqueda de forma que se determine la relevancia de esa página según diferentes términos de búsqueda, porque los **spammers** rellenaban la lista de palabras clave con cientos de palabras clave que sesgaban los resultados.
+
+### Otros tipos de metadatos
+
+Al navegar por la web también puedes encontrar otros tipos de metadatos. Muchas de las funciones que verás en los sitios web son creaciones propietarias diseñadas para proporcionar a ciertos sitios (como los sitios de redes sociales) información específica que puedan usar.
+
+Por ejemplo, [Open Graph Data](http://ogp.me/) es un protocolo de metadatos que Facebook inventó para proveer metadatos más ricos para los sitios web. En las fuentes de código de MDN, encontrarás esto:
+
+```html
+<meta property="og:image" content="https://developer.mozilla.org/static/img/opengraph-logo.png">
+<meta property="og:description" content="The Mozilla Developer Network (MDN) proporciona información
+sobre tecnologías Open Web, incluidas HTML, CSS y APIs para ambos sitios web
+y aplicaciones HTML5. También documenta productos Mozilla, como el sistema operativo Firefox.">
+<meta property="og:title" content="Mozilla Developer Network">
+```
+
+Un efecto de esto es que cuando desde Facebook enlazas a un MDN, el enlace aparece con una imagen y una descripción, lo que resulta en una experiencia más enriquecedora para los usuarios.
+
+![Datos abiertos del protocolo de gráficos de la página de inicio de MDN como se muestra en Facebook, mostrando una imagen, título y descripción.](https://mdn.mozillademos.org/files/12349/facebook-output.png)
+
+Twitter también tiene sus metadatos propios, las [Twitter Cards](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards), que tienen un efecto similar cuando la URL del sitio se muestra en twitter.com. Por ejemplo:
+
+```html
+<meta name="twitter:title" content="Mozilla Developer Network">
+```
+
+## Agregar iconos personalizados a tu sitio
+
+Para enriquecer un poco más el diseño de tu sitio puedes añadir en tus metadatos referencias a iconos personalizados, que se mostrarán en determinados contextos. El más común de ellos es el **favicon** (abreviatura de **_favorite icon_** —**icono** «**favorito**», referido al uso que se le da en las listas de «favoritos» o de marcadores («**bookmarks**»).
+
+El humilde `favicon` ha existido durante muchos años. Es el primer icono de este tipo: un icono cuadrado de 16 píxeles que se utiliza en varios lugares. Es posible que veas (según el navegador) `favicon`s que se muestran en la pestaña del navegador que contiene cada página abierta y junto a las páginas marcadas en el panel de marcadores.
+
+Para añadir un `favicon` a tu página:
+
+1.  Guárdalo en el mismo directorio que la página **index** de tu sitio, en formato `.ico` (la mayoría de los buscadores admiten `favicon` en los formatos más comunes como `.gif` o `.png`, pero usar el formato _ICO_ garantiza que funcionará hasta en Internet Explorer 6.)
+2.  Añade la siguiente línea de referencia en el {{HTMLElement("head")}} de tu HTML:
+
+    ```html
+    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
+    ```
+
+Los navegadores modernos usan `favicon`s en diversos lugares, como en la etiqueta de la página que está abierta y en el panel de favoritos cuando la añades a tu lista de páginas favoritas:
+
+![El panel de marcadores de Firefox, que muestra un ejemplo marcado con un favicon junto a él.](https://mdn.mozillademos.org/files/12351/bookmark-favicon.png)
+
+Hoy día hay un montón de otros tipos de iconos a tener presentes. Por ejemplo, los encontrarás en el código fuente de la página de inicio de MDN:
+
+```html
+<!-- iPad de tercera generación con pantalla de alta resolución: -->
+<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.png">
+<!-- iPhone con pantalla de alta resolución: -->
+<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.mozilla.org/static/img/favicon114.png">
+<!-- iPad de primera y segunda generación: -->
+<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.mozilla.org/static/img/favicon72.png">
+<!-- Dispositivos iPhone sin pantalla Retina, iPod Touch y Android 2.1+: -->
+<link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon57.png">
+<!-- favicon básico -->
+<link rel="shortcut icon" href="https://developer.mozilla.org/static/img/favicon32.png">
+```
+
+Los comentarios explican para qué se usa cada icono (estos elementos abarcan situaciones como aportar un buen icono de alta resolución para usarlo cuando la página web se guarda en la página de inicio de un iPad).
+
+No te preocupes demasiado sobre la implementación de todos estos tipos de iconos por el momento; se trata de una característica bastante avanzada y no se espera que tengas conocimientos de ello para avanzar en el curso. El propósito principal aquí es darte a conocer estos elementos por si te los encuentras mientras examinas el código fuente de otros sitios web.
+
+> **Nota:** Si tu sitio web utiliza una política de seguridad de contenido (_content security policy o CSP_) para mejorar la seguridad, la política afecta al `favicon`. Si te encuentras con problemas como que el `favicon` no se carga, comprueba que la respuesta a {{HTTPHeader("Content-Security-Policy")}} del `header` [Content-Security-Policy]() para la [directriz `img-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src) en la cabecera no impide el acceso a este.
+
+## Aplicar CSS y JavaScript a HTML
+
+Prácticamente todos los sitios web usan {{Glossary("CSS")}} para darles un buen aspecto y {{Glossary("JavaScript")}} para añadir funcionalidades interactivas, como reproductores de vídeo, mapas, juegos y demás. La manera más habitual de añadir CSS y JavaScript a una página web es con los elementos `<link>` y el elemento `<script>`, respectivamente.
+
+- El elemento {{HTMLElement("link")}} siempre debe ir dentro del {{HTMLElement("head")}} de tu documento. Este toma dos atributos, `rel="stylesheet"`, que indica que es la hoja de estilo del documento, y `href`, que contiene la ruta al archivo de la hoja de estilo:
+
+  ```html
+  <link rel="stylesheet" href="my-css-file.css">
+  ```
+
+- El elemento `<script>` también debería ir en el `head`, y debería incluir un atributo `src` con la ruta al JavaScript que quieres cargar, y `defer`, que básicamente le dice al navegador que cargue el JavaScript al mismo tiempo que el HTML de la página. Esto es útil porque hace que todo el HTML se cargue antes de ejecutar el JavaScript, para que no haya errores porque el JavaScript ha intentado acceder a un elemento HTML que todavía no existe. De hecho hay múltiples formas de gestionar la carga del JavaScript en una página, pero esta es «a prueba de bombas» para los navegadores modernos (para el resto de las formas, lee el artículo {{web.link("/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript#Script_loading_strategies", "Estrategias de carga de scripts")}}).
+
+  ```html
+  <script src="my-js-file.js"></script>
+  ```
+
+  > **Nota:** El elemento `<script>` puede parecer un elemento vacío pero no lo es, y por lo tanto necesita una etiqueta de cierre. En vez de apuntar a un archivo de `script` externo, también puedes colocar tu código dentro del elemento `<script>`.
+
+### Aprendizaje activo: aplicar CSS y JavaScript a una página
+
+1.  Para iniciar este aprendizaje activo, haz una copia de nuestros archivos [meta-example.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html), [script.js](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/script.js) y [style.css](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/style.css), y guárdalos en un mismo directorio de tu ordenador. Asegúrate de que se guardan con los nombres y extensiones correctas.
+2.  Abre el archivo HTML tanto en tu navegador como en tu editor de texto.
+3.  Sigue la información facilitada anteriormente y añade los elementos `<link>` y `<script>` a tu HTML para aplicarle CSS y JavaScript.
+
+Si lo has hecho correctamente, al guardar tu HTML y actualizar tu navegador, deberías poder ver que las cosas han cambiado:
+
+![Ejemplo que muestra una página con CSS y JavaScript aplicados. El CSS ha hecho que la página se vuelva verde, mientras que JavaScript ha agregado una lista dinámica a la página](https://mdn.mozillademos.org/files/12359/js-and-css.png)
+
+- El JavaScript ha añadido una lista vacía a la página. Ahora, cuando haces clic en cualquier sitio de la lista, aparece un cuadro de diálogo que te solicita que introduzcas el texto para un nuevo elemento de la lista. Cuando pulsas el botón OK, se añade a la lista el elemento con el texto nuevo. Cuando haces clic a un elemento de la lista aparece un cuadro de diálogo que te permite cambiar el texto del elemento.
+- El CSS ha pintado el fondo de verde y ha agrandado el texto. También ha aplicado estilo a algún contenido que el JavaScript ha añadido a la página (la barra roja con el borde negro es el estilo que el CSS ha aplicado a la lista generada con JavaScript).
+
+> **Nota:** Si te encallas en este ejercicio y no logras ejecutar los archivos CSS/JS, comprueba tu página de ejemplo [css-and-js.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/css-and-js.html).
+
+## Establecer el idioma principal del documento
+
+Por último, merece la pena mencionar que puedes (y realmente deberías) especificar el idioma de tu página. Esto se puede hacer añadiendo el atributo {{web.link("/es/docs/Web/HTML/Global_attributes/lang", "lang")}} a la etiqueta de apertura del HTML (como se ve en el [meta-example.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html) y se muestra abajo).
+
+```html
+<html lang="es-MX">
+```
+
+Esto resulta útil en muchos sentidos. Los motores de búsqueda indizarán tu documento HTML de modo más efectivo si estableces el idioma (permitiendo, por ejemplo, que aparezca correctamente en los resultados del idioma especificado), y resulta útil para que las personas con discapacidad visual que utilizan los lectores de pantalla (por ejemplo, la palabra «six» existe tanto en francés como en inglés, pero su pronunciación es diferente).
+
+También puedes establecer que las subsecciones de tu documento se reconozcan en diferentes idiomas. Por ejemplo, podemos establecer que nuestra sección de japonés se reconozca como japonés, de la siguiente manera:
+
+```html
+<p>Ejemplo Japonés: <span lang="ja">ご飯が熱い。</span>.</p>
+```
+
+El estándar {{interwiki("wikipedia", "ISO_639-1")}} define estos códigos. Puedes encontrar más información sobre ello en [Etiquetas de idioma en HTML y XML](https://www.w3.org/International/articles/language-tags/).
+
+## Resumen
+
+Esto marca el final de nuestra guía rápida del {{Glossary("head")}} de HTML — aún hay muchas más cosas que puedes hacer aquí, pero una guía exhaustiva puede ser aburrida y confusa a estas alturas, ¡y nosotros queremos darte una idea de las cuestiones más comunes con las que te encontrarás aquí por ahora! En el siguiente artículo veremos los fundamentos de texto de HTML.
+
+{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}
+
+## En este módulo
+
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "¿Qué hay en el «head»? Metadatos en HTML")}}
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Fundamentos de texto HTML")}}
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Creando hipervínculos")}}
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Formateo de texto avanzado")}}
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Estructura web y documentación")}}
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Depurar HTML")}}
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Marcado para una carta")}}
+- {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Estructuración del contenido de una página")}}
diff --git a/files/es/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html b/files/es/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html
deleted file mode 100644
index 6eeba00f9aba75..00000000000000
--- a/files/es/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html
+++ /dev/null
@@ -1,366 +0,0 @@
----
-title: Agregar Gráficos Vectoriales a la Web
-slug: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web
-tags:
-  - Aprender
-  - Guía
-  - HTML
-  - Imagenes
-  - Principiante
-  - Raster
-  - SVG
-  - Vector
-  - graficos
-  - iframe
-  - img
-translation_of: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</div>
-
-<div class="summary">
-<p>Los gráficos vectoriales son muy útiles en muchas circunstancias — tienen tamaño de archivo pequeños y son altamente escalables, por lo que no se pixelan cuando se amplían a un tamaño más grande. En este artículo le mostraremos cómo incluir uno en su página web.</p>
-</div>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prerequisitos:</th>
-   <td>Debe conocer los <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">conceptos básicos de HTML</a> y cómo <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">insertar imágenes en su documento</a></td>
-  </tr>
-  <tr>
-   <th scope="row">Objetivo:</th>
-   <td>Aprender a incrustar una imagen SVG (vector) en una página web.</td>
-  </tr>
- </tbody>
-</table>
-
-<div class="note">
-<p><strong>Nota</strong>: Este artículo no tiene la intención de enseñarte SVG; solo mostrarte qué es, y cómo agregarlo a las páginas web.</p>
-</div>
-
-<h2 id="¿Qué_son_los_gráficos_vectoriales">¿Qué son los gráficos vectoriales?</h2>
-
-<p>En la web, trabajarás con dos tipos de imágenes — <strong>imágenes rasterizadas</strong>, e <strong>imágenes vectoriales</strong>:</p>
-
-<ul>
- <li><strong>Las imágenes ráster</strong> se definen mediante una cuadrícula de píxeles — un archivo de imagen rasterizado contiene información que muestra exactamente dónde se colocará cada píxel y exactamente de qué color debe ser. Los formatos de ráster web populares incluyen mapa de bits (<code>.bmp</code>), PNG (<code>.png</code>), JPEG (<code>.jpg</code>), and GIF (<code>.gif</code>.)</li>
- <li><strong>Las imágenes vectoriales</strong> se definen mediante algoritmos — un archivo de imagen vectorial contiene definiciones de forma y ruta que la computadora puede usar para determinar cómo debería verse la imagen cuando se representa en la pantalla. El formato {{glossary("SVG")}} nos permite crear poderosos gráficos vectoriales para usar en la Web.</li>
-</ul>
-
-<p>Para darte una idea de la diferencia entre los dos, veamos un ejemplo. Puede encontrar este ejemplo en vivo en nuestro repositorio de Github como <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/adding-vector-graphics-to-the-web/vector-versus-raster.html">vector-versus-raster.html</a> — muestra dos imágenes aparentemente idénticas una al lado de la otra, de una estrella roja con una sombra negra. La diferencia es que el de la izquierda es un PNG y el de la derecha es una imagen SVG.</p>
-
-<p>La diferencia se hace evidente cuando amplía la página — la imagen PNG se pixela a medida que se acerca porque contiene información sobre dónde debería estar cada píxel (y de qué color). Cuando se amplía, cada píxel simplemente aumenta de tamaño para llenar varios píxeles en la pantalla, por lo que la imagen comienza a verse borrosa. Sin embargo, la imagen vectorial sigue luciendo agradable y nítida, porque no importa el tamaño que tenga, los algoritmos se utilizan para resolver las formas en la imagen, y los valores simplemente se escalan a medida que aumenta.</p>
-
-<p><img alt="Two star images" src="https://mdn.mozillademos.org/files/12866/raster-vector-default-size.png" style="display: block; height: 112px; margin: 0px auto; width: 223px;"></p>
-
-<p><img alt="Two star images zoomed in, one crisp and the other blurry" src="https://mdn.mozillademos.org/files/12868/raster-vector-zoomed.png" style="display: block; height: 328px; margin: 0px auto; width: 677px;"></p>
-
-<div class="note">
-<p><strong>Nota</strong>: Las imágenes de arriba son en realidad todos PNG, con la estrella de la izquierda en cada caso representando una imagen rasterizada y la estrella de la derecha representando una imagen vectorial. Nuevamente, vaya a la demostración de vector-versus-raster.html para ver un ejemplo real.</p>
-</div>
-
-<p>Además, los archivos de imágenes vectoriales son mucho más ligeros que sus equivalentes ráster, porque solo necesitan contener un puñado de algoritmos, en lugar de información sobre cada píxel de la imagen individualmente.</p>
-
-<h2 id="¿Qué_es_SVG">¿Qué es SVG?</h2>
-
-<p><a href="/en-US/docs/Web/SVG">SVG</a> es un lenguaje basado en {{glossary("XML")}}-para describir imágenes vectoriales. Básicamente es un marcado, como HTML, excepto que tiene muchos elementos diferentes para definir las formas que desea que aparezcan en su imagen y los efectos que desea aplicar a esas formas. SVG es para marcar gráficos, no contenido. En el extremo más simple del espectro, tienes elementos para crear formas simples, como {{svgelement("circle")}} and {{svgelement("rect")}}. Las funciones SVG más avanzadas incluyen {{svgelement("feColorMatrix")}} (transformar colores usando una matriz de transformación), {{svgelement("animate")}} (animar partes de su gráfico vectorial), and {{svgelement("mask")}} (aplica una máscara sobre la parte superior de tu imagen).</p>
-
-<p>Como ejemplo simple, el siguiente código crea un círculo y un rectángulo:</p>
-
-<pre class="brush: html notranslate">&lt;svg version="1.1"
-     baseProfile="full"
-     width="300" height="200"
-     xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;rect width="100%" height="100%" fill="black" /&gt;
-  &lt;circle cx="150" cy="100" r="90" fill="blue" /&gt;
-&lt;/svg&gt;</pre>
-
-<p>Esto crea la siguiente salida:</p>
-
-<p>{{ EmbedLiveSample('What_is_SVG', 300, 200, "", "", "hide-codepen-jsfiddle") }}</p>
-
-<p>En el ejemplo anterior, puede tener la impresión de que SVG es fácil de codificar manualmente. Sí, puede codificar manualmente SVG simple en un editor de texto, pero para una imagen compleja, esto rápidamente comienza a ser muy difícil. Para crear imágenes SVG, la mayoría de la gente usa un editor de gráficos vectoriales como Inkscape o Illustrator. Estos paquetes le permiten crear una variedad de ilustraciones utilizando varias herramientas gráficas y crear aproximaciones de fotos (por ejemplo, la función Trazar mapa de bits de Inkscape).</p>
-
-<p>SVG tiene algunas ventajas adicionales además de las descritas hasta ahora:</p>
-
-<ul>
- <li>El texto en imágenes vectoriales sigue siendo accesible (lo que también beneficia a su {{glossary("SEO")}}).</li>
- <li>Los SVG se prestan bien al estilo / scripting, porque cada componente de la imagen es un elemento que se puede diseñar a través de CSS o scripting a través de JavaScript.</li>
-</ul>
-
-<p>Entonces, ¿por qué alguien querría usar gráficos rasterizados sobre SVG? Bueno, SVG tiene algunas desventajas:</p>
-
-<ul>
- <li>SVG puede complicarse rápidamente, lo que significa que el tamaño de los archivos puede crecer. Además, los SVG complejos también pueden requerir un tiempo de procesamiento significativo en el navegador.</li>
- <li>SVG puede ser más difícil de crear que las imágenes rasterizadas, dependiendo del tipo de imagen que intente crear.</li>
- <li>SVG no es compatible con navegadores más antiguos, por lo que puede no ser adecuado si necesita admitir versiones anteriores de Internet Explorer con su sitio web (SVG comenzó a ser compatible a partir de IE9).</li>
-</ul>
-
-<p>Los gráficos rasterizados son posiblemente mejores para imágenes de precisión complejas, como fotos, por las razones descritas anteriormente.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: En Inkscape, guarde sus archivos como SVG simple para ahorrar espacio. Además, consulte este artículo que describe<a href="http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Inkscape.html"> </a><a href="http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Inkscape.html">cómo preparar SVGs para la web</a>.</p>
-</div>
-
-<h2 id="Agregar_SVG_a_sus_páginas">Agregar SVG a sus páginas</h2>
-
-<p>En esta sección, veremos las diferentes formas en las que puede agregar gráficos vectoriales SVG a sus páginas web.</p>
-
-<h3 id="La_forma_rápida_htmlelementimg">La forma rápida: {{htmlelement("img")}}</h3>
-
-<p>Para incrustar un SVG a través de un elemento {{htmlelement ("img")}}, solo necesita hacer referencia a él en el atributo src como es de esperar. Necesitará un atributo de altura o ancho (o ambos si su SVG no tiene una relación de aspecto inherente). Si aún no lo ha hecho, lea <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Imágenes en HTML</a>.</p>
-
-<pre class="brush: html notranslate">&lt;img
-    src="equilateral.svg"
-    alt="triangle with all three sides equal"
-    height="87"
-    width="100" /&gt;</pre>
-
-<h4 id="Pros">Pros</h4>
-
-<ul>
- <li>
-  <p>Sintaxis de imagen rápida y familiar con equivalente de texto integrado disponible en el atributo <code>alt</code>.</p>
- </li>
- <li>Puede convertir la imagen en un hipervínculo fácilmente anidando el <code>&lt;img&gt;</code> dentro de un elemento {{htmlelement ("a")}}.</li>
- <li>El navegador puede almacenar en caché el archivo SVG, lo que da como resultado tiempos de carga más rápidos para cualquier página que utilice la imagen cargada en el futuro.</li>
-</ul>
-
-<h4 id="Cons">Cons</h4>
-
-<ul>
- <li>No puede manipular la imagen con JavaScript.</li>
- <li>Si desea controlar el contenido SVG con CSS, debe incluir estilos CSS en línea en su código SVG. (Las hojas de estilo externas invocadas desde el archivo SVG no tienen efecto).</li>
- <li>No puede cambiar el estilo de la imagen con pseudoclases CSS (como <code>:focus</code>).</li>
-</ul>
-
-<h3 id="Solución_de_problemas_y_compatibilidad_con_varios_navegadores">Solución de problemas y compatibilidad con varios navegadores</h3>
-
-<p>Para los navegadores que no admiten SVG (IE 8 y versiones anteriores, Android 2.3 y versiones anteriores), puede hacer referencia a un PNG o JPG de su atributo src y usar un atributo {{htmlattrxref ("srcset", "img")}} ( que solo los navegadores recientes reconocen) para hacer referencia al SVG. Siendo este el caso, solo los navegadores compatibles cargarán el SVG; los navegadores más antiguos cargarán el PNG en su lugar:</p>
-
-<pre class="brush: html notranslate">&lt;img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg"&gt;</pre>
-
-<p>También puede usar SVG como imágenes de fondo CSS, como se muestra a continuación. En el siguiente código, los navegadores más antiguos se quedarán con el PNG que entienden, mientras que los navegadores más nuevos cargarán el SVG:</p>
-
-<pre class="brush: css notranslate"><code>background: url("fallback.png") no-repeat center;</code>
-<code>background-image: url("image.svg");
-background-size: contain;</code></pre>
-
-<p>Al igual que el método <code>&lt;img&gt;</code> descrito anteriormente, la inserción de SVG con imágenes de fondo CSS significa que el SVG no se puede manipular con JavaScript y también está sujeto a las mismas limitaciones de CSS.</p>
-
-<p>Si sus SVG no se muestran en absoluto, podría deberse a que su servidor no está configurado correctamente. Si ese es el problema, este <a href="/en-US/docs/Web/SVG/Tutorial/Getting_Started#A_Word_on_Webservers">artículo le indicará la dirección correcta</a>.</p>
-
-<h3 id="Cómo_incluir_código_SVG_dentro_de_su_HTML">Cómo incluir código SVG dentro de su HTML</h3>
-
-<p>También puede abrir el archivo SVG en un editor de texto, copiar el código SVG y pegarlo en su documento HTML; esto a veces se denomina poner su SVG en línea o SVG en línea. Asegúrese de que su fragmento de código SVG comience y termine con las etiquetas &lt;svg&gt; &lt;/svg&gt; (no incluya nada fuera de ellas). Aquí tiene un ejemplo muy simple de lo que puede pegar en su documento:</p>
-
-<pre class="brush: html notranslate">&lt;svg width="300" height="200"&gt;
-    &lt;rect width="100%" height="100%" fill="green" /&gt;
-&lt;/svg&gt;
-</pre>
-
-<h4 id="Pros_2">Pros</h4>
-
-<ul>
- <li>Poner su SVG en línea ahorra una solicitud HTTP y, por lo tanto, puede reducir un poco su tiempo de carga.</li>
- <li>Puede asignar clases e identificadores a elementos SVG y aplicarles estilo con CSS, ya sea dentro del SVG o donde quiera que ponga las reglas de estilo CSS para su documento HTML. De hecho, puede utilizar cualquier atributo de presentación SVG como propiedad CSS.</li>
- <li>SVG en línea es el único enfoque que le permite usar interacciones CSS (como <code>:focus</code>) y animaciones CSS en su imagen SVG (incluso en su hoja de estilo normal).</li>
- <li>Puede convertir el marcado SVG en un hipervínculo envolviéndolo en un elemento {{htmlelement ("a")}}.</li>
-</ul>
-
-<h4 id="Cons_2">Cons</h4>
-
-<ul>
- <li>Este método solo es adecuado si está utilizando SVG en un solo lugar. La duplicación hace que el mantenimiento requiera muchos recursos.</li>
- <li>El código SVG adicional aumenta el tamaño de su archivo HTML.</li>
- <li>El navegador no puede almacenar en caché SVG en línea, ya que almacenaría en caché activos de imagen normales, por lo que las páginas que incluyen la imagen no se cargarán más rápido después de que se cargue la primera página que contiene la imagen.</li>
- <li>Puede incluir respaldo en un elemento {{svgelement ("foreignObject")}}, pero los navegadores que admiten SVG aún descargan las imágenes de respaldo. Debe sopesar si la sobrecarga adicional realmente vale la pena, solo para admitir navegadores obsoletos.</li>
-</ul>
-
-<ul>
-</ul>
-
-<h3 id="Cómo_incrustar_un_SVG_con_un_htmlelementiframe">Cómo incrustar un SVG con un {{htmlelement("iframe")}}</h3>
-
-<p>Puede abrir imágenes SVG en su navegador al igual que las páginas web. Entonces, incrustar un documento SVG con un <code>&lt;iframe&gt;</code> se realiza tal como lo estudiamos en <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">De &lt;object&gt; a &lt;iframe&gt; </a><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">—</a><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies"> otras tecnologías de incrustación</a>.</p>
-
-<p>Aquí hay una revisión rápida:</p>
-
-<pre class="brush: html notranslate">&lt;iframe src="triangle.svg" width="500" height="500" sandbox&gt;
-    &lt;img src="triangle.png" alt="Triangle with three unequal sides" /&gt;
-&lt;/iframe&gt;</pre>
-
-<p>Este definitivamente no es el mejor método para elegir:</p>
-
-<h4 id="Cons_3">Cons</h4>
-
-<ul>
- <li>Los <code>iframes</code> tienen un mecanismo de respaldo, como puede ver, pero los navegadores solo muestran el respaldo si carecen por completo de soporte para los iframes.</li>
- <li>Además, a menos que el SVG y su página web actual tengan el mismo {{glossary('origin')}}, no puede usar JavaScript en su página web principal para manipular el SVG.</li>
-</ul>
-
-<h2 id="Aprendizaje_activo_jugar_con_SVG">Aprendizaje activo: jugar con SVG</h2>
-
-<p>En esta sección de aprendizaje activo, nos gustaría que simplemente probaras a jugar con algunos SVG por diversión. En la entrada a continuación, verá que ya le hemos proporcionado algunas muestras para que pueda comenzar. También puedes ir a la <a href="/en-US/docs/Web/SVG/Element">Referencia de Elementos SVG</a>, descubrir más detalles sobre otros juguetes que puedes usar en SVG y probarlos también. Esta sección trata sobre cómo practicar sus habilidades de investigación y divertirse.</p>
-
-<p>Si se queda atascado y no puede hacer que su código funcione, siempre puede restablecerlo con el <em>botón Restablecer</em>.</p>
-
-<div class="hidden">
-<h6 id="Playable_code">Playable code</h6>
-
-<pre class="brush: html notranslate">&lt;h2&gt;Live output&lt;/h2&gt;
-
-&lt;div class="output" style="min-height: 50px;"&gt;
-&lt;/div&gt;
-
-&lt;h2&gt;Editable code&lt;/h2&gt;
-&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
-
-&lt;textarea id="code" class="input" style="width: 95%;min-height: 200px;"&gt;
-  &lt;svg width="100%" height="100%"&gt;
-    &lt;rect width="100%" height="100%" fill="red" /&gt;
-    &lt;circle cx="100%" cy="100%" r="150" fill="blue" stroke="black" /&gt;
-    &lt;polygon points="120,0 240,225 0,225" fill="green"/&gt;
-    &lt;text x="50" y="100" font-family="Verdana" font-size="55"
-          fill="white" stroke="black" stroke-width="2"&gt;
-            Hello!
-    &lt;/text&gt;
-  &lt;/svg&gt;
-&lt;/textarea&gt;
-
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="reset" type="button" value="Reset"&gt;
-  &lt;input id="solution" type="button" value="Show solution" disabled&gt;
-&lt;/div&gt;</pre>
-
-<pre class="brush: css notranslate">html {
-  font-family: sans-serif;
-}
-
-h2 {
-  font-size: 16px;
-}
-
-.a11y-label {
-  margin: 0;
-  text-align: right;
-  font-size: 0.7rem;
-  width: 98%;
-}
-
-body {
-  margin: 10px;
-  background: #f5f9fa;
-}</pre>
-
-<pre class="brush: js notranslate">const textarea = document.getElementById('code');
-const reset = document.getElementById('reset');
-const solution = document.getElementById('solution');
-const output = document.querySelector('.output');
-let code = textarea.value;
-let userEntry = textarea.value;
-
-function updateCode() {
-  output.innerHTML = textarea.value;
-}
-
-reset.addEventListener('click', function() {
-  textarea.value = code;
-  userEntry = textarea.value;
-  solutionEntry = htmlSolution;
-  solution.value = 'Show solution';
-  updateCode();
-});
-
-solution.addEventListener('click', function() {
-  if(solution.value === 'Show solution') {
-    textarea.value = solutionEntry;
-    solution.value = 'Hide solution';
-  } else {
-    textarea.value = userEntry;
-    solution.value = 'Show solution';
-  }
-  updateCode();
-});
-
-const htmlSolution = '';
-let solutionEntry = htmlSolution;
-
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
-
-// stop tab key tabbing out of textarea and
-// make it write a tab at the caret position instead
-
-textarea.onkeydown = function(e){
-  if (e.keyCode === 9) {
-    e.preventDefault();
-    insertAtCaret('\t');
-  }
-
-  if (e.keyCode === 27) {
-    textarea.blur();
-  }
-};
-
-function insertAtCaret(text) {
-  const scrollPos = textarea.scrollTop;
-  const caretPos = textarea.selectionStart;
-  const front = (textarea.value).substring(0, caretPos);
-  const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
-
-  textarea.value = front + text + back;
-  caretPos = caretPos + text.length;
-  textarea.selectionStart = caretPos;
-  textarea.selectionEnd = caretPos;
-  textarea.focus();
-  textarea.scrollTop = scrollPos;
-}
-
-// Update the saved userCode every time the user updates the text area code
-
-textarea.onkeyup = function(){
-  // We only want to save the state when the user code is being shown,
-  // not the solution, so that solution is not saved over the user code
-  if(solution.value === 'Show solution') {
-    userEntry = textarea.value;
-  } else {
-    solutionEntry = textarea.value;
-  }
-
-  updateCode();
-};</pre>
-</div>
-
-<p>{{ EmbedLiveSample('Playable_code', 700, 500, "", "", "hide-codepen-jsfiddle") }}</p>
-
-<h2 id="Resumen">Resumen</h2>
-
-<p>Este artículo le ha proporcionado un recorrido rápido por qué son los gráficos vectoriales y SVG, por qué es útil conocerlos y cómo incluir SVG en sus páginas web. Nunca tuvo la intención de ser una guía completa para aprender SVG, solo un indicador para que sepa qué es SVG si lo encuentra en sus viajes por la Web. Así que no se preocupe si todavía no siente que es un experto en SVG. Hemos incluido algunos enlaces a continuación que pueden ayudarlo si desea ir y obtener más información sobre cómo funciona.</p>
-
-<p>En el próximo artículo de este módulo, exploraremos las imágenes adaptables en detalle, observando las herramientas que tiene HTML para permitirle hacer que sus imágenes funcionen mejor en diferentes dispositivos.</p>
-
-<h2 id="Vea_también">Vea también</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/SVG/Tutorial/Getting_Started">Tutorial de SVG</a> en MDN</li>
- <li><a href="http://thenewcode.com/744/Making-SVG-Responsive">Consejos rápidos para SVGs adaptables</a></li>
- <li><a href="https://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/">Tutorial de Sara Soueidan sobre imágenes SVG adaptables</a></li>
- <li><a href="https://www.w3.org/TR/SVG-access/">Beneficios de accesibilidad de SVG</a></li>
- <li><a href="https://css-tricks.com/scale-svg/">Cómo escalar SVGs</a> (¡no es tan simple como los gráficos rasterizados!)</li>
-</ul>
-
-<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</p>
-
-<h2 id="En_este_módulo">En este módulo</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Imágenes en HTML</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Contenido de Audio y Video</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">De &lt;object&gt; a &lt;iframe&gt; - otras tecnologías de incrustación</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Agregar gráficos vectoriales a la web</a></li>
- <li><a href="/es/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Imágenes adaptables</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Página de presentación de Mozilla</a></li>
-</ul>
diff --git a/files/es/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md b/files/es/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md
new file mode 100644
index 00000000000000..5f6b61099412f9
--- /dev/null
+++ b/files/es/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md
@@ -0,0 +1,353 @@
+---
+title: Agregar Gráficos Vectoriales a la Web
+slug: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web
+tags:
+  - Aprender
+  - Guía
+  - HTML
+  - Imagenes
+  - Principiante
+  - Raster
+  - SVG
+  - Vector
+  - graficos
+  - iframe
+  - img
+translation_of: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web
+---
+{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}
+
+Los gráficos vectoriales son muy útiles en muchas circunstancias — tienen tamaño de archivo pequeños y son altamente escalables, por lo que no se pixelan cuando se amplían a un tamaño más grande. En este artículo le mostraremos cómo incluir uno en su página web.
+
+<table>
+  <tbody>
+    <tr>
+      <th scope="row">Prerequisitos:</th>
+      <td>
+        Debe conocer los
+        <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML"
+          >conceptos básicos de HTML</a
+        >
+        y cómo
+        <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML"
+          >insertar imágenes en su documento</a
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Objetivo:</th>
+      <td>Aprender a incrustar una imagen SVG (vector) en una página web.</td>
+    </tr>
+  </tbody>
+</table>
+
+> **Nota:** Este artículo no tiene la intención de enseñarte SVG; solo mostrarte qué es, y cómo agregarlo a las páginas web.
+
+## ¿Qué son los gráficos vectoriales?
+
+En la web, trabajarás con dos tipos de imágenes — **imágenes rasterizadas**, e **imágenes vectoriales**:
+
+- **Las imágenes ráster** se definen mediante una cuadrícula de píxeles — un archivo de imagen rasterizado contiene información que muestra exactamente dónde se colocará cada píxel y exactamente de qué color debe ser. Los formatos de ráster web populares incluyen mapa de bits (`.bmp`), PNG (`.png`), JPEG (`.jpg`), and GIF (`.gif`.)
+- **Las imágenes vectoriales** se definen mediante algoritmos — un archivo de imagen vectorial contiene definiciones de forma y ruta que la computadora puede usar para determinar cómo debería verse la imagen cuando se representa en la pantalla. El formato {{glossary("SVG")}} nos permite crear poderosos gráficos vectoriales para usar en la Web.
+
+Para darte una idea de la diferencia entre los dos, veamos un ejemplo. Puede encontrar este ejemplo en vivo en nuestro repositorio de Github como [vector-versus-raster.html](https://mdn.github.io/learning-area/html/multimedia-and-embedding/adding-vector-graphics-to-the-web/vector-versus-raster.html) — muestra dos imágenes aparentemente idénticas una al lado de la otra, de una estrella roja con una sombra negra. La diferencia es que el de la izquierda es un PNG y el de la derecha es una imagen SVG.
+
+La diferencia se hace evidente cuando amplía la página — la imagen PNG se pixela a medida que se acerca porque contiene información sobre dónde debería estar cada píxel (y de qué color). Cuando se amplía, cada píxel simplemente aumenta de tamaño para llenar varios píxeles en la pantalla, por lo que la imagen comienza a verse borrosa. Sin embargo, la imagen vectorial sigue luciendo agradable y nítida, porque no importa el tamaño que tenga, los algoritmos se utilizan para resolver las formas en la imagen, y los valores simplemente se escalan a medida que aumenta.
+
+![Two star images](https://mdn.mozillademos.org/files/12866/raster-vector-default-size.png)
+
+![Two star images zoomed in, one crisp and the other blurry](https://mdn.mozillademos.org/files/12868/raster-vector-zoomed.png)
+
+> **Nota:** Las imágenes de arriba son en realidad todos PNG, con la estrella de la izquierda en cada caso representando una imagen rasterizada y la estrella de la derecha representando una imagen vectorial. Nuevamente, vaya a la demostración de vector-versus-raster.html para ver un ejemplo real.
+
+Además, los archivos de imágenes vectoriales son mucho más ligeros que sus equivalentes ráster, porque solo necesitan contener un puñado de algoritmos, en lugar de información sobre cada píxel de la imagen individualmente.
+
+## ¿Qué es SVG?
+
+[SVG](/es/docs/Web/SVG) es un lenguaje basado en {{glossary("XML")}}-para describir imágenes vectoriales. Básicamente es un marcado, como HTML, excepto que tiene muchos elementos diferentes para definir las formas que desea que aparezcan en su imagen y los efectos que desea aplicar a esas formas. SVG es para marcar gráficos, no contenido. En el extremo más simple del espectro, tienes elementos para crear formas simples, como {{svgelement("circle")}} and {{svgelement("rect")}}. Las funciones SVG más avanzadas incluyen {{svgelement("feColorMatrix")}} (transformar colores usando una matriz de transformación), {{svgelement("animate")}} (animar partes de su gráfico vectorial), and {{svgelement("mask")}} (aplica una máscara sobre la parte superior de tu imagen).
+
+Como ejemplo simple, el siguiente código crea un círculo y un rectángulo:
+
+```html
+<svg version="1.1"
+     baseProfile="full"
+     width="300" height="200"
+     xmlns="http://www.w3.org/2000/svg">
+  <rect width="100%" height="100%" fill="black" />
+  <circle cx="150" cy="100" r="90" fill="blue" />
+</svg>
+```
+
+Esto crea la siguiente salida:
+
+{{ EmbedLiveSample('What_is_SVG', 300, 200, "", "", "hide-codepen-jsfiddle") }}
+
+En el ejemplo anterior, puede tener la impresión de que SVG es fácil de codificar manualmente. Sí, puede codificar manualmente SVG simple en un editor de texto, pero para una imagen compleja, esto rápidamente comienza a ser muy difícil. Para crear imágenes SVG, la mayoría de la gente usa un editor de gráficos vectoriales como Inkscape o Illustrator. Estos paquetes le permiten crear una variedad de ilustraciones utilizando varias herramientas gráficas y crear aproximaciones de fotos (por ejemplo, la función Trazar mapa de bits de Inkscape).
+
+SVG tiene algunas ventajas adicionales además de las descritas hasta ahora:
+
+- El texto en imágenes vectoriales sigue siendo accesible (lo que también beneficia a su {{glossary("SEO")}}).
+- Los SVG se prestan bien al estilo / scripting, porque cada componente de la imagen es un elemento que se puede diseñar a través de CSS o scripting a través de JavaScript.
+
+Entonces, ¿por qué alguien querría usar gráficos rasterizados sobre SVG? Bueno, SVG tiene algunas desventajas:
+
+- SVG puede complicarse rápidamente, lo que significa que el tamaño de los archivos puede crecer. Además, los SVG complejos también pueden requerir un tiempo de procesamiento significativo en el navegador.
+- SVG puede ser más difícil de crear que las imágenes rasterizadas, dependiendo del tipo de imagen que intente crear.
+- SVG no es compatible con navegadores más antiguos, por lo que puede no ser adecuado si necesita admitir versiones anteriores de Internet Explorer con su sitio web (SVG comenzó a ser compatible a partir de IE9).
+
+Los gráficos rasterizados son posiblemente mejores para imágenes de precisión complejas, como fotos, por las razones descritas anteriormente.
+
+> **Nota:** En Inkscape, guarde sus archivos como SVG simple para ahorrar espacio. Además, consulte este artículo que describe[ ](http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Inkscape.html)[cómo preparar SVGs para la web](http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Inkscape.html).
+
+## Agregar SVG a sus páginas
+
+En esta sección, veremos las diferentes formas en las que puede agregar gráficos vectoriales SVG a sus páginas web.
+
+### La forma rápida: {{htmlelement("img")}}
+
+Para incrustar un SVG a través de un elemento {{htmlelement ("img")}}, solo necesita hacer referencia a él en el atributo src como es de esperar. Necesitará un atributo de altura o ancho (o ambos si su SVG no tiene una relación de aspecto inherente). Si aún no lo ha hecho, lea [Imágenes en HTML](/es/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML).
+
+```html
+<img
+    src="equilateral.svg"
+    alt="triangle with all three sides equal"
+    height="87"
+    width="100" />
+```
+
+#### Pros
+
+- Sintaxis de imagen rápida y familiar con equivalente de texto integrado disponible en el atributo `alt`.
+- Puede convertir la imagen en un hipervínculo fácilmente anidando el `<img>` dentro de un elemento {{htmlelement ("a")}}.
+- El navegador puede almacenar en caché el archivo SVG, lo que da como resultado tiempos de carga más rápidos para cualquier página que utilice la imagen cargada en el futuro.
+
+#### Cons
+
+- No puede manipular la imagen con JavaScript.
+- Si desea controlar el contenido SVG con CSS, debe incluir estilos CSS en línea en su código SVG. (Las hojas de estilo externas invocadas desde el archivo SVG no tienen efecto).
+- No puede cambiar el estilo de la imagen con pseudoclases CSS (como `:focus`).
+
+### Solución de problemas y compatibilidad con varios navegadores
+
+Para los navegadores que no admiten SVG (IE 8 y versiones anteriores, Android 2.3 y versiones anteriores), puede hacer referencia a un PNG o JPG de su atributo src y usar un atributo {{htmlattrxref ("srcset", "img")}} ( que solo los navegadores recientes reconocen) para hacer referencia al SVG. Siendo este el caso, solo los navegadores compatibles cargarán el SVG; los navegadores más antiguos cargarán el PNG en su lugar:
+
+```html
+<img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg">
+```
+
+También puede usar SVG como imágenes de fondo CSS, como se muestra a continuación. En el siguiente código, los navegadores más antiguos se quedarán con el PNG que entienden, mientras que los navegadores más nuevos cargarán el SVG:
+
+```css
+background: url("fallback.png") no-repeat center;
+background-image: url("image.svg");
+background-size: contain;
+```
+
+Al igual que el método `<img>` descrito anteriormente, la inserción de SVG con imágenes de fondo CSS significa que el SVG no se puede manipular con JavaScript y también está sujeto a las mismas limitaciones de CSS.
+
+Si sus SVG no se muestran en absoluto, podría deberse a que su servidor no está configurado correctamente. Si ese es el problema, este [artículo le indicará la dirección correcta](/es/docs/Web/SVG/Tutorial/Getting_Started#A_Word_on_Webservers).
+
+### Cómo incluir código SVG dentro de su HTML
+
+También puede abrir el archivo SVG en un editor de texto, copiar el código SVG y pegarlo en su documento HTML; esto a veces se denomina poner su SVG en línea o SVG en línea. Asegúrese de que su fragmento de código SVG comience y termine con las etiquetas \<svg> \</svg> (no incluya nada fuera de ellas). Aquí tiene un ejemplo muy simple de lo que puede pegar en su documento:
+
+```html
+<svg width="300" height="200">
+    <rect width="100%" height="100%" fill="green" />
+</svg>
+```
+
+#### Pros
+
+- Poner su SVG en línea ahorra una solicitud HTTP y, por lo tanto, puede reducir un poco su tiempo de carga.
+- Puede asignar clases e identificadores a elementos SVG y aplicarles estilo con CSS, ya sea dentro del SVG o donde quiera que ponga las reglas de estilo CSS para su documento HTML. De hecho, puede utilizar cualquier atributo de presentación SVG como propiedad CSS.
+- SVG en línea es el único enfoque que le permite usar interacciones CSS (como `:focus`) y animaciones CSS en su imagen SVG (incluso en su hoja de estilo normal).
+- Puede convertir el marcado SVG en un hipervínculo envolviéndolo en un elemento {{htmlelement ("a")}}.
+
+#### Cons
+
+- Este método solo es adecuado si está utilizando SVG en un solo lugar. La duplicación hace que el mantenimiento requiera muchos recursos.
+- El código SVG adicional aumenta el tamaño de su archivo HTML.
+- El navegador no puede almacenar en caché SVG en línea, ya que almacenaría en caché activos de imagen normales, por lo que las páginas que incluyen la imagen no se cargarán más rápido después de que se cargue la primera página que contiene la imagen.
+- Puede incluir respaldo en un elemento {{svgelement ("foreignObject")}}, pero los navegadores que admiten SVG aún descargan las imágenes de respaldo. Debe sopesar si la sobrecarga adicional realmente vale la pena, solo para admitir navegadores obsoletos.
+
+### Cómo incrustar un SVG con un {{htmlelement("iframe")}}
+
+Puede abrir imágenes SVG en su navegador al igual que las páginas web. Entonces, incrustar un documento SVG con un `<iframe>` se realiza tal como lo estudiamos en [De \<object> a \<iframe> ](/es/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies)[—](/es/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies)[ otras tecnologías de incrustación](/es/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies).
+
+Aquí hay una revisión rápida:
+
+```html
+<iframe src="triangle.svg" width="500" height="500" sandbox>
+    <img src="triangle.png" alt="Triangle with three unequal sides" />
+</iframe>
+```
+
+Este definitivamente no es el mejor método para elegir:
+
+#### Cons
+
+- Los `iframes` tienen un mecanismo de respaldo, como puede ver, pero los navegadores solo muestran el respaldo si carecen por completo de soporte para los iframes.
+- Además, a menos que el SVG y su página web actual tengan el mismo {{glossary('origin')}}, no puede usar JavaScript en su página web principal para manipular el SVG.
+
+## Aprendizaje activo: jugar con SVG
+
+En esta sección de aprendizaje activo, nos gustaría que simplemente probaras a jugar con algunos SVG por diversión. En la entrada a continuación, verá que ya le hemos proporcionado algunas muestras para que pueda comenzar. También puedes ir a la [Referencia de Elementos SVG](/es/docs/Web/SVG/Element), descubrir más detalles sobre otros juguetes que puedes usar en SVG y probarlos también. Esta sección trata sobre cómo practicar sus habilidades de investigación y divertirse.
+
+Si se queda atascado y no puede hacer que su código funcione, siempre puede restablecerlo con el _botón Restablecer_.
+
+```html hidden
+<h2>Live output</h2>
+
+<div class="output" style="min-height: 50px;">
+</div>
+
+<h2>Editable code</h2>
+<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p>
+
+<textarea id="code" class="input" style="width: 95%;min-height: 200px;">
+<svg width="100%" height="100%">
+<rect width="100%" height="100%" fill="red" />
+<circle cx="100%" cy="100%" r="150" fill="blue" stroke="black" />
+<polygon points="120,0 240,225 0,225" fill="green"/>
+<text x="50" y="100" font-family="Verdana" font-size="55"
+fill="white" stroke="black" stroke-width="2">
+Hello!
+</text>
+</svg>
+</textarea>
+
+<div class="playable-buttons">
+<input id="reset" type="button" value="Reset">
+<input id="solution" type="button" value="Show solution" disabled>
+</div>
+```
+
+```css hidden
+html {
+font-family: sans-serif;
+}
+
+h2 {
+font-size: 16px;
+}
+
+.a11y-label {
+margin: 0;
+text-align: right;
+font-size: 0.7rem;
+width: 98%;
+}
+
+body {
+margin: 10px;
+background: #f5f9fa;
+}
+```
+
+```js hidden
+const textarea = document.getElementById('code');
+const reset = document.getElementById('reset');
+const solution = document.getElementById('solution');
+const output = document.querySelector('.output');
+let code = textarea.value;
+let userEntry = textarea.value;
+
+function updateCode() {
+output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+textarea.value = code;
+userEntry = textarea.value;
+solutionEntry = htmlSolution;
+solution.value = 'Show solution';
+updateCode();
+});
+
+solution.addEventListener('click', function() {
+if(solution.value === 'Show solution') {
+textarea.value = solutionEntry;
+solution.value = 'Hide solution';
+} else {
+textarea.value = userEntry;
+solution.value = 'Show solution';
+}
+updateCode();
+});
+
+const htmlSolution = '';
+let solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+if (e.keyCode === 9) {
+e.preventDefault();
+insertAtCaret('\t');
+}
+
+if (e.keyCode === 27) {
+textarea.blur();
+}
+};
+
+function insertAtCaret(text) {
+const scrollPos = textarea.scrollTop;
+const caretPos = textarea.selectionStart;
+const front = (textarea.value).substring(0, caretPos);
+const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+
+textarea.value = front + text + back;
+caretPos = caretPos + text.length;
+textarea.selectionStart = caretPos;
+textarea.selectionEnd = caretPos;
+textarea.focus();
+textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+// We only want to save the state when the user code is being shown,
+// not the solution, so that solution is not saved over the user code
+if(solution.value === 'Show solution') {
+userEntry = textarea.value;
+} else {
+solutionEntry = textarea.value;
+}
+
+updateCode();
+};
+```
+
+{{ EmbedLiveSample('Playable_code', 700, 500, "", "", "hide-codepen-jsfiddle") }}
+
+## Resumen
+
+Este artículo le ha proporcionado un recorrido rápido por qué son los gráficos vectoriales y SVG, por qué es útil conocerlos y cómo incluir SVG en sus páginas web. Nunca tuvo la intención de ser una guía completa para aprender SVG, solo un indicador para que sepa qué es SVG si lo encuentra en sus viajes por la Web. Así que no se preocupe si todavía no siente que es un experto en SVG. Hemos incluido algunos enlaces a continuación que pueden ayudarlo si desea ir y obtener más información sobre cómo funciona.
+
+En el próximo artículo de este módulo, exploraremos las imágenes adaptables en detalle, observando las herramientas que tiene HTML para permitirle hacer que sus imágenes funcionen mejor en diferentes dispositivos.
+
+## Vea también
+
+- [Tutorial de SVG](/es/docs/Web/SVG/Tutorial/Getting_Started) en MDN
+- [Consejos rápidos para SVGs adaptables](http://thenewcode.com/744/Making-SVG-Responsive)
+- [Tutorial de Sara Soueidan sobre imágenes SVG adaptables](https://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/)
+- [Beneficios de accesibilidad de SVG](https://www.w3.org/TR/SVG-access/)
+- [Cómo escalar SVGs](https://css-tricks.com/scale-svg/) (¡no es tan simple como los gráficos rasterizados!)
+
+{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}
+
+## En este módulo
+
+- [Imágenes en HTML](/es/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML)
+- [Contenido de Audio y Video](/es/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content)
+- [De \<object> a \<iframe> - otras tecnologías de incrustación](/es/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies)
+- [Agregar gráficos vectoriales a la web](/es/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web)
+- [Imágenes adaptables](/es/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)
+- [Página de presentación de Mozilla](/es/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page)
diff --git a/files/es/learn/html/multimedia_and_embedding/images_in_html/index.html b/files/es/learn/html/multimedia_and_embedding/images_in_html/index.html
deleted file mode 100644
index 3a05578c8f88c3..00000000000000
--- a/files/es/learn/html/multimedia_and_embedding/images_in_html/index.html
+++ /dev/null
@@ -1,510 +0,0 @@
----
-title: Imágenes en HTML
-slug: Learn/HTML/Multimedia_and_embedding/Images_in_HTML
-tags:
-  - Aprendiz
-  - Article
-  - HTML
-  - Imagenes
-  - captions
-  - figcaption
-  - img
-  - pie de imagen
-  - subtítulos
-  - texto alt
-translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML
----
-<div>
-<p>{{LearnSidebar}}</p>
-
-<p>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</p>
-</div>
-
-<p class="summary">Al principio, la web solo era texto y resultaba más bien aburrido. Afortunadamente, no pasó mucho tiempo antes de que se añadiera la capacidad de insertar imágenes (y otros tipos de contenido más interesantes) en las páginas web. Hay otros tipos de elementos multimedia que tener en cuenta, pero es lógico comenzar con el humilde elemento {{htmlelement("img")}} utilizado para insertar una imagen simple en una página web. En este artículo, veremos en detalle cómo usar este elemento, incluidos sus conceptos básicos y cómo añadir pies de imagen usando {{htmlelement("figure")}} y explicaremos cómo se relaciona con las imágenes de fondo en <a class="glossaryLink" href="/en-US/docs/Glossary/CSS" title="CSS: CSS (Cascading Style Sheets) is a declarative language that controls how webpages look in the browser.">CSS</a>.</p>
-
-<figure>
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prerrequisitos:</th>
-   <td>Conocimientos básicos de informática, tener el <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico">software básico instalado</a>, conocimientos básicos de cómo <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">trabajar con archivos</a>, estar familiarizado con los principios básicos de HTML (como se describe en <a href="/es/docs/Learn/HTML/Introduccion_a_HTML/iniciar">Empezar con el HTML</a>).</td>
-  </tr>
-  <tr>
-   <th scope="row">Objetivo:</th>
-   <td>Aprender cómo insertar imágenes simples en HTML y añadirles pies de imagen, y cómo se relacionan las imágenes HTML con las imágenes de fondo de CSS.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="¿Cómo_ponemos_una_imagen_en_una_página_web">¿Cómo ponemos una imagen en una página web?</h2>
-
-<p>Para poner una imagen simple en una página web, utilizamos el elemento {{htmlelement("img")}}. Se trata de un elemento vacío (lo que significa que no contiene texto o etiqueta de cierre) que requiere de por lo menos de un atributo para ser utilizado: <code>src</code> (a veces denominado por su nombre completo, <em>source</em>). El atributo <code>src</code> contiene una ruta que apunta a la imagen que quieres poner en la página, que puede ser una URL relativa o absoluta, de la misma forma que el elemento {{htmlelement("a")}} contiene los valores del atributo <code>href</code>.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: Deberías leer <a href="/es/docs/Learn/HTML/Introduccion_a_HTML/Creating_hyperlinks#Un_primer_acercamiento_a_URL_y_referencias">Inicio rápido a las URL y rutas</a> para refrescar tu memoria sobre URL relativas y absolutas antes de continuar.</p>
-</div>
-
-<p>Por ejemplo, si tu imagen se llama <code>dinosaur.jpg</code>, y está en el mismo directorio que tu página HTML, deberás incrustar la imagen de la siguiente manera:</p>
-
-<pre class="brush: html notranslate">&lt;img src="dinosaur.jpg"&gt;</pre>
-
-<p>Si la imagen estaba en el subdirectorio <code>images</code>, que estaba en el mismo directorio que la página HTML (lo que Google recomienda con fines de indización y posicionamiento en buscadores {{glossary("SEO")}}), entonces deberías incrustar la imagen así:</p>
-
-<pre class="brush: html notranslate">&lt;img src="images/dinosaur.jpg"&gt;</pre>
-
-<p>y así sucesivamente.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: Los motores de búsqueda también leen los nombres de archivo de imagen y esto cuenta para el SEO.  Por lo tanto, dale a tu imagen un nombre descriptivo; <code>dinosaur.jpg</code> es mejor que <code>img835.png</code>.</p>
-</div>
-
-<p>Puedes incrustar la imagen usando la URL absoluta, por ejemplo:</p>
-
-<pre class="brush: html notranslate">&lt;img src="https://www.example.com/images/dinosaur.jpg"&gt;</pre>
-
-<p>Pero esto no tiene sentido, solo hace que el navegador trabaje más buscando la dirección IP desde el servidor DNS cada vez, etc. Casi siempre mantendrás las imágenes para tu sitio web en el mismo servidor de tu HTML.</p>
-
-<div class="warning">
-<p><strong>Advertencia:</strong> La mayoría de imágenes tienen derechos de autor. <strong>No</strong> muestres una imagen en tu página web a menos que:<br>
- <br>
- 1) seas dueño de la imagen,<br>
- 2) tengas permiso escrito explícito del dueño de la imagen o <br>
- 3) tengas suficientes pruebas de que la imagen es de dominio público.<br>
- <br>
- El incumplimiento de las normas de los derechos de autor es un acto ilegal y poco ético. Por lo tanto, no apuntes <strong>nunca</strong> tu atributo <code>src</code> a una imagen que esté alojada en un sitio web si no tienes el permiso para hacerlo. Esto se llama <em>hotlinking</em>. Asimismo es ilegal robar el ancho de banda de alguien.  Además, ralentiza tu página y te deja sin control sobre la imagen si la eliminan o reemplazan por otra que incluso podría resultar embarazosa.</p>
-</div>
-
-<p>Nuestro código anterior debería darnos el resultado siguiente:</p>
-
-<p><img alt="A basic image of a dinosaur, embedded in a browser, with Images in HTML written above it" src="https://mdn.mozillademos.org/files/12700/basic-image.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p>
-
-<div class="note">
-<p><strong>Nota</strong>: Los elementos como {{htmlelement("img")}} y {{htmlelement("video")}} a veces se denominan <strong>elementos reemplazados</strong>. Esto se debe a que el tamaño y el contenido del elemento se especifican en un recurso externo (como un archivo de imagen o video),  no en el contenido del elemento en sí.</p>
-</div>
-
-<div class="note">
-<p><strong>Nota</strong>: Puedes encontrar el ejemplo terminado de esta sección <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html">en Github</a> (consulta también el <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html">código fuente</a>).</p>
-</div>
-
-<h3 id="Texto_alternativo">Texto alternativo</h3>
-
-<p>El próximo atributo que veremos es  <code>alt</code>. Su valor debe ser una descripción textual de la imagen para usarla en situaciones en que la imagen no puede ser vista/mostrada o tarde demasiado en mostrarse por una conexión lenta a internet. Por ejemplo, nuestro código anterior podría modificarse así:</p>
-
-<pre class="brush: html notranslate">&lt;img src="images/dinosaur.jpg"
-     alt="La cabeza y el torso de un esqueleto de dinosaurio;
-           tiene una cabeza grande con dientes largos y afilados"&gt;</pre>
-
-<p>La forma más fácil de probar el texto <code>alt</code> es escribir mal el nombre de archivo. Si, por ejemplo, escribimos el nombre archivo de nuestra imagen como <code>dinosooooor.jpg</code>, el navegador no podrá mostrar la imagen, en su lugar mostrará el texto alternativo:</p>
-
-<p><img alt="The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place." src="https://mdn.mozillademos.org/files/12702/alt-text.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p>
-
-<p>¿Por qué vas a ver o necesitar el texto alternativo? Puede ser por varias razones:</p>
-
-<ul>
- <li>El usuario tiene alguna discapacidad visual y utiliza un <a href="https://es.wikipedia.org/wiki/Lector_de_pantalla">lector de pantalla</a> para leer el contenido de la web. De hecho, disponer de texto alternativo para describir las imágenes es útil para la mayoría de los usuarios.</li>
- <li><span id="result_box" lang="es"><span>Como ya hemos dicho anteriormente, es posible que se haya escrito mal el nombre del archivo o su ruta</span></span>.</li>
- <li>El navegador no admite el tipo de imagen. Algunas personas aún usan navegadores de solo texto, como <a href="https://es.wikipedia.org/wiki/Lynx_(navegador)">Lynx</a>, que muestran el texto del atributo <em>alt</em>.</li>
- <li>Quieres que los motores de búsqueda puedan utilizar este texto. Por ejemplo, los motores de búsqueda pueden hacer coincidir el texto alternativo con la consulta de búsqueda.</li>
- <li>Los usuarios han desactivado las imágenes para reducir el volumen de transferencia de datos y de distracciones. Esto sucede especialmente en teléfonos móviles y en países en que el ancho de banda es limitado y caro.</li>
-</ul>
-
-<p>¿Qué hay que escribir exactamente en el atributo <code>alt</code>? Esto depende en primer lugar de <em>por qué</em> la imagen está en ese lugar. En otras palabras, qué se pierde si la imagen no aparece:</p>
-
-<ul>
- <li><strong>Decoración. </strong>Para las imágenes decorativas deberían utilizarse <a href="#imágenes_de_fondo_css">imágenes de fondo CSS</a>. Pero si es inevitable usar HTML, la mejor forma de hacerlo es con <code>alt=""</code>. Si la imagen no es parte del contenido, el lector de pantalla no debería malgastar el tiempo en leerla.</li>
- <li><strong>Contenido. </strong>Si tu imagen proporciona información significativa, proporciona la misma información en un<em> </em>texto alternativo (<code>alt</code>) breve. O mejor aún, en el texto principal que todos pueden ver. No escribas texto alternativo redundante. ¿Acaso no resultaría molesto para un usuario con visión ordinaria si todos los párrafos se escribieran dos veces en el contenido principal? Si la imagen se describe en el cuerpo principal del texto de modo adecuado, puedes simplemente usar <code>alt=""</code>.</li>
- <li><strong>Enlace.</strong> Al poner una imagen dentro de una etiqueta <code>&lt;a&gt;</code> para convertirla en un enlace, aun debes proporcionar <a href="/es/docs/Learn/HTML/Introduccion_a_HTML/Creating_hyperlinks#Claridad_en_las_palabras">texto de enlace accesible</a>. En tal caso podrías escribirlo dentro del mismo elemento <code>&lt;a&gt;</code>, o dentro del atributo <code>alt</code> de la imagen. Lo que mejor funcione en tu caso.</li>
- <li><strong>Texto.</strong> No deberías poner tu texto en imágenes.  Si tu título de encabezado principal necesita, por ejemplo, un sombreado paralelo, <a href="/es/docs/Web/CSS/text-shadow">usa CSS</a> para ello en vez de poner el texto en una imagen. Pero, <em>si realmente no puedes evitarlo</em>, deberías proporcionar el texto en el atributo <code>alt</code>.</li>
-</ul>
-
-<p>En el fondo, la clave es ofrecer una experiencia usable, incluso cuando las imágenes no puedan verse. Esto asegura que ningún usuario pierda ninguna parte del contenido. Desactiva las imágenes en tu navegador y observa cómo se ven las cosas. Te darás cuenta de lo útil que resulta el texto alternativo cuando no es posible ver la imagen.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: Consulta nuestra guía de <a href="/es/docs/Learn/Accessibility/HTML#Alternativas_de_texto">texto alternativo</a> para obtener más información.</p>
-</div>
-
-<h3 id="Anchura_y_altura">Anchura y altura</h3>
-
-<p>Puedes usar los atributos  ancho (<code>width</code>) y alto (<code>height</code>) para especificar la anchura y altura de tu imagen. Puedes encontrar el ancho y el alto de tu imagen de diversas maneras. Por ejemplo, en Mac puedes usar  <kbd>Cmd</kbd> + <kbd>I</kbd>  para mostrar información del archivo de imagen. Volviendo a nuestro ejemplo, podríamos hacer esto:</p>
-
-<pre class="brush: html notranslate">&lt;img src="images/dinosaur.jpg"
-     alt="La cabeza y el torso de un esqueleto de dinosaurio;
-           tiene una cabeza grande con dientes largos y afilados"
-     width="400"
-     height="341"&gt;</pre>
-
-<p>Esto no proporciona una gran diferencia en la pantalla en circunstancias normales. Pero si la imagen no se muestra, por ejemplo, porque el usuario acaba de acceder a la página y esta aún no se ha cargado, observarás que el navegador reserva un espacio para la imagen:</p>
-
-<p><img alt="The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings" src="https://mdn.mozillademos.org/files/12706/alt-text-with-width-height.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p>
-
-<p>Hacerlo así es bueno porque la página se carga con mayor rapidez y fluidez.</p>
-
-<p>Sin embargo, no deberías alterar el tamaño de tus imágenes utilizando atributos HTML. Las imágenes podrían verse granulosas y borrosas si estableces un tamaño demasiado grande; o bien demasiado pequeñas, y se desperdiciaría ancho de banda descargando una imagen que no se ajusta a las necesidades del usuario. La imagen también podría quedar distorsionada, si no mantienes la <a href="https://es.wikipedia.org/wiki/Relaci%C3%B3n_de_aspecto">proporción de aspecto</a> correcta. Deberías utilizar un editor de imágenes, para dar a tu imagen el tamaño adecuado, antes de colocarla en tu página web.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: Si tienes que alterar el tamaño de una imagen es mejor usar <a href="/es/docs/Learn/CSS">CSS</a>.</p>
-</div>
-
-<h3 id="Título_de_imágenes">Título de imágenes</h3>
-
-<p>Al igual que con los enlaces, también puedes añadir atributos <code>title</code> a las imágenes para proporcionar más información de ayuda si es necesario. En nuestro ejemplo, podríamos hacer esto:</p>
-
-<pre class="brush: html notranslate">&lt;img src="images/dinosaur.jpg"
-     alt="La cabeza y el torso de un esqueleto de dinosaurio;
-           tiene una cabeza grande con dientes largos y afilados"
-     width="400"
-     height="341"
-     title="Exposición de un T-Rex en el museo de la Universidad de Manchester."&gt;</pre>
-
-<p>Esto nos da una etiqueta de ayuda (<code>tooltip</code>) como las de los enlaces:</p>
-
-<p><img alt="The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum " src="https://mdn.mozillademos.org/files/12708/image-with-title.png" style="display: block; height: 341px; margin: 0px auto; width: 400px;"></p>
-
-<p>Sin embargo, no se recomienda incluir esta propiedad en las imágenes. <code>title</code> presenta algunos problemas de accesibilidad, principalmente porque los lectores de pantalla (<em>screen readers</em>) tienen un comportamiento imprevisible y la mayoría de navegadores no la mostrarán a menos que pases el ratón por encima de la imagen (y por tanto es inútil para quien usa teclado). Si estás interesado en esta cuestión, puedes leer el artículo <a class="external" href="https://www.24a11y.com/2017/the-trials-and-tribulations-of-the-title-attribute/" rel="noopener">The Trials and Tribulations of the Title Attribute</a> de Scott O’Hara.</p>
-
-<p>Lo mejor es incluir dicha información en el texto principal del artículo, en lugar de adjuntarla en la imagen.</p>
-
-<h3 id="Aprendizaje_activo_incrustar_imágenes">Aprendizaje activo: incrustar imágenes</h3>
-
-<p>¡Ahora te toca jugar a ti! Esta sección de aprendizaje activo te mantendrá activo con un ejercicio sencillo de incrustado. Te proporcionamos una etiqueta básica {{htmlelement ("img")}} y nos gustaría que incrustes la imagen ubicada en la URL siguiente:</p>
-
-<p>https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg</p>
-
-<p>Ya hemos dicho que nunca se apuntará a imágenes de otros servidores (hotlink), pero esto es solo con fines de aprendizaje, por lo que te lo vamos a dejar hacer por esta vez.</p>
-
-<p>También nos gustaría que hagas lo siguiente:</p>
-
-<ul>
- <li>Añadir un texto alternativo y comprobar que funciona si escribes mal la URL de la imagen.</li>
- <li>Establecer las propiedades  <code>width</code> y <code>height</code> correctas de la imagen (pista: tiene 200px de ancho y 171px de alto), luego experimentar con otros valores para ver cuál es el efecto.</li>
- <li>Establecer un elemento <code>title</code> en la imagen.</li>
-</ul>
-
-<p>Si te equivocas, puedes volver a empezar pulsando el botón <em>Reiniciar</em>. Si te encallas, pulsa el botón <em>Mostrar la solución</em> para ver la solución:</p>
-
-<div class="hidden">
-<h6 id="Playable_code">Playable code</h6>
-
-<pre class="brush: html notranslate">&lt;h2&gt;Live output&lt;/h2&gt;
-
-&lt;div class="output" style="min-height: 50px;"&gt;
-&lt;/div&gt;
-
-&lt;h2&gt;Editable code&lt;/h2&gt;
-&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
-
-&lt;textarea id="code" class="input" style="min-height: 100px; width: 95%"&gt;
-&lt;img&gt;
-&lt;/textarea&gt;
-
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="reset" type="button" value="Reset"&gt;
-  &lt;input id="solution" type="button" value="Show solution"&gt;
-&lt;/div&gt;</pre>
-
-<pre class="brush: css notranslate">html {
-  font-family: sans-serif;
-}
-
-h2 {
-  font-size: 16px;
-}
-
-.a11y-label {
-  margin: 0;
-  text-align: right;
-  font-size: 0.7rem;
-  width: 98%;
-}
-
-body {
-  margin: 10px;
-  background: #f5f9fa;
-}</pre>
-
-<pre class="brush: js notranslate">var textarea = document.getElementById('code');
-var reset = document.getElementById('reset');
-var solution = document.getElementById('solution');
-var output = document.querySelector('.output');
-var code = textarea.value;
-var userEntry = textarea.value;
-
-function updateCode() {
-  output.innerHTML = textarea.value;
-}
-
-reset.addEventListener('click', function() {
-  textarea.value = code;
-  userEntry = textarea.value;
-  solutionEntry = htmlSolution;
-  solution.value = 'Show solution';
-  updateCode();
-});
-
-solution.addEventListener('click', function() {
-  if(solution.value === 'Show solution') {
-    textarea.value = solutionEntry;
-    solution.value = 'Hide solution';
-  } else {
-    textarea.value = userEntry;
-    solution.value = 'Show solution';
-  }
-  updateCode();
-});
-
-var htmlSolution = '&lt;img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171"\n title="A T-Rex on display in the Manchester University Museum"&gt;';
-var solutionEntry = htmlSolution;
-
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
-
-// stop tab key tabbing out of textarea and
-// make it write a tab at the caret position instead
-
-textarea.onkeydown = function(e){
-  if (e.keyCode === 9) {
-    e.preventDefault();
-    insertAtCaret('\t');
-  }
-
-  if (e.keyCode === 27) {
-    textarea.blur();
-  }
-};
-
-function insertAtCaret(text) {
-  var scrollPos = textarea.scrollTop;
-  var caretPos = textarea.selectionStart;
-
-  var front = (textarea.value).substring(0, caretPos);
-  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
-  textarea.value = front + text + back;
-  caretPos = caretPos + text.length;
-  textarea.selectionStart = caretPos;
-  textarea.selectionEnd = caretPos;
-  textarea.focus();
-  textarea.scrollTop = scrollPos;
-}
-
-// Update the saved userCode every time the user updates the text area code
-
-textarea.onkeyup = function(){
-  // We only want to save the state when the user code is being shown,
-  // not the solution, so that solution is not saved over the user code
-  if(solution.value === 'Show solution') {
-    userEntry = textarea.value;
-  } else {
-    solutionEntry = textarea.value;
-  }
-
-  updateCode();
-};</pre>
-</div>
-
-<p>{{ EmbedLiveSample('Playable_code', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p>
-
-<h2 id="Comentar_imágenes_con_figure_y_figcaption">Comentar imágenes con <code>figure</code> y <code>figcaption</code></h2>
-
-<p>Hay varias formas en que puedes añadir un pie a tu imagen. Por ejemplo, nada te impediría hacer esto:</p>
-
-<pre class="brush: html notranslate">&lt;div class="figure"&gt;
-  &lt;img src="images/dinosaur.jpg"
-       alt="La cabeza y el torso de un esqueleto de dinosaurio;
-           tiene una cabeza grande con dientes largos y afilados"
-       width="400"
-       height="341"&gt;
-
-  &lt;p&gt;Exposición de un T-Rex en el museo de la Universidad de Manchester.&lt;/p&gt;
-&lt;/div&gt;</pre>
-
-<p>Esto está bien. Incluye el contenido que se necesita y es muy personalizable con CSS. Pero hay un problema: no hay nada que vincule semánticamente la imagen con su título, lo que puede causar problemas a los lectores de pantalla. Por ejemplo, cuando hay 50 imágenes y leyendas, ¿qué leyenda se corresponde con cada imagen?</p>
-
-<p>Una solución mejor es utilizar los elementos HTML5 {{htmlelement("figure")}} y {{htmlelement("figcaption")}}. Estos se crearon exactamente para este propósito: proporcionar un contenedor semántico para las figuras y vincular claramente la figura con el pie. Nuestro ejemplo anterior, podría reescribirse así:</p>
-
-<pre class="notranslate">&lt;figure&gt;
-  &lt;img src="images/dinosaur.jpg"
-       alt="La cabeza y el torso de un esqueleto de dinosaurio;
-           tiene una cabeza grande con dientes largos y afilados" width="400"
-       height="341"&gt;
-
-  &lt;figcaption&gt;Exposición de un T-Rex en el museo de la Universidad de Manchester.&lt;/figcaption&gt;
-&lt;/figure&gt;</pre>
-
-<p>El elemento {{htmlelement("figcaption")}} dice al navegador, o a alguna tecnología de apoyo, que el texto que contiene describe la imagen que está contenida en el elemento {{htmlelement("figure")}}.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: Desde el punto de vista de la accesibilidad, los pies de imagen y el texto alternativo {{htmlattrxref('alt','img')}} cumplen funciones diferentes. Los pies de imagen benefician incluso a quien puede ver la imagen, mientras que el texto {{htmlattrxref('alt','img')}} proporciona la misma función en una imagen ausente. Por tanto, los subtítulos y el texto <code>alt</code> no deberían decir lo mismo, porque ambos aparecen si la imagen no se muestra. Desactiva las imágenes en tu navegador y observa el resultado.</p>
-</div>
-
-<p>El elemento <em>figure</em> no ha de contener una imagen necesariamente. Es una unidad de contenido independiente que:</p>
-
-<ul>
- <li>Expresa un significado en una forma compacta y fácil de entender.</li>
- <li>Se puede poner en varios sitios en el flujo lineal de la página.</li>
- <li>Proporciona información esencial que da apoyo al texto principal.</li>
-</ul>
-
-<p>Un elemento <em>figure</em> podría contener varias imágenes, un trozo de código, audio, video, ecuaciones, una tabla, o cualquier otra cosa.</p>
-
-<h3 id="Aprendizaje_activo_crear_un_elemento_figure">Aprendizaje activo: crear un elemento figure</h3>
-
-<p>En esta sección de aprendizaje activo, te pedimos que tomes el código finalizado de la sección de aprendizaje activo anterior y lo conviertas en un elemento <em>figure</em>:</p>
-
-<ul>
- <li>Delimítalo todo en un elemento {{htmlelement("figure")}}.</li>
- <li>Copia el texto del atributo <code>title</code>, elimina el atributo <code>title</code>, y pon el texto dentro de un elemento {{htmlelement("figcaption")}} bajo la imagen.</li>
-</ul>
-
-<p>Si te equivocas, siempre puedes volver a empezar pulsando el botón <em>Reiniciar</em>. Si te quedas atascado, presiona el botón <em>Ver solución</em> para ver la respuesta:</p>
-
-<div class="hidden">
-<h6 id="Playable_code_2">Playable code 2</h6>
-
-<pre class="brush: html notranslate">&lt;h2&gt;Live output&lt;/h2&gt;
-
-&lt;div class="output" style="min-height: 50px;"&gt;
-&lt;/div&gt;
-
-&lt;h2&gt;Editable code&lt;/h2&gt;
-&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
-
-&lt;textarea id="code" class="input" style="min-height: 100px; width: 95%"&gt;
-&lt;/textarea&gt;
-
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="reset" type="button" value="Reset"&gt;
-  &lt;input id="solution" type="button" value="Show solution"&gt;
-&lt;/div&gt;</pre>
-
-<pre class="brush: css notranslate">html {
-  font-family: sans-serif;
-}
-
-h2 {
-  font-size: 16px;
-}
-
-.a11y-label {
-  margin: 0;
-  text-align: right;
-  font-size: 0.7rem;
-  width: 98%;
-}
-
-body {
-  margin: 10px;
-  background: #f5f9fa;
-}</pre>
-
-<pre class="brush: js notranslate">var textarea = document.getElementById('code');
-var reset = document.getElementById('reset');
-var solution = document.getElementById('solution');
-var output = document.querySelector('.output');
-var code = textarea.value;
-var userEntry = textarea.value;
-
-function updateCode() {
-  output.innerHTML = textarea.value;
-}
-
-reset.addEventListener('click', function() {
-  textarea.value = code;
-  userEntry = textarea.value;
-  solutionEntry = htmlSolution;
-  solution.value = 'Show solution';
-  updateCode();
-});
-
-solution.addEventListener('click', function() {
-  if(solution.value === 'Show solution') {
-    textarea.value = solutionEntry;
-    solution.value = 'Hide solution';
-  } else {
-    textarea.value = userEntry;
-    solution.value = 'Show solution';
-  }
-  updateCode();
-});
-
-var htmlSolution = '&lt;figure&gt;\n &lt;img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171"&gt;\n &lt;figcaption&gt;A T-Rex on display in the Manchester University Museum&lt;/figcaption&gt;\n&lt;/figure&gt;';
-var solutionEntry = htmlSolution;
-
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
-
-// stop tab key tabbing out of textarea and
-// make it write a tab at the caret position instead
-
-textarea.onkeydown = function(e){
-  if (e.keyCode === 9) {
-    e.preventDefault();
-    insertAtCaret('\t');
-  }
-
-  if (e.keyCode === 27) {
-    textarea.blur();
-  }
-};
-
-function insertAtCaret(text) {
-  var scrollPos = textarea.scrollTop;
-  var caretPos = textarea.selectionStart;
-
-  var front = (textarea.value).substring(0, caretPos);
-  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
-  textarea.value = front + text + back;
-  caretPos = caretPos + text.length;
-  textarea.selectionStart = caretPos;
-  textarea.selectionEnd = caretPos;
-  textarea.focus();
-  textarea.scrollTop = scrollPos;
-}
-
-// Update the saved userCode every time the user updates the text area code
-
-textarea.onkeyup = function(){
-  // We only want to save the state when the user code is being shown,
-  // not the solution, so that solution is not saved over the user code
-  if(solution.value === 'Show solution') {
-    userEntry = textarea.value;
-  } else {
-    solutionEntry = textarea.value;
-  }
-
-  updateCode();
-};</pre>
-</div>
-
-<p>{{ EmbedLiveSample('Playable_code_2', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p>
-
-<h2 id="Imágenes_de_fondo_CSS">Imágenes de fondo CSS</h2>
-
-<p>También puedes usar CSS para insertar imágenes en páginas web (y JavaScript, pero eso ya es otra historia). La propiedad CSS {{cssxref("background-image")}} y las demás propiedades  <code>background-*</code> se usan para controlar la colocación de la imagen de fondo. Por ejemplo, para poner una imagen de fondo en cada párrafo de una página, podríamos hacer esto:</p>
-
-<pre class="brush: css notranslate">p {
-  background-image: url("images/dinosaur.jpg");
-}</pre>
-
-<p>La imagen resultante, podría decirse que es más fácil de posicionar y controlar que una imagen HTML. Entonces ¿para qué molestarse usando imágenes HTML? Como se sugiere arriba, las imágenes de fondo CSS son solo para decoración. Si tan solo quieres añadir algo bonito para mejorar visualmente tu página, están bien. Sin embargo, no tienen ningún significado semántico. No pueden tener su equivalente en texto, son invisibles a los lectores de pantalla, etc. ¡Es entonces cuando las imágenes HTML triunfan!</p>
-
-<p>En resumen: si una imagen tiene significado en términos del contenido de tu página, entonces deberías usar una imagen HTML. Si la imagen es puramente decorativa, deberías usar imágenes de fondo CSS.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: Aprenderás mucho más sobre las <a href="/es/docs/Learn/CSS/Building_blocks/Fondos_y_bordes">imágenes de fondo CSS</a> en nuestro apartado <a href="/en-US/docs/Learn/CSS">CSS</a>.</p>
-</div>
-
-<p>Esto es todo por ahora. Hemos expuesto en detalle los conceptos relativos a imágenes y subtítulos de imagen. En el próximo artículo, subiremos un nivel para insertar vídeo y audio en páginas web con HTML.</p>
-
-<p>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</p>
-
-<h2 id="En_este_módulo">En este módulo</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Imágenes en HTML</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Contenido de video y audio</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">De &lt;object&gt; a &lt;iframe&gt;: otras tecnologías de incrustación</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Añadir gráficos vectoriales a la web</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Imágenes <em>responsive</em> (adaptativas)</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Página de bienvenida de Mozilla</a></li>
-</ul>
-</figure>
diff --git a/files/es/learn/html/multimedia_and_embedding/images_in_html/index.md b/files/es/learn/html/multimedia_and_embedding/images_in_html/index.md
new file mode 100644
index 00000000000000..09bfb6ea63fc33
--- /dev/null
+++ b/files/es/learn/html/multimedia_and_embedding/images_in_html/index.md
@@ -0,0 +1,514 @@
+---
+title: Imágenes en HTML
+slug: Learn/HTML/Multimedia_and_embedding/Images_in_HTML
+tags:
+  - Aprendiz
+  - Article
+  - HTML
+  - Imagenes
+  - captions
+  - figcaption
+  - img
+  - pie de imagen
+  - subtítulos
+  - texto alt
+translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML
+---
+{{LearnSidebar}}
+
+{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}
+
+Al principio, la web solo era texto y resultaba más bien aburrido. Afortunadamente, no pasó mucho tiempo antes de que se añadiera la capacidad de insertar imágenes (y otros tipos de contenido más interesantes) en las páginas web. Hay otros tipos de elementos multimedia que tener en cuenta, pero es lógico comenzar con el humilde elemento {{htmlelement("img")}} utilizado para insertar una imagen simple en una página web. En este artículo, veremos en detalle cómo usar este elemento, incluidos sus conceptos básicos y cómo añadir pies de imagen usando {{htmlelement("figure")}} y explicaremos cómo se relaciona con las imágenes de fondo en <a class="glossaryLink" href="/en-US/docs/Glossary/CSS" title="CSS: CSS (Cascading Style Sheets) is a declarative language that controls how webpages look in the browser.">CSS</a>.
+
+<table>
+  <tbody>
+    <tr>
+      <th scope="row">Prerrequisitos:</th>
+      <td>
+        Conocimientos básicos de informática, tener el
+        <a
+          href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico"
+          >software básico instalado</a
+        >, conocimientos básicos de cómo
+        <a
+          href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos"
+          >trabajar con archivos</a
+        >, estar familiarizado con los principios básicos de HTML (como se
+        describe en
+        <a href="/es/docs/Learn/HTML/Introduccion_a_HTML/iniciar"
+          >Empezar con el HTML</a
+        >).
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Objetivo:</th>
+      <td>
+        Aprender cómo insertar imágenes simples en HTML y añadirles pies de
+        imagen, y cómo se relacionan las imágenes HTML con las imágenes de fondo
+        de CSS.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## ¿Cómo ponemos una imagen en una página web?
+
+Para poner una imagen simple en una página web, utilizamos el elemento {{htmlelement("img")}}. Se trata de un elemento vacío (lo que significa que no contiene texto o etiqueta de cierre) que requiere de por lo menos de un atributo para ser utilizado: `src` (a veces denominado por su nombre completo, _source_). El atributo `src` contiene una ruta que apunta a la imagen que quieres poner en la página, que puede ser una URL relativa o absoluta, de la misma forma que el elemento {{htmlelement("a")}} contiene los valores del atributo `href`.
+
+> **Nota:** Deberías leer [Inicio rápido a las URL y rutas](/es/docs/Learn/HTML/Introduccion_a_HTML/Creating_hyperlinks#Un_primer_acercamiento_a_URL_y_referencias) para refrescar tu memoria sobre URL relativas y absolutas antes de continuar.
+
+Por ejemplo, si tu imagen se llama `dinosaur.jpg`, y está en el mismo directorio que tu página HTML, deberás incrustar la imagen de la siguiente manera:
+
+```html
+<img src="dinosaur.jpg">
+```
+
+Si la imagen estaba en el subdirectorio `images`, que estaba en el mismo directorio que la página HTML (lo que Google recomienda con fines de indización y posicionamiento en buscadores {{glossary("SEO")}}), entonces deberías incrustar la imagen así:
+
+```html
+<img src="images/dinosaur.jpg">
+```
+
+y así sucesivamente.
+
+> **Nota:** Los motores de búsqueda también leen los nombres de archivo de imagen y esto cuenta para el SEO. Por lo tanto, dale a tu imagen un nombre descriptivo; `dinosaur.jpg` es mejor que `img835.png`.
+
+Puedes incrustar la imagen usando la URL absoluta, por ejemplo:
+
+```html
+<img src="https://www.example.com/images/dinosaur.jpg">
+```
+
+Pero esto no tiene sentido, solo hace que el navegador trabaje más buscando la dirección IP desde el servidor DNS cada vez, etc. Casi siempre mantendrás las imágenes para tu sitio web en el mismo servidor de tu HTML.
+
+> **Advertencia:** La mayoría de imágenes tienen derechos de autor. **No** muestres una imagen en tu página web a menos que:
+>
+> 1\) seas dueño de la imagen,  
+> 2\) tengas permiso escrito explícito del dueño de la imagen o  
+> 3\) tengas suficientes pruebas de que la imagen es de dominio público.  
+>
+> El incumplimiento de las normas de los derechos de autor es un acto ilegal y poco ético. Por lo tanto, no apuntes **nunca** tu atributo `src` a una imagen que esté alojada en un sitio web si no tienes el permiso para hacerlo. Esto se llama _hotlinking_. Asimismo es ilegal robar el ancho de banda de alguien. Además, ralentiza tu página y te deja sin control sobre la imagen si la eliminan o reemplazan por otra que incluso podría resultar embarazosa.
+
+Nuestro código anterior debería darnos el resultado siguiente:
+
+![A basic image of a dinosaur, embedded in a browser, with Images in HTML written above it](https://mdn.mozillademos.org/files/12700/basic-image.png)
+
+> **Nota:** Los elementos como {{htmlelement("img")}} y {{htmlelement("video")}} a veces se denominan **elementos reemplazados**. Esto se debe a que el tamaño y el contenido del elemento se especifican en un recurso externo (como un archivo de imagen o video), no en el contenido del elemento en sí.
+
+> **Nota:** Puedes encontrar el ejemplo terminado de esta sección [en Github](https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html) (consulta también el [código fuente](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html)).
+
+### Texto alternativo
+
+El próximo atributo que veremos es `alt`. Su valor debe ser una descripción textual de la imagen para usarla en situaciones en que la imagen no puede ser vista/mostrada o tarde demasiado en mostrarse por una conexión lenta a internet. Por ejemplo, nuestro código anterior podría modificarse así:
+
+```html
+<img src="images/dinosaur.jpg"
+     alt="La cabeza y el torso de un esqueleto de dinosaurio;
+           tiene una cabeza grande con dientes largos y afilados">
+```
+
+La forma más fácil de probar el texto `alt` es escribir mal el nombre de archivo. Si, por ejemplo, escribimos el nombre archivo de nuestra imagen como `dinosooooor.jpg`, el navegador no podrá mostrar la imagen, en su lugar mostrará el texto alternativo:
+
+![The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place.](https://mdn.mozillademos.org/files/12702/alt-text.png)
+
+¿Por qué vas a ver o necesitar el texto alternativo? Puede ser por varias razones:
+
+- El usuario tiene alguna discapacidad visual y utiliza un [lector de pantalla](https://es.wikipedia.org/wiki/Lector_de_pantalla) para leer el contenido de la web. De hecho, disponer de texto alternativo para describir las imágenes es útil para la mayoría de los usuarios.
+- Como ya hemos dicho anteriormente, es posible que se haya escrito mal el nombre del archivo o su ruta.
+- El navegador no admite el tipo de imagen. Algunas personas aún usan navegadores de solo texto, como [Lynx](<https://es.wikipedia.org/wiki/Lynx_(navegador)>), que muestran el texto del atributo _alt_.
+- Quieres que los motores de búsqueda puedan utilizar este texto. Por ejemplo, los motores de búsqueda pueden hacer coincidir el texto alternativo con la consulta de búsqueda.
+- Los usuarios han desactivado las imágenes para reducir el volumen de transferencia de datos y de distracciones. Esto sucede especialmente en teléfonos móviles y en países en que el ancho de banda es limitado y caro.
+
+¿Qué hay que escribir exactamente en el atributo `alt`? Esto depende en primer lugar de _por qué_ la imagen está en ese lugar. En otras palabras, qué se pierde si la imagen no aparece:
+
+- **Decoración.** Para las imágenes decorativas deberían utilizarse [imágenes de fondo CSS](#imágenes_de_fondo_css). Pero si es inevitable usar HTML, la mejor forma de hacerlo es con `alt=""`. Si la imagen no es parte del contenido, el lector de pantalla no debería malgastar el tiempo en leerla.
+- **Contenido.** Si tu imagen proporciona información significativa, proporciona la misma información en un\_ \_texto alternativo (`alt`) breve. O mejor aún, en el texto principal que todos pueden ver. No escribas texto alternativo redundante. ¿Acaso no resultaría molesto para un usuario con visión ordinaria si todos los párrafos se escribieran dos veces en el contenido principal? Si la imagen se describe en el cuerpo principal del texto de modo adecuado, puedes simplemente usar `alt=""`.
+- **Enlace.** Al poner una imagen dentro de una etiqueta `<a>` para convertirla en un enlace, aun debes proporcionar [texto de enlace accesible](/es/docs/Learn/HTML/Introduccion_a_HTML/Creating_hyperlinks#Claridad_en_las_palabras). En tal caso podrías escribirlo dentro del mismo elemento `<a>`, o dentro del atributo `alt` de la imagen. Lo que mejor funcione en tu caso.
+- **Texto.** No deberías poner tu texto en imágenes. Si tu título de encabezado principal necesita, por ejemplo, un sombreado paralelo, [usa CSS](/es/docs/Web/CSS/text-shadow) para ello en vez de poner el texto en una imagen. Pero, _si realmente no puedes evitarlo_, deberías proporcionar el texto en el atributo `alt`.
+
+En el fondo, la clave es ofrecer una experiencia usable, incluso cuando las imágenes no puedan verse. Esto asegura que ningún usuario pierda ninguna parte del contenido. Desactiva las imágenes en tu navegador y observa cómo se ven las cosas. Te darás cuenta de lo útil que resulta el texto alternativo cuando no es posible ver la imagen.
+
+> **Nota:** Consulta nuestra guía de [texto alternativo](/es/docs/Learn/Accessibility/HTML#Alternativas_de_texto) para obtener más información.
+
+### Anchura y altura
+
+Puedes usar los atributos ancho (`width`) y alto (`height`) para especificar la anchura y altura de tu imagen. Puedes encontrar el ancho y el alto de tu imagen de diversas maneras. Por ejemplo, en Mac puedes usar <kbd>Cmd</kbd> + <kbd>I</kbd> para mostrar información del archivo de imagen. Volviendo a nuestro ejemplo, podríamos hacer esto:
+
+```html
+<img src="images/dinosaur.jpg"
+     alt="La cabeza y el torso de un esqueleto de dinosaurio;
+           tiene una cabeza grande con dientes largos y afilados"
+     width="400"
+     height="341">
+```
+
+Esto no proporciona una gran diferencia en la pantalla en circunstancias normales. Pero si la imagen no se muestra, por ejemplo, porque el usuario acaba de acceder a la página y esta aún no se ha cargado, observarás que el navegador reserva un espacio para la imagen:
+
+![The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings](https://mdn.mozillademos.org/files/12706/alt-text-with-width-height.png)
+
+Hacerlo así es bueno porque la página se carga con mayor rapidez y fluidez.
+
+Sin embargo, no deberías alterar el tamaño de tus imágenes utilizando atributos HTML. Las imágenes podrían verse granulosas y borrosas si estableces un tamaño demasiado grande; o bien demasiado pequeñas, y se desperdiciaría ancho de banda descargando una imagen que no se ajusta a las necesidades del usuario. La imagen también podría quedar distorsionada, si no mantienes la [proporción de aspecto](https://es.wikipedia.org/wiki/Relaci%C3%B3n_de_aspecto) correcta. Deberías utilizar un editor de imágenes, para dar a tu imagen el tamaño adecuado, antes de colocarla en tu página web.
+
+> **Nota:** Si tienes que alterar el tamaño de una imagen es mejor usar [CSS](/es/docs/Learn/CSS).
+
+### Título de imágenes
+
+Al igual que con los enlaces, también puedes añadir atributos `title` a las imágenes para proporcionar más información de ayuda si es necesario. En nuestro ejemplo, podríamos hacer esto:
+
+```html
+<img src="images/dinosaur.jpg"
+     alt="La cabeza y el torso de un esqueleto de dinosaurio;
+           tiene una cabeza grande con dientes largos y afilados"
+     width="400"
+     height="341"
+     title="Exposición de un T-Rex en el museo de la Universidad de Manchester.">
+```
+
+Esto nos da una etiqueta de ayuda (`tooltip`) como las de los enlaces:
+
+![The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum ](https://mdn.mozillademos.org/files/12708/image-with-title.png)
+
+Sin embargo, no se recomienda incluir esta propiedad en las imágenes. `title` presenta algunos problemas de accesibilidad, principalmente porque los lectores de pantalla (_screen readers_) tienen un comportamiento imprevisible y la mayoría de navegadores no la mostrarán a menos que pases el ratón por encima de la imagen (y por tanto es inútil para quien usa teclado). Si estás interesado en esta cuestión, puedes leer el artículo [The Trials and Tribulations of the Title Attribute](https://www.24a11y.com/2017/the-trials-and-tribulations-of-the-title-attribute/) de Scott O’Hara.
+
+Lo mejor es incluir dicha información en el texto principal del artículo, en lugar de adjuntarla en la imagen.
+
+### Aprendizaje activo: incrustar imágenes
+
+¡Ahora te toca jugar a ti! Esta sección de aprendizaje activo te mantendrá activo con un ejercicio sencillo de incrustado. Te proporcionamos una etiqueta básica {{htmlelement ("img")}} y nos gustaría que incrustes la imagen ubicada en la URL siguiente:
+
+https\://raw\.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg
+
+Ya hemos dicho que nunca se apuntará a imágenes de otros servidores (hotlink), pero esto es solo con fines de aprendizaje, por lo que te lo vamos a dejar hacer por esta vez.
+
+También nos gustaría que hagas lo siguiente:
+
+- Añadir un texto alternativo y comprobar que funciona si escribes mal la URL de la imagen.
+- Establecer las propiedades `width` y `height` correctas de la imagen (pista: tiene 200px de ancho y 171px de alto), luego experimentar con otros valores para ver cuál es el efecto.
+- Establecer un elemento `title` en la imagen.
+
+Si te equivocas, puedes volver a empezar pulsando el botón _Reiniciar_. Si te encallas, pulsa el botón _Mostrar la solución_ para ver la solución:
+
+```html hidden
+<h2>Live output</h2>
+
+<div class="output" style="min-height: 50px;">
+</div>
+
+<h2>Editable code</h2>
+<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p>
+
+<textarea id="code" class="input" style="min-height: 100px; width: 95%">
+<img>
+</textarea>
+
+<div class="playable-buttons">
+  <input id="reset" type="button" value="Reset">
+  <input id="solution" type="button" value="Show solution">
+</div>
+```
+
+```css hidden
+html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}
+```
+
+```js hidden
+var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '<img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171"\n title="A T-Rex on display in the Manchester University Museum">';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};
+```
+
+{{ EmbedLiveSample('Playable_code', 700, 350, "", "", "hide-codepen-jsfiddle") }}
+
+## Comentar imágenes con `figure` y `figcaption`
+
+Hay varias formas en que puedes añadir un pie a tu imagen. Por ejemplo, nada te impediría hacer esto:
+
+```html
+<div class="figure">
+  <img src="images/dinosaur.jpg"
+       alt="La cabeza y el torso de un esqueleto de dinosaurio;
+           tiene una cabeza grande con dientes largos y afilados"
+       width="400"
+       height="341">
+
+  <p>Exposición de un T-Rex en el museo de la Universidad de Manchester.</p>
+</div>
+```
+
+Esto está bien. Incluye el contenido que se necesita y es muy personalizable con CSS. Pero hay un problema: no hay nada que vincule semánticamente la imagen con su título, lo que puede causar problemas a los lectores de pantalla. Por ejemplo, cuando hay 50 imágenes y leyendas, ¿qué leyenda se corresponde con cada imagen?
+
+Una solución mejor es utilizar los elementos HTML5 {{htmlelement("figure")}} y {{htmlelement("figcaption")}}. Estos se crearon exactamente para este propósito: proporcionar un contenedor semántico para las figuras y vincular claramente la figura con el pie. Nuestro ejemplo anterior, podría reescribirse así:
+
+    <figure>
+      <img src="images/dinosaur.jpg"
+           alt="La cabeza y el torso de un esqueleto de dinosaurio;
+               tiene una cabeza grande con dientes largos y afilados" width="400"
+           height="341">
+
+      <figcaption>Exposición de un T-Rex en el museo de la Universidad de Manchester.</figcaption>
+    </figure>
+
+El elemento {{htmlelement("figcaption")}} dice al navegador, o a alguna tecnología de apoyo, que el texto que contiene describe la imagen que está contenida en el elemento {{htmlelement("figure")}}.
+
+> **Nota:** Desde el punto de vista de la accesibilidad, los pies de imagen y el texto alternativo {{htmlattrxref('alt','img')}} cumplen funciones diferentes. Los pies de imagen benefician incluso a quien puede ver la imagen, mientras que el texto {{htmlattrxref('alt','img')}} proporciona la misma función en una imagen ausente. Por tanto, los subtítulos y el texto `alt` no deberían decir lo mismo, porque ambos aparecen si la imagen no se muestra. Desactiva las imágenes en tu navegador y observa el resultado.
+
+El elemento _figure_ no ha de contener una imagen necesariamente. Es una unidad de contenido independiente que:
+
+- Expresa un significado en una forma compacta y fácil de entender.
+- Se puede poner en varios sitios en el flujo lineal de la página.
+- Proporciona información esencial que da apoyo al texto principal.
+
+Un elemento _figure_ podría contener varias imágenes, un trozo de código, audio, video, ecuaciones, una tabla, o cualquier otra cosa.
+
+### Aprendizaje activo: crear un elemento figure
+
+En esta sección de aprendizaje activo, te pedimos que tomes el código finalizado de la sección de aprendizaje activo anterior y lo conviertas en un elemento _figure_:
+
+- Delimítalo todo en un elemento {{htmlelement("figure")}}.
+- Copia el texto del atributo `title`, elimina el atributo `title`, y pon el texto dentro de un elemento {{htmlelement("figcaption")}} bajo la imagen.
+
+Si te equivocas, siempre puedes volver a empezar pulsando el botón _Reiniciar_. Si te quedas atascado, presiona el botón _Ver solución_ para ver la respuesta:
+
+```html hidden
+<h2>Live output</h2>
+
+<div class="output" style="min-height: 50px;">
+</div>
+
+<h2>Editable code</h2>
+<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p>
+
+<textarea id="code" class="input" style="min-height: 100px; width: 95%">
+</textarea>
+
+<div class="playable-buttons">
+  <input id="reset" type="button" value="Reset">
+  <input id="solution" type="button" value="Show solution">
+</div>
+```
+
+```css hidden
+html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}
+```
+
+```js hidden
+var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '<figure>\n <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171">\n <figcaption>A T-Rex on display in the Manchester University Museum</figcaption>\n</figure>';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};
+```
+
+{{ EmbedLiveSample('Playable_code_2', 700, 350, "", "", "hide-codepen-jsfiddle") }}
+
+## Imágenes de fondo CSS
+
+También puedes usar CSS para insertar imágenes en páginas web (y JavaScript, pero eso ya es otra historia). La propiedad CSS {{cssxref("background-image")}} y las demás propiedades `background-*` se usan para controlar la colocación de la imagen de fondo. Por ejemplo, para poner una imagen de fondo en cada párrafo de una página, podríamos hacer esto:
+
+```css
+p {
+  background-image: url("images/dinosaur.jpg");
+}
+```
+
+La imagen resultante, podría decirse que es más fácil de posicionar y controlar que una imagen HTML. Entonces ¿para qué molestarse usando imágenes HTML? Como se sugiere arriba, las imágenes de fondo CSS son solo para decoración. Si tan solo quieres añadir algo bonito para mejorar visualmente tu página, están bien. Sin embargo, no tienen ningún significado semántico. No pueden tener su equivalente en texto, son invisibles a los lectores de pantalla, etc. ¡Es entonces cuando las imágenes HTML triunfan!
+
+En resumen: si una imagen tiene significado en términos del contenido de tu página, entonces deberías usar una imagen HTML. Si la imagen es puramente decorativa, deberías usar imágenes de fondo CSS.
+
+> **Nota:** Aprenderás mucho más sobre las [imágenes de fondo CSS](/es/docs/Learn/CSS/Building_blocks/Fondos_y_bordes) en nuestro apartado [CSS](/es/docs/Learn/CSS).
+
+Esto es todo por ahora. Hemos expuesto en detalle los conceptos relativos a imágenes y subtítulos de imagen. En el próximo artículo, subiremos un nivel para insertar vídeo y audio en páginas web con HTML.
+
+{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}
+
+## En este módulo
+
+- [Imágenes en HTML](/es/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML)
+- [Contenido de video y audio](/es/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content)
+- [De \<object> a \<iframe>: otras tecnologías de incrustación](/es/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies)
+- [Añadir gráficos vectoriales a la web](/es/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web)
+- [Imágenes _responsive_ (adaptativas)](/es/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)
+- [Página de bienvenida de Mozilla](/es/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page)
diff --git a/files/es/learn/html/multimedia_and_embedding/index.html b/files/es/learn/html/multimedia_and_embedding/index.html
deleted file mode 100644
index 1969945751fc0f..00000000000000
--- a/files/es/learn/html/multimedia_and_embedding/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
----
-title: Multimedia e inserción
-slug: Learn/HTML/Multimedia_and_embedding
-tags:
-  - Aprender
-  - Audio
-  - Codificación de Secuencia de comandos
-  - Evaluación
-  - Flash
-  - Gráficos vectoriales
-  - Guía
-  - HTML
-  - Imagenes
-  - Inserción
-  - Landing
-  - Mapa de Imágenes
-  - Multimedia
-  - Principiante
-  - SVG
-  - Video
-  - Web
-  - iframes
-  - img
-  - receptivo
-translation_of: Learn/HTML/Multimedia_and_embedding
----
-<p class="summary">Hemos visto mucho texto hasta ahora en este curso, pero la web sería realmente aburrida solo usando textos. ¡Comencemos observando como hacer que la web cobre vida, con mucho más contenido interesante! Este módulo te acompañará a explorar maneras de usar HTML para incluir multimedia a tus páginas web, y las diferentes formas en la que podrás hacerlo, incluyendo como enlazar videos, audios e incluso otras páginas webs.</p>
-
-<h2 id="Requisitos_previos">Requisitos previos</h2>
-
-<p>Antes de empezar con este módulo, deberías tener un buen conocimiento de las bases de HTML, enseñadas en <a href="/es/docs/Learn/HTML/Introduction_to_HTML">Introducción a HTML</a>. Si no has estado trabajando en este módulo (o alguno similar), ¡hazlo y luego vuelve!</p>
-
-<div class="note">
-<p><strong>Nota</strong>: Si estas trabajando en un ordenador/tablet/u otro dispositivo donde no puedas crear tus propios archivos, puedes probar (la mayoría de ellos) los ejemplos de código en programas online de codificado como <a href="http://jsbin.com/">JSBin</a> o <a href="https://thimble.mozilla.org/">Glitch</a>.</p>
-</div>
-
-<h2 id="Guías">Guías</h2>
-
-<p>Este módulo contiene los siguientes artículos que te enseñarán todo lo fundamental sobre introducir multimedia en páginas web.</p>
-
-<dl>
- <dt><a href="/es/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Imágenes en HTML</a></dt>
- <dd>Hay otros tipos de multimedia a considerar, pero es logico empezar con el humilde elemento {{htmlelement("img")}}, usado para incorporar una imagen simple en una página web. En este artículo veremos cúmo usarlo en profundidad, incluyendo los conceptos básicos, y contenido independiente con título usando  {{htmlelement("figure")}}, y cómo relacionarlos con las imágenes de fondo de CSS.</dd>
- <dt><a href="/es/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Contenido de Audio y Video</a></dt>
- <dd>A continuación, veremos como usar los elementos de HTML5 {{htmlelement("video")}} y {{htmlelement("audio")}}, para insertar video y audio en nuestras páginas, incluyendo conceptos básicos, proporcionando acceso a diferentes formatos de archivo para diferentes navegadores, agregando ilustraciones y subtítulos y cómo resolver inconvenientes en navegadores más antiguos.</dd>
- <dt><a href="/es/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">De &lt;object&gt; a &lt;iframe&gt; - otras tecnologías de inserción</a></dt>
- <dd>En este punto, nos gustaría dar un paso hacia un lado, mirando algunos de los elementos que te permiten insertar una amplia variedad de tipos de contenido en tus páginas web: los elementos {{htmlelement("iframe")}}, {{htmlelement("embed")}} y {{htmlelement("object")}}.<br>
- El elemento &lt;iframe&gt; nos permite incluir otras páginas web, y las otras dos permiten insertar archivos de formato PDF, SVG e incluso Flash -una tecnología que está a punto de desaparecer, pero que todavía puede verse de manera semi-regular-.</dd>
- <dt><a href="/es/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Añadiendo graficos vectoriales a la Web </a></dt>
- <dd>Los gráficos vectoriales pueden ser muy útiles en ciertas situaciones. A diferencia de los formatos normales como PNG / JPG, estos no se distorsionan/pixelizan cuando se los amplían -pueden permanecer suaves cuando se escalan-. Este artículo te introduce al concepto de gráficos vectoriales y cómo incluir el popular formato {{glossary ("SVG")}} en páginas web.</dd>
- <dt><a href="/es/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Imagenes receptivas</a></dt>
- <dd>En este artìculo, aprenderás acerca del concepto de imágenes receptivas -imágenes que pueden adaptarse en dispositivos con grandes diferencias de tamaños de pantalla, resoluciones y otras características-. Esto te ayudará a mejorar el rendimiento en diferentes dispositivos. Las imágenes receptivas son sólo una parte del diseño receptivo, un tópico que a futuro aprenderás en CSS.</dd>
-</dl>
-
-<h2 id="Evaluaciones">Evaluaciones</h2>
-
-<p>Las siguientes evaluaciones pondrán a prueba tu comprensión de los conceptos básicos de HTML vistos en las guías anteriores.</p>
-
-<dl>
- <dt><a href="/es/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Página de bienvenida de Mozilla</a></dt>
- <dd>En esta evaluación, probaremos tu conocimiento de algunas de las técnicas observadas en los artículos de este módulo, ¡lo que te permitirá agregar algunas imágenes y videos a una página original de Mozilla!</dd>
-</dl>
-
-<h2 id="Ver_también">Ver también</h2>
-
-<dl>
- <dt><a href=" /en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">Agregar un mapa de visitas en la parte superior de una imagen</a></dt>
- <dd>Los mapas de imágenes proporcionan un mecanismo para hacer diferentes partes de un enlace de imagen a diferentes lugares (piense en un mapa, vinculándolo a más información sobre cada país diferente al que haga clic). Esta técnica a veces puede ser útil.</dd>
- <dt><a href="https://learning.mozilla.org/en-US/activities/web-lit-basics-two/">Conceptos básicos de escritura web 2</a></dt>
- <dd>
- <p>Un excelente curso básico de la fundación Mozilla que explora y prueba algunas de las habilidades mencionadas en el módulo Multimedia e inclusión. Sumérgete en los aspectos básicos de la composición de páginas web, diseño de accesibilidad, uso compartido de recursos, uso de medios en línea y trabajo abierto (significa que tu contenido es libre de compartirse con otros).</p>
- </dd>
-</dl>
diff --git a/files/es/learn/html/multimedia_and_embedding/index.md b/files/es/learn/html/multimedia_and_embedding/index.md
new file mode 100644
index 00000000000000..28e02fc3d5137e
--- /dev/null
+++ b/files/es/learn/html/multimedia_and_embedding/index.md
@@ -0,0 +1,63 @@
+---
+title: Multimedia e inserción
+slug: Learn/HTML/Multimedia_and_embedding
+tags:
+  - Aprender
+  - Audio
+  - Codificación de Secuencia de comandos
+  - Evaluación
+  - Flash
+  - Gráficos vectoriales
+  - Guía
+  - HTML
+  - Imagenes
+  - Inserción
+  - Landing
+  - Mapa de Imágenes
+  - Multimedia
+  - Principiante
+  - SVG
+  - Video
+  - Web
+  - iframes
+  - img
+  - receptivo
+translation_of: Learn/HTML/Multimedia_and_embedding
+---
+Hemos visto mucho texto hasta ahora en este curso, pero la web sería realmente aburrida solo usando textos. ¡Comencemos observando como hacer que la web cobre vida, con mucho más contenido interesante! Este módulo te acompañará a explorar maneras de usar HTML para incluir multimedia a tus páginas web, y las diferentes formas en la que podrás hacerlo, incluyendo como enlazar videos, audios e incluso otras páginas webs.
+
+## Requisitos previos
+
+Antes de empezar con este módulo, deberías tener un buen conocimiento de las bases de HTML, enseñadas en [Introducción a HTML](/es/docs/Learn/HTML/Introduction_to_HTML). Si no has estado trabajando en este módulo (o alguno similar), ¡hazlo y luego vuelve!
+
+> **Nota:** Si estas trabajando en un ordenador/tablet/u otro dispositivo donde no puedas crear tus propios archivos, puedes probar (la mayoría de ellos) los ejemplos de código en programas online de codificado como [JSBin](http://jsbin.com/) o [Glitch](https://thimble.mozilla.org/).
+
+## Guías
+
+Este módulo contiene los siguientes artículos que te enseñarán todo lo fundamental sobre introducir multimedia en páginas web.
+
+- [Imágenes en HTML](/es/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML)
+  - : Hay otros tipos de multimedia a considerar, pero es logico empezar con el humilde elemento {{htmlelement("img")}}, usado para incorporar una imagen simple en una página web. En este artículo veremos cúmo usarlo en profundidad, incluyendo los conceptos básicos, y contenido independiente con título usando {{htmlelement("figure")}}, y cómo relacionarlos con las imágenes de fondo de CSS.
+- [Contenido de Audio y Video](/es/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content)
+  - : A continuación, veremos como usar los elementos de HTML5 {{htmlelement("video")}} y {{htmlelement("audio")}}, para insertar video y audio en nuestras páginas, incluyendo conceptos básicos, proporcionando acceso a diferentes formatos de archivo para diferentes navegadores, agregando ilustraciones y subtítulos y cómo resolver inconvenientes en navegadores más antiguos.
+- [De \<object> a \<iframe> - otras tecnologías de inserción](/es/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies)
+  - : En este punto, nos gustaría dar un paso hacia un lado, mirando algunos de los elementos que te permiten insertar una amplia variedad de tipos de contenido en tus páginas web: los elementos [`<iframe>`](/es/docs/Web/HTML/Element/iframe), [`<embed>`](/es/docs/Web/HTML/Element/embed) y [`<object>`](/es/docs/Web/HTML/Element/object).  
+    El elemento &lt;iframe&gt; nos permite incluir otras páginas web, y las otras dos permiten insertar archivos de formato PDF, SVG e incluso Flash -una tecnología que está a punto de desaparecer, pero que todavía puede verse de manera semi-regular-.
+- [Añadiendo graficos vectoriales a la Web](/es/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web)
+  - : Los gráficos vectoriales pueden ser muy útiles en ciertas situaciones. A diferencia de los formatos normales como PNG / JPG, estos no se distorsionan/pixelizan cuando se los amplían -pueden permanecer suaves cuando se escalan-. Este artículo te introduce al concepto de gráficos vectoriales y cómo incluir el popular formato {{glossary ("SVG")}} en páginas web.
+- [Imagenes receptivas](/es/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)
+  - : En este artìculo, aprenderás acerca del concepto de imágenes receptivas -imágenes que pueden adaptarse en dispositivos con grandes diferencias de tamaños de pantalla, resoluciones y otras características-. Esto te ayudará a mejorar el rendimiento en diferentes dispositivos. Las imágenes receptivas son sólo una parte del diseño receptivo, un tópico que a futuro aprenderás en CSS.
+
+## Evaluaciones
+
+Las siguientes evaluaciones pondrán a prueba tu comprensión de los conceptos básicos de HTML vistos en las guías anteriores.
+
+- [Página de bienvenida de Mozilla](/es/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page)
+  - : En esta evaluación, probaremos tu conocimiento de algunas de las técnicas observadas en los artículos de este módulo, ¡lo que te permitirá agregar algunas imágenes y videos a una página original de Mozilla!
+
+## Ver también
+
+- [Agregar un mapa de visitas en la parte superior de una imagen](/es/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image)
+  - : Los mapas de imágenes proporcionan un mecanismo para hacer diferentes partes de un enlace de imagen a diferentes lugares (piense en un mapa, vinculándolo a más información sobre cada país diferente al que haga clic). Esta técnica a veces puede ser útil.
+- [Conceptos básicos de escritura web 2](https://learning.mozilla.org/en-US/activities/web-lit-basics-two/)
+  - : Un excelente curso básico de la fundación Mozilla que explora y prueba algunas de las habilidades mencionadas en el módulo Multimedia e inclusión. Sumérgete en los aspectos básicos de la composición de páginas web, diseño de accesibilidad, uso compartido de recursos, uso de medios en línea y trabajo abierto (significa que tu contenido es libre de compartirse con otros).
diff --git a/files/es/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html b/files/es/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html
deleted file mode 100644
index 101121a0b4f8ad..00000000000000
--- a/files/es/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html
+++ /dev/null
@@ -1,138 +0,0 @@
----
-title: Página de bienvenida de Mozilla
-slug: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page
-tags:
-  - Codificación de Secuencia de comandos
-  - CodingScripting
-  - Evaluación
-  - HTML
-  - Imagenes
-  - Inserción
-  - JPEG
-  - Medidas
-  - Multimedia
-  - PNG
-  - Principiante
-  - Video
-  - iframe
-  - img
-  - receptivo
-  - src
-  - srcset
-translation_of: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</div>
-
-<p class="summary">En esta evaluación, pondremos a prueba tu conocimiento de algunas de las técnicas mostradas en los artículos de este módulo, ¡para que tú agregues algunas imágenes y videos a una página de bienvenida de Mozzilla!.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Requisitos previos:</th>
-   <td>Antes de intentar esta evaluación, ya deberías conocer el módulo de <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia e inserción</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objetivo:</th>
-   <td>Prueba cuánto sabes de la incorporación de imágenes y videos en páginas web, marcos y técnicas de imagen receptiva a HTML.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Punto_de_partida">Punto de partida</h2>
-
-<p>Para comenzar esta evaluación, necesitas el HTML y todas las imágenes de <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/">mdn-splash-page-start</a> que tienes en la carpeta de GitHub. Guarda el contenido de <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/index.html">index.html</a> en un archivo llamado <code>index.html</code> en tu disco local, en una nueva carpeta. Guarda <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/pattern.png">pattern.png</a> en la misma carpeta (haciendo click derecho en la imagen y seleccionando la opción guardar).</p>
-
-<p>Accede a las diferentes imágenes en la carpeta de <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/mdn-splash-page-start/originals">originals</a> y guárdalas también de la misma manera. De momento puedes guardarlas en una carpeta diferente, ya que podrías necesitar modificarlas usando un editor de gráficos antes de que estén listas para usarlas.</p>
-
-<p>También puedes usar una herramienta en línea como <a href="https://glitch.com/">Glitch</a> para crear tu ejemplo. Esto puede ser útil si quieres evaluarlo o pedir ayuda — consulta la sección  <a href="#assessment_or_further_help">Assessment or further help</a> al final de esta página.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: El archivo HTML de ejemplo contiene bastante CSS para dar estilo a la página. No necesitas tocar el CSS, solo el HTML dentro del elemento {{htmlelement("body")}}, mientras que insertes el marcado correctamente, el estilo se mantendrá.</p>
-</div>
-
-<h2 id="Resumen_del_proyecto">Resumen del proyecto</h2>
-
-<p>En esta evaluación, te presentamos una página de bienvenida de Mozzilla en su mayoría terminada, que tiene como objetivo decir algo agradable e interesante sobre lo que significa Mozilla, y proporcionar algunos enlaces a recursos adicionales. Desafortunadamente, aún no se han agregado imágenes o videos, ¡este es tu trabajo!. Debes añadir algunos elementos para que la página se vea bien y tenga sentido. Las siguientes subsecciones detallan lo que tienes que hacer:</p>
-
-<h3 id="Preparar_las_imágenes">Preparar las imágenes</h3>
-
-<p>Usa tu editor de imágenes favorito, y utiliza medidas de 400px de ancho y 120px de alto para:</p>
-
-<ul>
- <li><code>firefox_logo-only_RGB.png</code></li>
- <li><code>firefox-addons.jpg</code></li>
- <li><code>mozilla-dinosaur-head.png</code></li>
-</ul>
-
-<p>Nómbralas por ejemplo, <code>firefoxlogo400.png</code> y <code>firefoxlogo120.png</code>.</p>
-
-<p>Junto con <code>mdn.svg</code>, estas imágenes serán tus iconos para vincular a otros recursos, dentro del área <code>further-info</code>. Debes vincular al logo de Firefox en el encabezado del sitio. Guarda copias de todos estos dentro de la misma carpeta que <code>index.html</code>.</p>
-
-<p>A continuación, crea una versión horizontal de 1200px de <code>red-panda.jpg</code>, y una versión vertical de 600px que muestre al panda en una toma de primer plano. Una vez más, ponle un nombre para que puedas identificarlos fácilmente. Guarda una copia de ambos en la misma carpeta que <code>index.html</code>.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: Debes optimizar las imágenes JPG y PNG para que sean lo más pequeñas posible, viéndose bien. <a href="https://tinypng.com/">tinypng.com</a> es un gran servicio para hacerlo fácilmente.</p>
-</div>
-
-<h3 id="Añadir_logo_al_encabezado">Añadir logo al encabezado</h3>
-
-<p>El elemento {{htmlelement("header")}}, añade el elemento {{htmlelement("img")}} que insertará la versión pequeña del logotipo de Firefox al encabezado.</p>
-
-<h3 id="Añadir_un_video_al_contenido_del_artículo_principal">Añadir un video al contenido del artículo principal</h3>
-
-<p>Justo dentro del elemento {{htmlelement("article")}} (debajo de la etiqueta de apertura), inserta el video de Youtube <a href="https://www.youtube.com/watch?v=ojcNcvb1olg">https://www.youtube.com/watch?v=ojcNcvb1olg</a>, utilizando las herramientas de YouTube para generar el código. El video debe tener 400px de ancho.</p>
-
-<h3 id="Agregar_imágenes_receptivas_a_los_enlaces_de_información_adicional">Agregar imágenes receptivas a los enlaces de información adicional</h3>
-
-<p> Dentro de {{htmlelement("div")}} con clase <code>further-info</code> encontrarás cuatro elementos {{htmlelement("a")}} -cada uno de los cuales vincula a una página interesante relacionada con Mozilla-. Para completar esta sección, debes insertar un elemento {{htmlelement("img")}} dentro de cada uno que contenga los atributos {{htmlattrxref("src", "img")}}, {{htmlattrxref("alt", "img")}}, {{htmlattrxref("srcset", "img")}} y {{htmlattrxref("sizes", "img")}}.</p>
-
-<p>En cada caso, (excepto uno que es inherentemente receptivo) queremos que el navegador sirva la versión 120px cuando el ancho de la ventana de visualización sea de 500px o menos, o la versión de 400px en otro caso.</p>
-
-<p>¡Asegúrate de hacer coincidir las imágenes correctas con los enlaces correctos!</p>
-
-<div class="note">
-<p><strong>Nota</strong>: para probar correctamente los ejemplos <code>srcset</code>/<code>sizes</code> necesitarás cargar tu sitio a un servidor (usar <a href="/en-US/docs/Learn/Common_questions/Using_Github_pages">Github pages</a> es una solución fácil y gratis), y desde allí puedes probar si funcionan correctamente usando herramientas de desarrollo del navegador como Firefox <a href="/en-US/docs/Tools/Network_Monitor">Network Monitor</a>.</p>
-</div>
-
-<h3 id="Un_red-panda_con_arte_dirigido">Un "red-panda" con arte dirigido</h3>
-
-<p>Dentro del elemento {{htmlelement("div")}} con clase <code>red-panda</code>, queremos insertar un elemento {{htmlelement("picture")}} que permita una imagen pequeña del panda si la ventana tiene 600px de ancho o menos, y la gran imagen del paisaje en caso contrario.</p>
-
-<h2 id="Ejemplo">Ejemplo</h2>
-
-<p>Las siguientes capturas de pantalla muestran como debería verse la página de bienvenida después de haber sido marcada correctamente, en una pantalla ancha y estrecha.</p>
-
-<p><img alt="A wide shot of our example splash page" src="https://mdn.mozillademos.org/files/12946/wide-shot.png" style="border-style: solid; border-width: 1px; display: block; height: 620px; margin: 0px auto; width: 700px;"></p>
-
-<p><img alt="A narrow shot of our example splash page" src="https://mdn.mozillademos.org/files/12944/narrow-shot.png" style="border-style: solid; border-width: 1px; display: block; height: 1069px; margin: 0px auto; width: 320px;"></p>
-
-<h2 id="Evaluación_o_ayuda_adicional">Evaluación o ayuda adicional</h2>
-
-<p>Si quieres evaluar tu trabajo, estás atorado o quieres pedir ayuda:</p>
-
-<ol>
- <li>Pon tu trabajo en un editor en línea para compartir, como <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a>. Glitch es probablemente el mejor para este ejemplo, porque permite cargar propiedades como imágenes, mientras que algunas de las otras herramientas no lo hacen.</li>
- <li>Escribe una publicación solicitando evaluación y/o ayuda en el foro <a href="https://discourse.mozilla.org/c/mdn">MDN Discourse forum</a>. Agrega la etiqueta "aprendizaje" a tu publicación para que podamos encontrarla más fácilmente. Tu publicación debe incluir:
-  <ul>
-   <li>Un título descriptivo como "Evaluación para página de bienvenida de Mozilla".</li>
-   <li>Detalles de lo que quiera que hagamos, por ejemplo, lo que ya has intentado, si estás atascado y necesitas ayuda.</li>
-   <li>Un enlace al ejemplo que deseas evaluar o en el que necesitas ayuda, en un editor en línea. Ésta es una buena práctica: es muy difícil ayudar a alguien con un problema de codificación si no puede ver su código.</li>
-   <li>Un enlace a la página de evaluación actual, para que podamos encontrar la pregunta con la que desea ayuda.</li>
-  </ul>
- </li>
-</ol>
-
-<p>{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</p>
-
-<h2 id="En_este_módulo">En este módulo</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Imágenes in HTML</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">Contenido de Audio y Video</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">De &lt;object&gt; to &lt;iframe&gt; - otras tecnologías de inserción</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Agregar gráficos vectoriales a la Web</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Imágenes receptivas</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Página de bienvenida de Mozilla</a></li>
-</ul>
diff --git a/files/es/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md b/files/es/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md
new file mode 100644
index 00000000000000..b9f6efc1503f53
--- /dev/null
+++ b/files/es/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md
@@ -0,0 +1,130 @@
+---
+title: Página de bienvenida de Mozilla
+slug: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page
+tags:
+  - Codificación de Secuencia de comandos
+  - CodingScripting
+  - Evaluación
+  - HTML
+  - Imagenes
+  - Inserción
+  - JPEG
+  - Medidas
+  - Multimedia
+  - PNG
+  - Principiante
+  - Video
+  - iframe
+  - img
+  - receptivo
+  - src
+  - srcset
+translation_of: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page
+---
+{{LearnSidebar}}{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}
+
+En esta evaluación, pondremos a prueba tu conocimiento de algunas de las técnicas mostradas en los artículos de este módulo, ¡para que tú agregues algunas imágenes y videos a una página de bienvenida de Mozzilla!.
+
+<table>
+  <tbody>
+    <tr>
+      <th scope="row">Requisitos previos:</th>
+      <td>
+        Antes de intentar esta evaluación, ya deberías conocer el módulo de
+        <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding"
+          >Multimedia e inserción</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Objetivo:</th>
+      <td>
+        Prueba cuánto sabes de la incorporación de imágenes y videos en páginas
+        web, marcos y técnicas de imagen receptiva a HTML.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## Punto de partida
+
+Para comenzar esta evaluación, necesitas el HTML y todas las imágenes de [mdn-splash-page-start](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/) que tienes en la carpeta de GitHub. Guarda el contenido de [index.html](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/index.html) en un archivo llamado `index.html` en tu disco local, en una nueva carpeta. Guarda [pattern.png](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/pattern.png) en la misma carpeta (haciendo click derecho en la imagen y seleccionando la opción guardar).
+
+Accede a las diferentes imágenes en la carpeta de [originals](https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/mdn-splash-page-start/originals) y guárdalas también de la misma manera. De momento puedes guardarlas en una carpeta diferente, ya que podrías necesitar modificarlas usando un editor de gráficos antes de que estén listas para usarlas.
+
+También puedes usar una herramienta en línea como [Glitch](https://glitch.com/) para crear tu ejemplo. Esto puede ser útil si quieres evaluarlo o pedir ayuda — consulta la sección [Assessment or further help](#assessment_or_further_help) al final de esta página.
+
+> **Nota:** El archivo HTML de ejemplo contiene bastante CSS para dar estilo a la página. No necesitas tocar el CSS, solo el HTML dentro del elemento {{htmlelement("body")}}, mientras que insertes el marcado correctamente, el estilo se mantendrá.
+
+## Resumen del proyecto
+
+En esta evaluación, te presentamos una página de bienvenida de Mozzilla en su mayoría terminada, que tiene como objetivo decir algo agradable e interesante sobre lo que significa Mozilla, y proporcionar algunos enlaces a recursos adicionales. Desafortunadamente, aún no se han agregado imágenes o videos, ¡este es tu trabajo!. Debes añadir algunos elementos para que la página se vea bien y tenga sentido. Las siguientes subsecciones detallan lo que tienes que hacer:
+
+### Preparar las imágenes
+
+Usa tu editor de imágenes favorito, y utiliza medidas de 400px de ancho y 120px de alto para:
+
+- `firefox_logo-only_RGB.png`
+- `firefox-addons.jpg`
+- `mozilla-dinosaur-head.png`
+
+Nómbralas por ejemplo, `firefoxlogo400.png` y `firefoxlogo120.png`.
+
+Junto con `mdn.svg`, estas imágenes serán tus iconos para vincular a otros recursos, dentro del área `further-info`. Debes vincular al logo de Firefox en el encabezado del sitio. Guarda copias de todos estos dentro de la misma carpeta que `index.html`.
+
+A continuación, crea una versión horizontal de 1200px de `red-panda.jpg`, y una versión vertical de 600px que muestre al panda en una toma de primer plano. Una vez más, ponle un nombre para que puedas identificarlos fácilmente. Guarda una copia de ambos en la misma carpeta que `index.html`.
+
+> **Nota:** Debes optimizar las imágenes JPG y PNG para que sean lo más pequeñas posible, viéndose bien. [tinypng.com](https://tinypng.com/) es un gran servicio para hacerlo fácilmente.
+
+### Añadir logo al encabezado
+
+El elemento {{htmlelement("header")}}, añade el elemento {{htmlelement("img")}} que insertará la versión pequeña del logotipo de Firefox al encabezado.
+
+### Añadir un video al contenido del artículo principal
+
+Justo dentro del elemento {{htmlelement("article")}} (debajo de la etiqueta de apertura), inserta el video de Youtube <https://www.youtube.com/watch?v=ojcNcvb1olg>, utilizando las herramientas de YouTube para generar el código. El video debe tener 400px de ancho.
+
+### Agregar imágenes receptivas a los enlaces de información adicional
+
+Dentro de {{htmlelement("div")}} con clase `further-info` encontrarás cuatro elementos {{htmlelement("a")}} -cada uno de los cuales vincula a una página interesante relacionada con Mozilla-. Para completar esta sección, debes insertar un elemento {{htmlelement("img")}} dentro de cada uno que contenga los atributos {{htmlattrxref("src", "img")}}, {{htmlattrxref("alt", "img")}}, {{htmlattrxref("srcset", "img")}} y {{htmlattrxref("sizes", "img")}}.
+
+En cada caso, (excepto uno que es inherentemente receptivo) queremos que el navegador sirva la versión 120px cuando el ancho de la ventana de visualización sea de 500px o menos, o la versión de 400px en otro caso.
+
+¡Asegúrate de hacer coincidir las imágenes correctas con los enlaces correctos!
+
+> **Nota:** para probar correctamente los ejemplos `srcset`/`sizes` necesitarás cargar tu sitio a un servidor (usar [Github pages](/es/docs/Learn/Common_questions/Using_Github_pages) es una solución fácil y gratis), y desde allí puedes probar si funcionan correctamente usando herramientas de desarrollo del navegador como Firefox [Network Monitor](/es/docs/Tools/Network_Monitor).
+
+### Un "red-panda" con arte dirigido
+
+Dentro del elemento {{htmlelement("div")}} con clase `red-panda`, queremos insertar un elemento {{htmlelement("picture")}} que permita una imagen pequeña del panda si la ventana tiene 600px de ancho o menos, y la gran imagen del paisaje en caso contrario.
+
+## Ejemplo
+
+Las siguientes capturas de pantalla muestran como debería verse la página de bienvenida después de haber sido marcada correctamente, en una pantalla ancha y estrecha.
+
+![A wide shot of our example splash page](https://mdn.mozillademos.org/files/12946/wide-shot.png)
+
+![A narrow shot of our example splash page](https://mdn.mozillademos.org/files/12944/narrow-shot.png)
+
+## Evaluación o ayuda adicional
+
+Si quieres evaluar tu trabajo, estás atorado o quieres pedir ayuda:
+
+1.  Pon tu trabajo en un editor en línea para compartir, como [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/). Glitch es probablemente el mejor para este ejemplo, porque permite cargar propiedades como imágenes, mientras que algunas de las otras herramientas no lo hacen.
+2.  Escribe una publicación solicitando evaluación y/o ayuda en el foro [MDN Discourse forum](https://discourse.mozilla.org/c/mdn). Agrega la etiqueta "aprendizaje" a tu publicación para que podamos encontrarla más fácilmente. Tu publicación debe incluir:
+
+    - Un título descriptivo como "Evaluación para página de bienvenida de Mozilla".
+    - Detalles de lo que quiera que hagamos, por ejemplo, lo que ya has intentado, si estás atascado y necesitas ayuda.
+    - Un enlace al ejemplo que deseas evaluar o en el que necesitas ayuda, en un editor en línea. Ésta es una buena práctica: es muy difícil ayudar a alguien con un problema de codificación si no puede ver su código.
+    - Un enlace a la página de evaluación actual, para que podamos encontrar la pregunta con la que desea ayuda.
+
+{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}
+
+## En este módulo
+
+- [Imágenes in HTML](/es/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML)
+- [Contenido de Audio y Video](/es/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies)
+- [De \<object> to \<iframe> - otras tecnologías de inserción](/es/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies)
+- [Agregar gráficos vectoriales a la Web](/es/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web)
+- [Imágenes receptivas](/es/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)
+- [Página de bienvenida de Mozilla](/es/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page)
diff --git a/files/es/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html b/files/es/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html
deleted file mode 100644
index 8c2ea69d5e6d7e..00000000000000
--- a/files/es/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html
+++ /dev/null
@@ -1,371 +0,0 @@
----
-title: Desde object hasta iframe - otras tecnologías de incrustación
-slug: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies
-translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}</div>
-
-<p class="summary">Ahora ya deberías estar acostumbrado a integrar cosas en tus páginas web, incluyendo imágenes, video y audio. En este punto nos gustaría que des algo así como un paso al costado, prestando atención a elementos que te permiten integrar una amplia variedad de tipos de contenido en tus páginas web: los elementos {{htmlelement("iframe")}}, {{htmlelement("embed")}} y {{htmlelement("object")}}. Los <code>&lt;iframe&gt;</code>s son para incrustar otras páginas web, y los otros dos te permiten incrustar PDFs, SVG e incluso Flash — una tecnología que está en su camino de despedida, pero la cual seguirás viendo semi-regularmente.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prerrequisitos:</th>
-   <td>Conocimientos básicos de informática, <a href="/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico">software básico instalado</a>, conocimientos básicos de  <a href="/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">manejo de archivos</a>, familiaridad con los fundamentos de HTML (visto en <a href="/es/docs/Learn/HTML/Introduccion_a_HTML/iniciar">Iniciando en HTML</a>) y los artículos previos en este modulo.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objetivo:</th>
-   <td>To learn how to embed items into web pages using {{htmlelement("object")}}, {{htmlelement("embed")}}, and {{htmlelement("iframe")}}, like Flash movies and other webpages.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Enlace_a_la_sección_Una_breve_historia_de_incrustación">Enlace a la sección: Una breve historia de incrustación</h2>
-
-<p>Hace mucho tiempo en la Web, era popular usar <strong>marcos (frames)</strong> para crear sitios web, pequeñas partes de un sitio web almacenadas en páginas HTML individuales. Estos estaban incrustados en un documento maestro llamado <strong>conjunto de marcos (frameset)</strong>, que le permitía especificar el área en la pantalla que ocupaba cada cuadro, como el tamaño de las columnas y las filas de una tabla. Estos fueron considerados el colmo del frescor a mediados y finales de los 90, y había evidencia de que tener una página web dividida en trozos más pequeños como este era mejor para velocidades de descarga, especialmente notable con conexiones de red tan lentas en ese momento. Sin embargo, tuvieron muchos problemas, que superaron con creces cualquier aspecto positivo ya que las velocidades de red se hicieron más rápidas, por lo que ya no se ve que se usen.</p>
-
-<p>Poco tiempo después (finales de los 90, principios de 2000), las tecnologías de complementos se volvieron muy populares, como los Applets de Java y Flash . Esto permitió a los desarrolladores web incorporar contenido enriquecido en páginas web como videos y animaciones, que simplemente no estaban disponibles solo a través de HTML. La incrustación de estas tecnologías se logró a través de elementos como <code>&lt;object&gt;</code> y el menos utilizado <code>&lt;embed&gt;</code> , que fueron muy útiles en ese momento. Desde entonces, pasaron de moda debido a muchos problemas, incluidos el acceso, la seguridad, el tamaño del archivo y entre otros; en la actualidad, la mayoría de los dispositivos móviles ya no son compatibles con estos complementos, y el soporte de escritorio está en camino de desaparecer.</p>
-
-<p>Finalmente, apareció el elemento <code>&lt;iframe&gt;</code> (junto con otras formas de incrustación de contenido, como <code>&lt;canvas&gt;</code> , <code>&lt;video&gt;</code> , etc.). Esto proporciona una forma de insertar un documento web entero dentro de otro, como si fuera un <code>&lt;img&gt;</code> u otro elemento similar, y  asi es como se usa en la actualidad.</p>
-
-<p>Con la lección de historia fuera del camino, sigamos y veamos cómo usar algunos de estos.</p>
-
-<h2 id="Aprendizaje_activo_usos_de_incrustación_clásicos">Aprendizaje activo: usos de incrustación clásicos</h2>
-
-<p>En este artículo vamos a ir directamente a una sección de aprendizaje activo, para darle una idea real de la utilidad de las tecnologías de inclusión. El mundo en línea está muy familiarizado con Youtube, pero muchas personas no conocen algunas de las comodidades para compartir que tiene disponibles. Veamos cómo Youtube nos permite insertar un video en cualquier página que nos guste usando un <code>&lt;iframe&gt;</code> .</p>
-
-<ol>
- <li>Primero, ve a Youtube y encuentra el video que te gusta.</li>
- <li>Debajo del video, encontrará un botón <em>Compartir</em> : seleccionelo para mostrar las opciones para compartir.</li>
- <li>Seleccione el botón <em>Insertar</em> y recibirá un código <code>&lt;iframe&gt;</code> - copielo.</li>
- <li>Insértelo en el cuadro de <em>entrada a</em> continuación, y vea cuál es el resultado en la <em>salida</em> .</li>
-</ol>
-
-<p>Para obtener puntos de bonificación, también puede intentar insertar un mapa de Google en el ejemplo:</p>
-
-<ol>
- <li>Ve a Google Maps y encuentra un mapa que te guste.</li>
- <li>Haga clic en el "Menú Hamburger" (tres líneas horizontales) en la esquina superior izquierda de la IU.</li>
- <li>Seleccione la opción <em>Compartir o Insertar mapa</em> .</li>
- <li>Seleccione la opción Insertar mapa, que le dará un código <code>&lt;iframe&gt;</code> - copielo.</li>
- <li>Insértelo en el cuadro de <em>entrada a</em> continuación, y vea cuál es el resultado en la <em>salida</em> .</li>
-</ol>
-
-<p>Si comete un error, siempre puede restablecerlo usando el botón <em>Restablecer</em> . Si realmente te quedas atascado, presiona el botón <em>Mostrar solución</em> para ver una respuesta.</p>
-
-<div class="hidden">
-<h6 id="Código_interactivo">Código interactivo</h6>
-
-<pre class="brush: html notranslate">&lt;h2&gt;Live output&lt;/h2&gt;
-
-&lt;div class="output" style="min-height: 250px;"&gt;
-&lt;/div&gt;
-
-&lt;h2&gt;Editable code&lt;/h2&gt;
-&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
-
-&lt;textarea id="code" class="input" style="width: 95%;min-height: 100px;"&gt;
-&lt;/textarea&gt;
-
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="reset" type="button" value="Reset"&gt;
-  &lt;input id="solution" type="button" value="Show solution"&gt;
-&lt;/div&gt;</pre>
-
-<pre class="brush: css notranslate">html {
-  font-family: sans-serif;
-}
-
-h2 {
-  font-size: 16px;
-}
-
-.a11y-label {
-  margin: 0;
-  text-align: right;
-  font-size: 0.7rem;
-  width: 98%;
-}
-
-body {
-  margin: 10px;
-  background: #f5f9fa;
-}</pre>
-
-<pre class="brush: js notranslate">var textarea = document.getElementById('code');
-var reset = document.getElementById('reset');
-var solution = document.getElementById('solution');
-var output = document.querySelector('.output');
-var code = textarea.value;
-var userEntry = textarea.value;
-
-function updateCode() {
-  output.innerHTML = textarea.value;
-}
-
-reset.addEventListener('click', function() {
-  textarea.value = code;
-  userEntry = textarea.value;
-  solutionEntry = htmlSolution;
-  solution.value = 'Show solution';
-  updateCode();
-});
-
-solution.addEventListener('click', function() {
-  if(solution.value === 'Show solution') {
-    textarea.value = solutionEntry;
-    solution.value = 'Hide solution';
-  } else {
-    textarea.value = userEntry;
-    solution.value = 'Show solution';
-  }
-  updateCode();
-});
-
-var htmlSolution = '&lt;iframe width="420" height="315" src="https://www.youtube.com/embed/QH2-TGUlwu4" frameborder="0" allowfullscreen&gt;\n&lt;/iframe&gt;\n\n&lt;iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d37995.65748333395!2d-2.273568166412784!3d53.473310471916975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487bae6c05743d3d%3A0xf82fddd1e49fc0a1!2sThe+Lowry!5e0!3m2!1sen!2suk!4v1518171785211" width="600" height="450" frameborder="0" style="border:0" allowfullscreen&gt;\n&lt;/iframe&gt;';
-var solutionEntry = htmlSolution;
-
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
-
-// stop tab key tabbing out of textarea and
-// make it write a tab at the caret position instead
-
-textarea.onkeydown = function(e){
-  if (e.keyCode === 9) {
-    e.preventDefault();
-    insertAtCaret('\t');
-  }
-
-  if (e.keyCode === 27) {
-    textarea.blur();
-  }
-};
-
-function insertAtCaret(text) {
-  var scrollPos = textarea.scrollTop;
-  var caretPos = textarea.selectionStart;
-
-  var front = (textarea.value).substring(0, caretPos);
-  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
-  textarea.value = front + text + back;
-  caretPos = caretPos + text.length;
-  textarea.selectionStart = caretPos;
-  textarea.selectionEnd = caretPos;
-  textarea.focus();
-  textarea.scrollTop = scrollPos;
-}
-
-// Update the saved userCode every time the user updates the text area code
-
-textarea.onkeyup = function(){
-  // We only want to save the state when the user code is being shown,
-  // not the solution, so that solution is not saved over the user code
-  if(solution.value === 'Show solution') {
-    userEntry = textarea.value;
-  } else {
-    solutionEntry = textarea.value;
-  }
-
-  updateCode();
-};</pre>
-</div>
-
-<p>{{ EmbedLiveSample('Playable_code', 700, 600, "", "", "hide-codepen-jsfiddle") }}</p>
-
-<h2 id="Iframes_en_detalle">Iframes en detalle</h2>
-
-<p>Entonces, fue fácil y divertido ¿verdad? Los elementos {{htmlelement("iframe")}} están diseñados para permitirte incrustar documentos web en el documento actual.  Esto es excelente para incorporar contenido de terceros en tu sitio web sobre el que no tengas control directo y no quieras tener que implementar tu propia versión — como vídeo de porveedeores de vídeo en línea, sistemas de comentarios como <a href="https://disqus.com/">Disqus</a>, mapas de proveedores de mapas en línea, banners publicitarios, etc. Los ejemplos editables que has estado usando a través de este curso se implementan usando <code>&lt;iframe&gt;</code>s.</p>
-
-<p>Hay algunos serios  <a href="#security_concerns">Security concerns</a> a considerar con <code>&lt;iframe&gt;</code>s, también se discute a continuación, pero esto no significa que debas dejar de usarlos en tus sitios web — solo requiere un poco de conocimiento y pensar cuidadosamente. Vamos a explorar el código con un poco más de detalle. Supongamos que quieres incluir el glosario de MDN en una de tus páginas web — podrías intentar algo como esto:</p>
-
-<pre class="notranslate">&lt;iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
-        width="100%" height="500" frameborder="0"
-        allowfullscreen sandbox&gt;
-  &lt;p&gt; &lt;a href="https://developer.mozilla.org/en-US/docs/Glossary"&gt;
-    Fallback link for browsers that don't support iframes
-  &lt;/a&gt; &lt;/p&gt;
-&lt;/iframe&gt;</pre>
-
-<p>Este ejemplo incluye los elementos básicos necesarios para usar un  <code>&lt;iframe&gt;</code>:</p>
-
-<dl>
- <dt>{{htmlattrxref('allowfullscreen','iframe')}}</dt>
- <dd>Si está configurado, el  <code>&lt;iframe&gt;</code> se puede colocar en modo pantalla completa usando el  <a href="/en-US/docs/Web/API/Fullscreen_API">Full Screen API</a> (El uso del API está fuera del alcance de este artículo.)</dd>
- <dt>{{htmlattrxref('frameborder','iframe')}}</dt>
- <dd>Si se establece en 1, esto le indica al navegador que dibuje un borde entre este marco y otros marcos, que es el comportamiento predeterminado. 0 elimina el borde. Usar esto ya no es realmente recomendable, ya que el mismo efecto se puede lograr mejor usando{{cssxref('border')}}<code>: none;</code> en tu {{Glossary('CSS')}}.</dd>
- <dt>{{htmlattrxref('src','iframe')}}</dt>
- <dd>Este atributo, como con {{htmlelement("video")}}/{{htmlelement("img")}},contiene una ruta que apunta a la URL del documento que se va a incrustar.</dd>
- <dt>{{htmlattrxref('width','iframe')}} and {{htmlattrxref('height','iframe')}}</dt>
- <dd>Estos atributos especifican el ancho y la altura (width y height) que quieres que tenga el iframe.</dd>
- <dt><strong>Contenido de reserva</strong></dt>
- <dd>De la misma manera que otros elementos similares {{htmlelement("video")}}, puedes incluir contenido alternativo entre las etiquetas de apertura y cierre <code>&lt;iframe&gt;&lt;/iframe&gt;</code> que aparecerán si el navegador no admite el  <code>&lt;iframe&gt;</code>. En este caso hemos incluido un enlace a la página. Es poco probable que encuentres algún navegador que no admita <code>&lt;iframe&gt;</code>s en estos días.</dd>
- <dt>{{htmlattrxref('sandbox','iframe')}}</dt>
- <dd>Este atributo, que funciona en navegadores un poco más modernos que el resto de la funciones de <code>&lt;iframe&gt;</code> (por ejemplo IE 10 y superior) solicita una mayor configuración de seguridad; bueno, hablaremos más sobre esto en la siguiente sección.</dd>
-</dl>
-
-<div class="note">
-<p><strong>Nota</strong>: Para mejorar la velocidad, es una buena idea establecer el atributo <code>src</code> de iframes con  JavaScript después de que se cargue el contenido principal. Esto hace que tu página pueda utilizarse antes y disminuye el tiempo de carga de tu página principal (an important {{Glossary("SEO")}}.)</p>
-</div>
-
-<h3 id="Con_respecto_a_la_seguridad">Con respecto  a la seguridad</h3>
-
-<p>Arriba mencionamos nuestra preocupación por la seguridad — vamos a entrar en esto con un poco más de detalle ahora. No esperamos que comprendas todo este contenido perfectametne a la primera. Solo queremos informarte sobre esta preocupación y proporcionarte una referencia a la que volver a medida que tengas más experiencia y comiences  a considerar el uso de  <code>&lt;iframe&gt;</code>s en tu trabajo y  en tus experimentos.además, no es necesario tener miedo y no usar  <code>&lt;iframe&gt;</code>s — iframes, solo debes tener cuidado. Sigue leyendo...</p>
-
-<p>Los creadores de navegadores y los desarrolladores web han aprendido por las malas que los iframes son un objetivo común (término oficial: <strong>vector de ataque</strong>) para los "malos" de la Web (a menudo denominados <strong>hackers</strong>,o más exactamente, <strong>crackers</strong>) para atacar si están tratando de modificar maliciosamente tu página web, o engañar a las personas para que hagan algo que no quieren hacer, como revelar información confidencial como nombre de usuario o contraseña. Debido a esto, los ingenieros de especificaciones y los desarrolladores de navegadores han desarrollado varios mecanismos  para hacer que los <code>&lt;iframe&gt;</code>s sean más seguros, y también hay mejores prácticas a considerar — cubriremos algunas de estas a continuación.</p>
-
-<div class="note">
-<p>{{interwiki('wikipedia','Clickjacking')}} es un tipo de ataque de iframe común en el que los piratas informáticos incrustan un iframe invisible en tu documento (o incrustan tu documento en su propio sitio web malicioso) y lo utilizan para capturar las interacciones de los ususarios. Esta es una forma común de engañar a los usuarios o robar datos sensibles.</p>
-</div>
-
-<p>Primero un ejemplo rápido — intenta cargar el ejemplo anterior que mostramos arriba en tu navegador — puedes encontrarlo en <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/iframe-detail.html"> Github</a> (ver el <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/iframe-detail.html">código fuente</a> ) Tu no verás nada en tu navegador, pero si miras en la <em>Consola</em> en las <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">herramientas de desarrollador de tu navegador</a>,  tú verás un mensaje diciendote porque.En Firefox, te dirá <em>Load denied by X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary does not permit framing</em>. Esto es porque los desarrolladores que construyeron MDN han incluido una configuración en el servidor que almacena la página web que impide que sean incrustados dentro de  <code>&lt;iframe&gt;</code>s (ver <a href="#configure_csp_directives">Configure CSP directives</a>, abajo.) Esto tiene sentido— una página completa de MDN no tiene sentido estar incrustada en otras páginas, a menos que tu quieras hacer algo como incrustarlas en tu sitio web y reclamarlas como propias  — o intentar robar datos via clickjacking, los cuales ambos son cosas realmente malas. Además de que si todo el mundo comienza a hacerlo, todo el ancho de banda adicional podría costarle mucho dinero a Mozzilla.</p>
-
-<h4 id="Solo_incrusta_cuando_sea_necesario">Solo incrusta cuando sea necesario</h4>
-
-<p>Algunas veces tiene sentido embeber contenido de terceros— como vídeos de youtube y mapas — pero puedes ahorrarte muchos dolores de cabeza si tu solo embebes contenido de terceros solo cuando es necesario. Una buena regla de oro para la seguridad web es "Nunca puedes ser demasiado cauteloso. Si lo hizo, verifíquelo de todos modos. Si alguien más lo hizo, asuma que es peligroso hasta que se demuestre lo contrario".</p>
-
-<p>Además de la seguridad, debes ser consciente de los temas de propiedad intelectual. La mayoría del contenido tiene derechos de autor, en línea y fuera de línea, incluso contenido que no te esperas(por ejemplo, la mayoría de las imágenes en <a href="https://commons.wikimedia.org/wiki/Main_Page">Wikimedia Commons</a>). Nunca muestres en tu pagina contenido a menos que te pertenezca o que el dueño te haya dado por escrito su permiso inequívoco. Las penalidades por derechos de autor son severas. De nuevo, tu nunca puedes ser demasiado cauteloso. </p>
-
-<p>Si el contenido es licenciado, debes obedecer los terminos de la licencia. Por ejemplo, el contenido en MDN es licenciado bajo<a href="/en-US/docs/MDN/About#Copyrights_and_licenses"> CC-BY-SA</a>. Esto significa, que tu debes darnos <a href="https://wiki.creativecommons.org/wiki/Best_practices_for_attribution">credito apropiadamente</a>  cuando tu citas nuestro contenido, aun si tu haces cambios substanciales.</p>
-
-<h4 id="Usa_HTTPS">Usa HTTPS</h4>
-
-<p>{{Glossary("HTTPS")}} es la versión encriptada de {{Glossary("HTTP")}}. Deberias cumplir con tu página web usando HTTPS siempre que sea posible:</p>
-
-<ol>
- <li>HTTPS reduce la oportunidad de que contenido remoto haya sido manipulado en el tránsito.</li>
- <li>HTTPS previene que el contenido embebido acceda al documento padre y viceversa. </li>
-</ol>
-
-<p>Usar HTTPS requiere un certificado de seguridad, el cual puede ser costoso (Aunque <a href="https://letsencrypt.org/">Let's Encrypt</a> hace las cosas más faciles) — si tu no puedes tener uno, tu debes servir tu documento padre con HTTP. Sin embargo, debido al segundo beneficio de HTTPS expuesto arriba, no importa cual sea el costo tu nunca debes embeber contenido de terceros con HTTP. (En el mejor de los casos, el navegador de tus usuarios les dará una advertencia). Todas las empresas con buena reputación que hacen contenido para embeber via <code>&lt;iframe&gt;</code> lo harán  disponible via HTTPS — mira la URLs dentro del <code>&lt;iframe&gt;</code> atributo <code>src</code> cuando tu estes embebiendo contenido desde Google Maps o Youtube, por ejemplo.</p>
-
-<div class="note">
-<p><strong>Note</strong>: <a href="/en-US/docs/Learn/Common_questions/Using_Github_pages">Github pages</a> permite que el contenido sea servido via HTTPS  por defecto, asi que es util para hospedar tu contenido. Si estás usando un hosting diferente y no estás seguro, pregunta a tu proveedor de hosting acerca del tema .</p>
-</div>
-
-<h4 id="Siempre_usa_el_atributo_sandbox">Siempre usa el atributo <code>sandbox</code></h4>
-
-<p>You want to give attackers as little power as you can to do bad things on your website, therefore you should give embedded content <em>only the permissions needed for doing its job. </em>Of course, this applies to your own content, too. un contenedor para codigo que puedes usar apropiadamente — o para probar — but can't cause any harm to the rest of the codebase (either accidental or malicious) is called a <a href="https://en.wikipedia.org/wiki/Sandbox_(computer_security)">sandbox</a>.</p>
-
-<p>Unsandboxed content can do way too much (executing JavaScript, submitting forms, popup windows, etc.) By default you should impose all available restrictions by using the <code>sandbox</code> attribute with no parameters, as shown in our previous example.</p>
-
-<p>If absolutely required, you can add permissions back one by one (inside the <code>sandbox=""</code> attribute value) — see the {{htmlattrxref('sandbox','iframe')}} reference entry for all the available options. One important note is that you should <em>never</em> add both <code>allow-scripts</code> and <code>allow-same-origin</code> to your <code>sandbox</code> attribute — in that case the embedded content could bypass the same origin security policy that stops sites from executing scripts, and use JavaScript to turn off sandboxing altogether.</p>
-
-<div class="note">
-<p><strong>Note</strong>: Sandboxing provides no protection if attackers can fool people into visiting malicious content directly (outside an <code>iframe</code>). If there's any chance that certain content may be malicious (e.g., user-generated content), please serve it from a different {{glossary("domain")}} to your main site.</p>
-</div>
-
-<h4 id="Configure_CSP_directives">Configure CSP directives</h4>
-
-<p>{{Glossary("CSP")}} stands for <strong><a href="/en-US/docs/Web/Security/CSP">content security policy</a></strong>, and provides <a href="/en-US/docs/Web/Security/CSP/CSP_policy_directives">a set of HTTP Headers</a> (metadata sent along with your web pages when they are served from a web server) designed to improve the security of your HTML document. When it comes to securing <code>&lt;iframe&gt;</code>s, you can <em><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options">configure your server to send an appropriate <code>X-Frame-Options</code>  header.</a></em> This can prevent other websites from embedding your content in their webpages (which would enable {{interwiki('wikipedia','clickjacking')}} and a host of other attacks), which is exactly what the MDN developers have done, as we saw earlier on.</p>
-
-<div class="note">
-<p><strong>Note</strong>: You can read Frederik Braun's post <a href="https://blog.mozilla.org/security/2013/12/12/on-the-x-frame-options-security-header/">On the X-Frame-Options Security Header</a> for more background information on this topic. Obviously, it's rather out of scope for a full explanation in this article.</p>
-</div>
-
-<h2 id="The_&lt;embed>_and_&lt;object>_elements">The &lt;embed&gt; and &lt;object&gt; elements</h2>
-
-<p>The {{htmlelement("embed")}} and {{htmlelement("object")}} elements serve a different function to {{htmlelement("iframe")}} — these elements are general purpose embedding tools for embedding multiple types of external content, which include plugin technologies like Java Applets and Flash, PDF (which can be shown in a browser with a PDF plugin), and even content like videos, SVG and images!</p>
-
-<div class="note">
-<p><strong>Note</strong>: A <strong>plugin</strong> is software that provides access to content the browser cannot read natively.</p>
-</div>
-
-<p>However, you are unlikely to use these elements very much — Applets haven't been used for years, Flash is no longer very popular, due to a number of reasons (see <a href="#the_case_against_plugins">The case against plugins</a>, below), PDFs tend to be be better linked to than embedded, and other content such as images and video have much better, easier elements to handle those. Plugins and these embedding methods are really a legacy technology, and we are mainly mentioning them in case you come across them in certain circumstances like intranets, or enterprise projects.</p>
-
-<p>If you find yourself needing to embed plugin content, this is the kind of information you'll need, at a minimum:</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col"></th>
-   <th scope="col">{{htmlelement("embed")}}</th>
-   <th scope="col">{{htmlelement("object")}}</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{glossary("URL")}} of the embedded content</td>
-   <td>{{htmlattrxref('src','embed')}}</td>
-   <td>{{htmlattrxref('data','object')}}</td>
-  </tr>
-  <tr>
-   <td><em>accurate </em>{{glossary("MIME type", 'media type')}} of the embedded content</td>
-   <td>{{htmlattrxref('type','embed')}}</td>
-   <td>{{htmlattrxref('type','object')}}</td>
-  </tr>
-  <tr>
-   <td>height and width (in CSS pixels) of the box controlled by the plugin</td>
-   <td>{{htmlattrxref('height','embed')}}<br>
-    {{htmlattrxref('width','embed')}}</td>
-   <td>{{htmlattrxref('height','object')}}<br>
-    {{htmlattrxref('width','object')}}</td>
-  </tr>
-  <tr>
-   <td>names and values, to feed the plugin as parameters</td>
-   <td>ad hoc attributes with those names and values</td>
-   <td>single-tag {{htmlelement("param")}} elements, contained within <code>&lt;object&gt;</code></td>
-  </tr>
-  <tr>
-   <td>independent HTML content as fallback for an unavailable resource</td>
-   <td>not supported (<code>&lt;noembed&gt;</code> is obsolete)</td>
-   <td>contained within <code>&lt;object&gt;</code>, after <code>&lt;param&gt;</code> elements</td>
-  </tr>
- </tbody>
-</table>
-
-<div class="note">
-<p><strong>Note</strong>: <code>&lt;object&gt;</code> requires a <code>data</code> attribute, a <code>type</code> attribute, or both. If you use both, you may also use the {{htmlattrxref('typemustmatch','object')}} attribute (only implemented in Firefox, as of this writing). <code>typemustmatch</code> keeps the embedded file from running unless the <code>type</code> attribute provides the correct media type. <code>typemustmatch</code> can therefore confer significant security benefits when you're embedding content from a different {{glossary("origin")}} (it can keep attackers from running arbitrary scripts through the plugin).</p>
-</div>
-
-<p>Here's an example that uses the {{htmlelement("embed")}} element to embed a Flash movie (see this <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html">live on Github</a>, and <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html">check the source code</a> too):</p>
-
-<pre class="brush: html notranslate">&lt;embed src="whoosh.swf" quality="medium"
-       bgcolor="#ffffff" width="550" height="400"
-       name="whoosh" align="middle" allowScriptAccess="sameDomain"
-       allowFullScreen="false" type="application/x-shockwave-flash"
-       pluginspage="http://www.macromedia.com/go/getflashplayer"&gt;</pre>
-
-<p>Pretty horrible, isn't it. The HTML generated by the Adobe Flash tool tended to be even worse, using an <code>&lt;object&gt;</code> element with an <code>&lt;embed&gt;</code> element embedded in it, to cover all bases (check out an example.) Flash was even used successfully as fallback content for HTML5 video, for a time, but this is increasingly being seen as not necessary.</p>
-
-<p>Now let's look at an <code>&lt;object&gt;</code> example that embeds a PDF into a page (see the <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html">live example</a> and the <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html">source code</a>):</p>
-
-<pre class="brush: html notranslate">&lt;object data="mypdf.pdf" type="application/pdf"
-        width="800" height="1200" typemustmatch&gt;
-  &lt;p&gt;You don't have a PDF plugin, but you can &lt;a href="myfile.pdf"&gt;download the PDF file.&lt;/a&gt;&lt;/p&gt;
-&lt;/object&gt;</pre>
-
-<p>PDFs were a necessary stepping stone between paper and digital, but they pose many <a href="http://webaim.org/techniques/acrobat/acrobat">accessibility challenges</a> and can be hard to read on small screens. They do still tend to be popular in some circles, but it is much better to link to them so they can be downloaded or read on a separate page, rather than embedding them in a webpage.</p>
-
-<h3 id="The_case_against_plugins">The case against plugins</h3>
-
-<p>Once upon a time, plugins were indispensable on the Web. Remember the days when you had to install Adobe Flash Player just to watch a movie online? And then you constantly got annoying alerts about updating Flash Player and your Java Runtime Environment. Web technologies have since grown much more robust, and those days are over. For most applications, it's time to stop delivering content that depends on plugins, and start taking advantage of Web technologies instead.</p>
-
-<ul>
- <li><strong>Broaden your reach to everyone. </strong>Everyone has a browser, but plugins are increasingly rare, especially among mobile users. Since the Web is largely usable without plugins, people would rather just go to your competitors' websites than install a plugin.</li>
- <li><strong>Give yourself a break from the <a href="http://webaim.org/techniques/flash/">extra accessibility headaches </a>that come with Flash and other plugins.</strong></li>
- <li><strong>Stay clear of additional security hazards. </strong>Adobe Flash is <a href="http://www.cvedetails.com/product/6761/Adobe-Flash-Player.html?vendor_id=53">notoriously insecure,</a> even after countless patches. In 2015, Alex Stamos, chief security officer of Facebook, even <a href="http://www.theverge.com/2015/7/13/8948459/adobe-flash-insecure-says-facebook-cso">requested that Adobe discontinue Flash.</a></li>
-</ul>
-
-<p>So what should you do? If you need interactivity, HTML and {{glossary("JavaScript")}} can readily get the job done for you with no need for Java applets or outdated ActiveX/BHO technology. Instead of relying on Adobe Flash, you can use <a href="/en-US/docs/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage">HTML5 video</a> for your media needs, <a href="/en-US/docs/Learn/HTML/Howto/Add_vector_image_to_a_webpage">SVG</a> for vector graphics, and <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas</a> for complex images and animations. <a href="https://plus.google.com/+PeterElst/posts/P5t4pFhptvp">Peter Elst was already writing some years ago</a> that Adobe Flash is rarely the right tool for the job, except for specialized gaming and business applications. As for ActiveX, even Microsoft's {{glossary("Microsoft Edge","Edge")}} browser no longer supports it.</p>
-
-<h2 id="Summary">Summary</h2>
-
-<p>The topic of embedding other content in web documents can quickly become very complex, so in this article we've tried to introduce it in a simple, familiar way that will immediately seem relevant, while still hinting at some of the more advanced features of the involved technologies. To start with, you are unlikely to use embedding for much beyond including third party content like maps and videos on your pages. As you become more experienced however, you are likely to start finding more uses for them.</p>
-
-<p>There are many other technologies that involve embedding external content besides the ones we discussed here. We saw some in earlier articles, such as {{htmlelement("video")}}, {{htmlelement("audio")}}, and {{htmlelement("img")}}, but there are others to discover, such as {{htmlelement("canvas")}} for JavaScript-generated 2D and 3D graphics, and {{htmlelement("svg")}} for embedding vector graphics. We'll look at <a href="/en-US/docs/Web/SVG">SVG</a> in the next article of the module.</p>
-
-<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}</p>
-
-<h2 id="In_this_module">In this module</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From &lt;object&gt; to &lt;iframe&gt; — other embedding technologies</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the Web</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li>
-</ul>
diff --git a/files/es/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md b/files/es/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md
new file mode 100644
index 00000000000000..828a72e4692392
--- /dev/null
+++ b/files/es/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md
@@ -0,0 +1,337 @@
+---
+title: Desde object hasta iframe - otras tecnologías de incrustación
+slug: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies
+translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies
+---
+{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}
+
+Ahora ya deberías estar acostumbrado a integrar cosas en tus páginas web, incluyendo imágenes, video y audio. En este punto nos gustaría que des algo así como un paso al costado, prestando atención a elementos que te permiten integrar una amplia variedad de tipos de contenido en tus páginas web: los elementos {{htmlelement("iframe")}}, {{htmlelement("embed")}} y {{htmlelement("object")}}. Los `<iframe>`s son para incrustar otras páginas web, y los otros dos te permiten incrustar PDFs, SVG e incluso Flash — una tecnología que está en su camino de despedida, pero la cual seguirás viendo semi-regularmente.
+
+<table>
+  <tbody>
+    <tr>
+      <th scope="row">Prerrequisitos:</th>
+      <td>
+        Conocimientos básicos de informática,
+        <a
+          href="/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico"
+          >software básico instalado</a
+        >, conocimientos básicos de
+        <a
+          href="/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos"
+          >manejo de archivos</a
+        >, familiaridad con los fundamentos de HTML (visto en
+        <a href="/es/docs/Learn/HTML/Introduccion_a_HTML/iniciar"
+          >Iniciando en HTML</a
+        >) y los artículos previos en este modulo.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Objetivo:</th>
+      <td>
+        To learn how to embed items into web pages using
+        {{htmlelement("object")}}, {{htmlelement("embed")}}, and
+        {{htmlelement("iframe")}}, like Flash movies and other webpages.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## Enlace a la sección: Una breve historia de incrustación
+
+Hace mucho tiempo en la Web, era popular usar **marcos (frames)** para crear sitios web, pequeñas partes de un sitio web almacenadas en páginas HTML individuales. Estos estaban incrustados en un documento maestro llamado **conjunto de marcos (frameset)**, que le permitía especificar el área en la pantalla que ocupaba cada cuadro, como el tamaño de las columnas y las filas de una tabla. Estos fueron considerados el colmo del frescor a mediados y finales de los 90, y había evidencia de que tener una página web dividida en trozos más pequeños como este era mejor para velocidades de descarga, especialmente notable con conexiones de red tan lentas en ese momento. Sin embargo, tuvieron muchos problemas, que superaron con creces cualquier aspecto positivo ya que las velocidades de red se hicieron más rápidas, por lo que ya no se ve que se usen.
+
+Poco tiempo después (finales de los 90, principios de 2000), las tecnologías de complementos se volvieron muy populares, como los Applets de Java y Flash . Esto permitió a los desarrolladores web incorporar contenido enriquecido en páginas web como videos y animaciones, que simplemente no estaban disponibles solo a través de HTML. La incrustación de estas tecnologías se logró a través de elementos como `<object>` y el menos utilizado `<embed>` , que fueron muy útiles en ese momento. Desde entonces, pasaron de moda debido a muchos problemas, incluidos el acceso, la seguridad, el tamaño del archivo y entre otros; en la actualidad, la mayoría de los dispositivos móviles ya no son compatibles con estos complementos, y el soporte de escritorio está en camino de desaparecer.
+
+Finalmente, apareció el elemento `<iframe>` (junto con otras formas de incrustación de contenido, como `<canvas>` , `<video>` , etc.). Esto proporciona una forma de insertar un documento web entero dentro de otro, como si fuera un `<img>` u otro elemento similar, y asi es como se usa en la actualidad.
+
+Con la lección de historia fuera del camino, sigamos y veamos cómo usar algunos de estos.
+
+## Aprendizaje activo: usos de incrustación clásicos
+
+En este artículo vamos a ir directamente a una sección de aprendizaje activo, para darle una idea real de la utilidad de las tecnologías de inclusión. El mundo en línea está muy familiarizado con Youtube, pero muchas personas no conocen algunas de las comodidades para compartir que tiene disponibles. Veamos cómo Youtube nos permite insertar un video en cualquier página que nos guste usando un `<iframe>` .
+
+1.  Primero, ve a Youtube y encuentra el video que te gusta.
+2.  Debajo del video, encontrará un botón _Compartir_ : seleccionelo para mostrar las opciones para compartir.
+3.  Seleccione el botón _Insertar_ y recibirá un código `<iframe>` - copielo.
+4.  Insértelo en el cuadro de _entrada a_ continuación, y vea cuál es el resultado en la _salida_ .
+
+Para obtener puntos de bonificación, también puede intentar insertar un mapa de Google en el ejemplo:
+
+1.  Ve a Google Maps y encuentra un mapa que te guste.
+2.  Haga clic en el "Menú Hamburger" (tres líneas horizontales) en la esquina superior izquierda de la IU.
+3.  Seleccione la opción _Compartir o Insertar mapa_ .
+4.  Seleccione la opción Insertar mapa, que le dará un código `<iframe>` - copielo.
+5.  Insértelo en el cuadro de _entrada a_ continuación, y vea cuál es el resultado en la _salida_ .
+
+Si comete un error, siempre puede restablecerlo usando el botón _Restablecer_ . Si realmente te quedas atascado, presiona el botón _Mostrar solución_ para ver una respuesta.
+
+```html hidden
+<h2>Live output</h2>
+
+<div class="output" style="min-height: 250px;">
+</div>
+
+<h2>Editable code</h2>
+<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p>
+
+<textarea id="code" class="input" style="width: 95%;min-height: 100px;">
+</textarea>
+
+<div class="playable-buttons">
+<input id="reset" type="button" value="Reset">
+<input id="solution" type="button" value="Show solution">
+</div>
+```
+
+```css hidden
+html {
+font-family: sans-serif;
+}
+
+h2 {
+font-size: 16px;
+}
+
+.a11y-label {
+margin: 0;
+text-align: right;
+font-size: 0.7rem;
+width: 98%;
+}
+
+body {
+margin: 10px;
+background: #f5f9fa;
+}
+```
+
+```js hidden
+var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+textarea.value = code;
+userEntry = textarea.value;
+solutionEntry = htmlSolution;
+solution.value = 'Show solution';
+updateCode();
+});
+
+solution.addEventListener('click', function() {
+if(solution.value === 'Show solution') {
+textarea.value = solutionEntry;
+solution.value = 'Hide solution';
+} else {
+textarea.value = userEntry;
+solution.value = 'Show solution';
+}
+updateCode();
+});
+
+var htmlSolution = '<iframe width="420" height="315" src="https://www.youtube.com/embed/QH2-TGUlwu4" frameborder="0" allowfullscreen>\n</iframe>\n\n<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d37995.65748333395!2d-2.273568166412784!3d53.473310471916975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487bae6c05743d3d%3A0xf82fddd1e49fc0a1!2sThe+Lowry!5e0!3m2!1sen!2suk!4v1518171785211" width="600" height="450" frameborder="0" style="border:0" allowfullscreen>\n</iframe>';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+if (e.keyCode === 9) {
+e.preventDefault();
+insertAtCaret('\t');
+}
+
+if (e.keyCode === 27) {
+textarea.blur();
+}
+};
+
+function insertAtCaret(text) {
+var scrollPos = textarea.scrollTop;
+var caretPos = textarea.selectionStart;
+
+var front = (textarea.value).substring(0, caretPos);
+var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+textarea.value = front + text + back;
+caretPos = caretPos + text.length;
+textarea.selectionStart = caretPos;
+textarea.selectionEnd = caretPos;
+textarea.focus();
+textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+// We only want to save the state when the user code is being shown,
+// not the solution, so that solution is not saved over the user code
+if(solution.value === 'Show solution') {
+userEntry = textarea.value;
+} else {
+solutionEntry = textarea.value;
+}
+
+updateCode();
+};
+```
+
+{{ EmbedLiveSample('Playable_code', 700, 600, "", "", "hide-codepen-jsfiddle") }}
+
+## Iframes en detalle
+
+Entonces, fue fácil y divertido ¿verdad? Los elementos {{htmlelement("iframe")}} están diseñados para permitirte incrustar documentos web en el documento actual. Esto es excelente para incorporar contenido de terceros en tu sitio web sobre el que no tengas control directo y no quieras tener que implementar tu propia versión — como vídeo de porveedeores de vídeo en línea, sistemas de comentarios como [Disqus](https://disqus.com/), mapas de proveedores de mapas en línea, banners publicitarios, etc. Los ejemplos editables que has estado usando a través de este curso se implementan usando `<iframe>`s.
+
+Hay algunos serios [Security concerns](#security_concerns) a considerar con `<iframe>`s, también se discute a continuación, pero esto no significa que debas dejar de usarlos en tus sitios web — solo requiere un poco de conocimiento y pensar cuidadosamente. Vamos a explorar el código con un poco más de detalle. Supongamos que quieres incluir el glosario de MDN en una de tus páginas web — podrías intentar algo como esto:
+
+```html
+<iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
+        width="100%" height="500" frameborder="0"
+        allowfullscreen sandbox>
+  <p> <a href="https://developer.mozilla.org/en-US/docs/Glossary">
+    Fallback link for browsers that don't support iframes
+  </a> </p>
+</iframe>
+```
+
+Este ejemplo incluye los elementos básicos necesarios para usar un `<iframe>`:
+
+- {{htmlattrxref('allowfullscreen','iframe')}}
+  - : Si está configurado, el `<iframe>` se puede colocar en modo pantalla completa usando el [Full Screen API](/es/docs/Web/API/Fullscreen_API) (El uso del API está fuera del alcance de este artículo.)
+- {{htmlattrxref('frameborder','iframe')}}
+  - : Si se establece en 1, esto le indica al navegador que dibuje un borde entre este marco y otros marcos, que es el comportamiento predeterminado. 0 elimina el borde. Usar esto ya no es realmente recomendable, ya que el mismo efecto se puede lograr mejor usando[`border`](/es/docs/Web/CSS/border)`: none;` en tu {{Glossary('CSS')}}.
+- {{htmlattrxref('src','iframe')}}
+  - : Este atributo, como con {{htmlelement("video")}}/{{htmlelement("img")}},contiene una ruta que apunta a la URL del documento que se va a incrustar.
+- {{htmlattrxref('width','iframe')}} and {{htmlattrxref('height','iframe')}}
+  - : Estos atributos especifican el ancho y la altura (width y height) que quieres que tenga el iframe.
+- **Contenido de reserva**
+  - : De la misma manera que otros elementos similares [`<video>`](/es/docs/Web/HTML/Element/video), puedes incluir contenido alternativo entre las etiquetas de apertura y cierre `<iframe></iframe>` que aparecerán si el navegador no admite el `<iframe>`. En este caso hemos incluido un enlace a la página. Es poco probable que encuentres algún navegador que no admita `<iframe>`s en estos días.
+- {{htmlattrxref('sandbox','iframe')}}
+  - : Este atributo, que funciona en navegadores un poco más modernos que el resto de la funciones de `<iframe>` (por ejemplo IE 10 y superior) solicita una mayor configuración de seguridad; bueno, hablaremos más sobre esto en la siguiente sección.
+
+> **Nota:** Para mejorar la velocidad, es una buena idea establecer el atributo `src` de iframes con JavaScript después de que se cargue el contenido principal. Esto hace que tu página pueda utilizarse antes y disminuye el tiempo de carga de tu página principal (an important {{Glossary("SEO")}}.)
+
+### Con respecto a la seguridad
+
+Arriba mencionamos nuestra preocupación por la seguridad — vamos a entrar en esto con un poco más de detalle ahora. No esperamos que comprendas todo este contenido perfectametne a la primera. Solo queremos informarte sobre esta preocupación y proporcionarte una referencia a la que volver a medida que tengas más experiencia y comiences a considerar el uso de `<iframe>`s en tu trabajo y en tus experimentos.además, no es necesario tener miedo y no usar `<iframe>`s — iframes, solo debes tener cuidado. Sigue leyendo...
+
+Los creadores de navegadores y los desarrolladores web han aprendido por las malas que los iframes son un objetivo común (término oficial: **vector de ataque**) para los "malos" de la Web (a menudo denominados **hackers**,o más exactamente, **crackers**) para atacar si están tratando de modificar maliciosamente tu página web, o engañar a las personas para que hagan algo que no quieren hacer, como revelar información confidencial como nombre de usuario o contraseña. Debido a esto, los ingenieros de especificaciones y los desarrolladores de navegadores han desarrollado varios mecanismos para hacer que los `<iframe>`s sean más seguros, y también hay mejores prácticas a considerar — cubriremos algunas de estas a continuación.
+
+> **Nota:** {{interwiki('wikipedia','Clickjacking')}} es un tipo de ataque de iframe común en el que los piratas informáticos incrustan un iframe invisible en tu documento (o incrustan tu documento en su propio sitio web malicioso) y lo utilizan para capturar las interacciones de los ususarios. Esta es una forma común de engañar a los usuarios o robar datos sensibles.
+
+Primero un ejemplo rápido — intenta cargar el ejemplo anterior que mostramos arriba en tu navegador — puedes encontrarlo en [Github](http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/iframe-detail.html) (ver el [código fuente](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/iframe-detail.html) ) Tu no verás nada en tu navegador, pero si miras en la _Consola_ en las [herramientas de desarrollador de tu navegador](/es/docs/Learn/Common_questions/What_are_browser_developer_tools), tú verás un mensaje diciendote porque.En Firefox, te dirá _Load denied by X-Frame-Options: https\://developer.mozilla.org/en-US/docs/Glossary does not permit framing_. Esto es porque los desarrolladores que construyeron MDN han incluido una configuración en el servidor que almacena la página web que impide que sean incrustados dentro de `<iframe>`s (ver [Configure CSP directives](#configure_csp_directives), abajo.) Esto tiene sentido— una página completa de MDN no tiene sentido estar incrustada en otras páginas, a menos que tu quieras hacer algo como incrustarlas en tu sitio web y reclamarlas como propias — o intentar robar datos via clickjacking, los cuales ambos son cosas realmente malas. Además de que si todo el mundo comienza a hacerlo, todo el ancho de banda adicional podría costarle mucho dinero a Mozzilla.
+
+#### Solo incrusta cuando sea necesario
+
+Algunas veces tiene sentido embeber contenido de terceros— como vídeos de youtube y mapas — pero puedes ahorrarte muchos dolores de cabeza si tu solo embebes contenido de terceros solo cuando es necesario. Una buena regla de oro para la seguridad web es "Nunca puedes ser demasiado cauteloso. Si lo hizo, verifíquelo de todos modos. Si alguien más lo hizo, asuma que es peligroso hasta que se demuestre lo contrario".
+
+Además de la seguridad, debes ser consciente de los temas de propiedad intelectual. La mayoría del contenido tiene derechos de autor, en línea y fuera de línea, incluso contenido que no te esperas(por ejemplo, la mayoría de las imágenes en [Wikimedia Commons](https://commons.wikimedia.org/wiki/Main_Page)). Nunca muestres en tu pagina contenido a menos que te pertenezca o que el dueño te haya dado por escrito su permiso inequívoco. Las penalidades por derechos de autor son severas. De nuevo, tu nunca puedes ser demasiado cauteloso.
+
+Si el contenido es licenciado, debes obedecer los terminos de la licencia. Por ejemplo, el contenido en MDN es licenciado bajo[ CC-BY-SA](/es/docs/MDN/About#Copyrights_and_licenses). Esto significa, que tu debes darnos [credito apropiadamente](https://wiki.creativecommons.org/wiki/Best_practices_for_attribution) cuando tu citas nuestro contenido, aun si tu haces cambios substanciales.
+
+#### Usa HTTPS
+
+{{Glossary("HTTPS")}} es la versión encriptada de {{Glossary("HTTP")}}. Deberias cumplir con tu página web usando HTTPS siempre que sea posible:
+
+1.  HTTPS reduce la oportunidad de que contenido remoto haya sido manipulado en el tránsito.
+2.  HTTPS previene que el contenido embebido acceda al documento padre y viceversa.
+
+Usar HTTPS requiere un certificado de seguridad, el cual puede ser costoso (Aunque [Let's Encrypt](https://letsencrypt.org/) hace las cosas más faciles) — si tu no puedes tener uno, tu debes servir tu documento padre con HTTP. Sin embargo, debido al segundo beneficio de HTTPS expuesto arriba, no importa cual sea el costo tu nunca debes embeber contenido de terceros con HTTP. (En el mejor de los casos, el navegador de tus usuarios les dará una advertencia). Todas las empresas con buena reputación que hacen contenido para embeber via `<iframe>` lo harán disponible via HTTPS — mira la URLs dentro del `<iframe>` atributo `src` cuando tu estes embebiendo contenido desde Google Maps o Youtube, por ejemplo.
+
+> **Nota:** [Github pages](/es/docs/Learn/Common_questions/Using_Github_pages) permite que el contenido sea servido via HTTPS por defecto, asi que es util para hospedar tu contenido. Si estás usando un hosting diferente y no estás seguro, pregunta a tu proveedor de hosting acerca del tema .
+
+#### Siempre usa el atributo `sandbox`
+
+You want to give attackers as little power as you can to do bad things on your website, therefore you should give embedded content _only the permissions needed for doing its job._ Of course, this applies to your own content, too. un contenedor para codigo que puedes usar apropiadamente — o para probar — but can't cause any harm to the rest of the codebase (either accidental or malicious) is called a [sandbox](<https://en.wikipedia.org/wiki/Sandbox_(computer_security)>).
+
+Unsandboxed content can do way too much (executing JavaScript, submitting forms, popup windows, etc.) By default you should impose all available restrictions by using the `sandbox` attribute with no parameters, as shown in our previous example.
+
+If absolutely required, you can add permissions back one by one (inside the `sandbox=""` attribute value) — see the {{htmlattrxref('sandbox','iframe')}} reference entry for all the available options. One important note is that you should _never_ add both `allow-scripts` and `allow-same-origin` to your `sandbox` attribute — in that case the embedded content could bypass the same origin security policy that stops sites from executing scripts, and use JavaScript to turn off sandboxing altogether.
+
+> **Nota:** Sandboxing provides no protection if attackers can fool people into visiting malicious content directly (outside an `iframe`). If there's any chance that certain content may be malicious (e.g., user-generated content), please serve it from a different {{glossary("domain")}} to your main site.
+
+#### Configure CSP directives
+
+{{Glossary("CSP")}} stands for **[content security policy](/es/docs/Web/Security/CSP)**, and provides [a set of HTTP Headers](/es/docs/Web/Security/CSP/CSP_policy_directives) (metadata sent along with your web pages when they are served from a web server) designed to improve the security of your HTML document. When it comes to securing `<iframe>`s, you can _[configure your server to send an appropriate `X-Frame-Options` header.](https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options)_ This can prevent other websites from embedding your content in their webpages (which would enable {{interwiki('wikipedia','clickjacking')}} and a host of other attacks), which is exactly what the MDN developers have done, as we saw earlier on.
+
+> **Nota:** You can read Frederik Braun's post [On the X-Frame-Options Security Header](https://blog.mozilla.org/security/2013/12/12/on-the-x-frame-options-security-header/) for more background information on this topic. Obviously, it's rather out of scope for a full explanation in this article.
+
+## The \<embed> and \<object> elements
+
+The {{htmlelement("embed")}} and {{htmlelement("object")}} elements serve a different function to {{htmlelement("iframe")}} — these elements are general purpose embedding tools for embedding multiple types of external content, which include plugin technologies like Java Applets and Flash, PDF (which can be shown in a browser with a PDF plugin), and even content like videos, SVG and images!
+
+> **Nota:** A **plugin** is software that provides access to content the browser cannot read natively.
+
+However, you are unlikely to use these elements very much — Applets haven't been used for years, Flash is no longer very popular, due to a number of reasons (see [The case against plugins](#the_case_against_plugins), below), PDFs tend to be be better linked to than embedded, and other content such as images and video have much better, easier elements to handle those. Plugins and these embedding methods are really a legacy technology, and we are mainly mentioning them in case you come across them in certain circumstances like intranets, or enterprise projects.
+
+If you find yourself needing to embed plugin content, this is the kind of information you'll need, at a minimum:
+
+|                                                                                         | {{htmlelement("embed")}}                                                          | {{htmlelement("object")}}                                                              |
+| --------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
+| {{glossary("URL")}} of the embedded content                                        | {{htmlattrxref('src','embed')}}                                                  | {{htmlattrxref('data','object')}}                                                  |
+| _accurate_ {{glossary("MIME type", 'media type')}} of the embedded content | {{htmlattrxref('type','embed')}}                                              | {{htmlattrxref('type','object')}}                                                  |
+| height and width (in CSS pixels) of the box controlled by the plugin                    | {{htmlattrxref('height','embed')}} {{htmlattrxref('width','embed')}} | {{htmlattrxref('height','object')}} {{htmlattrxref('width','object')}} |
+| names and values, to feed the plugin as parameters                                      | ad hoc attributes with those names and values                                             | single-tag {{htmlelement("param")}} elements, contained within `<object>`             |
+| independent HTML content as fallback for an unavailable resource                        | not supported (`<noembed>` is obsolete)                                                   | contained within `<object>`, after `<param>` elements                                         |
+
+> **Nota:** `<object>` requires a `data` attribute, a `type` attribute, or both. If you use both, you may also use the {{htmlattrxref('typemustmatch','object')}} attribute (only implemented in Firefox, as of this writing). `typemustmatch` keeps the embedded file from running unless the `type` attribute provides the correct media type. `typemustmatch` can therefore confer significant security benefits when you're embedding content from a different {{glossary("origin")}} (it can keep attackers from running arbitrary scripts through the plugin).
+
+Here's an example that uses the {{htmlelement("embed")}} element to embed a Flash movie (see this [live on Github](http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html), and [check the source code](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html) too):
+
+```html
+<embed src="whoosh.swf" quality="medium"
+       bgcolor="#ffffff" width="550" height="400"
+       name="whoosh" align="middle" allowScriptAccess="sameDomain"
+       allowFullScreen="false" type="application/x-shockwave-flash"
+       pluginspage="http://www.macromedia.com/go/getflashplayer">
+```
+
+Pretty horrible, isn't it. The HTML generated by the Adobe Flash tool tended to be even worse, using an `<object>` element with an `<embed>` element embedded in it, to cover all bases (check out an example.) Flash was even used successfully as fallback content for HTML5 video, for a time, but this is increasingly being seen as not necessary.
+
+Now let's look at an `<object>` example that embeds a PDF into a page (see the [live example](http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html) and the [source code](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html)):
+
+```html
+<object data="mypdf.pdf" type="application/pdf"
+        width="800" height="1200" typemustmatch>
+  <p>You don't have a PDF plugin, but you can <a href="myfile.pdf">download the PDF file.</a></p>
+</object>
+```
+
+PDFs were a necessary stepping stone between paper and digital, but they pose many [accessibility challenges](http://webaim.org/techniques/acrobat/acrobat) and can be hard to read on small screens. They do still tend to be popular in some circles, but it is much better to link to them so they can be downloaded or read on a separate page, rather than embedding them in a webpage.
+
+### The case against plugins
+
+Once upon a time, plugins were indispensable on the Web. Remember the days when you had to install Adobe Flash Player just to watch a movie online? And then you constantly got annoying alerts about updating Flash Player and your Java Runtime Environment. Web technologies have since grown much more robust, and those days are over. For most applications, it's time to stop delivering content that depends on plugins, and start taking advantage of Web technologies instead.
+
+- **Broaden your reach to everyone.** Everyone has a browser, but plugins are increasingly rare, especially among mobile users. Since the Web is largely usable without plugins, people would rather just go to your competitors' websites than install a plugin.
+- **Give yourself a break from the [extra accessibility headaches ](http://webaim.org/techniques/flash/)that come with Flash and other plugins.**
+- **Stay clear of additional security hazards.** Adobe Flash is [notoriously insecure,](http://www.cvedetails.com/product/6761/Adobe-Flash-Player.html?vendor_id=53) even after countless patches. In 2015, Alex Stamos, chief security officer of Facebook, even [requested that Adobe discontinue Flash.](http://www.theverge.com/2015/7/13/8948459/adobe-flash-insecure-says-facebook-cso)
+
+So what should you do? If you need interactivity, HTML and {{glossary("JavaScript")}} can readily get the job done for you with no need for Java applets or outdated ActiveX/BHO technology. Instead of relying on Adobe Flash, you can use [HTML5 video](/es/docs/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage) for your media needs, [SVG](/es/docs/Learn/HTML/Howto/Add_vector_image_to_a_webpage) for vector graphics, and [Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial) for complex images and animations. [Peter Elst was already writing some years ago](https://plus.google.com/+PeterElst/posts/P5t4pFhptvp) that Adobe Flash is rarely the right tool for the job, except for specialized gaming and business applications. As for ActiveX, even Microsoft's {{glossary("Microsoft Edge","Edge")}} browser no longer supports it.
+
+## Summary
+
+The topic of embedding other content in web documents can quickly become very complex, so in this article we've tried to introduce it in a simple, familiar way that will immediately seem relevant, while still hinting at some of the more advanced features of the involved technologies. To start with, you are unlikely to use embedding for much beyond including third party content like maps and videos on your pages. As you become more experienced however, you are likely to start finding more uses for them.
+
+There are many other technologies that involve embedding external content besides the ones we discussed here. We saw some in earlier articles, such as {{htmlelement("video")}}, {{htmlelement("audio")}}, and {{htmlelement("img")}}, but there are others to discover, such as {{htmlelement("canvas")}} for JavaScript-generated 2D and 3D graphics, and {{htmlelement("svg")}} for embedding vector graphics. We'll look at [SVG](/es/docs/Web/SVG) in the next article of the module.
+
+{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}
+
+## In this module
+
+- [Images in HTML](/es/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML)
+- [Video and audio content](/es/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content)
+- [From \<object> to \<iframe> — other embedding technologies](/es/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies)
+- [Adding vector graphics to the Web](/es/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web)
+- [Responsive images](/es/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)
+- [Mozilla splash page](/es/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page)
diff --git a/files/es/learn/html/multimedia_and_embedding/responsive_images/index.html b/files/es/learn/html/multimedia_and_embedding/responsive_images/index.html
deleted file mode 100644
index 69cf5caf3de578..00000000000000
--- a/files/es/learn/html/multimedia_and_embedding/responsive_images/index.html
+++ /dev/null
@@ -1,265 +0,0 @@
----
-title: Imágenes adaptables
-slug: Learn/HTML/Multimedia_and_embedding/Responsive_images
-translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}</div>
-
-<div>
-<p class="summary">En este artículo, aprenderemos sobre el concepto de imágenes adaptables — imágenes que funcionan bien en dispositivos con una amplia diferencia de tamaño de pantallas, resoluciones y otras tantas características — y observar qué herramientas proporciona HTML para ayudar a implementarlas. Esto ayuda a mejorar el rendimiento en diferentes dispositivos.</p>
-
-<p class="summary">Las imágenes adaptables son solo una parte del diseño web responsivo, un tema que aprenderás próximamente en nuestro tutorial de <a href="/en-US/docs/Learn/CSS">CSS</a>.</p>
-</div>
-
-<table class="learn-box nostripe standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prerrequisitos:</th>
-   <td>Deberías tener un conocimiento <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">básico de HTML</a> y cómo <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">agregar imágenes estáticas a un sitio web</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row"><span class="hidden"> </span>Objetivo:<span class="hidden"> </span></th>
-   <td>Aprende a usar características como {{htmlattrxref("srcset", "img")}} y el elemento {{htmlelement("picture")}} para implementar soluciones de imágenes adaptables a sitios web.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="¿Por_qué_imágenes_adaptables">¿Por qué imágenes adaptables?</h2>
-
-<p>Examinemos un escenario típico. Un sitio web típico puede contener una imagen de encabezado y algunas imágenes de contenido debajo del encabezado. Es probable que la imagen del encabezado abarque todo el ancho del encabezado y la imagen del contenido quepa en algún lugar dentro de la columna de contenido. He aquí un ejemplo sencillo:</p>
-
-<p><img alt="Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center." src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"></p>
-
-<p>Esto funciona bien en un dispositivo de pantalla ancha, como una computadora portatil o de escritorio (puedes <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">ver el ejemplo en vivo </a>y encontrar el <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/not-responsive.html">código fuente</a> en Github.) No hablaremos mucho del CSS en esta lección, excepto para decir que:</p>
-
-<ul>
- <li>El contenido del <code><em>body</em></code> se ha ajustado a un ancho máximo de 1200 píxeles - en pantallas por encima de ese ancho, el cuerpo permanece a 1200px y se centra en el espacio disponible. En pantallas por debajo de ese ancho, el cuerpo permanecerá al 100% del ancho de la ventana.</li>
- <li>La imagen del encabezado se ha configurado para que su centro siempre permanezca en el centro del encabezado, sin importar el ancho que tenga el encabezado. Por lo tanto, si el sitio se visualiza en una pantalla más estrecha, aún se puede ver el detalle importante en el centro de la imagen (las personas) y el exceso se pierde en ambos lados. Tiene 200px de alto.</li>
- <li>Las imágenes de contenido se han configurado de modo que si el elemento <code>body</code> se vuelve más pequeño que la imagen, las imágenes comienzan a encogerse para permanecer siempre dentro del <code>body</code>, en lugar de desbordarlo.</li>
-</ul>
-
-<p>Sin embargo, surgen problemas cuando comienza a ver el sitio en un dispositivo de pantalla estrecha — el encabezado de abajo está bien, pero empieza a ocupar gran parte de la altura de la pantalla de un dispositivo móvil. ¡A este tamaño es difícil ver a las personas que aparecen en la foto!</p>
-
-<p><img alt="Our example site as viewed on a narrow screen; the first image has shrunk to the point where it is hard to make out the detail on it." src="https://mdn.mozillademos.org/files/12936/non-responsive-narrow.png" style="display: block; height: 793px; margin: 0px auto; width: 320px;" title=""></p>
-
-<p>Una mejora sería mostrar una versión recortada de la imagen que muestra los detalles importantes de la imagen cuando el sitio se ve en una pantalla estrecha. Se podría mostrar una segunda imagen recortada para un dispositivo de pantalla de ancho medio, como una tableta. A esto se le conoce comúnmente como <strong>el problema de cambio de resolución.</strong></p>
-
-<p>Además, no es necesario incrustar imágenes más grandes en la página si se está viendo en una pantalla móvil. Y, a la inversa, una <a href="/en-US/docs/Glossary/Raster_image">imagen rasterizada</a> pequeña comienza a verse más pixelada cuando se muestra mayor que su tamaño original (una imagen rasterizada es un conjunto determinado de píxeles de ancho y de alto, como vimos cuando vimos los gráficos vectoriales). Esto se denomina problema de cambio de resolución.</p>
-
-<p>Por el contrario, no es necesario mostrar una imagen grande en una pantalla significativamente más pequeña que el tamaño para el que fue diseñada. Hacerlo puede desperdiciar ancho de banda; en particular, los usuarios de dispositivos móviles no quieren desperdiciar ancho de banda descargando una imagen grande destinada al escritorio, cuando una imagen pequeña sería suficiente para su dispositivo. Idealmente, tendría varias resoluciones disponibles y serviría el tamaño apropiado según el dispositivo que acceda a los datos en el sitio web.</p>
-
-<p>Para hacer las cosas más complicadas, algunos dispositivos tienen pantallas de alta resolución que necesitan imágenes más grandes de las que se espera que luzcan bien. Esto es, básicamente, el mismo problema, pero en un contexto ligeramente diferente.</p>
-
-<p>Podrías pensar que las imágenes vectoriales resolverían estos problemas, y lo hacen hasta cierto punto: son pequeñas en tamaño de archivo y escalan bien, y deberías usarlos siempre que sea posible. Sin embargo, no son adecuados para todos tipos de imágenes. Si bien son geniales para gráficos simples, patrones, elementos de interfaz, etc., es muy complejo crear una imagen basada en vectores con la cantidad de detalles que encontrarías, por ejemplo, en una foto. Formatos de imágenes rasterizadas como JPEG son más adecuados para el tipo de imágenes que vemos en el ejemplo anterior.</p>
-
-<p>Este tipo de problemas no existían cuando la web se creó por primera vez, a principios y mediados de los noventa — en ese entonces, los únicos dispositivos disponibles para navegar por la web eran los ordenadores de escritorio y laptops, por lo que los desarrolladores e ingenieros que programaban los navegadores ni siquiera pensaban en implementar estas soluciones. Las tecnologías de imagen adaptable<em> </em>se implementaron recientemente para resolver los problemas descritos anteriormente al permitirle ofrecer al navegador varias versiones de imágenes (en diferentes archivos), ya sea que muestren lo mismo pero contengan diferentes números de píxeles (cambio de resolución), o diferentes imágenes adecuadas para diferentes asignaciones de espacio (dirección de arte).</p>
-
-<div class="note">
-<p><strong>Nota</strong>: Las nuevas características discutidas en este artículo — {{htmlattrxref("srcset", "img")}}/{{htmlattrxref("sizes", "img")}}/{{htmlelement("picture")}} —son compatibles con las versiones de lanzamiento de los navegadores de escritorio y móviles modernos (incluido el navegador Edge de Microsoft, aunque no Internet Explorer).</p>
-</div>
-
-<h2 id="¿Cómo_se_crean_las_imágenes_adaptables">¿Cómo se crean las imágenes adaptables?</h2>
-
-<p>En esta sección, veremos los dos problemas ilustrados anteriormente y mostraremos cómo solucionarlos usando las características de imágenes adaptables con HTML. Debe tener en cuenta que nos centraremos en el elemento HTML {{htmlelement("img")}} para esta sección, tal como se muestra en el área de contenido del ejemplo anterior —  la imagen en el encabezado del sitio es solo de decoración y, por lo tanto, implementado usando imágenes de fondo con CSS. Se puede decir que<a href="http://blog.cloudfour.com/responsive-images-101-part-8-css-images/"> CSS posee mejores herramientas para el diseño adaptable que HTML</a>, y hablaremos sobre ellas en nuestro módulo <a href="/en-US/docs/Web/CSS">CSS</a>.  </p>
-
-<h3 id="Cambio_de_resolución_Diferentes_tamaños">Cambio de resolución: Diferentes tamaños</h3>
-
-<p>Entonces, ¿qué queremos solucionar con el cambio de resolución? Queremos mostrar la misma imagen, más grande o más pequeña dependiendo del dispositivo — Esta es la situación que tenemos en la segunda imagen de nuestro ejemplo. El elemento estándar {{htmlelement("img")}} tradicionalmente solo permite apuntar el navegador a un solo archivo fuente:</p>
-
-<pre class="brush: html notranslate">&lt;img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy"&gt;</pre>
-
-<p>Sin embargo, podemos utilizar dos nuevos atributos — {{htmlattrxref("srcset", "img")}} y {{htmlattrxref("sizes", "img")}} — para proporcionar varias imágenes de origen adicionales junto con sugerencias para ayudar al navegador a elegir el correcto. Puede ver el ejemplo <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> en Github (vea también <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/responsive.html">el código fuente</a>):</p>
-
-<pre class="brush: html notranslate">&lt;img srcset="elva-fairy-320w.jpg 320w,
-             elva-fairy-480w.jpg 480w,
-             elva-fairy-800w.jpg 800w"
-     sizes="(max-width: 320px) 280px,
-            (max-width: 480px) 440px,
-            800px"
-     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy"&gt;</pre>
-
-<p>Los atributos <code>srcset</code> y <code>sizes</code> parecen complicados, pero resultan más fáciles de entender si los formatea como se muestra arriba, con valores diferentes para el atributo en cada línea. Cada valor contiene una lista separada por coma, y cada parte de la lista está compuesta por tres sub-partes. Repasemos ahora el contenido de cada uno:</p>
-
-<p><strong><code>srcset</code></strong> define el conjunto de imágenes que el navegador podrá elegir, y el tamaño de cada imagen.<strong> </strong>Cada conjunto de información de imagen está separado del anterior por una coma. Para cada uno, escribimos:</p>
-
-<ol>
- <li>Un nombre de archivo de imagen (elva-fairy-480w.jpg)</li>
- <li>Un espacio.</li>
- <li>El <strong>ancho intrínseco de la imagen en píxeles</strong> (480w): tenga en cuenta que esto usa la unidad w, no px como cabría esperar. Este es el tamaño real de la imagen, que se puede encontrar inspeccionando el archivo de imagen en su computadora (por ejemplo, en una Mac puede seleccionar la imagen en Finder y presionar <kbd>Cmd</kbd> + <kbd>I</kbd> para que aparezca la pantalla de información).</li>
-</ol>
-
-<p><strong><code>sizes</code></strong> define un conjunto de condiciones de medios (por ejemplo, anchos de pantalla) e indica qué tamaño de imagen sería mejor elegir cuando se cumplen ciertas condiciones de medios  — estas son las sugerencias de las que hablamos anterriormente. En este caso, antes de cada coma escribimos:</p>
-
-<ol>
- <li>Una <strong>condición de medios</strong> ((max-width: 600px)): aprenderá más sobre esto en el <a href="/en-US/docs/Web/CSS">tema CSS</a>, pero por ahora digamos que una condición de medios describe un posible estado en el que puede estar la pantalla. En este caso, estamos diciendo "cuando el ancho de la ventana gráfica es de 600 píxeles o menos".</li>
- <li>Un espacio.</li>
- <li>El <strong>ancho de la ranura</strong> que la imagen llenará cuando la condición de medios sea verdadera (<code>440px</code>.)</li>
-</ol>
-
-<div class="note">
-<p><strong>Nota</strong>: Para el <strong>ancho de la ranura</strong>, debe indicar una longitud absoluta (<code>px</code>, <code>em</code>) o relativa (como un porcentaje.) Usted debe haber advertido que el ancho de la última ranura no tiene condición de medios (esta es la opción por defecto que se elige cuando ninguna de las condiciones de medios se cumplen). El navegador ignora todo lo posterior a la primera condición coincidente, por eso sea cuidadoso con el orden de las condiciones de medios.</p>
-</div>
-
-<p>Entonces, con estos atributos establecidos, el navegador:</p>
-
-<ol>
- <li>Verificará el ancho del dispositivo.</li>
- <li>Resolverá qué condición de medios en la lista <code>sizes</code> es la primera que se cumple.</li>
- <li>Verificará la medida de la ranura dada a esa consulta de medios.</li>
- <li>Cargará la imagen referenciada en la lista <code>srcset</code> con coincidencia más cercana a la medida de la ranura.</li>
-</ol>
-
-<p>¡Y eso es todo! Hasta este punto, si un navegador compatible con un ancho de ventana de 480px carga la página, la condición de medios <code>(max-width: 480px)</code> se cumplirá, por lo que la ranura de <code>440px</code> será elegida y se cargará el archivo de imagen <code>elva-fairy-480w.jpg</code>, ya que el ancho inherente (<code>480w</code>) es el más cercano a <code>440px</code>. La imagen de 800px tiene 128KB en disco mientras que la versión de 480px tiene solo 63KB — un ahorro de 65KB. Ahora imagine si esta fuera una página que tuviera muchas imágenes. Usar esta técnica puede ahorrarle a los usuarios de dispositivos móviles mucho ancho de banda.</p>
-
-<div class="blockIndicator note">
-<p><strong>Nota:</strong> Al probar esto con un navegador de escritorio, si el navegador no carga las imágenes más estrechas cuando tiene su ventana configurada en el ancho más estrecho, eche un vistazo a cuál es la ventana gráfica (puede aproximarla yendo a la <u>Consola JavaScript</u> del navegador y escribiendo <code>document.querySelector('html').clientWidth</code>). Los diferentes navegadores tienen tamaños mínimos a los que te permitirán reducir el ancho de la ventana y pueden ser más anchos de lo que piensas. Al probarlo con un navegador móvil, puede usar herramientas como la página de depuración de Firefox <code>about:debugging</code> para inspeccionar la página cargada en el dispositivo móvil usando las herramientas de desarrollo de escritorio. Para ver qué imágenes se cargaron, puede usar la pestaña <a href="/en-US/docs/Tools/Network_Monitor">Monitor de red</a> en las herramientas del desarrollador de Firefox.</p>
-</div>
-
-<p>Los navegadores más antiguos que no soportan estas características solo las ignorarán y seguirán adelante con la carga de la imagen referenciada en el atributo {{htmlattrxref("src", "img")}} como lo hacen habitualmente.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: En el {{htmlelement("head")}} del documento usted hallará la línea <code>&lt;meta name="viewport" content="width=device-width"&gt;</code>: esto fuerza a los dispositivos móviles a adoptar su ancho real de ventana para cargar las páginas web (algunos navegadores móviles mienten sobre el ancho de su ventana gráfica y, en su lugar, cargan páginas con un ancho de ventana más grande y luego reducen la página cargada, lo que no es muy útil para imágenes o diseño receptivos).</p>
-</div>
-
-<h3 id="Useful_developer_tools">Useful developer tools</h3>
-
-<p>There are some useful <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools</a> in browsers to help with working out the necessary slot widths, etc, that you need to use. When I was working them out, I first loaded up the non-responsive version of my example (<code>not-responsive.html</code>), then went into <a href="/en-US/docs/Tools/Responsive_Design_Mode">Responsive Design View</a> (<em>Tools &gt; Web Developer &gt; Responsive Design View</em>), which allows you to look at your web page layouts as if they were being viewed through a variety of different device screen sizes.</p>
-
-<p>I set the viewport width to 320px then 480px; for each one I went into the <a href="/en-US/docs/Tools/Page_Inspector">DOM Inspector</a>, clicked on the {{htmlelement("img")}} element we are interested in, then looked at its size in the Box Model view tab on the right hand side of the display. This should give you the inherent image widths you need.</p>
-
-<p><img alt="A screenshot of the firefox devtools with an image element highlighted in the dom, showing its dimensions as 440 by 293 pixels." src="https://mdn.mozillademos.org/files/12932/box-model-devtools.png" style="display: block; height: 845px; margin: 0px auto; width: 480px;"></p>
-
-<p>Next, you can check whether the <code>srcset</code> is working by setting the viewport width to what you want (set it to a narrow width, for example), opening the Network Inspector (<em>Tools &gt; Web Developer &gt; Network</em>), then reloading the page. This should give you a list of the assets that were downloaded to make up the webpage, and here you can check which image file was chosen for download.</p>
-
-<p><img alt="a screenshot of the network inspector in firefox devtools, showing that the HTML for the page has been downloaded, along with three images, which include the two 800 wide versions of the responsive images" src="https://mdn.mozillademos.org/files/12934/network-devtools.png" style="display: block; height: 630px; margin: 0px auto; width: 600px;"></p>
-
-<h3 id="Resolution_switching_Same_size_different_resolutions">Resolution switching: Same size, different resolutions</h3>
-
-<p>If you're supporting multiple display resolutions, but everyone sees your image at the same real-world size on the screen, you can allow the browser to choose an appropriate resolution image by using <code>srcset</code> with x-descriptors and without <code>sizes</code> — a somewhat easier syntax! You can find an example of what this looks like in <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">srcset-resolutions.html</a> (see also <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">the source code</a>):</p>
-
-<pre class="brush: html notranslate">&lt;img srcset="elva-fairy-320w.jpg,
-             elva-fairy-480w.jpg 1.5x,
-             elva-fairy-640w.jpg 2x"
-     src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy"&gt;
-</pre>
-
-<p><img alt="A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the image" src="https://mdn.mozillademos.org/files/12942/resolution-example.png" style="display: block; height: 425px; margin: 0px auto; width: 480px;">In this example, the following CSS is applied to the image so that it will have a width of 320 pixels on the screen (also called CSS pixels):</p>
-
-<pre class="brush: css notranslate">img {
-  width: 320px;
-}</pre>
-
-<p>In this case, <code>sizes</code> is not needed — the browser simply works out what resolution the display is that it is being shown on, and serves the most appropriate image referenced in the <code>srcset</code>. So if the device accessing the page has a standard/low resolution display, with one device pixel representing each CSS pixel, the <code>elva-fairy-320w.jpg</code> image will be loaded (the 1x is implied, so you don't need to include it.) If the device has a high resolution of two device pixels per CSS pixel or more, the <code>elva-fairy-640w.jpg</code> image will be loaded. The 640px image is 93KB, whereas the 320px image is only 39KB.</p>
-
-<h3 id="Art_direction">Art direction</h3>
-
-<p>To recap, the <strong>art direction problem</strong> involves wanting to change the image displayed to suit different image display sizes. For example, if a large landscape shot with a person in the middle is shown on a website when viewed on a desktop browser, then shrunk down when the website is viewed on a mobile browser, it will look bad as the person will be really tiny and hard to see. It would probably be better to show a smaller, portrait image on mobile, which shows the person zoomed in. The {{htmlelement("picture")}} element allows us to implement just this kind of solution.</p>
-
-<p>Returning to our original <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">not-responsive.html</a> example, we have an image that badly needs art direction:</p>
-
-<pre class="brush: html notranslate">&lt;img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"&gt;</pre>
-
-<p>Let's fix this, with {{htmlelement("picture")}}! Like <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content"><code>&lt;video&gt;</code> and <code>&lt;audio&gt;</code></a>, The <code>&lt;picture&gt;</code> element is a wrapper containing several {{htmlelement("source")}} elements that provide several different sources for the browser to choose between, followed by the all-important {{htmlelement("img")}} element. The code in <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> looks like so:</p>
-
-<pre class="brush: html notranslate">&lt;picture&gt;
-  &lt;source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg"&gt;
-  &lt;source media="(min-width: 800px)" srcset="elva-800w.jpg"&gt;
-  &lt;img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"&gt;
-&lt;/picture&gt;
-</pre>
-
-<ul>
- <li>The <code>&lt;source&gt;</code> elements include a <code>media</code> attribute that contains a media condition — as with the first <code>srcset</code> example, these conditions are tests that decide which image is shown — the first one that returns true will be displayed. In this case, If the viewport width is 799px wide or less, the first <code>&lt;source&gt;</code> element's image will be displayed. If the viewport width is 800px or more, it'll be the second one.</li>
- <li>The <code>srcset</code> attributes contain the path to the image to display. Note that just as we saw with <code>&lt;img&gt;</code> above, <code>&lt;source&gt;</code> can take a <code>srcset</code> attribute with multiple images referenced, and a <code>sizes</code> attribute too. So you could offer multiple images via a <code>&lt;picture&gt;</code> element, but then also offer multiple resolutions of each one too. Realistically, you probably won't want to do this kind of thing very often.</li>
- <li>In all cases, you must provide an <code>&lt;img&gt;</code> element, with <code>src</code> and <code>alt</code>, right before <code>&lt;/picture&gt;</code>, otherwise no images will appear. This provides a default case that will apply when none of the media conditions return true (you could actually remove the second <code>&lt;source&gt;</code> element in this example), and a fallback for browsers that don't support the <code>&lt;picture&gt;</code> element.</li>
-</ul>
-
-<p>This code allows us to display a suitable image on both wide screen and narrow screen displays, as shown below:</p>
-
-<p><img alt="Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center." src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"><img alt="Our example site as viewed on a narrow screen with the picture element used to switch the first image to a portrait close up of the detail, making it a lot more useful on a narrow screen" src="https://mdn.mozillademos.org/files/12938/picture-element-narrow.png" style="display: block; height: 710px; margin: 0px auto; width: 320px;"></p>
-
-<div class="note">
-<p><strong>Note</strong>: You should use the <code>media</code> attribute only in art direction scenarios; when you do use <code>media</code>, don't also offer media conditions within the <code>sizes</code> attribute.</p>
-</div>
-
-<h3 id="¿Por_qué_no_podemos_usar_simplemente_CSS_o_Javascript">¿Por qué no podemos usar, simplemente, CSS o Javascript?</h3>
-
-<p>Cuando el navegador comienza a cargar una página, empieza a descargar (precargar) cualquier imagen before the main parser has started to load and interpret the page's CSS and JavaScript. This is a useful technique, which on average has shaved 20% off page load times. However, it is not helpful for responsive images, hence the need to implement solutions like <code>srcset</code>. You couldn't for example load the {{htmlelement("img")}} element, then detect the viewport width with JavaScript and dynamically change the source image to a smaller one if desired. By then, the original image would already have been loaded, and you would load the small image as well, which is even worse in responsive image terms.</p>
-
-<ul>
-</ul>
-
-<h3 id="Use_modern_image_formats_boldly">Use modern image formats boldly</h3>
-
-<p>There are several exciting new image formats (such as WebP and JPEG-2000) that can maintain a low file size and high quality at the same time. However, browser support is spotty.</p>
-
-<p><code>&lt;picture&gt;</code> lets us continue catering to older browsers. You can supply MIME types inside <code>type</code> attributes so the browser can immediately reject unsupported file types:</p>
-
-<pre class="brush: html notranslate">&lt;picture&gt;
-  &lt;source type="image/svg+xml" srcset="pyramid.svg"&gt;
-  &lt;source type="image/webp" srcset="pyramid.webp"&gt;
-  &lt;img src="pyramid.png" alt="regular pyramid built from four equilateral triangles"&gt;
-&lt;/picture&gt;
-</pre>
-
-<ul>
- <li>No uses el atributo <code>media</code>, unless you also need art direction.</li>
- <li>En un elemento <code>&lt;source&gt;</code> , solo puedes enlazar a imágenes del tipo que has declarado en <code>type</code>.</li>
- <li>Al igual que antes, puedes usar sin ningún problema listas separadas con comas tanto en <code>srcset</code> , como en <code>sizes</code>, así como lo necesites.</li>
-</ul>
-
-<h2 id="Aprendizaje_activo_Implementando_sus_propias_imágenes_adaptables">Aprendizaje activo: Implementando sus propias imágenes adaptables</h2>
-
-<p>For this active learning, we're expecting you to be brave and go it alone ... mostly. We want you to implement your own suitable art directed narrow screen/wide screen shot using <code>&lt;picture&gt;</code>, and a resolution switching example that uses <code>srcset</code>.</p>
-
-<ol>
- <li>Write some simple HTML to contain your code (use <code>not-responsive.html</code> as a starting point, if you like)</li>
- <li>Find a nice wide screen landscape image with some kind of detail contained in it somewhere. Create a web-sized version of it using a graphics editor, then crop it to show a smaller part that zooms in on the detail, and create a second image (about 480px wide is good for this.)</li>
- <li>Use the <code>&lt;picture&gt;</code> element to implement an art direction picture switcher!</li>
- <li>Create multiple image files of different sizes, each showing the same picture.</li>
- <li>Use <code>srcset</code>/<code>size</code> to create a resolution switcher example, either to serve the same size image at different resolutions, or different image sizes at different viewport widths.</li>
-</ol>
-
-<div class="note">
-<p><strong>Note</strong>: Use the browser devtools to help work out what sizes you need, as mentioned above.</p>
-</div>
-
-<h2 id="Resumen">Resumen</h2>
-
-<p>That's a wrap for responsive images — we hope you enjoyed playing with these new techniques. As a recap, there are two distinct problems we've been discussing here:</p>
-
-<ul>
- <li><strong>Art direction</strong>: The problem whereby you want to serve cropped images for different layouts — for example a landscape image showing a full scene for a desktop layout, and a portrait image showing the main subject zoomed in close for a mobile layout. This can be solved using the {{htmlelement("picture")}} element.</li>
- <li><strong>Resolution switching</strong>: The problem whereby you want to serve smaller image files to narrow screen devices, as they don't need huge images like desktop displays do — and also optionally that you want to serve different resolution images to high density/low density screens. This can be solved using <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">vector graphics</a> (SVG images), and the {{htmlattrxref("srcset", "img")}} and {{htmlattrxref("sizes", "img")}} attributes.</li>
-</ul>
-
-<p>This also draws to a close the entire <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia and embedding</a> module! The only thing to do now before moving on is to try our multimedia assessment, and see how you get on. Have fun.</p>
-
-<h2 id="Vea_también">Vea también</h2>
-
-<ul>
- <li><a href="http://blog.cloudfour.com/responsive-images-101-definitions">Excelente introducción de Jason Grigsby excellent a las imágenes adaptables</a></li>
- <li><a href="https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/">Imagenes adaptables: Si solo está cambiando resoluciones , use srcset</a> — incluye más explicaciones sobre como el navegador resuelve qué imagen utilizar</li>
- <li>{{htmlelement("img")}}</li>
- <li>{{htmlelement("picture")}}</li>
- <li>{{htmlelement("source")}}</li>
-</ul>
-
-<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}</div>
-
-<div>
-<h2 id="En_este_módulo">En este módulo</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Imágenes in HTML</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Contenido de audio y video</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">De &lt;object&gt; a &lt;iframe&gt; — otras tecnologías de i</a>ncrustación</li>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Agregando gráficos de vector a la Web</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Imagenes adaptables</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Página de bienvenida de Mozilla</a></li>
-</ul>
-</div>
-
-<p><iframe></iframe>&lt;hv-copy-modal&gt;&lt;/hv-copy-modal&gt;</p>
diff --git a/files/es/learn/html/multimedia_and_embedding/responsive_images/index.md b/files/es/learn/html/multimedia_and_embedding/responsive_images/index.md
new file mode 100644
index 00000000000000..83ea73496ac2b3
--- /dev/null
+++ b/files/es/learn/html/multimedia_and_embedding/responsive_images/index.md
@@ -0,0 +1,247 @@
+---
+title: Imágenes adaptables
+slug: Learn/HTML/Multimedia_and_embedding/Responsive_images
+translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images
+---
+{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}
+
+En este artículo, aprenderemos sobre el concepto de imágenes adaptables — imágenes que funcionan bien en dispositivos con una amplia diferencia de tamaño de pantallas, resoluciones y otras tantas características — y observar qué herramientas proporciona HTML para ayudar a implementarlas. Esto ayuda a mejorar el rendimiento en diferentes dispositivos.
+
+Las imágenes adaptables son solo una parte del diseño web responsivo, un tema que aprenderás próximamente en nuestro tutorial de [CSS](/es/docs/Learn/CSS).
+
+<table>
+  <tbody>
+    <tr>
+      <th scope="row">Prerrequisitos:</th>
+      <td>
+        Deberías tener un conocimiento
+        <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">básico de HTML</a>
+        y cómo
+        <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML"
+          >agregar imágenes estáticas a un sitio web</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">
+        <span class="hidden"></span>Objetivo:<span class="hidden"></span>
+      </th>
+      <td>
+        Aprende a usar características como
+        {{htmlattrxref("srcset", "img")}} y el elemento
+        {{htmlelement("picture")}} para implementar soluciones de
+        imágenes adaptables a sitios web.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## ¿Por qué imágenes adaptables?
+
+Examinemos un escenario típico. Un sitio web típico puede contener una imagen de encabezado y algunas imágenes de contenido debajo del encabezado. Es probable que la imagen del encabezado abarque todo el ancho del encabezado y la imagen del contenido quepa en algún lugar dentro de la columna de contenido. He aquí un ejemplo sencillo:
+
+![Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center.](https://mdn.mozillademos.org/files/12940/picture-element-wide.png)
+
+Esto funciona bien en un dispositivo de pantalla ancha, como una computadora portatil o de escritorio (puedes [ver el ejemplo en vivo ](http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html)y encontrar el [código fuente](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/not-responsive.html) en Github.) No hablaremos mucho del CSS en esta lección, excepto para decir que:
+
+- El contenido del `body` se ha ajustado a un ancho máximo de 1200 píxeles - en pantallas por encima de ese ancho, el cuerpo permanece a 1200px y se centra en el espacio disponible. En pantallas por debajo de ese ancho, el cuerpo permanecerá al 100% del ancho de la ventana.
+- La imagen del encabezado se ha configurado para que su centro siempre permanezca en el centro del encabezado, sin importar el ancho que tenga el encabezado. Por lo tanto, si el sitio se visualiza en una pantalla más estrecha, aún se puede ver el detalle importante en el centro de la imagen (las personas) y el exceso se pierde en ambos lados. Tiene 200px de alto.
+- Las imágenes de contenido se han configurado de modo que si el elemento `body` se vuelve más pequeño que la imagen, las imágenes comienzan a encogerse para permanecer siempre dentro del `body`, en lugar de desbordarlo.
+
+Sin embargo, surgen problemas cuando comienza a ver el sitio en un dispositivo de pantalla estrecha — el encabezado de abajo está bien, pero empieza a ocupar gran parte de la altura de la pantalla de un dispositivo móvil. ¡A este tamaño es difícil ver a las personas que aparecen en la foto!
+
+![Our example site as viewed on a narrow screen; the first image has shrunk to the point where it is hard to make out the detail on it.](https://mdn.mozillademos.org/files/12936/non-responsive-narrow.png)
+
+Una mejora sería mostrar una versión recortada de la imagen que muestra los detalles importantes de la imagen cuando el sitio se ve en una pantalla estrecha. Se podría mostrar una segunda imagen recortada para un dispositivo de pantalla de ancho medio, como una tableta. A esto se le conoce comúnmente como **el problema de cambio de resolución.**
+
+Además, no es necesario incrustar imágenes más grandes en la página si se está viendo en una pantalla móvil. Y, a la inversa, una [imagen rasterizada](/es/docs/Glossary/Raster_image) pequeña comienza a verse más pixelada cuando se muestra mayor que su tamaño original (una imagen rasterizada es un conjunto determinado de píxeles de ancho y de alto, como vimos cuando vimos los gráficos vectoriales). Esto se denomina problema de cambio de resolución.
+
+Por el contrario, no es necesario mostrar una imagen grande en una pantalla significativamente más pequeña que el tamaño para el que fue diseñada. Hacerlo puede desperdiciar ancho de banda; en particular, los usuarios de dispositivos móviles no quieren desperdiciar ancho de banda descargando una imagen grande destinada al escritorio, cuando una imagen pequeña sería suficiente para su dispositivo. Idealmente, tendría varias resoluciones disponibles y serviría el tamaño apropiado según el dispositivo que acceda a los datos en el sitio web.
+
+Para hacer las cosas más complicadas, algunos dispositivos tienen pantallas de alta resolución que necesitan imágenes más grandes de las que se espera que luzcan bien. Esto es, básicamente, el mismo problema, pero en un contexto ligeramente diferente.
+
+Podrías pensar que las imágenes vectoriales resolverían estos problemas, y lo hacen hasta cierto punto: son pequeñas en tamaño de archivo y escalan bien, y deberías usarlos siempre que sea posible. Sin embargo, no son adecuados para todos tipos de imágenes. Si bien son geniales para gráficos simples, patrones, elementos de interfaz, etc., es muy complejo crear una imagen basada en vectores con la cantidad de detalles que encontrarías, por ejemplo, en una foto. Formatos de imágenes rasterizadas como JPEG son más adecuados para el tipo de imágenes que vemos en el ejemplo anterior.
+
+Este tipo de problemas no existían cuando la web se creó por primera vez, a principios y mediados de los noventa — en ese entonces, los únicos dispositivos disponibles para navegar por la web eran los ordenadores de escritorio y laptops, por lo que los desarrolladores e ingenieros que programaban los navegadores ni siquiera pensaban en implementar estas soluciones. Las tecnologías de imagen adaptable se implementaron recientemente para resolver los problemas descritos anteriormente al permitirle ofrecer al navegador varias versiones de imágenes (en diferentes archivos), ya sea que muestren lo mismo pero contengan diferentes números de píxeles (cambio de resolución), o diferentes imágenes adecuadas para diferentes asignaciones de espacio (dirección de arte).
+
+> **Nota:** Las nuevas características discutidas en este artículo — {{htmlattrxref("srcset", "img")}}/{{htmlattrxref("sizes", "img")}}/{{htmlelement("picture")}} —son compatibles con las versiones de lanzamiento de los navegadores de escritorio y móviles modernos (incluido el navegador Edge de Microsoft, aunque no Internet Explorer).
+
+## ¿Cómo se crean las imágenes adaptables?
+
+En esta sección, veremos los dos problemas ilustrados anteriormente y mostraremos cómo solucionarlos usando las características de imágenes adaptables con HTML. Debe tener en cuenta que nos centraremos en el elemento HTML {{htmlelement("img")}} para esta sección, tal como se muestra en el área de contenido del ejemplo anterior — la imagen en el encabezado del sitio es solo de decoración y, por lo tanto, implementado usando imágenes de fondo con CSS. Se puede decir que[ CSS posee mejores herramientas para el diseño adaptable que HTML](http://blog.cloudfour.com/responsive-images-101-part-8-css-images/), y hablaremos sobre ellas en nuestro módulo [CSS](/es/docs/Web/CSS).
+
+### Cambio de resolución: Diferentes tamaños
+
+Entonces, ¿qué queremos solucionar con el cambio de resolución? Queremos mostrar la misma imagen, más grande o más pequeña dependiendo del dispositivo — Esta es la situación que tenemos en la segunda imagen de nuestro ejemplo. El elemento estándar {{htmlelement("img")}} tradicionalmente solo permite apuntar el navegador a un solo archivo fuente:
+
+```html
+<img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
+```
+
+Sin embargo, podemos utilizar dos nuevos atributos — {{htmlattrxref("srcset", "img")}} y {{htmlattrxref("sizes", "img")}} — para proporcionar varias imágenes de origen adicionales junto con sugerencias para ayudar al navegador a elegir el correcto. Puede ver el ejemplo [responsive.html](http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html) en Github (vea también [el código fuente](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/responsive.html)):
+
+```html
+<img srcset="elva-fairy-320w.jpg 320w,
+             elva-fairy-480w.jpg 480w,
+             elva-fairy-800w.jpg 800w"
+     sizes="(max-width: 320px) 280px,
+            (max-width: 480px) 440px,
+            800px"
+     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
+```
+
+Los atributos `srcset` y `sizes` parecen complicados, pero resultan más fáciles de entender si los formatea como se muestra arriba, con valores diferentes para el atributo en cada línea. Cada valor contiene una lista separada por coma, y cada parte de la lista está compuesta por tres sub-partes. Repasemos ahora el contenido de cada uno:
+
+**`srcset`** define el conjunto de imágenes que el navegador podrá elegir, y el tamaño de cada imagen. Cada conjunto de información de imagen está separado del anterior por una coma. Para cada uno, escribimos:
+
+1.  Un nombre de archivo de imagen (elva-fairy-480w.jpg)
+2.  Un espacio.
+3.  El **ancho intrínseco de la imagen en píxeles** (480w): tenga en cuenta que esto usa la unidad w, no px como cabría esperar. Este es el tamaño real de la imagen, que se puede encontrar inspeccionando el archivo de imagen en su computadora (por ejemplo, en una Mac puede seleccionar la imagen en Finder y presionar <kbd>Cmd</kbd> + <kbd>I</kbd> para que aparezca la pantalla de información).
+
+**`sizes`** define un conjunto de condiciones de medios (por ejemplo, anchos de pantalla) e indica qué tamaño de imagen sería mejor elegir cuando se cumplen ciertas condiciones de medios — estas son las sugerencias de las que hablamos anterriormente. En este caso, antes de cada coma escribimos:
+
+1.  Una **condición de medios** ((max-width: 600px)): aprenderá más sobre esto en el [tema CSS](/es/docs/Web/CSS), pero por ahora digamos que una condición de medios describe un posible estado en el que puede estar la pantalla. En este caso, estamos diciendo "cuando el ancho de la ventana gráfica es de 600 píxeles o menos".
+2.  Un espacio.
+3.  El **ancho de la ranura** que la imagen llenará cuando la condición de medios sea verdadera (`440px`.)
+
+> **Nota:** Para el **ancho de la ranura**, debe indicar una longitud absoluta (`px`, `em`) o relativa (como un porcentaje.) Usted debe haber advertido que el ancho de la última ranura no tiene condición de medios (esta es la opción por defecto que se elige cuando ninguna de las condiciones de medios se cumplen). El navegador ignora todo lo posterior a la primera condición coincidente, por eso sea cuidadoso con el orden de las condiciones de medios.
+
+Entonces, con estos atributos establecidos, el navegador:
+
+1.  Verificará el ancho del dispositivo.
+2.  Resolverá qué condición de medios en la lista `sizes` es la primera que se cumple.
+3.  Verificará la medida de la ranura dada a esa consulta de medios.
+4.  Cargará la imagen referenciada en la lista `srcset` con coincidencia más cercana a la medida de la ranura.
+
+¡Y eso es todo! Hasta este punto, si un navegador compatible con un ancho de ventana de 480px carga la página, la condición de medios `(max-width: 480px)` se cumplirá, por lo que la ranura de `440px` será elegida y se cargará el archivo de imagen `elva-fairy-480w.jpg`, ya que el ancho inherente (`480w`) es el más cercano a `440px`. La imagen de 800px tiene 128KB en disco mientras que la versión de 480px tiene solo 63KB — un ahorro de 65KB. Ahora imagine si esta fuera una página que tuviera muchas imágenes. Usar esta técnica puede ahorrarle a los usuarios de dispositivos móviles mucho ancho de banda.
+
+> **Nota:** Al probar esto con un navegador de escritorio, si el navegador no carga las imágenes más estrechas cuando tiene su ventana configurada en el ancho más estrecho, eche un vistazo a cuál es la ventana gráfica (puede aproximarla yendo a la __Consola JavaScript__ del navegador y escribiendo `document.querySelector('html').clientWidth`). Los diferentes navegadores tienen tamaños mínimos a los que te permitirán reducir el ancho de la ventana y pueden ser más anchos de lo que piensas. Al probarlo con un navegador móvil, puede usar herramientas como la página de depuración de Firefox `about:debugging` para inspeccionar la página cargada en el dispositivo móvil usando las herramientas de desarrollo de escritorio. Para ver qué imágenes se cargaron, puede usar la pestaña [Monitor de red](/es/docs/Tools/Network_Monitor) en las herramientas del desarrollador de Firefox.
+
+Los navegadores más antiguos que no soportan estas características solo las ignorarán y seguirán adelante con la carga de la imagen referenciada en el atributo {{htmlattrxref("src", "img")}} como lo hacen habitualmente.
+
+> **Nota:** En el {{htmlelement("head")}} del documento usted hallará la línea `<meta name="viewport" content="width=device-width">`: esto fuerza a los dispositivos móviles a adoptar su ancho real de ventana para cargar las páginas web (algunos navegadores móviles mienten sobre el ancho de su ventana gráfica y, en su lugar, cargan páginas con un ancho de ventana más grande y luego reducen la página cargada, lo que no es muy útil para imágenes o diseño receptivos).
+
+### Useful developer tools
+
+There are some useful [developer tools](/es/docs/Learn/Common_questions/What_are_browser_developer_tools) in browsers to help with working out the necessary slot widths, etc, that you need to use. When I was working them out, I first loaded up the non-responsive version of my example (`not-responsive.html`), then went into [Responsive Design View](/es/docs/Tools/Responsive_Design_Mode) (_Tools > Web Developer > Responsive Design View_), which allows you to look at your web page layouts as if they were being viewed through a variety of different device screen sizes.
+
+I set the viewport width to 320px then 480px; for each one I went into the [DOM Inspector](/es/docs/Tools/Page_Inspector), clicked on the {{htmlelement("img")}} element we are interested in, then looked at its size in the Box Model view tab on the right hand side of the display. This should give you the inherent image widths you need.
+
+![A screenshot of the firefox devtools with an image element highlighted in the dom, showing its dimensions as 440 by 293 pixels.](https://mdn.mozillademos.org/files/12932/box-model-devtools.png)
+
+Next, you can check whether the `srcset` is working by setting the viewport width to what you want (set it to a narrow width, for example), opening the Network Inspector (_Tools > Web Developer > Network_), then reloading the page. This should give you a list of the assets that were downloaded to make up the webpage, and here you can check which image file was chosen for download.
+
+![a screenshot of the network inspector in firefox devtools, showing that the HTML for the page has been downloaded, along with three images, which include the two 800 wide versions of the responsive images](https://mdn.mozillademos.org/files/12934/network-devtools.png)
+
+### Resolution switching: Same size, different resolutions
+
+If you're supporting multiple display resolutions, but everyone sees your image at the same real-world size on the screen, you can allow the browser to choose an appropriate resolution image by using `srcset` with x-descriptors and without `sizes` — a somewhat easier syntax! You can find an example of what this looks like in [srcset-resolutions.html](http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html) (see also [the source code](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html)):
+
+```html
+<img srcset="elva-fairy-320w.jpg,
+             elva-fairy-480w.jpg 1.5x,
+             elva-fairy-640w.jpg 2x"
+     src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">
+```
+
+![A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the image](https://mdn.mozillademos.org/files/12942/resolution-example.png)In this example, the following CSS is applied to the image so that it will have a width of 320 pixels on the screen (also called CSS pixels):
+
+```css
+img {
+  width: 320px;
+}
+```
+
+In this case, `sizes` is not needed — the browser simply works out what resolution the display is that it is being shown on, and serves the most appropriate image referenced in the `srcset`. So if the device accessing the page has a standard/low resolution display, with one device pixel representing each CSS pixel, the `elva-fairy-320w.jpg` image will be loaded (the 1x is implied, so you don't need to include it.) If the device has a high resolution of two device pixels per CSS pixel or more, the `elva-fairy-640w.jpg` image will be loaded. The 640px image is 93KB, whereas the 320px image is only 39KB.
+
+### Art direction
+
+To recap, the **art direction problem** involves wanting to change the image displayed to suit different image display sizes. For example, if a large landscape shot with a person in the middle is shown on a website when viewed on a desktop browser, then shrunk down when the website is viewed on a mobile browser, it will look bad as the person will be really tiny and hard to see. It would probably be better to show a smaller, portrait image on mobile, which shows the person zoomed in. The {{htmlelement("picture")}} element allows us to implement just this kind of solution.
+
+Returning to our original [not-responsive.html](http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html) example, we have an image that badly needs art direction:
+
+```html
+<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
+```
+
+Let's fix this, with {{htmlelement("picture")}}! Like [`<video>` and `<audio>`](/es/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content), The `<picture>` element is a wrapper containing several {{htmlelement("source")}} elements that provide several different sources for the browser to choose between, followed by the all-important {{htmlelement("img")}} element. The code in [responsive.html](http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html) looks like so:
+
+```html
+<picture>
+  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
+  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
+  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
+</picture>
+```
+
+- The `<source>` elements include a `media` attribute that contains a media condition — as with the first `srcset` example, these conditions are tests that decide which image is shown — the first one that returns true will be displayed. In this case, If the viewport width is 799px wide or less, the first `<source>` element's image will be displayed. If the viewport width is 800px or more, it'll be the second one.
+- The `srcset` attributes contain the path to the image to display. Note that just as we saw with `<img>` above, `<source>` can take a `srcset` attribute with multiple images referenced, and a `sizes` attribute too. So you could offer multiple images via a `<picture>` element, but then also offer multiple resolutions of each one too. Realistically, you probably won't want to do this kind of thing very often.
+- In all cases, you must provide an `<img>` element, with `src` and `alt`, right before `</picture>`, otherwise no images will appear. This provides a default case that will apply when none of the media conditions return true (you could actually remove the second `<source>` element in this example), and a fallback for browsers that don't support the `<picture>` element.
+
+This code allows us to display a suitable image on both wide screen and narrow screen displays, as shown below:
+
+![Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center.](https://mdn.mozillademos.org/files/12940/picture-element-wide.png)![Our example site as viewed on a narrow screen with the picture element used to switch the first image to a portrait close up of the detail, making it a lot more useful on a narrow screen](https://mdn.mozillademos.org/files/12938/picture-element-narrow.png)
+
+> **Nota:** You should use the `media` attribute only in art direction scenarios; when you do use `media`, don't also offer media conditions within the `sizes` attribute.
+
+### ¿Por qué no podemos usar, simplemente, CSS o Javascript?
+
+Cuando el navegador comienza a cargar una página, empieza a descargar (precargar) cualquier imagen before the main parser has started to load and interpret the page's CSS and JavaScript. This is a useful technique, which on average has shaved 20% off page load times. However, it is not helpful for responsive images, hence the need to implement solutions like `srcset`. You couldn't for example load the {{htmlelement("img")}} element, then detect the viewport width with JavaScript and dynamically change the source image to a smaller one if desired. By then, the original image would already have been loaded, and you would load the small image as well, which is even worse in responsive image terms.
+
+### Use modern image formats boldly
+
+There are several exciting new image formats (such as WebP and JPEG-2000) that can maintain a low file size and high quality at the same time. However, browser support is spotty.
+
+`<picture>` lets us continue catering to older browsers. You can supply MIME types inside `type` attributes so the browser can immediately reject unsupported file types:
+
+```html
+<picture>
+  <source type="image/svg+xml" srcset="pyramid.svg">
+  <source type="image/webp" srcset="pyramid.webp">
+  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
+</picture>
+```
+
+- No uses el atributo `media`, unless you also need art direction.
+- En un elemento `<source>` , solo puedes enlazar a imágenes del tipo que has declarado en `type`.
+- Al igual que antes, puedes usar sin ningún problema listas separadas con comas tanto en `srcset` , como en `sizes`, así como lo necesites.
+
+## Aprendizaje activo: Implementando sus propias imágenes adaptables
+
+For this active learning, we're expecting you to be brave and go it alone ... mostly. We want you to implement your own suitable art directed narrow screen/wide screen shot using `<picture>`, and a resolution switching example that uses `srcset`.
+
+1.  Write some simple HTML to contain your code (use `not-responsive.html` as a starting point, if you like)
+2.  Find a nice wide screen landscape image with some kind of detail contained in it somewhere. Create a web-sized version of it using a graphics editor, then crop it to show a smaller part that zooms in on the detail, and create a second image (about 480px wide is good for this.)
+3.  Use the `<picture>` element to implement an art direction picture switcher!
+4.  Create multiple image files of different sizes, each showing the same picture.
+5.  Use `srcset`/`size` to create a resolution switcher example, either to serve the same size image at different resolutions, or different image sizes at different viewport widths.
+
+> **Nota:** Use the browser devtools to help work out what sizes you need, as mentioned above.
+
+## Resumen
+
+That's a wrap for responsive images — we hope you enjoyed playing with these new techniques. As a recap, there are two distinct problems we've been discussing here:
+
+- **Art direction**: The problem whereby you want to serve cropped images for different layouts — for example a landscape image showing a full scene for a desktop layout, and a portrait image showing the main subject zoomed in close for a mobile layout. This can be solved using the {{htmlelement("picture")}} element.
+- **Resolution switching**: The problem whereby you want to serve smaller image files to narrow screen devices, as they don't need huge images like desktop displays do — and also optionally that you want to serve different resolution images to high density/low density screens. This can be solved using [vector graphics](/es/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web) (SVG images), and the {{htmlattrxref("srcset", "img")}} and {{htmlattrxref("sizes", "img")}} attributes.
+
+This also draws to a close the entire [Multimedia and embedding](/es/docs/Learn/HTML/Multimedia_and_embedding) module! The only thing to do now before moving on is to try our multimedia assessment, and see how you get on. Have fun.
+
+## Vea también
+
+- [Excelente introducción de Jason Grigsby excellent a las imágenes adaptables](http://blog.cloudfour.com/responsive-images-101-definitions)
+- [Imagenes adaptables: Si solo está cambiando resoluciones , use srcset](https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/) — incluye más explicaciones sobre como el navegador resuelve qué imagen utilizar
+- {{htmlelement("img")}}
+- {{htmlelement("picture")}}
+- {{htmlelement("source")}}
+
+{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}
+
+## En este módulo
+
+- [Imágenes in HTML](/es/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML)
+- [Contenido de audio y video](/es/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content)
+- [De \<object> a \<iframe> — otras tecnologías de i](/es/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies)ncrustación
+- [Agregando gráficos de vector a la Web](/es/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web)
+- [Imagenes adaptables](/es/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)
+- [Página de bienvenida de Mozilla](/es/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page)
diff --git a/files/es/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/es/learn/html/multimedia_and_embedding/video_and_audio_content/index.html
deleted file mode 100644
index 21a56877860ed7..00000000000000
--- a/files/es/learn/html/multimedia_and_embedding/video_and_audio_content/index.html
+++ /dev/null
@@ -1,319 +0,0 @@
----
-title: Contenido de audio y video
-slug: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
-translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</div>
-
-<p class="summary">Ahora que estamos cómodos añadiendo imágenes simples a una página web, el siguiente paso será empezar a agregar reproductores de audio y video a tu documento HTML. En este artículo veremos cómo hacerlo con los elementos  {{htmlelement("video")}} y {{htmlelement("audio")}}; luego terminaremos viendo como agregar subtítulos a nuestros videos.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Requisitos previos:</th>
-   <td>Conocimientos básicos de computación, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">programas básicos instalados</a>, conocimiento básico de <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">trabajo con archivos</a>, familiaridad con los fundamentos de HTML (como está cubierto en <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Empezando con HTML</a>) e <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Imágenes en HTML</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objetivo:</th>
-   <td>Aprender como incrustar contenido de audio y video en una página web, y agregar subtítulos a los videos.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Audio_y_video_en_la_web">Audio y video en la web</h2>
-
-<p>Los desarrolladores web han querido usar audio y video en la web por mucho tiempo, desde comienzos del 2000 cuando empezamos a tener un ancho de banda suficientemente rápido para soportar cualquier tipo de video (los archivos de video son mucho más grandes que texto o imágenes). En los inicios, las tecnologías web nativas como HTML no tenían el soporte para incrustar audio y video en la Web, tecnologías privadas (o basadas en plugins) como <a href="https://en.wikipedia.org/wiki/Adobe_Flash">Flash</a> (y después, <a href="https://en.wikipedia.org/wiki/Microsoft_Silverlight">Silverlight</a>) se convirtieron populares para manipular este tipo de contenido. Este tipo de tecnología funcionó bien, pero tenía ciertos problemas, incluídos el no trabajar bien con las características de HTML/CSS, problemas de seguridad y problemas de accesibilidad.</p>
-
-<p>Una solución nativa podría resolver mucho de esto si es implementado correctamente. Afortunadamente, unos pocos años después la especificación {{glossary("HTML5")}} tenía tales características agregadas, con los elementos {{htmlelement("video")}} y {{htmlelement("audio")}}, y algo nuevo {{Glossary("JavaScript")}} {{Glossary("API","APIs")}} para controlar estos. No veremos Javascript aquí — solo los fundamentos básicos que se pueden lograr con HTML.</p>
-
-<p>No te enseñaremos como crear archivos de audio y video — eso requiere un conocimiento completamente diferente. Por el contrario, te proporcionamos <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">archivos de audio y video de muestra con códigos de ejemplo</a> para que tu mismo experimentes, en caso de que no puedas conseguirlos por ti mismo.</p>
-
-<div class="note">
-<p><strong>Observación</strong>: Antes de empezar, también deberías saber que hay un puñado de OVPs (proveedores de video online) como <a href="https://www.youtube.com/">YouTube</a>, <a href="http://www.dailymotion.com">Dailymotion</a> y <a href="https://vimeo.com/">Vimeo</a>, y proveedores de audio como <a href="https://soundcloud.com/">Soundcloud</a>. Tales compañías ofrecen una conveniente fácil forma de hospedar y consumir videos, y que  no tienes que preocuparte sobre el enorme ancho de banda que se consume. Los OVPs normalmente usan código prefabricado para incrustar video/audio en tus sitios web; si  usas ese camino, puedes evitar algunas dificultates que discutimos en este artículo. Discutiremos este tipo de servicios un poco más en el siguiente artículo.</p>
-</div>
-
-<h3 id="El_elemento_&lt;video>">El elemento &lt;video&gt;</h3>
-
-<p>El elemento {{htmlelement("video")}} nos permite incrustar video fácilmente. Un ejemplo muy simple luce como lo siguiente:</p>
-
-<pre class="brush: html notranslate">&lt;video src="rabbit320.webm" controls&gt;
-  &lt;p&gt;Tu navegador no soporta HTML5 video. Aquí está el &lt;a href="rabbit320.webm"&gt;enlace del video&lt;/a&gt;.&lt;/p&gt;
-&lt;/video&gt;</pre>
-
-<p>Las características a notar son:</p>
-
-<dl>
- <dt>{{htmlattrxref("src","video")}}</dt>
- <dd>De la misma manera que para el elemento {{htmlelement("img")}}, el atributo <code>src</code> (source) contiene una ruta al video que deseas incrustar. Funciona de la misma manera.</dd>
- <dt>{{htmlattrxref("controls","video")}}</dt>
- <dd>Los usuarios deben ser capaces de controlar la reproducción de video y audio (esto es especialmente crítico en personas que padecen  <a href="https://en.wikipedia.org/wiki/Epilepsy#Epidemiology">epilepsia</a>). Se debe utilizar el atributo <code>controls</code> para incluir la interfaz de control del browser, o construir la nuestra utilizando la <a href="/en-US/docs/Web/API/HTMLMediaElement">JavaScript API</a> apropiada. Como mínimo la interfaz debe incluir una manera de empezar y terminar la reproducción, y ajustar el volumen.</dd>
- <dt>El párrafo dentro de la etiqueta  <code>&lt;video&gt;</code></dt>
- <dd>Se lo llama <strong>fallback content</strong> (contenido de reserva) — y será mostrado si el browser desde el que se está accediendo a la página no soporta el elemento <code>&lt;video&gt;</code>, permitiéndonos proveer un fallback para browsers más antiguos. Puede ser de la manera que se quiera; en este caso proporcionamos un link directo al archivo de video, por lo que el usuario puede al menos acceder de alguna manera, independientemente del browser que esté usando.</dd>
-</dl>
-
-<p>El video incrustado se verá así:</p>
-
-<p><img alt="A simple video player showing a video of a small white rabbit" src="https://mdn.mozillademos.org/files/12794/simple-video.png" style="display: block; height: 592px; margin: 0px auto; width: 589px;"></p>
-
-<p>Puedes <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">probar el ejemplo</a> aquí (también el <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">código fuente</a>).</p>
-
-<h3 id="Uso_de_formatos_múltiples_para_mejorar_la_compatibilidad">Uso de formatos múltiples para mejorar la compatibilidad</h3>
-
-<p>Hay un problema con el ejemplo de arriba, que quizás  hayas notado si trataste de acceder al <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">ejemplo en línea</a> con un navegador como Safari o Internet Explorer. ¡El video no funciona! Esto es porque diferentes navegadores soportan diferentes formatos de video (y audio).</p>
-
-<h4 id="Contenidos_de_un_archivo_de_medios">Contenidos de un archivo de medios</h4>
-
-<p>Repasemos la terminología rápidamente. Formatos como MP3, MP4 y WebM son llamados <strong>formatos contenedores</strong>. Estos contienen diferentes partes que componen toda la canción o video — como una pista de audio y una pista de video (en el caso del video), y metadatos para describir los contenidos que se presentan, qué codecs se usan para codificar sus canales, etcétera.</p>
-
-<p>Un archivo WebM contiene una película que tiene una pista principal de video y otra pista con un ángulo alternativo, junto con audio en inglés y español, además de una pista con comentarios en inglés, lo que puede ser conceptualizado en el siguiente diagrama. También se incluyeron pistas de texto que contienen los subtítulos de la película en inglés, español y para el comentario.</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/16898/ContainersAndTracks.svg" style="height: 607px; width: 823px;"></p>
-
-<p>Las pistas de audio y video dentro del contenedor mantienen los datos en un formato adecuado para el codec usado para codificar ese medio. Se usan diferentes formatos para pistas de audio versus de video. Cada pista de audio es codificada usando un codec de audio mientras que las pistas de video son codificadas (como probablemente ya has adivinado) usando un codec de video. Así como hemos hablado previamente, diferentes navegadores soportan diferentras formatos de audio y video, y diferentes formatos contenedores (como MP3, MP4 y WebM, que pueden contener diferentes tipos de video y audio).</p>
-
-<p>Por ejemplo:</p>
-
-<ul>
- <li>Un WebM usualmente contiene paquetes de Ogg Vorbis audio con VP8/VP9 video. Soportado principalmente por Firefox y Chrome.</li>
- <li>Un MP4 contiene a menudo paquetes AAC o audio MP3 con videos H.264. Principalmente soportados en Internet Explorer y Safari.</li>
- <li>El antiguo contenedor Ogg suele usar audio Ogg Vorbis y video Ogg Theora. Es principalmente soportado por Firefox y Chrome, pero básicamente ha sido reemplazado por el formato WebM de mejor calidad.</li>
-</ul>
-
-<p>Un reproductor de audio tenderá a reproducir directamente un track de audio. Por ejemplo un archivo MP3 u Ogg. No necesitan contenedores.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: No es tan simple como se ve en nuestra <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats#Browser_compatibility"> tabla de compatibilidad de codecs audio-video</a>. Además, muchos browsers de plataformas móviles pueden reproducir un formato no soportado entregándoselo al reproductor multimedia del sistema subyacente para que lo reproduzca. Pero esto servirá por ahora.</p>
-</div>
-
-<p>Los formatos anteriores existen para comprimir los archivos de audio y video volviéndolos manejables (el tamaño sin comprimir es muy grande). Los browsers contienen diferentes <strong>{{Glossary("Codec","Codecs")}}</strong>, como Vorbis o H.264, los cuales son usados para convertir el sonido y video comprimidos en binario y viceversa. Pero desafortunadamente, como indicamos antes, no todos los browsers soportan los mismos codecs, por lo tanto, habrá que proveer varios archivos para cada producción multimedia. Si te falta el codec correcto para decodificar el medio, simplemente no se reproducirá.</p>
-
-<div class="note">
-<p><strong>Nota:</strong> Debes estar preguntándote por qué sucede esto. El <strong>MP3 </strong> (para audio) y el <strong>MP4/H.264</strong> (para video) son ampliamente compatibles y de buena calidad, sin embargo, también están patentados  — sus patentes cubren MP3 al menos hasta 2017 y a H.264 hasta 2027, lo que significa que los browsers que no tienen la patente tienen que pagar grandes sumas de dinero para soportar estos formatos. Además,  mucha gente no permite el software con restricciones, por estar a favor de formatos abiertos. Por todo esto es que tenemos que proveer múltiples formatos para los diferentes browsers.</p>
-</div>
-
-<p>Está bien, ¿pero cómo lo hacemos? Miremos el siguiente <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">ejemplo actualizado (</a><a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">pruébalo en vivo aquí</a>), o acá:</p>
-
-<pre class="brush: html notranslate">&lt;video controls&gt;
-  &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
-  &lt;source src="rabbit320.webm" type="video/webm"&gt;
-  &lt;p&gt;Su navegador no soporta video HTML5. Aquí hay un &lt;a href="rabbit320.mp4"&gt;enlace al video&lt;/a&gt;.&lt;/p&gt;
-&lt;/video&gt;</pre>
-
-<p>Tomamos el atributo <code>src</code> del tag <code>&lt;video&gt;</code> y en su lugar incluimos elementos separados {{htmlelement("source")}} que apuntan a sus propias fuentes. En este caso el browser irá a los elementos <code>&lt;source&gt; y </code>reproducirá el primero de los elementos que el codec soporte. Incluir fuentes WebM y MP4 debería bastar para reproducir el video en la mayoría de los browsers en estos días.</p>
-
-<p>Cada elemento  <code>&lt;source&gt;</code>  tambien tiene un atributo <code>type</code> . Esto es opcional, pero se recomienda que se incluyan, ya que contienen {{glossary("MIME type","MIME types")}} de los archivos de vídeo y los navegadores pueden leerlos y omitir inmediatamente los vídeos que no tienen. Si no estan incluidos, los navegadores cargarán e intentarán reproducir cada archivo hasta que encuentren uno que funcione, lo que llevará aún más tiempo y recursos.</p>
-
-<div class="note">
-<p><strong>Note</strong>: Nuestro <a href="/en-US/docs/Web/HTML/Supported_media_formats">articulo sobre soporte de formatos multimedia</a> contiene algunos de los habituales {{glossary("MIME type","MIME types")}}.</p>
-</div>
-
-<h3 id="Otras_características_de_la_etiqueta_&lt;video>">Otras características de la etiqueta &lt;video&gt;</h3>
-
-<p>Hay varias otras características que puede incluir en un vídeo HTML5. Eche un vistazo a nuestro tercer ejemplo, a continuación.</p>
-
-<pre class="brush: html notranslate">&lt;video controls width="400" height="400"
-       autoplay loop muted
-       poster="poster.png"&gt;
-  &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
-  &lt;source src="rabbit320.webm" type="video/webm"&gt;
-  &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="rabbit320.mp4"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
-&lt;/video&gt;
-</pre>
-
-<p>Esto nos dará un resultado que se parece a esto:</p>
-
-<p><img alt="A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!" src="https://mdn.mozillademos.org/files/12796/extra-video-features.png" style="display: block; height: 731px; margin: 0px auto; width: 653px;">Las nuevas características son:</p>
-
-<dl>
- <dt>{{htmlattrxref("width","video")}} y {{htmlattrxref("height","video")}}</dt>
- <dd>Puede controlar el tamanño con estos atributos o con  {{Glossary("CSS")}}. En ambos casos, los vídeos mantienen su relación <strong>anchura - altura nativa</strong>. Si la relación de aspecto no se mantiene con los tamañis establecidos, el vídeo crecerá para rellenar el espacio horizontalmente y el el espacio sin rellenar sólo recibirá un color de fondo sólido de forma predeterminada.</dd>
- <dt>{{htmlattrxref("autoplay","video")}}</dt>
- <dd>Hace que el audio o el vídeo empiece a reproducirse de inmediato, mientras se carga el resto de la página. Le aconsejamos que no utilice vídeo (o audio) de reproducción automática en sus sitios, ya que los usuarios pueden encontralo molesto.</dd>
- <dt>{{htmlattrxref("loop","video")}}</dt>
- <dd>Hace que el vídeo (o audio) comience a reproducirse cada vez que finaliza.Esto puede en ocasiones resultar molesto, así que utilizalo solo si es realmente necesario.</dd>
- <dt>{{htmlattrxref("muted","video")}}</dt>
- <dd>Hace que los medios se reproduzcan con el sonido apagado de forma predeterminada.</dd>
- <dt>{{htmlattrxref("poster","video")}}</dt>
- <dd>La URL de una imagen que se mostrará antes de reproducir el vídeo. Está destinado a ser utilizado para una pantalla de presentación o pantalla publicitaria (miniatura del vídeo).</dd>
- <dt>{{htmlattrxref("preload","video")}}</dt>
- <dd>
- <p>Se utiliza para almacenar en búfer archivos grandes; Puede tomar uno de estos tres valores:</p>
-
- <ul>
-  <li><code>"none"</code> no almacena el archivo en el búfer</li>
-  <li><code>"auto"</code> almacena el archivo multimedia</li>
-  <li><code>"metadata"</code> almacena solo los metadatos del archivo</li>
- </ul>
- </dd>
-</dl>
-
-<p>Puedes encontrar el ejemplo anterior disponible en  <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">play live on Github</a> (también <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">see the source code</a>.)  Tenga en cuenta que hemos incluido el atributo <code>autoplay</code> en la versión en vivo  — Si el vídeo comienza a reproducirse tan pronto como se cargue la página no podrá ver la miniatura!</p>
-
-<h3 id="El_elemento_&lt;audio>">El elemento &lt;audio&gt;</h3>
-
-<p>El elemento  {{htmlelement("audio")}} funciona exactamente de la misma forma que el elemento {{htmlelement("video")}}, con algunas pequeñas diferencias como se describe a continuación. Un ejemplo típico podría ser así:</p>
-
-<pre class="brush: html notranslate">&lt;audio controls&gt;
-  &lt;source src="viper.mp3" type="audio/mp3"&gt;
-  &lt;source src="viper.ogg" type="audio/ogg"&gt;
-  &lt;p&gt;Your browser doesn't support HTML5 audio. Here is a &lt;a href="viper.mp3"&gt;link to the audio&lt;/a&gt; instead.&lt;/p&gt;
-&lt;/audio&gt;</pre>
-
-<p>Esto produce algo como lo siguiente en un navegador:</p>
-
-<p><img alt="A simple audio player with a play button, timer, volume control, and progress bar" src="https://mdn.mozillademos.org/files/12798/audio-player.png" style="display: block; height: 413px; margin: 0px auto; width: 626px;"></p>
-
-<div class="note">
-<p><strong>Nota</strong>: Puedes <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">reproducir este ejemplo de audio</a> en Github (también, puedes ver el <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">código fuente del reproductor de audio</a>.)</p>
-</div>
-
-<p>Esto ocupa menos espacio que un reproductor de video, ya que no hay un componente visual; solo necesita mostrar los controles para reproducir el audio. Otras diferencias con respecto al video HTML5 son las siguentes:</p>
-
-<ul>
- <li>El elemento {{htmlelement("audio")}} no soporta los atributos  <code>width</code>/<code>height</code>  — de nuevo, no hay un componente visual,por no que no hay nada a lo que asignar un width o height (ancho o alto).</li>
- <li>Tampoco es compatible con el atributo  <code>poster</code>  — de nuevo , no hay componente visual.</li>
-</ul>
-
-<p>Además de esto, <code>&lt;audio&gt;</code> admite las mismas características que  <code>&lt;video&gt;</code> — revisa las secciones anteriores para obtener más información sobre ellas.</p>
-
-<h3 id="Reinicio_de_la_reproducción_multimedia">Reinicio de la reproducción multimedia</h3>
-
-<p>En cualquier momento, puede restablecer los medios al principio—incluyendo el proceso de selección de la mejor fuente de medios, si se especifica más de una usando {{HTMLElement("source")}} elementos—llamando al elemento {{domxref("HTMLMediaElement.load", "load()")}} method:</p>
-
-<pre class="brush: js notranslate">var mediaElem = document.getElementById("my-media-element");
-mediaElem.load();</pre>
-
-<h3 id="Detecting_track_addition_and_removal">Detecting track addition and removal</h3>
-
-<p>You can monitor the track lists within a media element to detect when tracks are added to or removed from the element's media. For example, you can watch for the {{event("addtrack")}} event being fired on the associated {{domxref("AudioTrackList")}} object (retrieved via {{domxref("HTMLMediaElement.audioTracks")}}) to be informed when audio tracks are added to the media:</p>
-
-<pre class="brush: js notranslate">var mediaElem = document.querySelector("video");
-mediaElem.audioTracks.onaddtrack = function(event) {
-  audioTrackAdded(event.track);
-}
-</pre>
-
-<p>Encontraras mas documentacion acerca de esto en nuestra {{domxref("TrackEvent")}} documentacion.</p>
-
-<h2 id="Displaying_video_text_tracks">Displaying video text tracks</h2>
-
-<p>Now we'll discuss a slightly more advanced concept that is really useful to know about. Many people can't or don't want to hear the audio/video content they find on the Web, at least at certain times. For example:</p>
-
-<ul>
- <li>Many people have auditory impairments (more commonly known as hard of hearing, or deaf) so can't hear the audio.</li>
- <li>Others may not be able to hear the audio because they are in noisy environments (like a crowded bar when a sports game is being shown) or might not want to disturb others if they are in a quiet place (like a library.)</li>
- <li>People who don't speak the language of the video might want a text transcript or even translation to help them understand the media content.</li>
-</ul>
-
-<p>Wouldn't it be nice to be able to provide these people with a transcript of the words being spoken in the audio/video? Well, thanks to HTML5 video you can, with the <a href="/en-US/docs/Web/API/Web_Video_Text_Tracks_Format">WebVTT</a> format and the {{htmlelement("track")}} element.</p>
-
-<div class="note">
-<p><strong>Note</strong>: "Transcribe" means "to write down spoken words as text." The resulting text is a "transcript."</p>
-</div>
-
-<p>WebVTT is a format for writing text files containing multiple strings of text along with metadata such as what time in the video you want each text string to be displayed, and even limited styling/positioning information. These text strings are called <strong>cues</strong>, and you can display different types for different purposes, the most common being:</p>
-
-<dl>
- <dt>subtitles</dt>
- <dd>Translations of foreign material, for people who don't understand the words spoken in the audio.</dd>
- <dt>captions</dt>
- <dd>Synchronized transcriptions of dialog or descriptions of significant sounds, to let people who can't hear the audio understand what is going on.</dd>
- <dt>timed descriptions</dt>
- <dd>Text for conversion into audio, to serve people with visual impairments.</dd>
-</dl>
-
-<p>A typical WebVTT file will look something like this:</p>
-
-<pre class="eval line-numbers  language-html notranslate"><code class="language-html">WEBVTT
-
-1
-00:00:22.230 --&gt; 00:00:24.606
-This is the first subtitle.
-
-2
-00:00:30.739 --&gt; 00:00:34.074
-This is the second.
-
-  ...</code>
-</pre>
-
-<p>To get this displayed along with the HTML media playback, you need to:</p>
-
-<ol>
- <li>Save it as a <code>.vtt</code> file in a sensible place.</li>
- <li>Link to the <code>.vtt</code> file with the {{htmlelement("track")}} element. <code>&lt;track&gt;</code> should be placed within <code>&lt;audio&gt;</code> or <code>&lt;video&gt;</code>, but after all <code>&lt;source&gt;</code> elements. Use the {{htmlattrxref("kind","track")}} attribute to specify whether the cues are <code>subtitles</code>, <code>captions</code>, or <code>descriptions</code>. Further, use {{htmlattrxref("srclang","track")}} to tell the browser what language you have written the subtitles in.</li>
-</ol>
-
-<p>Here's an example:</p>
-
-<pre class="brush: html notranslate">&lt;video controls&gt;
-    &lt;source src="example.mp4" type="video/mp4"&gt;
-    &lt;source src="example.webm" type="video/webm"&gt;
-    &lt;track kind="subtitles" src="subtitles_en.vtt" srclang="en"&gt;
-&lt;/video&gt;</pre>
-
-<p>This will result in a video that has subtitles displayed, kind of like this:</p>
-
-<p><img alt='Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."' src="https://mdn.mozillademos.org/files/7887/video-player-with-captions.png" style="display: block; height: 365px; margin: 0px auto; width: 593px;"></p>
-
-<p>For more details, please read <a href="/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a>. You can <a href="http://iandevlin.github.io/mdn/video-player-with-captions/">find the example</a> that goes along with this article on Github, written by Ian Devlin (see the <a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">source code</a> too.) This example uses some JavaScript to allow users to choose between different subtitles. Note that to turn the subtitles on, you need to press the "CC" button and select an option — English, Deutsch, or Español. </p>
-
-<div class="note">
-<p><strong>Note</strong>: Text tracks also help you with {{glossary("SEO")}}, since search engines especially thrive on text. Text tracks even allow search engines to link directly to a spot partway through the video.</p>
-</div>
-
-<h3 id="Active_learning_Embedding_your_own_audio_and_video">Active learning: Embedding your own audio and video</h3>
-
-<p>For this active learning, we'd (ideally) like you to go out into the world and record some of your own video and audio — most phones these days allow you to record audio and video very easily, and provided you can transfer it on to your computer, you can use it. You may have to do some conversion to end up with a WebM and MP4 in the case of video, and an MP3 and Ogg in the case of audio, but there are enough programs out there to allow you to do this without too much trouble, such as <a href="http://www.mirovideoconverter.com/">Miro Video Converter</a> and <a href="https://sourceforge.net/projects/audacity/">Audacity</a>. We'd like you to have a go!</p>
-
-<p>If you are unable to source any video or audio, then you can feel free to use our <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">sample audio and video files</a> to carry out this exercise. You can also use our sample code for reference.</p>
-
-<p>We would like you to:</p>
-
-<ol>
- <li>Save your audio and video files in a new directory on your computer.</li>
- <li>Create a new HTML file in the same directory, called <code>index.html</code>.</li>
- <li>Add <code>&lt;audio&gt;</code> and <code>&lt;video&gt;</code> elements to the page; make them display the default browser controls.</li>
- <li>Give both of them <code>&lt;source&gt;</code> elements so that browsers will find the audio format they support best and load it. These should include <code>type</code> attributes.</li>
- <li>Give the <code>&lt;video&gt;</code> element a poster that will be displayed before the video starts to be played. Have fun creating your own poster graphic.</li>
-</ol>
-
-<p>For an added bonus, you could try researching text tracks, and work out how to add some captions to your video.</p>
-
-<h2 id="Summary">Summary</h2>
-
-<p>And that's a wrap; we hope you had fun playing with video and audio in web pages! In the next article, we'll look at other ways of embedding content on the Web, using technologies like {{htmlelement("iframe")}} and {{htmlelement("object")}}.</p>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li>{{htmlelement("audio")}}</li>
- <li>{{htmlelement("video")}}</li>
- <li>{{htmlelement("source")}}</li>
- <li>{{htmlelement("track")}}</li>
- <li><a href="/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a></li>
- <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Audio and Video delivery</a>: A LOT of detail about putting audio and video onto web pages using HTML and JavaScript.</li>
- <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_manipulation">Audio and Video manipulation</a>: A LOT of detail about manipulating audio and video using JavaScript (for example adding filters.)</li>
- <li>Automated options to <a href="http://www.inwhatlanguage.com/blog/translate-video-audio/">translate multimedia</a>.</li>
-</ul>
-
-<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</p>
-
-<h2 id="In_this_module">In this module</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From &lt;object&gt; to &lt;iframe&gt; — other embedding technologies</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the Web</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li>
-</ul>
-
-<dl>
-</dl>
-
-<ul>
-</ul>
diff --git a/files/es/learn/html/multimedia_and_embedding/video_and_audio_content/index.md b/files/es/learn/html/multimedia_and_embedding/video_and_audio_content/index.md
new file mode 100644
index 00000000000000..7688bec8e2918f
--- /dev/null
+++ b/files/es/learn/html/multimedia_and_embedding/video_and_audio_content/index.md
@@ -0,0 +1,306 @@
+---
+title: Contenido de audio y video
+slug: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
+translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
+---
+{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}
+
+Ahora que estamos cómodos añadiendo imágenes simples a una página web, el siguiente paso será empezar a agregar reproductores de audio y video a tu documento HTML. En este artículo veremos cómo hacerlo con los elementos {{htmlelement("video")}} y {{htmlelement("audio")}}; luego terminaremos viendo como agregar subtítulos a nuestros videos.
+
+<table>
+  <tbody>
+    <tr>
+      <th scope="row">Requisitos previos:</th>
+      <td>
+        Conocimientos básicos de computación,
+        <a
+          href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software"
+          >programas básicos instalados</a
+        >, conocimiento básico de
+        <a
+          href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files"
+          >trabajo con archivos</a
+        >, familiaridad con los fundamentos de HTML (como está cubierto en
+        <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started"
+          >Empezando con HTML</a
+        >) e
+        <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML"
+          >Imágenes en HTML</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Objetivo:</th>
+      <td>
+        Aprender como incrustar contenido de audio y video en una página web, y
+        agregar subtítulos a los videos.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## Audio y video en la web
+
+Los desarrolladores web han querido usar audio y video en la web por mucho tiempo, desde comienzos del 2000 cuando empezamos a tener un ancho de banda suficientemente rápido para soportar cualquier tipo de video (los archivos de video son mucho más grandes que texto o imágenes). En los inicios, las tecnologías web nativas como HTML no tenían el soporte para incrustar audio y video en la Web, tecnologías privadas (o basadas en plugins) como [Flash](https://en.wikipedia.org/wiki/Adobe_Flash) (y después, [Silverlight](https://en.wikipedia.org/wiki/Microsoft_Silverlight)) se convirtieron populares para manipular este tipo de contenido. Este tipo de tecnología funcionó bien, pero tenía ciertos problemas, incluídos el no trabajar bien con las características de HTML/CSS, problemas de seguridad y problemas de accesibilidad.
+
+Una solución nativa podría resolver mucho de esto si es implementado correctamente. Afortunadamente, unos pocos años después la especificación {{glossary("HTML5")}} tenía tales características agregadas, con los elementos {{htmlelement("video")}} y {{htmlelement("audio")}}, y algo nuevo {{Glossary("JavaScript")}} {{Glossary("API","APIs")}} para controlar estos. No veremos Javascript aquí — solo los fundamentos básicos que se pueden lograr con HTML.
+
+No te enseñaremos como crear archivos de audio y video — eso requiere un conocimiento completamente diferente. Por el contrario, te proporcionamos [archivos de audio y video de muestra con códigos de ejemplo](https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content) para que tu mismo experimentes, en caso de que no puedas conseguirlos por ti mismo.
+
+> **Nota:** **Observación**: Antes de empezar, también deberías saber que hay un puñado de OVPs (proveedores de video online) como [YouTube](https://www.youtube.com/), [Dailymotion](http://www.dailymotion.com) y [Vimeo](https://vimeo.com/), y proveedores de audio como [Soundcloud](https://soundcloud.com/). Tales compañías ofrecen una conveniente fácil forma de hospedar y consumir videos, y que no tienes que preocuparte sobre el enorme ancho de banda que se consume. Los OVPs normalmente usan código prefabricado para incrustar video/audio en tus sitios web; si usas ese camino, puedes evitar algunas dificultates que discutimos en este artículo. Discutiremos este tipo de servicios un poco más en el siguiente artículo.
+
+### El elemento \<video>
+
+El elemento {{htmlelement("video")}} nos permite incrustar video fácilmente. Un ejemplo muy simple luce como lo siguiente:
+
+```html
+<video src="rabbit320.webm" controls>
+  <p>Tu navegador no soporta HTML5 video. Aquí está el <a href="rabbit320.webm">enlace del video</a>.</p>
+</video>
+```
+
+Las características a notar son:
+
+- {{htmlattrxref("src","video")}}
+  - : De la misma manera que para el elemento [`<img>`](/es/docs/Web/HTML/Element/img), el atributo `src` (source) contiene una ruta al video que deseas incrustar. Funciona de la misma manera.
+- {{htmlattrxref("controls","video")}}
+  - : Los usuarios deben ser capaces de controlar la reproducción de video y audio (esto es especialmente crítico en personas que padecen [epilepsia](https://en.wikipedia.org/wiki/Epilepsy#Epidemiology)). Se debe utilizar el atributo `controls` para incluir la interfaz de control del browser, o construir la nuestra utilizando la [JavaScript API](/es/docs/Web/API/HTMLMediaElement) apropiada. Como mínimo la interfaz debe incluir una manera de empezar y terminar la reproducción, y ajustar el volumen.
+- El párrafo dentro de la etiqueta `<video>`
+  - : Se lo llama **fallback content** (contenido de reserva) — y será mostrado si el browser desde el que se está accediendo a la página no soporta el elemento `<video>`, permitiéndonos proveer un fallback para browsers más antiguos. Puede ser de la manera que se quiera; en este caso proporcionamos un link directo al archivo de video, por lo que el usuario puede al menos acceder de alguna manera, independientemente del browser que esté usando.
+
+El video incrustado se verá así:
+
+![A simple video player showing a video of a small white rabbit](https://mdn.mozillademos.org/files/12794/simple-video.png)
+
+Puedes [probar el ejemplo](http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/simple-video.html) aquí (también el [código fuente](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/video-and-audio-content/simple-video.html)).
+
+### Uso de formatos múltiples para mejorar la compatibilidad
+
+Hay un problema con el ejemplo de arriba, que quizás hayas notado si trataste de acceder al [ejemplo en línea](http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/simple-video.html) con un navegador como Safari o Internet Explorer. ¡El video no funciona! Esto es porque diferentes navegadores soportan diferentes formatos de video (y audio).
+
+#### Contenidos de un archivo de medios
+
+Repasemos la terminología rápidamente. Formatos como MP3, MP4 y WebM son llamados **formatos contenedores**. Estos contienen diferentes partes que componen toda la canción o video — como una pista de audio y una pista de video (en el caso del video), y metadatos para describir los contenidos que se presentan, qué codecs se usan para codificar sus canales, etcétera.
+
+Un archivo WebM contiene una película que tiene una pista principal de video y otra pista con un ángulo alternativo, junto con audio en inglés y español, además de una pista con comentarios en inglés, lo que puede ser conceptualizado en el siguiente diagrama. También se incluyeron pistas de texto que contienen los subtítulos de la película en inglés, español y para el comentario.
+
+![](https://mdn.mozillademos.org/files/16898/ContainersAndTracks.svg)
+
+Las pistas de audio y video dentro del contenedor mantienen los datos en un formato adecuado para el codec usado para codificar ese medio. Se usan diferentes formatos para pistas de audio versus de video. Cada pista de audio es codificada usando un codec de audio mientras que las pistas de video son codificadas (como probablemente ya has adivinado) usando un codec de video. Así como hemos hablado previamente, diferentes navegadores soportan diferentras formatos de audio y video, y diferentes formatos contenedores (como MP3, MP4 y WebM, que pueden contener diferentes tipos de video y audio).
+
+Por ejemplo:
+
+- Un WebM usualmente contiene paquetes de Ogg Vorbis audio con VP8/VP9 video. Soportado principalmente por Firefox y Chrome.
+- Un MP4 contiene a menudo paquetes AAC o audio MP3 con videos H.264. Principalmente soportados en Internet Explorer y Safari.
+- El antiguo contenedor Ogg suele usar audio Ogg Vorbis y video Ogg Theora. Es principalmente soportado por Firefox y Chrome, pero básicamente ha sido reemplazado por el formato WebM de mejor calidad.
+
+Un reproductor de audio tenderá a reproducir directamente un track de audio. Por ejemplo un archivo MP3 u Ogg. No necesitan contenedores.
+
+> **Nota:** No es tan simple como se ve en nuestra [tabla de compatibilidad de codecs audio-video](https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats#Browser_compatibility). Además, muchos browsers de plataformas móviles pueden reproducir un formato no soportado entregándoselo al reproductor multimedia del sistema subyacente para que lo reproduzca. Pero esto servirá por ahora.
+
+Los formatos anteriores existen para comprimir los archivos de audio y video volviéndolos manejables (el tamaño sin comprimir es muy grande). Los browsers contienen diferentes **{{Glossary("Codec","Codecs")}}**, como Vorbis o H.264, los cuales son usados para convertir el sonido y video comprimidos en binario y viceversa. Pero desafortunadamente, como indicamos antes, no todos los browsers soportan los mismos codecs, por lo tanto, habrá que proveer varios archivos para cada producción multimedia. Si te falta el codec correcto para decodificar el medio, simplemente no se reproducirá.
+
+> **Nota:** Debes estar preguntándote por qué sucede esto. El **MP3** (para audio) y el **MP4/H.264** (para video) son ampliamente compatibles y de buena calidad, sin embargo, también están patentados — sus patentes cubren MP3 al menos hasta 2017 y a H.264 hasta 2027, lo que significa que los browsers que no tienen la patente tienen que pagar grandes sumas de dinero para soportar estos formatos. Además, mucha gente no permite el software con restricciones, por estar a favor de formatos abiertos. Por todo esto es que tenemos que proveer múltiples formatos para los diferentes browsers.
+
+Está bien, ¿pero cómo lo hacemos? Miremos el siguiente [ejemplo actualizado (](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html)[pruébalo en vivo aquí](http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html)), o acá:
+
+```html
+<video controls>
+  <source src="rabbit320.mp4" type="video/mp4">
+  <source src="rabbit320.webm" type="video/webm">
+  <p>Su navegador no soporta video HTML5. Aquí hay un <a href="rabbit320.mp4">enlace al video</a>.</p>
+</video>
+```
+
+Tomamos el atributo `src` del tag `<video>` y en su lugar incluimos elementos separados {{htmlelement("source")}} que apuntan a sus propias fuentes. En este caso el browser irá a los elementos `<source> y `reproducirá el primero de los elementos que el codec soporte. Incluir fuentes WebM y MP4 debería bastar para reproducir el video en la mayoría de los browsers en estos días.
+
+Cada elemento `<source>` tambien tiene un atributo `type` . Esto es opcional, pero se recomienda que se incluyan, ya que contienen {{glossary("MIME type","MIME types")}} de los archivos de vídeo y los navegadores pueden leerlos y omitir inmediatamente los vídeos que no tienen. Si no estan incluidos, los navegadores cargarán e intentarán reproducir cada archivo hasta que encuentren uno que funcione, lo que llevará aún más tiempo y recursos.
+
+> **Nota:** Nuestro [articulo sobre soporte de formatos multimedia](/es/docs/Web/HTML/Supported_media_formats) contiene algunos de los habituales {{glossary("MIME type","MIME types")}}.
+
+### Otras características de la etiqueta \<video>
+
+Hay varias otras características que puede incluir en un vídeo HTML5. Eche un vistazo a nuestro tercer ejemplo, a continuación.
+
+```html
+<video controls width="400" height="400"
+       autoplay loop muted
+       poster="poster.png">
+  <source src="rabbit320.mp4" type="video/mp4">
+  <source src="rabbit320.webm" type="video/webm">
+  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
+</video>
+```
+
+Esto nos dará un resultado que se parece a esto:
+
+![A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!](https://mdn.mozillademos.org/files/12796/extra-video-features.png)Las nuevas características son:
+
+- {{htmlattrxref("width","video")}} y {{htmlattrxref("height","video")}}
+  - : Puede controlar el tamanño con estos atributos o con [CSS](https://developer.mozilla.org/es/docs/Glossary/CSS). En ambos casos, los vídeos mantienen su relación **anchura - altura nativa**. Si la relación de aspecto no se mantiene con los tamañis establecidos, el vídeo crecerá para rellenar el espacio horizontalmente y el el espacio sin rellenar sólo recibirá un color de fondo sólido de forma predeterminada.
+- {{htmlattrxref("autoplay","video")}}
+  - : Hace que el audio o el vídeo empiece a reproducirse de inmediato, mientras se carga el resto de la página. Le aconsejamos que no utilice vídeo (o audio) de reproducción automática en sus sitios, ya que los usuarios pueden encontralo molesto.
+- {{htmlattrxref("loop","video")}}
+  - : Hace que el vídeo (o audio) comience a reproducirse cada vez que finaliza.Esto puede en ocasiones resultar molesto, así que utilizalo solo si es realmente necesario.
+- {{htmlattrxref("muted","video")}}
+  - : Hace que los medios se reproduzcan con el sonido apagado de forma predeterminada.
+- {{htmlattrxref("poster","video")}}
+  - : La URL de una imagen que se mostrará antes de reproducir el vídeo. Está destinado a ser utilizado para una pantalla de presentación o pantalla publicitaria (miniatura del vídeo).
+- {{htmlattrxref("preload","video")}}
+
+  - : Se utiliza para almacenar en búfer archivos grandes; Puede tomar uno de estos tres valores:
+
+    - `"none"` no almacena el archivo en el búfer
+    - `"auto"` almacena el archivo multimedia
+    - `"metadata"` almacena solo los metadatos del archivo
+
+Puedes encontrar el ejemplo anterior disponible en [play live on Github](http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html) (también [see the source code](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html).) Tenga en cuenta que hemos incluido el atributo `autoplay` en la versión en vivo — Si el vídeo comienza a reproducirse tan pronto como se cargue la página no podrá ver la miniatura!
+
+### El elemento \<audio>
+
+El elemento {{htmlelement("audio")}} funciona exactamente de la misma forma que el elemento {{htmlelement("video")}}, con algunas pequeñas diferencias como se describe a continuación. Un ejemplo típico podría ser así:
+
+```html
+<audio controls>
+  <source src="viper.mp3" type="audio/mp3">
+  <source src="viper.ogg" type="audio/ogg">
+  <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
+</audio>
+```
+
+Esto produce algo como lo siguiente en un navegador:
+
+![A simple audio player with a play button, timer, volume control, and progress bar](https://mdn.mozillademos.org/files/12798/audio-player.png)
+
+> **Nota:** Puedes [reproducir este ejemplo de audio](http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html) en Github (también, puedes ver el [código fuente del reproductor de audio](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html).)
+
+Esto ocupa menos espacio que un reproductor de video, ya que no hay un componente visual; solo necesita mostrar los controles para reproducir el audio. Otras diferencias con respecto al video HTML5 son las siguentes:
+
+- El elemento {{htmlelement("audio")}} no soporta los atributos `width`/`height` — de nuevo, no hay un componente visual,por no que no hay nada a lo que asignar un width o height (ancho o alto).
+- Tampoco es compatible con el atributo `poster` — de nuevo , no hay componente visual.
+
+Además de esto, `<audio>` admite las mismas características que `<video>` — revisa las secciones anteriores para obtener más información sobre ellas.
+
+### Reinicio de la reproducción multimedia
+
+En cualquier momento, puede restablecer los medios al principio—incluyendo el proceso de selección de la mejor fuente de medios, si se especifica más de una usando {{HTMLElement("source")}} elementos—llamando al elemento {{domxref("HTMLMediaElement.load", "load()")}} method:
+
+```js
+var mediaElem = document.getElementById("my-media-element");
+mediaElem.load();
+```
+
+### Detecting track addition and removal
+
+You can monitor the track lists within a media element to detect when tracks are added to or removed from the element's media. For example, you can watch for the {{event("addtrack")}} event being fired on the associated {{domxref("AudioTrackList")}} object (retrieved via {{domxref("HTMLMediaElement.audioTracks")}}) to be informed when audio tracks are added to the media:
+
+```js
+var mediaElem = document.querySelector("video");
+mediaElem.audioTracks.onaddtrack = function(event) {
+  audioTrackAdded(event.track);
+}
+```
+
+Encontraras mas documentacion acerca de esto en nuestra {{domxref("TrackEvent")}} documentacion.
+
+## Displaying video text tracks
+
+Now we'll discuss a slightly more advanced concept that is really useful to know about. Many people can't or don't want to hear the audio/video content they find on the Web, at least at certain times. For example:
+
+- Many people have auditory impairments (more commonly known as hard of hearing, or deaf) so can't hear the audio.
+- Others may not be able to hear the audio because they are in noisy environments (like a crowded bar when a sports game is being shown) or might not want to disturb others if they are in a quiet place (like a library.)
+- People who don't speak the language of the video might want a text transcript or even translation to help them understand the media content.
+
+Wouldn't it be nice to be able to provide these people with a transcript of the words being spoken in the audio/video? Well, thanks to HTML5 video you can, with the [WebVTT](/es/docs/Web/API/Web_Video_Text_Tracks_Format) format and the {{htmlelement("track")}} element.
+
+> **Nota:** "Transcribe" means "to write down spoken words as text." The resulting text is a "transcript."
+
+WebVTT is a format for writing text files containing multiple strings of text along with metadata such as what time in the video you want each text string to be displayed, and even limited styling/positioning information. These text strings are called **cues**, and you can display different types for different purposes, the most common being:
+
+- subtitles
+  - : Translations of foreign material, for people who don't understand the words spoken in the audio.
+- captions
+  - : Synchronized transcriptions of dialog or descriptions of significant sounds, to let people who can't hear the audio understand what is going on.
+- timed descriptions
+  - : Text for conversion into audio, to serve people with visual impairments.
+
+A typical WebVTT file will look something like this:
+
+```
+WEBVTT
+
+1
+00:00:22.230 --> 00:00:24.606
+This is the first subtitle.
+
+2
+00:00:30.739 --> 00:00:34.074
+This is the second.
+
+...
+```
+
+To get this displayed along with the HTML media playback, you need to:
+
+1.  Save it as a `.vtt` file in a sensible place.
+2.  Link to the `.vtt` file with the {{htmlelement("track")}} element. `<track>` should be placed within `<audio>` or `<video>`, but after all `<source>` elements. Use the {{htmlattrxref("kind","track")}} attribute to specify whether the cues are `subtitles`, `captions`, or `descriptions`. Further, use {{htmlattrxref("srclang","track")}} to tell the browser what language you have written the subtitles in.
+
+Here's an example:
+
+```html
+<video controls>
+    <source src="example.mp4" type="video/mp4">
+    <source src="example.webm" type="video/webm">
+    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
+</video>
+```
+
+This will result in a video that has subtitles displayed, kind of like this:
+
+![Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."](https://mdn.mozillademos.org/files/7887/video-player-with-captions.png)
+
+For more details, please read [Adding captions and subtitles to HTML5 video](/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video). You can [find the example](http://iandevlin.github.io/mdn/video-player-with-captions/) that goes along with this article on Github, written by Ian Devlin (see the [source code](https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions) too.) This example uses some JavaScript to allow users to choose between different subtitles. Note that to turn the subtitles on, you need to press the "CC" button and select an option — English, Deutsch, or Español.
+
+> **Nota:** Text tracks also help you with {{glossary("SEO")}}, since search engines especially thrive on text. Text tracks even allow search engines to link directly to a spot partway through the video.
+
+### Active learning: Embedding your own audio and video
+
+For this active learning, we'd (ideally) like you to go out into the world and record some of your own video and audio — most phones these days allow you to record audio and video very easily, and provided you can transfer it on to your computer, you can use it. You may have to do some conversion to end up with a WebM and MP4 in the case of video, and an MP3 and Ogg in the case of audio, but there are enough programs out there to allow you to do this without too much trouble, such as [Miro Video Converter](http://www.mirovideoconverter.com/) and [Audacity](https://sourceforge.net/projects/audacity/). We'd like you to have a go!
+
+If you are unable to source any video or audio, then you can feel free to use our [sample audio and video files](https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content) to carry out this exercise. You can also use our sample code for reference.
+
+We would like you to:
+
+1.  Save your audio and video files in a new directory on your computer.
+2.  Create a new HTML file in the same directory, called `index.html`.
+3.  Add `<audio>` and `<video>` elements to the page; make them display the default browser controls.
+4.  Give both of them `<source>` elements so that browsers will find the audio format they support best and load it. These should include `type` attributes.
+5.  Give the `<video>` element a poster that will be displayed before the video starts to be played. Have fun creating your own poster graphic.
+
+For an added bonus, you could try researching text tracks, and work out how to add some captions to your video.
+
+## Summary
+
+And that's a wrap; we hope you had fun playing with video and audio in web pages! In the next article, we'll look at other ways of embedding content on the Web, using technologies like {{htmlelement("iframe")}} and {{htmlelement("object")}}.
+
+## See also
+
+- {{htmlelement("audio")}}
+- {{htmlelement("video")}}
+- {{htmlelement("source")}}
+- {{htmlelement("track")}}
+- [Adding captions and subtitles to HTML5 video](/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video)
+- [Audio and Video delivery](/es/docs/Web/Apps/Fundamentals/Audio_and_video_delivery): A LOT of detail about putting audio and video onto web pages using HTML and JavaScript.
+- [Audio and Video manipulation](/es/docs/Web/Apps/Fundamentals/Audio_and_video_manipulation): A LOT of detail about manipulating audio and video using JavaScript (for example adding filters.)
+- Automated options to [translate multimedia](http://www.inwhatlanguage.com/blog/translate-video-audio/).
+
+{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}
+
+## In this module
+
+- [Images in HTML](/es/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML)
+- [Video and audio content](/es/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content)
+- [From \<object> to \<iframe> — other embedding technologies](/es/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies)
+- [Adding vector graphics to the Web](/es/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web)
+- [Responsive images](/es/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)
+- [Mozilla splash page](/es/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page)
diff --git a/files/es/learn/html/tables/advanced/index.html b/files/es/learn/html/tables/advanced/index.html
deleted file mode 100644
index 733bd3125f1691..00000000000000
--- a/files/es/learn/html/tables/advanced/index.html
+++ /dev/null
@@ -1,472 +0,0 @@
----
-title: Funciones avanzadas de las tablas HTML y accesibilidad
-slug: Learn/HTML/Tables/Advanced
-translation_of: Learn/HTML/Tables/Advanced
-original_slug: Learn/HTML/Tablas/Funciones_avanzadas_de_las_tablas_HTML_y_accesibilidad
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}</div>
-
-<p class="summary">En el segundo artículo de este módulo, analizamos algunas características más avanzadas de las tablas HTML, como los subtítulos/resúmenes, la agrupación de filas en las secciones del encabezado, el cuerpo y el pie de página; y también analizamos la accesibilidad de las tablas para usuarios con discapacidad visual.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prerrequisitos:</th>
-   <td>Conceptos básicos de HTML (ver <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>).</td>
-  </tr>
-  <tr>
-   <th scope="row">Objetivo:</th>
-   <td>Aprender las características más avanzadas de las tablas HTML y la accesibilidad de las tablas.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Añadir_un_subtítulo_a_tu_tabla_con_&lt;caption>">Añadir un subtítulo a tu tabla con &lt;caption&gt;</h2>
-
-<p>Puedes dar un título a tu tabla colocándolo dentro de un elemento {{htmlelement ("caption")}} y anidándolo dentro del elemento {{htmlelement ("table")}}. Debes ponerlo justo debajo de la etiqueta de apertura <code>&lt;table&gt;</code>.</p>
-
-<pre class="brush: html notranslate">&lt;table&gt;
-  &lt;caption&gt;Dinosaurios en el período Jurásico&lt;/caption&gt;
-
-  ...
-&lt;/table&gt;</pre>
-
-<p>Como puedes deducir a partir del breve ejemplo anterior, el título debe contener una descripción del contenido de la tabla. Esto es útil para todos los lectores que deseen descubrir de un vistazo si la tabla les resulta útil mientras ojean la página, pero es útil especialmente para usuarios ciegos. En lugar de que un lector de pantalla lea el contenido de muchas celdas solo para averiguar de qué trata la tabla, el lector puede contar con el título para luego decidir si leer la tabla con mayor detalle.</p>
-
-<p>Los subtítulos se colocan directamente debajo de la etiqueta <code>&lt;table&gt;</code>.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: El atributo {{htmlattrxref("summary","table")}} también se puede usar en el elemento <code>table</code> para proporcionar una descripción; los lectores de pantalla también lo leen. Sin embargo, recomendamos usar el elemento <code>caption</code>, porque {{htmlattrxref("summary","table")}} está {{glossary("obsoleto")}} conforme a la especificación HTML5 y porque los usuarios sin discapacidad visual no pueden leerlo (no aparece en la página).</p>
-</div>
-
-<h3 id="Aprendizaje_activo_Añadir_un_subtítulo">Aprendizaje activo: Añadir un subtítulo</h3>
-
-<p>Vamos a probarlo con un ejemplo del artículo anterior.</p>
-
-<ol>
- <li>Abre el ejemplo del horario de clases de la profesora de idiomas del final de <a href="/es/docs/Learn/HTML/Tablas/Conceptos_b%C3%A1sicos_de_las_tablas_HTML#Aprendizaje_activo_colgroup_y_col"> conocimientos básicos de las tablas HTML</a>, o haz una copia local de nuestro archivo <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html">timetable-fixed.html</a>.</li>
- <li>Añade un título adecuado a la tabla.</li>
- <li>Guarda tu código, ábrelo en un navegador y observa qué aspecto presenta.</li>
-</ol>
-
-<div class="note">
-<p><strong>Nota</strong>: Puedes encontrar nuestra versión en GitHub: consulta <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/timetable-caption.html">timetable-caption.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/advanced/timetable-caption.html">mirar en vivo</a>).</p>
-</div>
-
-<h2 id="Añadir_estructura_con_&lt;thead>_&lt;tfoot>_y_&lt;tbody>">Añadir estructura con &lt;thead&gt;, &lt;tfoot&gt; y &lt;tbody&gt;</h2>
-
-<p>A medida que la estructura de las tablas se vuelve más compleja, es útil darles una estructura más definida. Una forma clara de hacerlo es con {{htmlelement ("thead")}}, {{htmlelement ("tfoot")}} y {{htmlelement ("tbody")}}, que te permiten marcar un encabezado, un pie de página y una sección del cuerpo de la tabla.</p>
-
-<p>Estos elementos no mejoran las características de accesibilidad de la tabla para los usuarios de lectores de pantalla ni su aspecto visual en sí. Sin embargo, son muy útiles para la aplicación de estilo y la compaginación, porque actúan como soportes útiles para añadir CSS a tu tabla. Como ejemplos interesantes, en el caso de una tabla extensa, puedes hacer que el encabezado y el pie de página se repitan en cada página impresa, y también que el cuerpo de la tabla se muestre en una sola página y desplazarte por los contenidos arriba y abajo con la barra de desplazamiento.</p>
-
-<p>Para utilizarlos:</p>
-
-<ul>
- <li>El elemento <code>&lt;thead&gt;</code> debe delimitar el encabezado de la tabla; esta suele ser la primera fila, que contiene los encabezados de las columnas, pero no siempre es así. Si utilizas los elementos {{htmlelement ("col")}}/{{htmlelement ("colgroup")}}, el encabezado de la tabla debe estar justo debajo.</li>
- <li>El elemento <code>&lt;tfoot&gt;</code> delimita la parte de la tabla correspondiente al pie de página; esta podría ser una fila final con elementos en las filas anteriores. Puedes incluir el pie de página de la tabla justo en la parte inferior de la tabla, donde esperarías que esté, o justo debajo del encabezado (y el navegador lo mostrará aun así en la parte inferior de la tabla).</li>
- <li>El elemento <code>&lt;tbody&gt;</code> delimita las otras partes del contenido de la tabla que no están en el encabezado o en el pie de página de la tabla. Aparecerá debajo del encabezado de la tabla o, a veces, en el pie de página, según cómo hayas decidido estructurarlo.</li>
-</ul>
-
-<div class="note">
-<p><strong>Nota</strong>: <code>&lt;tbody&gt;</code> se incluye siempre en todas las tablas de forma implícita si no lo especificas en tu código. Para comprobarlo, abre uno de tus ejemplos anteriores que no incluya <code>&lt;tbody&gt;</code> y mira el código HTML en las <a href="/es/docs/Learn/Common_questions/What_are_browser_developer_tools">herramientas de desarrollo de tu navegador</a>; verás que el navegador ha añadido esta etiqueta. Quizás te preguntes por qué deberías molestarte en incluirlo. Debes hacerlo para tener más control sobre la estructura y el estilo de la tabla.</p>
-</div>
-
-<h3 id="Aprendizaje_activo_Añadir_estructura_a_la_tabla">Aprendizaje activo: Añadir estructura a la tabla</h3>
-
-<p>Pongamos en acción estos elementos nuevos.</p>
-
-<ol>
- <li>En primer lugar, haz una copia local de <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record.html">spending-record.html</a> y <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/minimal-table.css">minimal-table.css</a> en una carpeta nueva de tu ordenador.</li>
- <li>Intenta abrirlo en un navegador: observarás que se ve bien, pero podría mejorarse. La fila «SUM», que contiene una suma de las cantidades gastadas, parece estar en el lugar equivocado, y faltan algunos detalles del código.</li>
- <li>Coloca la fila de encabezados dentro de un elemento <code>&lt;thead&gt;</code>, la fila «SUM» dentro de un elemento <code>&lt;tfoot&gt;</code>, y el resto del contenido dentro de un elemento <code>&lt;tbody&gt;</code>.</li>
- <li>Guarda y actualiza, y observa que añadir el elemento <code>&lt;tfoot&gt;</code> ha provocado que la fila «SUM» pase al final de la tabla.</li>
- <li>Luego, añade un atributo {{htmlattrxref ("colspan", "td")}} para que la celda «SUM» abarque las primeras cuatro columnas, de modo que el número aparezca en la parte inferior de la columna «Costes».</li>
- <li>Vamos a añadir un estilo adicional sencillo a la tabla para que veas cuán útiles son estos elementos para aplicar CSS. Dentro del encabezado del documento HTML hay un elemento {{htmlelement ("style")}} vacío. Añade a este elemento las líneas de código CSS siguientes:
-  <pre class="brush: css notranslate">tbody {
-  font-size: 95%;
-  font-style: italic;
-}
-
-tfoot {
-  font-weight: bold;
-}
-</pre>
- </li>
- <li>Guarda, actualiza, y échale un vistazo al resultado. Si los elementos <code>&lt;tbody&gt;</code> y <code>&lt;tfoot&gt;</code> no estuvieran en su lugar, tendrías que escribir selectores/reglas mucho más complicados para obtener la misma aplicación de estilo.</li>
-</ol>
-
-<div class="note">
-<p><strong>Nota</strong>: No esperamos que comprendas completamente el CSS en este momento. Aprenderás más sobre el tema cuando llegues a nuestros módulos CSS (<a href="/es/docs/Learn/CSS/First_steps">Introducción al CSS</a> es un buen lugar para comenzar; también tenemos un artículo específico sobre <a href="/es/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estilo a las tablas</a>).</p>
-</div>
-
-<p>Tu tabla final debería tener un aspecto similar al siguiente:</p>
-
-<div class="hidden">
-<h6 id="Hidden_example">Hidden example</h6>
-
-<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;meta charset="utf-8"&gt;
-    &lt;title&gt; Mi historial de gastos &lt;/title&gt;
-    &lt;style&gt;
-
-        html {
-          font-family: sans-serif;
-        }
-
-          table {
-          border-collapse: collapse;
-          border: 4px solid rgb(200,200,200);
-          letter-spacing: 1px;
-          font-size: 0.8rem;
-        }
-
-        td, th {
-          border: 2px solid rgb(190,190,190);
-          padding: 10px 20px;
-        }
-
-        th {
-          background-color: rgb(235,235,235);
-        }
-
-        td {
-          text-align: center;
-        }
-
-        tr:nth-child(even) td {
-          background-color: rgb(250,250,250);
-        }
-
-        tr:nth-child(odd) td {
-          background-color: rgb(245,245,245);
-        }
-
-        caption {
-          padding: 10px;
-        }
-
-        tbody {
-          font-size: 90%;
-          font-style: italic;
-        }
-
-        tfoot {
-          font-weight: bold;
-        }
-    &lt;/style&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-      &lt;table&gt;
-
-&lt;caption&gt; Cómo elegí gastar mi dinero &lt;/caption&gt;
-        &lt;thead&gt;
-          &lt;tr&gt;
-            &lt;th&gt; Compra &lt;/th&gt;
-
-&lt;th&gt; Ubicación &lt;/th&gt;
-            &lt;th&gt; Fecha &lt;/th&gt;
-            &lt;th&gt; Revisión &lt;/th&gt;
-
-&lt;th&gt; Coste (€) &lt;/th&gt;
-          &lt;/tr&gt;
-        &lt;/thead&gt;
-        &lt;tfoot&gt;
-          &lt;tr&gt;
-            &lt;td colspan="4"&gt;SUM&lt;/td&gt;
-            &lt;td&gt;118&lt;/td&gt;
-          &lt;/tr&gt;
-        &lt;/tfoot&gt;
-        &lt;tbody&gt;
-          &lt;tr&gt;
-            &lt;td&gt; Corte de pelo &lt;/td&gt;
-
-&lt;td&gt; Peluquería &lt;/td&gt;
-            &lt;td&gt;12/09&lt;/td&gt;
-
-&lt;td&gt; Gran idea &lt;/td&gt;
-            &lt;td&gt;30&lt;/td&gt;
-          &lt;/tr&gt;
-          &lt;tr&gt;
-
-&lt;td&gt; Lasaña &lt;/td&gt;
-
-&lt;td&gt; Restaurante &lt;/td&gt;
-            &lt;td&gt;12/09&lt;/td&gt;
-            &lt;td&gt; Arrepentimiento &lt;/td&gt;
-            &lt;td&gt;18&lt;/td&gt;
-          &lt;/tr&gt;
-          &lt;tr&gt;
-
-&lt;td&gt; Zapatos &lt;/td&gt;
-            &lt;td&gt; Zapatería &lt;/td&gt;
-            &lt;td&gt;13/09&lt;/td&gt;
-
-&lt;td&gt; Mucho arrepentimiento &lt;/td&gt;
-            &lt;td&gt;65&lt;/td&gt;
-          &lt;/tr&gt;
-          &lt;tr&gt;
-            &lt;td&gt; Pasta de dientes &lt;/td&gt;
-            &lt;td&gt; Supermercado &lt;/td&gt;
-            &lt;td&gt;13/09&lt;/td&gt;
-
-&lt;td&gt; Bien &lt;/td&gt;
-            &lt;td&gt;5&lt;/td&gt;
-          &lt;/tr&gt;
-        &lt;/tbody&gt;
-    &lt;/table&gt;
-
-  &lt;/body&gt;
-&lt;/html&gt;</pre>
-</div>
-
-<p>{{ EmbedLiveSample('Hidden_example', '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p>
-
-<div class="note">
-<p><strong>Nota</strong>: También puedes encontrarlo en GitHub como <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record-finished.html">spending-record-finished.html</a> (o consultarlo también <a href="http://mdn.github.io/learning-area/html/tables/advanced/spending-record-finished.html">en vivo</a>).</p>
-</div>
-
-<h2 id="Anidar_tablas">Anidar tablas</h2>
-
-<p>Es posible anidar una tabla dentro de otra, siempre que incluyas la estructura completa, incluido el elemento <code>&lt;table&gt;</code>. Por lo general, esto no se recomienda, porque se obtiene un marcado más confuso y menos accesible para los usuarios que usan lectores de pantalla, y además, en muchos casos sería posible sencillamente insertar celdas/filas/columnas adicionales en la tabla. Sin embargo, a veces es necesario, por ejemplo, si deseas importar contenido de forma sencilla desde otras fuentes.</p>
-
-<p>El marcado siguiente muestra una tabla anidada simple:</p>
-
-<pre class="brush: html notranslate">&lt;table id="tabla1"&gt;
-  &lt;tr&gt;
-    &lt;th&gt;título1&lt;/th&gt;
-    &lt;th&gt;título2&lt;/th&gt;
-    &lt;th&gt;título3&lt;/th&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td id="nested"&gt;
-      &lt;table id="tabla2"&gt;
-        &lt;tr&gt;
-          &lt;td&gt;celda1&lt;/td&gt;
-          &lt;td&gt;celda2&lt;/td&gt;
-          &lt;td&gt;celda3&lt;/td&gt;
-        &lt;/tr&gt;
-      &lt;/table&gt;
-    &lt;/td&gt;
-    &lt;td&gt;celda2&lt;/td&gt;
-    &lt;td&gt;celda3&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td&gt;celda4&lt;/td&gt;
-    &lt;td&gt;celda5&lt;/td&gt;
-    &lt;td&gt;celda6&lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/table&gt;</pre>
-
-<p>La salida se verá así:</p>
-
-<table id="table1">
- <tbody>
-  <tr>
-   <th>título1</th>
-   <th>título2</th>
-   <th>título3</th>
-  </tr>
-  <tr>
-   <td id="nested">
-    <table id="table2">
-     <tbody>
-      <tr>
-       <td>celda1</td>
-       <td>celda2</td>
-       <td>celda3</td>
-      </tr>
-     </tbody>
-    </table>
-   </td>
-   <td>celda2</td>
-   <td>celda3</td>
-  </tr>
-  <tr>
-   <td>celda4</td>
-   <td>celda5</td>
-   <td>celda6</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Tablas_para_usuarios_con_discapacidad_visual">Tablas para usuarios con discapacidad visual</h2>
-
-<p>Repasemos brevemente cómo usamos las tablas de datos. Una tabla puede ser una herramienta útil porque nos proporciona un acceso rápido a unos datos y nos permite buscar entre valores diferentes. Por ejemplo, echa un vistazo a la tabla siguiente para saber cuántos anillos se vendieron en Gante en agosto pasado. Para comprender la información que contiene la tabla, establecemos asociaciones visuales entre los datos de la tabla y sus encabezados de columna y/o fila.</p>
-
-<table>
- <caption>Artículos vendidos en agosto de 2016</caption>
- <tbody>
-  <tr>
-   <td></td>
-   <td></td>
-   <th colspan="3" scope="colgroup">Ropa</th>
-   <th colspan="2" scope="colgroup">Accesorios</th>
-  </tr>
-  <tr>
-   <td></td>
-   <td></td>
-   <th scope="col">Pantalones</th>
-   <th scope="col">Faldas</th>
-   <th scope="col">Vestidos</th>
-   <th scope="col">Pulseras</th>
-   <th scope="col">Anillos</th>
-  </tr>
-  <tr>
-   <th rowspan="3" scope="rowgroup">Bélgica</th>
-   <th scope="row">Amberes</th>
-   <td>56</td>
-   <td>22</td>
-   <td>43</td>
-   <td>72</td>
-   <td>23</td>
-  </tr>
-  <tr>
-   <th scope="row">Gante</th>
-   <td>46</td>
-   <td>18</td>
-   <td>50</td>
-   <td>61</td>
-   <td>15</td>
-  </tr>
-  <tr>
-   <th scope="row">Bruselas</th>
-   <td>51</td>
-   <td>27</td>
-   <td>38</td>
-   <td>69</td>
-   <td>28</td>
-  </tr>
-  <tr>
-   <th rowspan="2" scope="rowgroup">Los países bajos</th>
-   <th scope="row">Ámsterdam</th>
-   <td>89</td>
-   <td>34</td>
-   <td>69</td>
-   <td>85</td>
-   <td>38</td>
-  </tr>
-  <tr>
-   <th scope="row">Utrecht</th>
-   <td>80</td>
-   <td>12</td>
-   <td>43</td>
-   <td>36</td>
-   <td>19</td>
-  </tr>
- </tbody>
-</table>
-
-<p>Pero, ¿y si no puedes hacer esas asociaciones visuales? ¿Cómo podrías leer una tabla como la anterior? Las personas con discapacidad visual a menudo usan un lector de pantalla que les lee la información de las páginas web. Esto no resulta un problema cuando lees un texto sin formato, pero interpretar una tabla puede ser un gran desafío para una persona ciega. Sin embargo, con el marcado adecuado podemos reemplazar las asociaciones visuales por otras asociaciones de tipo programático.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: Hay en torno a 253 millones de personas con discapacidad visual según los<a href="https://www.who.int/es/news-room/fact-sheets/detail/blindness-and-visual-impairment" title="datos de la OMS sobre la discapacidad visual"> datos de la OMS de 2017</a>.</p>
-</div>
-
-<p>Esta sección del artículo proporciona técnicas adicionales para conferir a las tablas la mayor accesibilidad posible.</p>
-
-<h3 class="attTitle" id="Usar_encabezados_de_columna_y_fila">Usar encabezados de columna y fila</h3>
-
-<p>Los lectores de pantalla identificarán todos los encabezados y los usarán para hacer asociaciones programáticas entre esos encabezados y las celdas con las que se relacionan. La combinación de encabezados por columna y fila identificará e interpretará los datos de cada celda para que los usuarios que usan lectores de pantalla puedan interpretar la tabla de manera similar a como lo hace un usuario sin discapacidad visual.</p>
-
-<p>Ya expusimos los encabezados en nuestro artículo anterior; consulta <a href="/es/docs/Learn/HTML/Tablas/Conceptos_b%C3%A1sicos_de_las_tablas_HTML#A%C3%B1adir_encabezados_con_elementos_%3Cth%3E">Añadir encabezados con elementos &lt;th&gt;</a>.</p>
-
-<h3 class="attTitle" id="El_atributo_scope">El atributo scope</h3>
-
-<p>Un nuevo tema para este artículo es el atributo {{htmlattrxref ("scope", "th")}}, que se puede añadir al elemento <code>&lt;th&gt;</code> para indicar a los lectores de pantalla exactamente para qué celdas es el encabezado. Volviendo a nuestro ejemplo anterior de registro de gastos, podrías definir los encabezados de columna inequívocamente como encabezados de columna de este modo:</p>
-
-<pre class="brush: html notranslate">&lt;thead&gt;
-  &lt;tr&gt;
-    &lt;th scope="col"&gt;Compra&lt;/th&gt;
-    &lt;th scope="col"&gt;Ubicación&lt;/th&gt;
-    &lt;th scope="col"&gt;Fecha&lt;/th&gt;
-    &lt;th scope="col"&gt;Revisión&lt;/th&gt;
-    &lt;th scope="col"&gt;Coste (€)&lt;/th&gt;
-  &lt;/tr&gt;
-&lt;/thead&gt;</pre>
-
-<p>Y también cada fila podría tener un encabezado definido de esta manera (si añadimos encabezados de fila y encabezados de columna):</p>
-
-<pre class="brush: html notranslate">&lt;tr&gt;
-  &lt;th scope="row"&gt;Corte de pelo&lt;/th&gt;
-
-&lt;td&gt;Peluquería&lt;/td&gt;
-  &lt;td&gt;12/09&lt;/td&gt;
-
-&lt;td&gt;Gran idea&lt;/td&gt;
-  &lt;td&gt;30&lt;/td&gt;
-&lt;/tr&gt;</pre>
-
-<p>Los lectores de pantalla reconocerán el marcado estructurado de esta manera y permitirán a tus usuarios, por ejemplo, leer toda la columna o fila a la vez.</p>
-
-<p>El atributo <code>scope</code> tiene dos valores posibles más: <code>colgroup</code> y <code>rowgroup</code>. Se utilizan para encabezados que se encuentran sobre la parte superior de varias columnas o filas. Si vuelves a echar un vistazo a la tabla «Artículos vendidos en agosto de 2016» al comienzo de esta sección, verás que la celda «Ropa» se encuentra encima de las celdas «Pantalones», «Faldas» y «Vestidos» Todas estas celdas deben estar marcadas como encabezados (<code>&lt;th&gt;</code>), pero «Ropa» es un encabezado que está por encima y define los otros tres subencabezados. Por lo tanto, «Ropa» debería incluir un atributo <code>scope="colgroup"</code>, mientras que los demás tendrían un atributo <code>scope="col"</code>.</p>
-
-<h3 class="attTitle" id="Los_atributos_de_id_y_encabezados">Los atributos de id y encabezados</h3>
-
-<p>Una alternativa al uso del atributo <code>scope</code> es usar los atributos {{htmlattrxref ("id")}} y {{htmlattrxref ("headers", "td")}} para crear asociaciones entre encabezados y celdas. La forma en que se usan es la siguiente:</p>
-
-<ol>
- <li>Añades un <code>id</code> único a cada elemento <code>&lt;th&gt;</code>.</li>
- <li>Añades un atributo <code>headers</code> a cada elemento <code>&lt;td&gt;</code>. Cada atributo <code>headers</code> debe contener una lista de los <code>id</code> de todos los elementos <code>&lt;th&gt;</code> que actúan como encabezado de esa celda, separados por espacios.</li>
-</ol>
-
-<p>Esto le da a tu tabla HTML una definición explícita de la posición de cada celda en la tabla definida por los encabezados de cada columna y fila de la que forma parte, como en una hoja de cálculo. Para que funcione bien, la tabla necesita tanto encabezados de columna como encabezados de fila.</p>
-
-<p>Volviendo a nuestro ejemplo de gastos, los dos fragmentos anteriores podrían reescribirse así:</p>
-
-<pre class="brush: html notranslate">&lt;thead&gt;
-  &lt;tr&gt;
-    &lt;th id="purchase"&gt;Compra&lt;/th&gt;
-    &lt;th id="location"&gt;Ubicación&lt;/th&gt;
-    &lt;th id="date"&gt;Fecha&lt;/th&gt;
-    &lt;th id="evaluation"&gt;Revisión&lt;/th&gt;
-    &lt;th id="cost"&gt;Coste (€)&lt;/th&gt;
-  &lt;/tr&gt;
-&lt;/thead&gt;
-&lt;tbody&gt;
-&lt;tr&gt;
-  &lt;th id="haircut"&gt;Corte de pelo&lt;/th&gt;
-  &lt;td headers="location haircut"&gt;Peluquería&lt;/td&gt;
-  &lt;td headers="date haircut"&gt;12/09&lt;/td&gt;
-  &lt;td headers="evaluation haircut"&gt;Gran idea&lt;/td&gt;
-  &lt;td headers="cost haircut"&gt;30&lt;/td&gt;
-&lt;/tr&gt;
-
-  ...
-
-&lt;/tbody&gt;</pre>
-
-<div class="note">
-<p><strong>Nota</strong>: Este método crea asociaciones muy precisas entre los encabezados y las celdas de datos, pero utiliza <strong>un montón</strong> más de código de marcado y no permite errores. El enfoque <code>scope</code> suele bastar para la mayoría de las tablas.</p>
-</div>
-
-<h3 id="Aprendizaje_activo_jugar_con_scope_y_headers">Aprendizaje activo: jugar con scope y headers</h3>
-
-<ol>
- <li>Para este ejercicio final, te proponemos que primero hagas copias locales de <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold.html">items-sold.html</a> y <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/minimal-table.css">minimal-table.css</a> en un directorio nuevo.</li>
- <li>Ahora intenta añadir los atributos <code>scope</code> adecuados para hacer que esta tabla sea más accesible.</li>
- <li>Por último, haz otra copia de los archivos originales, y esta vez añade accesibilidad a la tabla utilizando los atributos <code>id</code> y <code>headers</code>.</li>
-</ol>
-
-<div class="note">
-<p><strong>Nota</strong>: Puedes verificar tu trabajo con nuestros ejemplos terminados: consulta <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-scope.html">items-sold-scope.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/advanced/items-sold-scope.html">consúltalo en vivo</a>) y <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-headers.html">items-sold-headers.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/advanced/items-sold-headers.html">consúltalo en vivo</a>).</p>
-</div>
-
-<h2 id="Resumen">Resumen</h2>
-
-<p>Podrías aprender algo más sobre las tablas en HTML, pero en realidad te hemos proporcionado toda la información que necesitas saber en este momento. En este punto, es posible que desees ir y aprender sobre la aplicación de estilo a tablas HTML: consulta <a href="/es/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estilo a las tablas</a>.</p>
-
-<div>{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}</div>
-
-<div>
-<h2 id="En_este_módulo">En este módulo</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/HTML/Tables/Basics">Conceptos básicos de las tablas en HTML</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Tables/Advanced">Funciones avanzadas de las tablas HTML y accesibilidad</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Tables/Structuring_planet_data">Estructuración de datos planetarios </a></li>
-</ul>
-</div>
diff --git a/files/es/learn/html/tables/advanced/index.md b/files/es/learn/html/tables/advanced/index.md
new file mode 100644
index 00000000000000..dd6c5b55c0d56f
--- /dev/null
+++ b/files/es/learn/html/tables/advanced/index.md
@@ -0,0 +1,461 @@
+---
+title: Funciones avanzadas de las tablas HTML y accesibilidad
+slug: Learn/HTML/Tables/Advanced
+translation_of: Learn/HTML/Tables/Advanced
+original_slug: Learn/HTML/Tablas/Funciones_avanzadas_de_las_tablas_HTML_y_accesibilidad
+---
+{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}
+
+En el segundo artículo de este módulo, analizamos algunas características más avanzadas de las tablas HTML, como los subtítulos/resúmenes, la agrupación de filas en las secciones del encabezado, el cuerpo y el pie de página; y también analizamos la accesibilidad de las tablas para usuarios con discapacidad visual.
+
+<table>
+  <tbody>
+    <tr>
+      <th scope="row">Prerrequisitos:</th>
+      <td>
+        Conceptos básicos de HTML (ver
+        <a href="/es/docs/Learn/HTML/Introduccion_a_HTML"
+          >Introducción al HTML</a
+        >).
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Objetivo:</th>
+      <td>
+        Aprender las características más avanzadas de las tablas HTML y la
+        accesibilidad de las tablas.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## Añadir un subtítulo a tu tabla con \<caption>
+
+Puedes dar un título a tu tabla colocándolo dentro de un elemento {{htmlelement ("caption")}} y anidándolo dentro del elemento {{htmlelement ("table")}}. Debes ponerlo justo debajo de la etiqueta de apertura `<table>`.
+
+```html
+<table>
+  <caption>Dinosaurios en el período Jurásico</caption>
+
+  ...
+</table>
+```
+
+Como puedes deducir a partir del breve ejemplo anterior, el título debe contener una descripción del contenido de la tabla. Esto es útil para todos los lectores que deseen descubrir de un vistazo si la tabla les resulta útil mientras ojean la página, pero es útil especialmente para usuarios ciegos. En lugar de que un lector de pantalla lea el contenido de muchas celdas solo para averiguar de qué trata la tabla, el lector puede contar con el título para luego decidir si leer la tabla con mayor detalle.
+
+Los subtítulos se colocan directamente debajo de la etiqueta `<table>`.
+
+> **Nota:** El atributo {{htmlattrxref("summary","table")}} también se puede usar en el elemento `table` para proporcionar una descripción; los lectores de pantalla también lo leen. Sin embargo, recomendamos usar el elemento `caption`, porque {{htmlattrxref("summary","table")}} está {{glossary("obsoleto")}} conforme a la especificación HTML5 y porque los usuarios sin discapacidad visual no pueden leerlo (no aparece en la página).
+
+### Aprendizaje activo: Añadir un subtítulo
+
+Vamos a probarlo con un ejemplo del artículo anterior.
+
+1.  Abre el ejemplo del horario de clases de la profesora de idiomas del final de [conocimientos básicos de las tablas HTML](/es/docs/Learn/HTML/Tablas/Conceptos_b%C3%A1sicos_de_las_tablas_HTML#Aprendizaje_activo_colgroup_y_col), o haz una copia local de nuestro archivo [timetable-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html).
+2.  Añade un título adecuado a la tabla.
+3.  Guarda tu código, ábrelo en un navegador y observa qué aspecto presenta.
+
+> **Nota:** Puedes encontrar nuestra versión en GitHub: consulta [timetable-caption.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/timetable-caption.html) ([mirar en vivo](http://mdn.github.io/learning-area/html/tables/advanced/timetable-caption.html)).
+
+## Añadir estructura con \<thead>, \<tfoot> y \<tbody>
+
+A medida que la estructura de las tablas se vuelve más compleja, es útil darles una estructura más definida. Una forma clara de hacerlo es con {{htmlelement ("thead")}}, {{htmlelement ("tfoot")}} y {{htmlelement ("tbody")}}, que te permiten marcar un encabezado, un pie de página y una sección del cuerpo de la tabla.
+
+Estos elementos no mejoran las características de accesibilidad de la tabla para los usuarios de lectores de pantalla ni su aspecto visual en sí. Sin embargo, son muy útiles para la aplicación de estilo y la compaginación, porque actúan como soportes útiles para añadir CSS a tu tabla. Como ejemplos interesantes, en el caso de una tabla extensa, puedes hacer que el encabezado y el pie de página se repitan en cada página impresa, y también que el cuerpo de la tabla se muestre en una sola página y desplazarte por los contenidos arriba y abajo con la barra de desplazamiento.
+
+Para utilizarlos:
+
+- El elemento `<thead>` debe delimitar el encabezado de la tabla; esta suele ser la primera fila, que contiene los encabezados de las columnas, pero no siempre es así. Si utilizas los elementos {{htmlelement ("col")}}/{{htmlelement ("colgroup")}}, el encabezado de la tabla debe estar justo debajo.
+- El elemento `<tfoot>` delimita la parte de la tabla correspondiente al pie de página; esta podría ser una fila final con elementos en las filas anteriores. Puedes incluir el pie de página de la tabla justo en la parte inferior de la tabla, donde esperarías que esté, o justo debajo del encabezado (y el navegador lo mostrará aun así en la parte inferior de la tabla).
+- El elemento `<tbody>` delimita las otras partes del contenido de la tabla que no están en el encabezado o en el pie de página de la tabla. Aparecerá debajo del encabezado de la tabla o, a veces, en el pie de página, según cómo hayas decidido estructurarlo.
+
+> **Nota:** `<tbody>` se incluye siempre en todas las tablas de forma implícita si no lo especificas en tu código. Para comprobarlo, abre uno de tus ejemplos anteriores que no incluya `<tbody>` y mira el código HTML en las [herramientas de desarrollo de tu navegador](/es/docs/Learn/Common_questions/What_are_browser_developer_tools); verás que el navegador ha añadido esta etiqueta. Quizás te preguntes por qué deberías molestarte en incluirlo. Debes hacerlo para tener más control sobre la estructura y el estilo de la tabla.
+
+### Aprendizaje activo: Añadir estructura a la tabla
+
+Pongamos en acción estos elementos nuevos.
+
+1.  En primer lugar, haz una copia local de [spending-record.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record.html) y [minimal-table.css](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/minimal-table.css) en una carpeta nueva de tu ordenador.
+2.  Intenta abrirlo en un navegador: observarás que se ve bien, pero podría mejorarse. La fila «SUM», que contiene una suma de las cantidades gastadas, parece estar en el lugar equivocado, y faltan algunos detalles del código.
+3.  Coloca la fila de encabezados dentro de un elemento `<thead>`, la fila «SUM» dentro de un elemento `<tfoot>`, y el resto del contenido dentro de un elemento `<tbody>`.
+4.  Guarda y actualiza, y observa que añadir el elemento `<tfoot>` ha provocado que la fila «SUM» pase al final de la tabla.
+5.  Luego, añade un atributo {{htmlattrxref ("colspan", "td")}} para que la celda «SUM» abarque las primeras cuatro columnas, de modo que el número aparezca en la parte inferior de la columna «Costes».
+6.  Vamos a añadir un estilo adicional sencillo a la tabla para que veas cuán útiles son estos elementos para aplicar CSS. Dentro del encabezado del documento HTML hay un elemento {{htmlelement ("style")}} vacío. Añade a este elemento las líneas de código CSS siguientes:
+
+    ```css
+    tbody {
+      font-size: 95%;
+      font-style: italic;
+    }
+
+    tfoot {
+      font-weight: bold;
+    }
+    ```
+
+7.  Guarda, actualiza, y échale un vistazo al resultado. Si los elementos `<tbody>` y `<tfoot>` no estuvieran en su lugar, tendrías que escribir selectores/reglas mucho más complicados para obtener la misma aplicación de estilo.
+
+> **Nota:** No esperamos que comprendas completamente el CSS en este momento. Aprenderás más sobre el tema cuando llegues a nuestros módulos CSS ([Introducción al CSS](/es/docs/Learn/CSS/First_steps) es un buen lugar para comenzar; también tenemos un artículo específico sobre [Aplicar estilo a las tablas](/es/docs/Learn/CSS/Building_blocks/Styling_tables)).
+
+Tu tabla final debería tener un aspecto similar al siguiente:
+
+```html hidden
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title> Mi historial de gastos </title>
+    <style>
+
+        html {
+          font-family: sans-serif;
+        }
+
+          table {
+          border-collapse: collapse;
+          border: 4px solid rgb(200,200,200);
+          letter-spacing: 1px;
+          font-size: 0.8rem;
+        }
+
+        td, th {
+          border: 2px solid rgb(190,190,190);
+          padding: 10px 20px;
+        }
+
+        th {
+          background-color: rgb(235,235,235);
+        }
+
+        td {
+          text-align: center;
+        }
+
+        tr:nth-child(even) td {
+          background-color: rgb(250,250,250);
+        }
+
+        tr:nth-child(odd) td {
+          background-color: rgb(245,245,245);
+        }
+
+        caption {
+          padding: 10px;
+        }
+
+        tbody {
+          font-size: 90%;
+          font-style: italic;
+        }
+
+        tfoot {
+          font-weight: bold;
+        }
+    </style>
+
+</head>
+<body>
+<table>
+
+<caption> Cómo elegí gastar mi dinero </caption>
+<thead>
+<tr>
+<th> Compra </th>
+
+<th> Ubicación </th>
+<th> Fecha </th>
+<th> Revisión </th>
+
+<th> Coste (€) </th>
+</tr>
+</thead>
+<tfoot>
+<tr>
+<td colspan="4">SUM</td>
+<td>118</td>
+</tr>
+</tfoot>
+<tbody>
+<tr>
+<td> Corte de pelo </td>
+
+<td> Peluquería </td>
+<td>12/09</td>
+
+<td> Gran idea </td>
+<td>30</td>
+</tr>
+<tr>
+
+<td> Lasaña </td>
+
+<td> Restaurante </td>
+<td>12/09</td>
+<td> Arrepentimiento </td>
+<td>18</td>
+</tr>
+<tr>
+
+<td> Zapatos </td>
+<td> Zapatería </td>
+<td>13/09</td>
+
+<td> Mucho arrepentimiento </td>
+<td>65</td>
+</tr>
+<tr>
+<td> Pasta de dientes </td>
+<td> Supermercado </td>
+<td>13/09</td>
+
+<td> Bien </td>
+<td>5</td>
+</tr>
+</tbody>
+</table>
+
+</body>
+</html>
+```
+
+{{ EmbedLiveSample('Hidden_example', '100%', 300, "", "", "hide-codepen-jsfiddle") }}
+
+> **Nota:** También puedes encontrarlo en GitHub como [spending-record-finished.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record-finished.html) (o consultarlo también [en vivo](http://mdn.github.io/learning-area/html/tables/advanced/spending-record-finished.html)).
+
+## Anidar tablas
+
+Es posible anidar una tabla dentro de otra, siempre que incluyas la estructura completa, incluido el elemento `<table>`. Por lo general, esto no se recomienda, porque se obtiene un marcado más confuso y menos accesible para los usuarios que usan lectores de pantalla, y además, en muchos casos sería posible sencillamente insertar celdas/filas/columnas adicionales en la tabla. Sin embargo, a veces es necesario, por ejemplo, si deseas importar contenido de forma sencilla desde otras fuentes.
+
+El marcado siguiente muestra una tabla anidada simple:
+
+```html
+<table id="tabla1">
+  <tr>
+    <th>título1</th>
+    <th>título2</th>
+    <th>título3</th>
+  </tr>
+  <tr>
+    <td id="nested">
+      <table id="tabla2">
+        <tr>
+          <td>celda1</td>
+          <td>celda2</td>
+          <td>celda3</td>
+        </tr>
+      </table>
+    </td>
+    <td>celda2</td>
+    <td>celda3</td>
+  </tr>
+  <tr>
+    <td>celda4</td>
+    <td>celda5</td>
+    <td>celda6</td>
+  </tr>
+</table>
+```
+
+La salida se verá así:
+
+<table id="table1">
+  <tbody>
+    <tr>
+      <th>título1</th>
+      <th>título2</th>
+      <th>título3</th>
+    </tr>
+    <tr>
+      <td id="nested">
+        <table id="table2">
+          <tbody>
+            <tr>
+              <td>celda1</td>
+              <td>celda2</td>
+              <td>celda3</td>
+            </tr>
+          </tbody>
+        </table>
+      </td>
+      <td>celda2</td>
+      <td>celda3</td>
+    </tr>
+    <tr>
+      <td>celda4</td>
+      <td>celda5</td>
+      <td>celda6</td>
+    </tr>
+  </tbody>
+</table>
+
+## Tablas para usuarios con discapacidad visual
+
+Repasemos brevemente cómo usamos las tablas de datos. Una tabla puede ser una herramienta útil porque nos proporciona un acceso rápido a unos datos y nos permite buscar entre valores diferentes. Por ejemplo, echa un vistazo a la tabla siguiente para saber cuántos anillos se vendieron en Gante en agosto pasado. Para comprender la información que contiene la tabla, establecemos asociaciones visuales entre los datos de la tabla y sus encabezados de columna y/o fila.
+
+<table>
+  <caption>
+    Artículos vendidos en agosto de 2016
+  </caption>
+  <tbody>
+    <tr>
+      <td></td>
+      <td></td>
+      <th colspan="3" scope="colgroup">Ropa</th>
+      <th colspan="2" scope="colgroup">Accesorios</th>
+    </tr>
+    <tr>
+      <td></td>
+      <td></td>
+      <th scope="col">Pantalones</th>
+      <th scope="col">Faldas</th>
+      <th scope="col">Vestidos</th>
+      <th scope="col">Pulseras</th>
+      <th scope="col">Anillos</th>
+    </tr>
+    <tr>
+      <th rowspan="3" scope="rowgroup">Bélgica</th>
+      <th scope="row">Amberes</th>
+      <td>56</td>
+      <td>22</td>
+      <td>43</td>
+      <td>72</td>
+      <td>23</td>
+    </tr>
+    <tr>
+      <th scope="row">Gante</th>
+      <td>46</td>
+      <td>18</td>
+      <td>50</td>
+      <td>61</td>
+      <td>15</td>
+    </tr>
+    <tr>
+      <th scope="row">Bruselas</th>
+      <td>51</td>
+      <td>27</td>
+      <td>38</td>
+      <td>69</td>
+      <td>28</td>
+    </tr>
+    <tr>
+      <th rowspan="2" scope="rowgroup">Los países bajos</th>
+      <th scope="row">Ámsterdam</th>
+      <td>89</td>
+      <td>34</td>
+      <td>69</td>
+      <td>85</td>
+      <td>38</td>
+    </tr>
+    <tr>
+      <th scope="row">Utrecht</th>
+      <td>80</td>
+      <td>12</td>
+      <td>43</td>
+      <td>36</td>
+      <td>19</td>
+    </tr>
+  </tbody>
+</table>
+
+Pero, ¿y si no puedes hacer esas asociaciones visuales? ¿Cómo podrías leer una tabla como la anterior? Las personas con discapacidad visual a menudo usan un lector de pantalla que les lee la información de las páginas web. Esto no resulta un problema cuando lees un texto sin formato, pero interpretar una tabla puede ser un gran desafío para una persona ciega. Sin embargo, con el marcado adecuado podemos reemplazar las asociaciones visuales por otras asociaciones de tipo programático.
+
+> **Nota:** Hay en torno a 253 millones de personas con discapacidad visual según los[ datos de la OMS de 2017](https://www.who.int/es/news-room/fact-sheets/detail/blindness-and-visual-impairment "datos de la OMS sobre la discapacidad visual").
+
+Esta sección del artículo proporciona técnicas adicionales para conferir a las tablas la mayor accesibilidad posible.
+
+### Usar encabezados de columna y fila
+
+Los lectores de pantalla identificarán todos los encabezados y los usarán para hacer asociaciones programáticas entre esos encabezados y las celdas con las que se relacionan. La combinación de encabezados por columna y fila identificará e interpretará los datos de cada celda para que los usuarios que usan lectores de pantalla puedan interpretar la tabla de manera similar a como lo hace un usuario sin discapacidad visual.
+
+Ya expusimos los encabezados en nuestro artículo anterior; consulta [Añadir encabezados con elementos \<th>](/es/docs/Learn/HTML/Tablas/Conceptos_b%C3%A1sicos_de_las_tablas_HTML#A%C3%B1adir_encabezados_con_elementos_%3Cth%3E).
+
+### El atributo scope
+
+Un nuevo tema para este artículo es el atributo {{htmlattrxref ("scope", "th")}}, que se puede añadir al elemento `<th>` para indicar a los lectores de pantalla exactamente para qué celdas es el encabezado. Volviendo a nuestro ejemplo anterior de registro de gastos, podrías definir los encabezados de columna inequívocamente como encabezados de columna de este modo:
+
+```html
+<thead>
+  <tr>
+    <th scope="col">Compra</th>
+    <th scope="col">Ubicación</th>
+    <th scope="col">Fecha</th>
+    <th scope="col">Revisión</th>
+    <th scope="col">Coste (€)</th>
+  </tr>
+</thead>
+```
+
+Y también cada fila podría tener un encabezado definido de esta manera (si añadimos encabezados de fila y encabezados de columna):
+
+```html
+<tr>
+  <th scope="row">Corte de pelo</th>
+
+<td>Peluquería</td>
+  <td>12/09</td>
+
+<td>Gran idea</td>
+  <td>30</td>
+</tr>
+```
+
+Los lectores de pantalla reconocerán el marcado estructurado de esta manera y permitirán a tus usuarios, por ejemplo, leer toda la columna o fila a la vez.
+
+El atributo `scope` tiene dos valores posibles más: `colgroup` y `rowgroup`. Se utilizan para encabezados que se encuentran sobre la parte superior de varias columnas o filas. Si vuelves a echar un vistazo a la tabla «Artículos vendidos en agosto de 2016» al comienzo de esta sección, verás que la celda «Ropa» se encuentra encima de las celdas «Pantalones», «Faldas» y «Vestidos» Todas estas celdas deben estar marcadas como encabezados (`<th>`), pero «Ropa» es un encabezado que está por encima y define los otros tres subencabezados. Por lo tanto, «Ropa» debería incluir un atributo `scope="colgroup"`, mientras que los demás tendrían un atributo `scope="col"`.
+
+### Los atributos de id y encabezados
+
+Una alternativa al uso del atributo `scope` es usar los atributos {{htmlattrxref ("id")}} y {{htmlattrxref ("headers", "td")}} para crear asociaciones entre encabezados y celdas. La forma en que se usan es la siguiente:
+
+1.  Añades un `id` único a cada elemento `<th>`.
+2.  Añades un atributo `headers` a cada elemento `<td>`. Cada atributo `headers` debe contener una lista de los `id` de todos los elementos `<th>` que actúan como encabezado de esa celda, separados por espacios.
+
+Esto le da a tu tabla HTML una definición explícita de la posición de cada celda en la tabla definida por los encabezados de cada columna y fila de la que forma parte, como en una hoja de cálculo. Para que funcione bien, la tabla necesita tanto encabezados de columna como encabezados de fila.
+
+Volviendo a nuestro ejemplo de gastos, los dos fragmentos anteriores podrían reescribirse así:
+
+```html
+<thead>
+  <tr>
+    <th id="purchase">Compra</th>
+    <th id="location">Ubicación</th>
+    <th id="date">Fecha</th>
+    <th id="evaluation">Revisión</th>
+    <th id="cost">Coste (€)</th>
+  </tr>
+</thead>
+<tbody>
+<tr>
+  <th id="haircut">Corte de pelo</th>
+  <td headers="location haircut">Peluquería</td>
+  <td headers="date haircut">12/09</td>
+  <td headers="evaluation haircut">Gran idea</td>
+  <td headers="cost haircut">30</td>
+</tr>
+
+  ...
+
+</tbody>
+```
+
+> **Nota:** Este método crea asociaciones muy precisas entre los encabezados y las celdas de datos, pero utiliza **un montón** más de código de marcado y no permite errores. El enfoque `scope` suele bastar para la mayoría de las tablas.
+
+### Aprendizaje activo: jugar con scope y headers
+
+1.  Para este ejercicio final, te proponemos que primero hagas copias locales de [items-sold.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold.html) y [minimal-table.css](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/minimal-table.css) en un directorio nuevo.
+2.  Ahora intenta añadir los atributos `scope` adecuados para hacer que esta tabla sea más accesible.
+3.  Por último, haz otra copia de los archivos originales, y esta vez añade accesibilidad a la tabla utilizando los atributos `id` y `headers`.
+
+> **Nota:** Puedes verificar tu trabajo con nuestros ejemplos terminados: consulta [items-sold-scope.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-scope.html) ([consúltalo en vivo](http://mdn.github.io/learning-area/html/tables/advanced/items-sold-scope.html)) y [items-sold-headers.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-headers.html) ([consúltalo en vivo](http://mdn.github.io/learning-area/html/tables/advanced/items-sold-headers.html)).
+
+## Resumen
+
+Podrías aprender algo más sobre las tablas en HTML, pero en realidad te hemos proporcionado toda la información que necesitas saber en este momento. En este punto, es posible que desees ir y aprender sobre la aplicación de estilo a tablas HTML: consulta [Aplicar estilo a las tablas](/es/docs/Learn/CSS/Building_blocks/Styling_tables).
+
+{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}
+
+## En este módulo
+
+- [Conceptos básicos de las tablas en HTML](/es/docs/Learn/HTML/Tables/Basics)
+- [Funciones avanzadas de las tablas HTML y accesibilidad](/es/docs/Learn/HTML/Tables/Advanced)
+- [Estructuración de datos planetarios](/es/docs/Learn/HTML/Tables/Structuring_planet_data)
diff --git a/files/es/learn/html/tables/basics/index.html b/files/es/learn/html/tables/basics/index.html
deleted file mode 100644
index c7af02ac174068..00000000000000
--- a/files/es/learn/html/tables/basics/index.html
+++ /dev/null
@@ -1,564 +0,0 @@
----
-title: Conceptos básicos de las tablas HTML
-slug: Learn/HTML/Tables/Basics
-translation_of: Learn/HTML/Tables/Basics
-original_slug: Learn/HTML/Tablas/Conceptos_básicos_de_las_tablas_HTML
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div>
-
-<p class="summary">Este artículo te ayudará a comenzar con las tablas HTML. Vamos a exponer conceptos básicos como filas y celdas, encabezados, celdas que abarcan múltiples columnas y filas, y la forma de agrupar todas las celdas de una columna para aplicarles estilo.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prerrequisitos:</th>
-   <td>Conceptos básicos de HTML (ver <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>).</td>
-  </tr>
-  <tr>
-   <th scope="row">Objetivo:</th>
-   <td>Adquirir conocimientos básicos de las tablas HTML.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="¿Qué_es_una_tabla">¿Qué es una tabla?</h2>
-
-<p>Una tabla es un conjunto estructurado de datos distribuidos en filas y columnas (<strong>datos tabulados</strong>). Una tabla permite buscar con rapidez y facilidad valores entre diferentes tipos de datos que indiquen algún tipo de conexión. Por ejemplo, una persona y su edad, o un día de la semana o el horario de una piscina municipal.</p>
-
-<p><img alt="Una tabla de datos de ejemplo que muestra los nombres y las edades de algunas personas: Chris 38, Dennis 45, Sarah 29, Karen 47." src="https://mdn.mozillademos.org/files/14583/numbers-table.png" style="display: block; height: 156px; margin: 0px auto; width: 350px;"></p>
-
-<p><img alt="Una tabla de datos que muestra unos horarios de clases natación" src="https://mdn.mozillademos.org/files/14587/swimming-timetable.png" style="display: block; height: 301px; margin: 0px auto; width: 794px;"></p>
-
-<p>Las tablas se utilizan con mucha frecuencia en la sociedad desde hace años, como lo demuestra este documento censal de los EUA de 1800:</p>
-
-<p><img alt="Un pergamino muy antiguo; cuesta un poco leer los datos, pero muestra con claridad que las tablas de datos ya se utilizaban en 1800." src="https://mdn.mozillademos.org/files/14585/1800-census.jpg" style="display: block; height: 505px; margin: 0px auto; width: 800px;"></p>
-
-<p>Por lo tanto, no es de extrañar que los creadores de HTML proporcionen un medio con el que estructurar y presentar datos en tablas en la web.</p>
-
-<h3 id="¿Cómo_funciona_una_tabla">¿Cómo funciona una tabla?</h3>
-
-<p>El aspecto básico de una tabla es que es un elemento rígido. Es fácil interpretar la información haciendo asociaciones visuales entre los encabezados de las filas y las columnas. Por ejemplo, observa la tabla siguiente y busca un gigante de gas joviano con 62 lunas. Puedes encontrar la respuesta asociando los encabezados de la fila y la columna correspondientes.</p>
-
-<table>
- <caption>Datos sobre los planetas de nuestro sistema solar (datos planetarios tomados de la hoja técnica sobre datos planetarios de la NASA (<a href="http://nssdc.gsfc.nasa.gov/planetary/factsheet/">Nasa's Planetary Fact Sheet - Metric</a>).</caption>
- <thead>
-  <tr>
-   <td colspan="2"></td>
-   <th scope="col">Nombre</th>
-   <th scope="col">Masa (10<sup>24</sup> kg)</th>
-   <th scope="col">Diámetro (km)</th>
-   <th scope="col">Densidad (kg/m<sup>3</sup>)</th>
-   <th scope="col">Gravedad (m/s<sup>2</sup>)</th>
-   <th scope="col">Duración del día (horas)</th>
-   <th scope="col">Distancia del Sol (10<sup>6</sup>km)</th>
-   <th scope="col">Temperatura media (°C)</th>
-   <th scope="col">Número de lunas</th>
-   <th scope="col">Observaciones</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <th colspan="2" rowspan="4" scope="rowgroup">Planetas terrestres</th>
-   <th scope="row">Mercurio</th>
-   <td>0,330</td>
-   <td>4.879</td>
-   <td>5.427</td>
-   <td>3,7</td>
-   <td>4.222,6</td>
-   <td>57,9</td>
-   <td>167</td>
-   <td>0</td>
-   <td>El más cercano al Sol</td>
-  </tr>
-  <tr>
-   <th scope="row">Venus</th>
-   <td>4,87</td>
-   <td>12.104</td>
-   <td>5.243</td>
-   <td>8,9</td>
-   <td>2.802,0</td>
-   <td>108,2</td>
-   <td>464</td>
-   <td>0</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row">La Tierra</th>
-   <td>5,97</td>
-   <td>12.756</td>
-   <td>5.514</td>
-   <td>9,8</td>
-   <td>24,0</td>
-   <td>149,6</td>
-   <td>15</td>
-   <td>1</td>
-   <td>Nuestro planeta</td>
-  </tr>
-  <tr>
-   <th scope="row">Marte</th>
-   <td>0,642</td>
-   <td>6.792</td>
-   <td>3.933</td>
-   <td>3,7</td>
-   <td>24,7</td>
-   <td>227,9</td>
-   <td>-65</td>
-   <td>2</td>
-   <td>El planeta rojo</td>
-  </tr>
-  <tr>
-   <th rowspan="4" scope="rowgroup">Planetas jovianos</th>
-   <th rowspan="2" scope="rowgroup">Los gigantes de gas</th>
-   <th scope="row">Júpiter</th>
-   <td>1.898</td>
-   <td>142.984</td>
-   <td>1.326</td>
-   <td>23,1</td>
-   <td>9,9</td>
-   <td>778,6</td>
-   <td>-110</td>
-   <td>67</td>
-   <td>El planeta más grande</td>
-  </tr>
-  <tr>
-   <th scope="row">Saturno</th>
-   <td>568</td>
-   <td>120.536</td>
-   <td>687</td>
-   <td>9,0</td>
-   <td>10,7</td>
-   <td>1.433,5</td>
-   <td>-140</td>
-   <td>62</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th rowspan="2" scope="rowgroup">Los gigantes de hielo</th>
-   <th scope="row">Urano</th>
-   <td>86,8</td>
-   <td>51.118</td>
-   <td>1.271</td>
-   <td>8,7</td>
-   <td>17,2</td>
-   <td>2.872,5</td>
-   <td>-195</td>
-   <td>27</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row">Neptuno</th>
-   <td>102</td>
-   <td>49.528</td>
-   <td>1.638</td>
-   <td>11,0</td>
-   <td>16,1</td>
-   <td>4.495,1</td>
-   <td>-200</td>
-   <td>14</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th colspan="2" scope="rowgroup">Planetas enanos</th>
-   <th scope="row">Plutón</th>
-   <td>0,0146</td>
-   <td>2.370</td>
-   <td>2.095</td>
-   <td>0,7</td>
-   <td>153,3</td>
-   <td>5.906,4</td>
-   <td>-225</td>
-   <td>5</td>
-   <td>Desclasificado como planeta en 2006, pero aún es una <a href="http://www.usatoday.com/story/tech/2014/10/02/pluto-planet-solar-system/16578959/">cuestión polémica</a>.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>Cuando se hace correctamente, incluso las personas ciegas pueden interpretar los datos de una tabla HTML. Una tabla HTML bien hecha debe mejorar la experiencia de los usuarios videntes e invidentes por igual.</p>
-
-<h3 id="Dar_estilo_a_las_tablas">Dar estilo a las tablas</h3>
-
-<p>También puedes <a href="https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html">echar un vistazo al ejemplo vivo</a> en GitHub. Observarás que la tabla que encontrarás allí tiene un aspecto más legible; esto se debe a que la tabla que ves en esta página tiene un estilo mínimo, mientras que en la de la versión de GitHub se ha aplicado un CSS más significativo.</p>
-
-<p>No te hagas ilusiones; para que las tablas sean efectivas en la web, debes proporcionar cierta información de estilo con <a href="/es/docs/Learn/CSS">CSS</a>, así como una buena estructura sólida con HTML. En este módulo nos centramos en la parte HTML; para averiguar sobre la parte del CSS debes visitar nuestro artículo <a href="/es/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estilo a las tablas</a>.</p>
-
-<p>En este módulo no nos vamos a centrar en el CSS, sino que te vamos a proporcionar una hoja de estilo de CSS que dará a tus tablas algo más de legibilidad de la que se obtiene por defecto si no se proporciona ningún estilo. Puedes encontrar la hoja de estilo <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">aquí</a>, así como también una <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">plantilla HTML</a> para aplicar la hoja de estilo (te darán un buen punto de partida para experimentar con las tablas HTML).</p>
-
-<h3 id="¿Cuándo_no_debes_usar_tablas_HTML">¿Cuándo no debes usar tablas HTML?</h3>
-
-<p>Las tablas HTML están pensadas para utilizarse con datos tabulados. Por desgracia, mucha gente utiliza las tablas HTML para hacer compaginaciones de páginas web. Por ejemplo, una fila para contener la cabecera, una fila para contener las columnas de contenido, una fila para contener el pie de página, etc. Puede encontrar más detalles y un ejemplo en <a href="/es/docs/Learn/Accessibility/HTML#Page_layouts">Diseños de página</a> en nuestro <a href="/es/docs/Learn/Accessibility">Módulo de aprendizaje de accesibilidad</a>. Se solía hacer este uso de las tablas porque la compatibilidad CSS entre navegadores solía ser terrible. Los diseños de tablas son mucho menos comunes hoy en día, pero aún se pueden ver en algunos rincones de la web.</p>
-
-<p>En resumen, es una mala idea usar tablas para el diseño en lugar de las <a href="/es/docs/Learn/CSS/CSS_layout">técnicas de diseño CSS</a>. Las razones principales son las siguientes:</p>
-
-<ol>
- <li><strong>Las tablas de diseño reducen la accesibilidad para los usuarios con discapacidad visual</strong>: Los <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">lectores de pantalla</a> que utilizan las personas con visibilidad reducida interpretan las etiquetas de una página HTML y leen su contenido para el usuario. Puesto que las tablas no son la herramienta adecuada para el diseño y el marcado es más complejo que con las técnicas de diseño CSS, la salida de los lectores de pantalla será confusa para estos usuarios.</li>
- <li><strong>Las tablas generan estructuras incorrectas</strong>: Como ya se mencionó, los diseños de tabla suelen involucrar estructuras de marcado más complejas que las técnicas de diseño. Esto puede dificultar la escritura, el mantenimiento y la depuración del código.</li>
- <li><strong>Las tablas no tienen respuesta adaptativa automática</strong>: Cuando usas contenedores de diseño adecuados (tales como {{HTMLElement ("header")}}, {{HTMLElement ("section")}}, {{HTMLElement ("article")}} o {{HTMLElement ("div")}}), su ancho predeterminado es el 100% de su elemento padre. En cambio, las tablas se dimensionan de forma predeterminada según su contenido, por lo que se necesitan medidas adicionales para que el diseño de la tabla funcione de manera efectiva en todos los dispositivos.</li>
-</ol>
-
-<h2 id="Aprendizaje_activo_Crea_tu_primera_tabla">Aprendizaje activo: Crea tu primera tabla</h2>
-
-<p>Ya hemos hablado bastante sobre la teoría de las tablas, así que veamos un ejemplo práctico y construyamos una tabla simple.</p>
-
-<ol>
- <li>En primer lugar, haz una copia local de <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">blank-template.html</a> y <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> en un directorio nuevo de tu ordenador.</li>
- <li>El contenido de cada tabla está delimitado entre estas dos etiquetas: <strong><code><a href="/en-US/docs/Web/HTML/Element/table">&lt;table&gt;&lt;/table&gt;</a></code></strong>. Añádelas al cuerpo de tu código HTML.</li>
- <li>El contenedor más pequeño dentro de una tabla es una celda, que se crea con un elemento <strong><code><a href="/en-US/docs/Web/HTML/Element/td">&lt;td&gt;</a></code></strong> ('td' significa 'table data', <em>datos de tabla</em>). Añade lo siguiente dentro de tus etiquetas de tabla:
-  <pre class="brush: html notranslate">&lt;td&gt;Hola, soy tu primera celda.&lt;/td&gt;</pre>
- </li>
- <li>Si quieres una fila de cuatro celdas, tienes que copiar estas etiquetas tres veces. Actualiza el contenido de la tabla para que se vea así:
-  <pre class="brush: html notranslate">&lt;td&gt;Hola, soy tu primera celda.&lt;/td&gt;
-&lt;td&gt;Soy tu segunda celda.&lt;/td&gt;
-&lt;td&gt;Soy tu tercera celda.&lt;/td&gt;
-&lt;td&gt;Soy tu cuarta celda.&lt;/td&gt;</pre>
- </li>
-</ol>
-
-<p>Como verás, las celdas no se colocan una debajo de la otra, sino que se alinean automáticamente entre sí en la misma fila. Cada elemento &lt;td&gt; crea una sola celda, y juntas forman la primera fila. Cada celda que agregamos hace crecer la fila.</p>
-
-<p>Para detener el crecimiento de esta fila y comenzar a colocar las celdas posteriores en una segunda fila, necesitamos usar el elemento <strong><code><a href="/en-US/docs/Web/HTML/Element/tr">&lt;tr&gt;</a></code></strong> ('tr' significa 'table raw', <em>fila de tabla</em>). Vamos a verlo en detalle.</p>
-
-<ol>
- <li>Coloca las cuatro celdas que has creado dentro de las etiquetas <code>&lt;tr&gt;</code>, de esta forma:
-
-  <pre class="brush: html notranslate">&lt;tr&gt;
-  &lt;td&gt;Hola, soy tu primera celda.&lt;/td&gt;
-  &lt;td&gt;Soy tu segunda celda.&lt;/td&gt;
-  &lt;td&gt;Soy tu tercera celda.&lt;/td&gt;
-  &lt;td&gt;Soy tu cuarta celda.&lt;/td&gt;
-&lt;/tr&gt;</pre>
- </li>
- <li>Ahora que has hecho una fila, intenta hacer una o dos más: cada fila debe estar delimitada por un elemento <code>&lt;tr&gt;</code> adicional, con cada celda contenida en un <code>&lt;td&gt;</code>.</li>
-</ol>
-
-<p>Esto debería dar como resultado una tabla similar a la siguiente:</p>
-
-<table>
- <tbody>
-  <tr>
-   <td>Hola, soy tu primera celda.</td>
-   <td>Soy tu segunda celda.</td>
-   <td>Soy tu tercera celda.</td>
-   <td>Soy tu cuarta celda.</td>
-  </tr>
-  <tr>
-   <td>Segunda fila, primera celda.</td>
-   <td>Celda 2.</td>
-   <td>Celda 3.</td>
-   <td>Celda 4.</td>
-  </tr>
- </tbody>
-</table>
-
-<div class="note">
-<p><strong>Nota</strong>: También puedes encontrar esto en GitHub como <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/simple-table.html">simple-table.html</a> (consúltalo <a href="http://mdn.github.io/learning-area/html/tables/basic/simple-table.html">en vivo</a>).</p>
-</div>
-
-<h2 id="Añadir_encabezados_con_elementos_&lt;th>">Añadir encabezados con elementos &lt;th&gt;</h2>
-
-<p>Ahora nos vamos a centrar en los encabezados de tabla: celdas especiales que van al comienzo de una fila o columna y definen el tipo de datos que contiene esa fila o columna (por ejemplo, observa las celdas «Propietario» y «Edad» en el primer ejemplo que se muestra en este artículo). Para ilustrar por qué son útiles, echa un vistazo al ejemplo de tabla siguiente. En primer lugar, el código fuente:</p>
-
-<pre class="brush: html notranslate">&lt;table&gt;
-  &lt;tr&gt;
-    &lt;td&gt;&amp;nbsp;&lt;/td&gt;
-    &lt;td&gt;Knocky&lt;/td&gt;
-    &lt;td&gt;Flor&lt;/td&gt;
-    &lt;td&gt;Ella&lt;/td&gt;
-    &lt;td&gt;Juan&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Raza&lt;/td&gt;
-    &lt;td&gt;Jack Russell&lt;/td&gt;
-    &lt;td&gt;Caniche&lt;/td&gt;
-    &lt;td&gt;Perro callejero&lt;/td&gt;
-    &lt;td&gt;Cocker Spaniel&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Edad&lt;/td&gt;
-    &lt;td&gt;16&lt;/td&gt;
-    &lt;td&gt;9&lt;/td&gt;
-    &lt;td&gt;10&lt;/td&gt;
-    &lt;td&gt;5&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Propietario&lt;/td&gt;
-    &lt;td&gt;Suegra&lt;/td&gt;
-    &lt;td&gt;Yo&lt;/td&gt;
-    &lt;td&gt;Yo&lt;/td&gt;
-    &lt;td&gt;Cuñada&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Hábitos alimentarios&lt;/td&gt;
-    &lt;td&gt;Come las sobras de todos&lt;/td&gt;
-
-&lt;td&gt;Mordisquea la comida&lt;/td&gt;
-    &lt;td&gt;Come en abundancia&lt;/td&gt;
-
-&lt;td&gt;Come hasta que revienta&lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/table&gt;</pre>
-
-<p>Ahora observa la tabla representada:</p>
-
-<table>
- <tbody>
-  <tr>
-   <td></td>
-   <td>Knocky</td>
-   <td>Flor</td>
-   <td>Ella</td>
-   <td>Juan</td>
-  </tr>
-  <tr>
-   <td>Raza</td>
-   <td>Jack Russell</td>
-   <td>Caniche</td>
-   <td>Perro callejero</td>
-   <td>Cocker Spaniel</td>
-  </tr>
-  <tr>
-   <td>Edad</td>
-   <td>16</td>
-   <td>9</td>
-   <td>10</td>
-   <td>5</td>
-  </tr>
-  <tr>
-   <td>Propietario</td>
-   <td>Suegra</td>
-   <td>Yo</td>
-   <td>Yo</td>
-   <td>Cuñada</td>
-  </tr>
-  <tr>
-   <td>Hábitos alimentarios</td>
-   <td>Come las sobras de todos</td>
-   <td>Mordisquea la comida</td>
-   <td>Come en abundancia</td>
-   <td>Come hasta que revienta</td>
-  </tr>
- </tbody>
-</table>
-
-<p>El problema aquí es que, si bien puedes distinguir lo que sucede, no es tan fácil cruzar datos de referencia. Sería mucho mejor si los encabezados de las columnas y las filas se destacasen de alguna manera.</p>
-
-<h3 id="Aprendizaje_activo_encabezados_de_tabla">Aprendizaje activo: encabezados de tabla</h3>
-
-<p>Intentemos mejorar esta tabla.</p>
-
-<ol>
- <li>Primero, haz una copia local de nuestros archivos <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table.html">dogs-table.html</a> y <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> en un directorio nuevo de tu ordenador. El HTML contiene el mismo ejemplo sobre perros que viste arriba.</li>
- <li>Para reconocer los encabezados de la tabla como encabezados, tanto visual como semánticamente, puedes usar el elemento <strong><code><a href="/en-US/docs/Web/HTML/Element/th">&lt;th&gt;</a></code></strong> ('th' significa 'table header', <em>encabezado de tabla</em>). Funciona exactamente igual que un <code>&lt;td&gt;</code>, excepto que denota un encabezado, no una celda normal. Entra en el código HTML, y cambiar todos los elementos <code>&lt;td&gt;</code> que delimitan los encabezados de tabla por elementos <code>&lt;th&gt;</code>.</li>
- <li>Guarda tu HTML y cárgalo en un navegador. Los encabezados deberían verse como tal.</li>
-</ol>
-
-<div class="note">
-<p><strong>Nota</strong>: Puedes encontrar nuestro ejemplo terminado en <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table-fixed.html">dogs-table-fixed.html</a> en GitHub (<a href="http://mdn.github.io/learning-area/html/tables/basic/dogs-table-fixed.html">o consultarlo en vivo</a>).</p>
-</div>
-
-<h3 id="¿Por_qué_son_útiles_los_encabezados">¿Por qué son útiles los encabezados?</h3>
-
-<p>Ya hemos respondido parcialmente a esta pregunta: es más fácil encontrar los datos que buscas cuando los encabezados se destacan con claridad, y el diseño suele presentar un aspecto mejor.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: Los encabezados de las tablas vienen con un estilo predeterminado: están en negrita y centrados (incluso si no añades tu estilo propio a la tabla) para que destaquen.</p>
-</div>
-
-<p>Los encabezados de tabla también presentan otra ventaja: junto con el atributo de <code>scope</code> (que veremos en el próximo artículo), mejoran la accesibilidad de las tablas porque asocian cada encabezado con todos los datos de la misma fila o columna. Así que los lectores de pantalla pueden leer una fila o columna de datos a la vez, lo cual es bastante útil.</p>
-
-<h2 id="Celdas_que_abarcan_varias_filas_y_columnas">Celdas que abarcan varias filas y columnas</h2>
-
-<p>A veces queremos que las celdas abarquen varias filas o columnas. Toma el ejemplo siguiente, que muestra los nombres de algunos animales comunes. En algunos casos, queremos mostrar los nombres de los machos y las hembras junto al nombre del animal. A veces no lo queremos, y en tales casos queremos que el nombre del animal abarque toda la tabla.</p>
-
-<p>El marcado inicial se ve así:</p>
-
-<pre class="brush: html notranslate">&lt;table&gt;
-  &lt;tr&gt;
-    &lt;th&gt;Animales&lt;/th&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;th&gt;Hipopótamo&lt;/th&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;th&gt;Caballo&lt;/th&gt;
-    &lt;td&gt;Yegua&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Semental&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-
-&lt;th&gt;Cocodrilo&lt;/th&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-
-&lt;th&gt;Pollo&lt;/th&gt;
-
-&lt;td&gt;Gallina&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Gallo&lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/table&gt;</pre>
-
-<p>Pero la salida no nos da exactamente lo que queremos:</p>
-
-<table>
- <tbody>
-  <tr>
-   <th>Animales</th>
-  </tr>
-  <tr>
-   <th>Hipopótamo</th>
-  </tr>
-  <tr>
-   <th>Caballo</th>
-   <td>Yegua</td>
-  </tr>
-  <tr>
-   <td>Semental</td>
-  </tr>
-  <tr>
-   <th>Cocodrilo</th>
-  </tr>
-  <tr>
-   <th>Pollo</th>
-   <td>Gallina</td>
-  </tr>
-  <tr>
-   <td>Gallo</td>
-  </tr>
- </tbody>
-</table>
-
-<p>Necesitamos una forma de hacer que «Animales», «Hipopótamo» y «Cocodrilo» se extiendan dos columnas más allá, y «Caballo» y «Pollo» se extiendan dos filas más abajo. Por fortuna, los encabezados de tabla y las celdas tienen los atributos <code>colspan</code> y <code>rowspan</code>, que nos permiten hacer exactamente esas cosas. Ambos aceptan un valor numérico sin unidades, que es igual al número de filas o columnas que desea abarcar. Por ejemplo, <code>colspan="2"</code> extiende una celda dos columnas más allá.</p>
-
-<p>Usemos <code>colspan</code> y <code>rowspan</code> para mejorar esta tabla.</p>
-
-<ol>
- <li>Primero, haz una copia local de nuestros archivos <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table.html">animals-table.html</a> y <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> en un directorio nuevo de tu ordenador. El HTML contiene el mismo ejemplo sobre perros que viste arriba.</li>
- <li>Luego, usa <code>colspan</code> para extender las celdas «Animales», «Hipopótamo» y «Cocodrilo» dos columnas más allá.</li>
- <li>Por último, usa <code>rowspan</code> para extender las celdas de «Caballo» y «Pollo» dos filas más abajo.</li>
- <li>Guarda tu código y ábrelo en un navegador para ver la mejora.</li>
-</ol>
-
-<div class="note">
-<p><strong>Nota</strong>: Puedes encontrar nuestro ejemplo terminado en <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table-fixed.html">animals-table-fixed.html</a> en GitHub (<a href="http://mdn.github.io/learning-area/html/tables/basic/animals-table-fixed.html">o consultarlo en vivo</a>).</p>
-</div>
-
-<table id="tabular" style="background-color: white;">
-</table>
-
-<h2 id="Proporcionar_un_estilo_común_a_las_columnas.">Proporcionar un estilo común a las columnas.</h2>
-
-<p>Hay una última característica de la que queremos hablar en este artículo antes de continuar. El HTML tiene un método para definir información de estilo para una columna completa de datos en un solo lugar: los elementos <strong><code><a href="/es/docs/Web/HTML/Elemento/col">&lt;col&gt;</a></code></strong> y <strong><code><a href="/es/docs/Web/HTML/Elemento/colgroup">&lt;colgroup&gt;</a></code></strong>. Estos atributos existen porque especificar el estilo de las columnas puede resultar enojoso e ineficiente; en general hay que especificar la información de estilo en <em>cada</em> <code>&lt;td&gt;</code> o <code>&lt;th&gt;</code> de la columna, o utilizar un selector complejo como {{cssxref(":nth-child()")}}.</p>
-
-<p>Tomemos el ejemplo sencillo siguiente:</p>
-
-<pre class="brush: html notranslate">&lt;table&gt;
-  &lt;tr&gt;
-
-&lt;th&gt;Dato 1&lt;/th&gt;
-    &lt;th style="background-color: yellow"&gt;Dato 2&lt;/th&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Calcuta&lt;/td&gt;
-    &lt;td style="background-color: yellow"&gt;Pizza&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Robots&lt;/td&gt;
-    &lt;td style="background-color: yellow"&gt;Jazz&lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/table&gt;</pre>
-
-<p>Esto nos da el resultado siguiente:</p>
-
-<table>
- <tbody>
-  <tr>
-   <th>Dato 1</th>
-   <th style="background-color: yellow;">Dato 2</th>
-  </tr>
-  <tr>
-   <td>Calcuta</td>
-   <td style="background-color: yellow;">Naranja</td>
-  </tr>
-  <tr>
-   <td>Robots</td>
-   <td style="background-color: yellow;">Jazz</td>
-  </tr>
- </tbody>
-</table>
-
-<p>Esto no es ideal, porque hay que repetir la información de estilo en las tres celdas de la columna (en un proyecto real probablemente habría definida una clase <code>class</code> en las tres celdas y el estilo se especificaría en una hoja de estilo por separado). En vez de hacer esto, podemos especificar la información una sola vez, con un elemento <code>&lt;col&gt;</code>. Los elementos <code>&lt;col&gt;</code> se especifican dentro de un contenedor <code>&lt;colgroup&gt;</code> justo debajo de la etiqueta de apertura <code>&lt;table&gt;</code>. Podríamos crear el mismo efecto que vemos arriba especificando nuestra tabla de la manera siguiente:</p>
-
-<pre class="brush: html notranslate">&lt;table&gt;
-  &lt;colgroup&gt;
-    &lt;col&gt;
-    &lt;col style="background-color: yellow"&gt;
-  &lt;/colgroup&gt;
-  &lt;tr&gt;
-
-&lt;th&gt;Dato 1&lt;/th&gt;
-
-&lt;th&gt;Dato 2&lt;/th&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Calcuta&lt;/td&gt;
-    &lt;td&gt;Pizza&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Robots&lt;/td&gt;
-    &lt;td&gt;Jazz&lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/table&gt;</pre>
-
-<p>En efecto, definimos dos tipos de «columnas de estilo», una que especifica la información para la aplicación de estilo en cada columna. No aplicamos estilo a la primera columna, sino que aún tenemos que incluir un elemento <code>&lt;col&gt;</code> en blanco; de lo contrario, el estilo también se aplicaría a la primera columna.</p>
-
-<p>Si quisiéramos aplicar la información de estilo a ambas columnas, podríamos incluir un elemento <code>&lt;col&gt;</code> con un atributo <code>span</code>, como este:</p>
-
-<pre class="brush: html notranslate">&lt;colgroup&gt;
-  &lt;col style="background-color: yellow" span="2"&gt;
-&lt;/colgroup&gt;</pre>
-
-<p>Al igual que <code>colspan</code> y <code>rowspan</code>, <code>span</code> toma un valor numérico sin unidades que especifica el número de columnas a las que se desea aplicar el estilo.</p>
-
-<h3 id="Aprendizaje_activo_colgroup_y_col">Aprendizaje activo: colgroup y col</h3>
-
-<p>Ahora es el momento de intentarlo tú mismo.</p>
-
-<p>A continuación puedes ver el horario de una profesora de idiomas. El viernes tiene que enseñar holandés todo el día, pero también enseña alemán durante unas horas los martes y los jueves, y quiere resaltar las columnas que contienen los días que da clase.</p>
-
-<p>{{EmbedGHLiveSample("learning-area/html/tables/basic/timetable-fixed.html", '100%', 320)}}</p>
-
-<p>Recrea la tabla a partir de los pasos siguientes.</p>
-
-<ol>
- <li>Primero, haz una copia local de nuestro archivo <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable.html">timetable.html</a> en un directorio nuevo de tu ordenador. El HTML contiene la misma tabla que viste arriba, menos la información de estilo de las columnas.</li>
- <li>Añade un elemento <code>&lt;colgroup&gt;</code> en la parte superior de la tabla, justo debajo de la etiqueta <code>&lt;table&gt;</code>, en la que puedes añadir tus elementos <code>&lt;col&gt;</code> (consulta los pasos restantes a continuación).</li>
- <li>Las dos primeras columnas deben dejarse sin estilo.</li>
- <li>Añade un color de fondo a la tercera columna. El valor para tu atributo de <code>style</code> es <code>background-color:#97DB9A;</code></li>
- <li>Establece un ancho distinto para la cuarta columna. El valor de tu atributo de <code>style</code> es <code>width: 42px;</code></li>
- <li>Añade un color de fondo a la quinta columna. El valor para tu atributo de <code>style</code> es <code>background-color:#97DB9A;</code></li>
- <li>Añade un color de fondo diferente más un borde a la sexta columna, para indicar que este es un día especial porque da clases de un idioma diferente. Los valores para tu atributo de <code>style</code> son <code>background-color:#DCC48E; border:4px solid #C1437A;</code></li>
- <li>Los últimos dos días los tiene libres, así que no establezcas ningún color de fondo, pero sí un valor para el ancho; el valor para el atributo de <code>style</code> es <code>width: 42px;</code></li>
-</ol>
-
-<p>Mira cómo sigue en el ejemplo. Si te encallas o quieres verificar tu trabajo, puedes encontrar nuestra versión en GitHub como <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html">timetable-fixed.html</a> (o también puedes consultarlo <a href="http://mdn.github.io/learning-area/html/tables/basic/timetable-fixed.html">en vivo</a>).</p>
-
-<h2 id="Resumen">Resumen</h2>
-
-<p>Con esto casi hemos abarcado todos los conceptos básicos de las tablas HTML. En el próximo artículo, veremos algunas características un poco más avanzadas de las tablas y comenzaremos a pensar acerca de su accesibilidad para las personas con discapacidad visual.</p>
-
-<div>{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div>
-
-<div>
-<h2 id="En_este_módulo">En este módulo</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/HTML/Tables/Basics">Conceptos básicos de las tablas en HTML</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Tables/Advanced">Funciones avanzadas de las tablas HTML y accesibilidad</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Tables/Structuring_planet_data">Estructuración de datos planetarios</a></li>
-</ul>
-</div>
diff --git a/files/es/learn/html/tables/basics/index.md b/files/es/learn/html/tables/basics/index.md
new file mode 100644
index 00000000000000..c40fc410fa7c6c
--- /dev/null
+++ b/files/es/learn/html/tables/basics/index.md
@@ -0,0 +1,566 @@
+---
+title: Conceptos básicos de las tablas HTML
+slug: Learn/HTML/Tables/Basics
+translation_of: Learn/HTML/Tables/Basics
+original_slug: Learn/HTML/Tablas/Conceptos_básicos_de_las_tablas_HTML
+---
+{{LearnSidebar}}{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
+
+Este artículo te ayudará a comenzar con las tablas HTML. Vamos a exponer conceptos básicos como filas y celdas, encabezados, celdas que abarcan múltiples columnas y filas, y la forma de agrupar todas las celdas de una columna para aplicarles estilo.
+
+<table>
+  <tbody>
+    <tr>
+      <th scope="row">Prerrequisitos:</th>
+      <td>
+        Conceptos básicos de HTML (ver
+        <a href="/es/docs/Learn/HTML/Introduccion_a_HTML"
+          >Introducción al HTML</a
+        >).
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Objetivo:</th>
+      <td>Adquirir conocimientos básicos de las tablas HTML.</td>
+    </tr>
+  </tbody>
+</table>
+
+## ¿Qué es una tabla?
+
+Una tabla es un conjunto estructurado de datos distribuidos en filas y columnas (**datos tabulados**). Una tabla permite buscar con rapidez y facilidad valores entre diferentes tipos de datos que indiquen algún tipo de conexión. Por ejemplo, una persona y su edad, o un día de la semana o el horario de una piscina municipal.
+
+![Una tabla de datos de ejemplo que muestra los nombres y las edades de algunas personas: Chris 38, Dennis 45, Sarah 29, Karen 47.](https://mdn.mozillademos.org/files/14583/numbers-table.png)
+
+![Una tabla de datos que muestra unos horarios de clases natación](https://mdn.mozillademos.org/files/14587/swimming-timetable.png)
+
+Las tablas se utilizan con mucha frecuencia en la sociedad desde hace años, como lo demuestra este documento censal de los EUA de 1800:
+
+![Un pergamino muy antiguo; cuesta un poco leer los datos, pero muestra con claridad que las tablas de datos ya se utilizaban en 1800.](https://mdn.mozillademos.org/files/14585/1800-census.jpg)
+
+Por lo tanto, no es de extrañar que los creadores de HTML proporcionen un medio con el que estructurar y presentar datos en tablas en la web.
+
+### ¿Cómo funciona una tabla?
+
+El aspecto básico de una tabla es que es un elemento rígido. Es fácil interpretar la información haciendo asociaciones visuales entre los encabezados de las filas y las columnas. Por ejemplo, observa la tabla siguiente y busca un gigante de gas joviano con 62 lunas. Puedes encontrar la respuesta asociando los encabezados de la fila y la columna correspondientes.
+
+<table>
+  <caption>
+    Datos sobre los planetas de nuestro sistema solar (datos planetarios tomados
+    de la hoja técnica sobre datos planetarios de la NASA (<a
+      href="http://nssdc.gsfc.nasa.gov/planetary/factsheet/"
+      >Nasa's Planetary Fact Sheet - Metric</a
+    >).
+  </caption>
+  <thead>
+    <tr>
+      <td colspan="2"></td>
+      <th scope="col">Nombre</th>
+      <th scope="col">Masa (10<sup>24</sup> kg)</th>
+      <th scope="col">Diámetro (km)</th>
+      <th scope="col">Densidad (kg/m<sup>3</sup>)</th>
+      <th scope="col">Gravedad (m/s<sup>2</sup>)</th>
+      <th scope="col">Duración del día (horas)</th>
+      <th scope="col">Distancia del Sol (10<sup>6</sup>km)</th>
+      <th scope="col">Temperatura media (°C)</th>
+      <th scope="col">Número de lunas</th>
+      <th scope="col">Observaciones</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th colspan="2" rowspan="4" scope="rowgroup">Planetas terrestres</th>
+      <th scope="row">Mercurio</th>
+      <td>0,330</td>
+      <td>4.879</td>
+      <td>5.427</td>
+      <td>3,7</td>
+      <td>4.222,6</td>
+      <td>57,9</td>
+      <td>167</td>
+      <td>0</td>
+      <td>El más cercano al Sol</td>
+    </tr>
+    <tr>
+      <th scope="row">Venus</th>
+      <td>4,87</td>
+      <td>12.104</td>
+      <td>5.243</td>
+      <td>8,9</td>
+      <td>2.802,0</td>
+      <td>108,2</td>
+      <td>464</td>
+      <td>0</td>
+      <td></td>
+    </tr>
+    <tr>
+      <th scope="row">La Tierra</th>
+      <td>5,97</td>
+      <td>12.756</td>
+      <td>5.514</td>
+      <td>9,8</td>
+      <td>24,0</td>
+      <td>149,6</td>
+      <td>15</td>
+      <td>1</td>
+      <td>Nuestro planeta</td>
+    </tr>
+    <tr>
+      <th scope="row">Marte</th>
+      <td>0,642</td>
+      <td>6.792</td>
+      <td>3.933</td>
+      <td>3,7</td>
+      <td>24,7</td>
+      <td>227,9</td>
+      <td>-65</td>
+      <td>2</td>
+      <td>El planeta rojo</td>
+    </tr>
+    <tr>
+      <th rowspan="4" scope="rowgroup">Planetas jovianos</th>
+      <th rowspan="2" scope="rowgroup">Los gigantes de gas</th>
+      <th scope="row">Júpiter</th>
+      <td>1.898</td>
+      <td>142.984</td>
+      <td>1.326</td>
+      <td>23,1</td>
+      <td>9,9</td>
+      <td>778,6</td>
+      <td>-110</td>
+      <td>67</td>
+      <td>El planeta más grande</td>
+    </tr>
+    <tr>
+      <th scope="row">Saturno</th>
+      <td>568</td>
+      <td>120.536</td>
+      <td>687</td>
+      <td>9,0</td>
+      <td>10,7</td>
+      <td>1.433,5</td>
+      <td>-140</td>
+      <td>62</td>
+      <td></td>
+    </tr>
+    <tr>
+      <th rowspan="2" scope="rowgroup">Los gigantes de hielo</th>
+      <th scope="row">Urano</th>
+      <td>86,8</td>
+      <td>51.118</td>
+      <td>1.271</td>
+      <td>8,7</td>
+      <td>17,2</td>
+      <td>2.872,5</td>
+      <td>-195</td>
+      <td>27</td>
+      <td></td>
+    </tr>
+    <tr>
+      <th scope="row">Neptuno</th>
+      <td>102</td>
+      <td>49.528</td>
+      <td>1.638</td>
+      <td>11,0</td>
+      <td>16,1</td>
+      <td>4.495,1</td>
+      <td>-200</td>
+      <td>14</td>
+      <td></td>
+    </tr>
+    <tr>
+      <th colspan="2" scope="rowgroup">Planetas enanos</th>
+      <th scope="row">Plutón</th>
+      <td>0,0146</td>
+      <td>2.370</td>
+      <td>2.095</td>
+      <td>0,7</td>
+      <td>153,3</td>
+      <td>5.906,4</td>
+      <td>-225</td>
+      <td>5</td>
+      <td>
+        Desclasificado como planeta en 2006, pero aún es una
+        <a
+          href="http://www.usatoday.com/story/tech/2014/10/02/pluto-planet-solar-system/16578959/"
+          >cuestión polémica</a
+        >.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+Cuando se hace correctamente, incluso las personas ciegas pueden interpretar los datos de una tabla HTML. Una tabla HTML bien hecha debe mejorar la experiencia de los usuarios videntes e invidentes por igual.
+
+### Dar estilo a las tablas
+
+También puedes [echar un vistazo al ejemplo vivo](https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html) en GitHub. Observarás que la tabla que encontrarás allí tiene un aspecto más legible; esto se debe a que la tabla que ves en esta página tiene un estilo mínimo, mientras que en la de la versión de GitHub se ha aplicado un CSS más significativo.
+
+No te hagas ilusiones; para que las tablas sean efectivas en la web, debes proporcionar cierta información de estilo con [CSS](/es/docs/Learn/CSS), así como una buena estructura sólida con HTML. En este módulo nos centramos en la parte HTML; para averiguar sobre la parte del CSS debes visitar nuestro artículo [Aplicar estilo a las tablas](/es/docs/Learn/CSS/Building_blocks/Styling_tables).
+
+En este módulo no nos vamos a centrar en el CSS, sino que te vamos a proporcionar una hoja de estilo de CSS que dará a tus tablas algo más de legibilidad de la que se obtiene por defecto si no se proporciona ningún estilo. Puedes encontrar la hoja de estilo [aquí](https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css), así como también una [plantilla HTML](https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html) para aplicar la hoja de estilo (te darán un buen punto de partida para experimentar con las tablas HTML).
+
+### ¿Cuándo no debes usar tablas HTML?
+
+Las tablas HTML están pensadas para utilizarse con datos tabulados. Por desgracia, mucha gente utiliza las tablas HTML para hacer compaginaciones de páginas web. Por ejemplo, una fila para contener la cabecera, una fila para contener las columnas de contenido, una fila para contener el pie de página, etc. Puede encontrar más detalles y un ejemplo en [Diseños de página](/es/docs/Learn/Accessibility/HTML#Page_layouts) en nuestro [Módulo de aprendizaje de accesibilidad](/es/docs/Learn/Accessibility). Se solía hacer este uso de las tablas porque la compatibilidad CSS entre navegadores solía ser terrible. Los diseños de tablas son mucho menos comunes hoy en día, pero aún se pueden ver en algunos rincones de la web.
+
+En resumen, es una mala idea usar tablas para el diseño en lugar de las [técnicas de diseño CSS](/es/docs/Learn/CSS/CSS_layout). Las razones principales son las siguientes:
+
+1.  **Las tablas de diseño reducen la accesibilidad para los usuarios con discapacidad visual**: Los [lectores de pantalla](/es/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders) que utilizan las personas con visibilidad reducida interpretan las etiquetas de una página HTML y leen su contenido para el usuario. Puesto que las tablas no son la herramienta adecuada para el diseño y el marcado es más complejo que con las técnicas de diseño CSS, la salida de los lectores de pantalla será confusa para estos usuarios.
+2.  **Las tablas generan estructuras incorrectas**: Como ya se mencionó, los diseños de tabla suelen involucrar estructuras de marcado más complejas que las técnicas de diseño. Esto puede dificultar la escritura, el mantenimiento y la depuración del código.
+3.  **Las tablas no tienen respuesta adaptativa automática**: Cuando usas contenedores de diseño adecuados (tales como {{HTMLElement ("header")}}, {{HTMLElement ("section")}}, {{HTMLElement ("article")}} o {{HTMLElement ("div")}}), su ancho predeterminado es el 100% de su elemento padre. En cambio, las tablas se dimensionan de forma predeterminada según su contenido, por lo que se necesitan medidas adicionales para que el diseño de la tabla funcione de manera efectiva en todos los dispositivos.
+
+## Aprendizaje activo: Crea tu primera tabla
+
+Ya hemos hablado bastante sobre la teoría de las tablas, así que veamos un ejemplo práctico y construyamos una tabla simple.
+
+1.  En primer lugar, haz una copia local de [blank-template.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html) y [minimal-table.css](https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css) en un directorio nuevo de tu ordenador.
+2.  El contenido de cada tabla está delimitado entre estas dos etiquetas: **[`<table></table>`](/es/docs/Web/HTML/Element/table)**. Añádelas al cuerpo de tu código HTML.
+3.  El contenedor más pequeño dentro de una tabla es una celda, que se crea con un elemento **[`<td>`](/es/docs/Web/HTML/Element/td)** ('td' significa 'table data', _datos de tabla_). Añade lo siguiente dentro de tus etiquetas de tabla:
+
+    ```html
+    <td>Hola, soy tu primera celda.</td>
+    ```
+
+4.  Si quieres una fila de cuatro celdas, tienes que copiar estas etiquetas tres veces. Actualiza el contenido de la tabla para que se vea así:
+
+    ```html
+    <td>Hola, soy tu primera celda.</td>
+    <td>Soy tu segunda celda.</td>
+    <td>Soy tu tercera celda.</td>
+    <td>Soy tu cuarta celda.</td>
+    ```
+
+Como verás, las celdas no se colocan una debajo de la otra, sino que se alinean automáticamente entre sí en la misma fila. Cada elemento \<td> crea una sola celda, y juntas forman la primera fila. Cada celda que agregamos hace crecer la fila.
+
+Para detener el crecimiento de esta fila y comenzar a colocar las celdas posteriores en una segunda fila, necesitamos usar el elemento **[`<tr>`](/es/docs/Web/HTML/Element/tr)** ('tr' significa 'table raw', _fila de tabla_). Vamos a verlo en detalle.
+
+1.  Coloca las cuatro celdas que has creado dentro de las etiquetas `<tr>`, de esta forma:
+
+    ```html
+    <tr>
+      <td>Hola, soy tu primera celda.</td>
+      <td>Soy tu segunda celda.</td>
+      <td>Soy tu tercera celda.</td>
+      <td>Soy tu cuarta celda.</td>
+    </tr>
+    ```
+
+2.  Ahora que has hecho una fila, intenta hacer una o dos más: cada fila debe estar delimitada por un elemento `<tr>` adicional, con cada celda contenida en un `<td>`.
+
+Esto debería dar como resultado una tabla similar a la siguiente:
+
+<table>
+  <tbody>
+    <tr>
+      <td>Hola, soy tu primera celda.</td>
+      <td>Soy tu segunda celda.</td>
+      <td>Soy tu tercera celda.</td>
+      <td>Soy tu cuarta celda.</td>
+    </tr>
+    <tr>
+      <td>Segunda fila, primera celda.</td>
+      <td>Celda 2.</td>
+      <td>Celda 3.</td>
+      <td>Celda 4.</td>
+    </tr>
+  </tbody>
+</table>
+
+> **Nota:** También puedes encontrar esto en GitHub como [simple-table.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/simple-table.html) (consúltalo [en vivo](http://mdn.github.io/learning-area/html/tables/basic/simple-table.html)).
+
+## Añadir encabezados con elementos \<th>
+
+Ahora nos vamos a centrar en los encabezados de tabla: celdas especiales que van al comienzo de una fila o columna y definen el tipo de datos que contiene esa fila o columna (por ejemplo, observa las celdas «Propietario» y «Edad» en el primer ejemplo que se muestra en este artículo). Para ilustrar por qué son útiles, echa un vistazo al ejemplo de tabla siguiente. En primer lugar, el código fuente:
+
+```html
+<table>
+  <tr>
+    <td>&nbsp;</td>
+    <td>Knocky</td>
+    <td>Flor</td>
+    <td>Ella</td>
+    <td>Juan</td>
+  </tr>
+  <tr>
+    <td>Raza</td>
+    <td>Jack Russell</td>
+    <td>Caniche</td>
+    <td>Perro callejero</td>
+    <td>Cocker Spaniel</td>
+  </tr>
+  <tr>
+    <td>Edad</td>
+    <td>16</td>
+    <td>9</td>
+    <td>10</td>
+    <td>5</td>
+  </tr>
+  <tr>
+    <td>Propietario</td>
+    <td>Suegra</td>
+    <td>Yo</td>
+    <td>Yo</td>
+    <td>Cuñada</td>
+  </tr>
+  <tr>
+    <td>Hábitos alimentarios</td>
+    <td>Come las sobras de todos</td>
+
+<td>Mordisquea la comida</td>
+    <td>Come en abundancia</td>
+
+<td>Come hasta que revienta</td>
+  </tr>
+</table>
+```
+
+Ahora observa la tabla representada:
+
+<table>
+  <tbody>
+    <tr>
+      <td></td>
+      <td>Knocky</td>
+      <td>Flor</td>
+      <td>Ella</td>
+      <td>Juan</td>
+    </tr>
+    <tr>
+      <td>Raza</td>
+      <td>Jack Russell</td>
+      <td>Caniche</td>
+      <td>Perro callejero</td>
+      <td>Cocker Spaniel</td>
+    </tr>
+    <tr>
+      <td>Edad</td>
+      <td>16</td>
+      <td>9</td>
+      <td>10</td>
+      <td>5</td>
+    </tr>
+    <tr>
+      <td>Propietario</td>
+      <td>Suegra</td>
+      <td>Yo</td>
+      <td>Yo</td>
+      <td>Cuñada</td>
+    </tr>
+    <tr>
+      <td>Hábitos alimentarios</td>
+      <td>Come las sobras de todos</td>
+      <td>Mordisquea la comida</td>
+      <td>Come en abundancia</td>
+      <td>Come hasta que revienta</td>
+    </tr>
+  </tbody>
+</table>
+
+El problema aquí es que, si bien puedes distinguir lo que sucede, no es tan fácil cruzar datos de referencia. Sería mucho mejor si los encabezados de las columnas y las filas se destacasen de alguna manera.
+
+### Aprendizaje activo: encabezados de tabla
+
+Intentemos mejorar esta tabla.
+
+1.  Primero, haz una copia local de nuestros archivos [dogs-table.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table.html) y [minimal-table.css](https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css) en un directorio nuevo de tu ordenador. El HTML contiene el mismo ejemplo sobre perros que viste arriba.
+2.  Para reconocer los encabezados de la tabla como encabezados, tanto visual como semánticamente, puedes usar el elemento **[`<th>`](/es/docs/Web/HTML/Element/th)** ('th' significa 'table header', _encabezado de tabla_). Funciona exactamente igual que un `<td>`, excepto que denota un encabezado, no una celda normal. Entra en el código HTML, y cambiar todos los elementos `<td>` que delimitan los encabezados de tabla por elementos `<th>`.
+3.  Guarda tu HTML y cárgalo en un navegador. Los encabezados deberían verse como tal.
+
+> **Nota:** Puedes encontrar nuestro ejemplo terminado en [dogs-table-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table-fixed.html) en GitHub ([o consultarlo en vivo](http://mdn.github.io/learning-area/html/tables/basic/dogs-table-fixed.html)).
+
+### ¿Por qué son útiles los encabezados?
+
+Ya hemos respondido parcialmente a esta pregunta: es más fácil encontrar los datos que buscas cuando los encabezados se destacan con claridad, y el diseño suele presentar un aspecto mejor.
+
+> **Nota:** Los encabezados de las tablas vienen con un estilo predeterminado: están en negrita y centrados (incluso si no añades tu estilo propio a la tabla) para que destaquen.
+
+Los encabezados de tabla también presentan otra ventaja: junto con el atributo de `scope` (que veremos en el próximo artículo), mejoran la accesibilidad de las tablas porque asocian cada encabezado con todos los datos de la misma fila o columna. Así que los lectores de pantalla pueden leer una fila o columna de datos a la vez, lo cual es bastante útil.
+
+## Celdas que abarcan varias filas y columnas
+
+A veces queremos que las celdas abarquen varias filas o columnas. Toma el ejemplo siguiente, que muestra los nombres de algunos animales comunes. En algunos casos, queremos mostrar los nombres de los machos y las hembras junto al nombre del animal. A veces no lo queremos, y en tales casos queremos que el nombre del animal abarque toda la tabla.
+
+El marcado inicial se ve así:
+
+```html
+<table>
+  <tr>
+    <th>Animales</th>
+  </tr>
+  <tr>
+    <th>Hipopótamo</th>
+  </tr>
+  <tr>
+    <th>Caballo</th>
+    <td>Yegua</td>
+  </tr>
+  <tr>
+    <td>Semental</td>
+  </tr>
+  <tr>
+
+<th>Cocodrilo</th>
+  </tr>
+  <tr>
+
+<th>Pollo</th>
+
+<td>Gallina</td>
+  </tr>
+  <tr>
+    <td>Gallo</td>
+  </tr>
+</table>
+```
+
+Pero la salida no nos da exactamente lo que queremos:
+
+<table>
+  <tbody>
+    <tr>
+      <th>Animales</th>
+    </tr>
+    <tr>
+      <th>Hipopótamo</th>
+    </tr>
+    <tr>
+      <th>Caballo</th>
+      <td>Yegua</td>
+    </tr>
+    <tr>
+      <td>Semental</td>
+    </tr>
+    <tr>
+      <th>Cocodrilo</th>
+    </tr>
+    <tr>
+      <th>Pollo</th>
+      <td>Gallina</td>
+    </tr>
+    <tr>
+      <td>Gallo</td>
+    </tr>
+  </tbody>
+</table>
+
+Necesitamos una forma de hacer que «Animales», «Hipopótamo» y «Cocodrilo» se extiendan dos columnas más allá, y «Caballo» y «Pollo» se extiendan dos filas más abajo. Por fortuna, los encabezados de tabla y las celdas tienen los atributos `colspan` y `rowspan`, que nos permiten hacer exactamente esas cosas. Ambos aceptan un valor numérico sin unidades, que es igual al número de filas o columnas que desea abarcar. Por ejemplo, `colspan="2"` extiende una celda dos columnas más allá.
+
+Usemos `colspan` y `rowspan` para mejorar esta tabla.
+
+1.  Primero, haz una copia local de nuestros archivos [animals-table.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table.html) y [minimal-table.css](https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css) en un directorio nuevo de tu ordenador. El HTML contiene el mismo ejemplo sobre perros que viste arriba.
+2.  Luego, usa `colspan` para extender las celdas «Animales», «Hipopótamo» y «Cocodrilo» dos columnas más allá.
+3.  Por último, usa `rowspan` para extender las celdas de «Caballo» y «Pollo» dos filas más abajo.
+4.  Guarda tu código y ábrelo en un navegador para ver la mejora.
+
+> **Nota:** Puedes encontrar nuestro ejemplo terminado en [animals-table-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table-fixed.html) en GitHub ([o consultarlo en vivo](http://mdn.github.io/learning-area/html/tables/basic/animals-table-fixed.html)).
+
+## Proporcionar un estilo común a las columnas.
+
+Hay una última característica de la que queremos hablar en este artículo antes de continuar. El HTML tiene un método para definir información de estilo para una columna completa de datos en un solo lugar: los elementos **[`<col>`](/es/docs/Web/HTML/Elemento/col)** y **[`<colgroup>`](/es/docs/Web/HTML/Elemento/colgroup)**. Estos atributos existen porque especificar el estilo de las columnas puede resultar enojoso e ineficiente; en general hay que especificar la información de estilo en _cada_ `<td>` o `<th>` de la columna, o utilizar un selector complejo como {{cssxref(":nth-child()")}}.
+
+Tomemos el ejemplo sencillo siguiente:
+
+```html
+<table>
+  <tr>
+    <th>Dato 1</th>
+    <th style="background-color: yellow">Dato 2</th>
+  </tr>
+  <tr>
+    <td>Calcuta</td>
+    <td style="background-color: yellow">Pizza</td>
+  </tr>
+  <tr>
+    <td>Robots</td>
+    <td style="background-color: yellow">Jazz</td>
+  </tr>
+</table>
+```
+
+Esto nos da el resultado siguiente:
+
+<table>
+  <tr>
+    <th>Dato 1</th>
+    <th style="background-color: yellow">Dato 2</th>
+  </tr>
+  <tr>
+    <td>Calcuta</td>
+    <td style="background-color: yellow">Pizza</td>
+  </tr>
+  <tr>
+    <td>Robots</td>
+    <td style="background-color: yellow">Jazz</td>
+  </tr>
+</table>
+
+Esto no es ideal, porque hay que repetir la información de estilo en las tres celdas de la columna (en un proyecto real probablemente habría definida una clase `class` en las tres celdas y el estilo se especificaría en una hoja de estilo por separado). En vez de hacer esto, podemos especificar la información una sola vez, con un elemento `<col>`. Los elementos `<col>` se especifican dentro de un contenedor `<colgroup>` justo debajo de la etiqueta de apertura `<table>`. Podríamos crear el mismo efecto que vemos arriba especificando nuestra tabla de la manera siguiente:
+
+```html
+<table>
+  <colgroup>
+    <col>
+    <col style="background-color: yellow">
+  </colgroup>
+  <tr>
+
+<th>Dato 1</th>
+
+<th>Dato 2</th>
+  </tr>
+  <tr>
+    <td>Calcuta</td>
+    <td>Pizza</td>
+  </tr>
+  <tr>
+    <td>Robots</td>
+    <td>Jazz</td>
+  </tr>
+</table>
+```
+
+En efecto, definimos dos tipos de «columnas de estilo», una que especifica la información para la aplicación de estilo en cada columna. No aplicamos estilo a la primera columna, sino que aún tenemos que incluir un elemento `<col>` en blanco; de lo contrario, el estilo también se aplicaría a la primera columna.
+
+Si quisiéramos aplicar la información de estilo a ambas columnas, podríamos incluir un elemento `<col>` con un atributo `span`, como este:
+
+```html
+<colgroup>
+  <col style="background-color: yellow" span="2">
+</colgroup>
+```
+
+Al igual que `colspan` y `rowspan`, `span` toma un valor numérico sin unidades que especifica el número de columnas a las que se desea aplicar el estilo.
+
+### Aprendizaje activo: colgroup y col
+
+Ahora es el momento de intentarlo tú mismo.
+
+A continuación puedes ver el horario de una profesora de idiomas. El viernes tiene que enseñar holandés todo el día, pero también enseña alemán durante unas horas los martes y los jueves, y quiere resaltar las columnas que contienen los días que da clase.
+
+{{EmbedGHLiveSample("learning-area/html/tables/basic/timetable-fixed.html", '100%', 320)}}
+
+Recrea la tabla a partir de los pasos siguientes.
+
+1.  Primero, haz una copia local de nuestro archivo [timetable.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable.html) en un directorio nuevo de tu ordenador. El HTML contiene la misma tabla que viste arriba, menos la información de estilo de las columnas.
+2.  Añade un elemento `<colgroup>` en la parte superior de la tabla, justo debajo de la etiqueta `<table>`, en la que puedes añadir tus elementos `<col>` (consulta los pasos restantes a continuación).
+3.  Las dos primeras columnas deben dejarse sin estilo.
+4.  Añade un color de fondo a la tercera columna. El valor para tu atributo de `style` es `background-color:#97DB9A;`
+5.  Establece un ancho distinto para la cuarta columna. El valor de tu atributo de `style` es `width: 42px;`
+6.  Añade un color de fondo a la quinta columna. El valor para tu atributo de `style` es `background-color:#97DB9A;`
+7.  Añade un color de fondo diferente más un borde a la sexta columna, para indicar que este es un día especial porque da clases de un idioma diferente. Los valores para tu atributo de `style` son `background-color:#DCC48E; border:4px solid #C1437A;`
+8.  Los últimos dos días los tiene libres, así que no establezcas ningún color de fondo, pero sí un valor para el ancho; el valor para el atributo de `style` es `width: 42px;`
+
+Mira cómo sigue en el ejemplo. Si te encallas o quieres verificar tu trabajo, puedes encontrar nuestra versión en GitHub como [timetable-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html) (o también puedes consultarlo [en vivo](http://mdn.github.io/learning-area/html/tables/basic/timetable-fixed.html)).
+
+## Resumen
+
+Con esto casi hemos abarcado todos los conceptos básicos de las tablas HTML. En el próximo artículo, veremos algunas características un poco más avanzadas de las tablas y comenzaremos a pensar acerca de su accesibilidad para las personas con discapacidad visual.
+
+{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
+
+## En este módulo
+
+- [Conceptos básicos de las tablas en HTML](/es/docs/Learn/HTML/Tables/Basics)
+- [Funciones avanzadas de las tablas HTML y accesibilidad](/es/docs/Learn/HTML/Tables/Advanced)
+- [Estructuración de datos planetarios](/es/docs/Learn/HTML/Tables/Structuring_planet_data)
diff --git a/files/es/learn/html/tables/index.html b/files/es/learn/html/tables/index.html
deleted file mode 100644
index 3f6af405d60d79..00000000000000
--- a/files/es/learn/html/tables/index.html
+++ /dev/null
@@ -1,35 +0,0 @@
----
-title: Tablas HTML
-slug: Learn/HTML/Tables
-translation_of: Learn/HTML/Tables
-original_slug: Learn/HTML/Tablas
----
-<div>{{LearnSidebar}}</div>
-
-<p class="summary">Una tarea muy común en HTML es la estructuración de datos, y para esto hay múltiples elementos y atributos. Esto unido a un poco de CSS, hace que en HTML sea sencillo mostrar tablas con información sobre tu horario escolar, los horarios de una piscina local o las estadisticas de tu equipo de dinosaurios o fútbol preferido. Este módulo te guiará en todo lo que necesitas saber sobre la estructuración tabular de datos en HTML.</p>
-
-<h2 id="Requisitos_previos">Requisitos previos</h2>
-
-<p>Antes de comenzar este módulo, deberías de saber las cosas básicas de HTML — ver <a href="https://developer.mozilla.org/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción a HTML</a>.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: Si estas trabjando en un ordenador/tableta/otro dispositivo en el que no puedes crear tus propios archivos, puedes probar la mayoría de ejemplos online en webs como <a href="http://jsbin.com/">JSBin</a> o <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
-</div>
-
-<h2 id="Guías">Guías</h2>
-
-<p>Este módulo contiene los siguientes artículos:</p>
-
-<dl>
- <dt><a href="/en-US/docs/Learn/HTML/Tables/Basics">Comenzando con tablas HTML</a></dt>
- <dd>Este artículo te introduce en las tablas HTML , cubriendo las cosas más basicas como las líneas y las celdas, encabezados, crear celdas de multiples líneas y columnas, y como agrupar todas las celdas en una columna con fines estilisticos.</dd>
- <dt><a href="/en-US/docs/Learn/HTML/Tables/Advanced">Características avanzadas y accesibilidad en tablas HTML</a></dt>
- <dd>En el segundo artículo de este módulo, veremos algunas características avanzadas de las tablas HTML — como subtítulos/resumenes y agrupar líneas en la cabeza, cuerpo y pie de la tabla — además de realizar tablas accesibles para aquellos usuarios con problemas de visión.</dd>
-</dl>
-
-<h2 id="Evaluación">Evaluación</h2>
-
-<dl>
- <dt><a href="/en-US/docs/Learn/HTML/Tables/Structuring_planet_data">Estructurar datos planetarios</a></dt>
- <dd>En nuestra evaluación, te proporcionamos datos sobre los planetas de nuestro sistemas solar y tu los estructurarás en una tabla HTML.</dd>
-</dl>
diff --git a/files/es/learn/html/tables/index.md b/files/es/learn/html/tables/index.md
new file mode 100644
index 00000000000000..2db91c2fcb6df2
--- /dev/null
+++ b/files/es/learn/html/tables/index.md
@@ -0,0 +1,29 @@
+---
+title: Tablas HTML
+slug: Learn/HTML/Tables
+translation_of: Learn/HTML/Tables
+original_slug: Learn/HTML/Tablas
+---
+{{LearnSidebar}}
+
+Una tarea muy común en HTML es la estructuración de datos, y para esto hay múltiples elementos y atributos. Esto unido a un poco de CSS, hace que en HTML sea sencillo mostrar tablas con información sobre tu horario escolar, los horarios de una piscina local o las estadisticas de tu equipo de dinosaurios o fútbol preferido. Este módulo te guiará en todo lo que necesitas saber sobre la estructuración tabular de datos en HTML.
+
+## Requisitos previos
+
+Antes de comenzar este módulo, deberías de saber las cosas básicas de HTML — ver [Introducción a HTML](https://developer.mozilla.org/es/docs/Learn/HTML/Introduccion_a_HTML).
+
+> **Nota:** Si estas trabjando en un ordenador/tableta/otro dispositivo en el que no puedes crear tus propios archivos, puedes probar la mayoría de ejemplos online en webs como [JSBin](http://jsbin.com/) o [Thimble](https://thimble.mozilla.org/).
+
+## Guías
+
+Este módulo contiene los siguientes artículos:
+
+- [Comenzando con tablas HTML](/es/docs/Learn/HTML/Tables/Basics)
+  - : Este artículo te introduce en las tablas HTML , cubriendo las cosas más basicas como las líneas y las celdas, encabezados, crear celdas de multiples líneas y columnas, y como agrupar todas las celdas en una columna con fines estilisticos.
+- [Características avanzadas y accesibilidad en tablas HTML](/es/docs/Learn/HTML/Tables/Advanced)
+  - : En el segundo artículo de este módulo, veremos algunas características avanzadas de las tablas HTML — como subtítulos/resumenes y agrupar líneas en la cabeza, cuerpo y pie de la tabla — además de realizar tablas accesibles para aquellos usuarios con problemas de visión.
+
+## Evaluación
+
+- [Estructurar datos planetarios](/es/docs/Learn/HTML/Tables/Structuring_planet_data)
+  - : En nuestra evaluación, te proporcionamos datos sobre los planetas de nuestro sistemas solar y tu los estructurarás en una tabla HTML.
diff --git a/files/es/learn/html/tables/structuring_planet_data/index.html b/files/es/learn/html/tables/structuring_planet_data/index.html
deleted file mode 100644
index f691d6b2d4d66e..00000000000000
--- a/files/es/learn/html/tables/structuring_planet_data/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
----
-title: 'Evaluación: Estructurando datos planetarios'
-slug: Learn/HTML/Tables/Structuring_planet_data
-translation_of: Learn/HTML/Tables/Structuring_planet_data
-original_slug: Learn/HTML/Tablas/Structuring_planet_data
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div>
-
-<p class="summary">En nuestra evaluación te proporcionamos datos sobre los planetas de nuestro sistema solar y tu los estructurarás en una tabla HTML.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Requisitos previos:</th>
-   <td>Antes de comenzar esta evaluación deberías de haber leído los artículos de este módulo.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objetivo:</th>
-   <td>Comprobar si has comprendido las tablas HTML y las características asociadas.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Punto_de_incio">Punto de incio</h2>
-
-<p>Para comenzar esta evaluación, crea una copia local de <a href="https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/blank-template.html">blank-template.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/minimal-table.css">minimal-table.css</a>, y <a href="https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/planets-data.txt">planets-data.txt</a> en una nueva carpeta de tu ordenador.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: Como alternativa, puedes usar una web como <a class="external external-icon" href="https://jsbin.com/">JSBin</a> o <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> para realizar tu evaluación. Puedes pegar el HTML, CSS y JavaScript en uno de estos editores online. Si el editor online que estas usando no tiene paneles separados para JavaScript/CSS, sientete libre de ponerlos en línea dentro del mismo HTML mediante el uso de <code>&lt;script&gt;</code>/<code>&lt;style&gt;</code>.</p>
-</div>
-
-<h2 id="Resumen_del_proyecto">Resumen del proyecto</h2>
-
-<p>Estás trabajando en la escuela; tus estudiantes están estudiando los planetas de nuestro sistema solar y quieres proporcionarles una forma sencilla de seguir los datos para buscar hechos sobre los planetas. Una tabla HTML sería ideal — tienes que coger los datos que tienes disponibles y convertirlos en una tabla siguiendo los pasos de abajo.</p>
-
-<p>La tabla finalizada debería de verse así:</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/14609/assessment-table.png" style="display: block; margin: 0 auto;"></p>
-
-<p>También puedes ver el ejemplo <a href="https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html">aquí</a> (no mires el código fuente — ¡no hagas trampas!)</p>
-
-<ul>
-</ul>
-
-<h2 id="Pasos_para_completarlo">Pasos para completarlo</h2>
-
-<p>Los siguientes pasos describen lo que necesitas para completar el ejemplo de la tabla. Todos los datos que necesitarás están en el archivo <code>planets-data.txt</code>.<font face="consolas, Liberation Mono, courier, monospace"> </font>Si tienes problemas para visualizar los datos, mira el ejemplo de arriba o intentalo dibujando un diagrama.</p>
-
-<ol>
- <li>Abre tu copia de <code>blank-template.html</code>, y comienza la tabla dándole un contenedor exterior, una cabecera y un cuerpo. No necesitas un pie de tabla en este ejemplo.</li>
- <li>Añade el subtítulo proporcionado a tu tabla.</li>
- <li>Añade una línea a la cabecera que contenga todos los encabezados de columna.</li>
- <li>Crea todas las líneas con su contenido, asegurandote marcar como cabecera aquellas celdas que lo sean.</li>
- <li>Asegurate de que el contenido esta insertado en las celdas correctas — en los datos del .txt, cada línea del planeta esta al lado de su planeta asociado.</li>
- <li>Añade atributos para que las líneas y columnas del encabezado no se puedan confundir con las líneas, columnas o grupos de líneas a las que encabezan.</li>
- <li>Añade un borde negro alrededor de la columna que contiene los nombres de los planetas y sus encabezados.</li>
-</ol>
-
-<h2 id="Pistas_y_consejos">Pistas y consejos</h2>
-
-<ul>
- <li>La primera celda de la línea de enbezado tiene que estar en blanco y unir dos columnas.</li>
- <li>Los encabezados de la filas agrupadas (p. ej. <em>Jovian planets</em>) que están a la izquierda de los encabezados de nombres de planetas (p. ej. <em>Saturn</em>) son algo complicados de resolver — asegurate de que cada uno agrupa el número correcto de líneas y columnas</li>
- <li>Una manera de asociar encabezados con sus líneas/columnas es mucha más fácil que la otra.</li>
-</ul>
-
-<h2 id="Evaluación">Evaluación</h2>
-
-<p>Si estas siguiendo esta evaluación como parte de un curso organizado, deberías de ser capaz de entregar tu trabajo a tu profesor(a)/mentor para ver la puntuación. Si estas aprendiendo por tu cuenta, puedes obtener la guía de puntuación preguntando en <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">Learning Area Discourse thread</a> o en el canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> en <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Intenta hacer el ejercicio primero  — ¡haciendo trampas no aprenderás nada!</p>
-
-<p>{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</p>
diff --git a/files/es/learn/html/tables/structuring_planet_data/index.md b/files/es/learn/html/tables/structuring_planet_data/index.md
new file mode 100644
index 00000000000000..960983dd0da0ef
--- /dev/null
+++ b/files/es/learn/html/tables/structuring_planet_data/index.md
@@ -0,0 +1,68 @@
+---
+title: 'Evaluación: Estructurando datos planetarios'
+slug: Learn/HTML/Tables/Structuring_planet_data
+translation_of: Learn/HTML/Tables/Structuring_planet_data
+original_slug: Learn/HTML/Tablas/Structuring_planet_data
+---
+{{LearnSidebar}}{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
+
+En nuestra evaluación te proporcionamos datos sobre los planetas de nuestro sistema solar y tu los estructurarás en una tabla HTML.
+
+<table>
+  <tbody>
+    <tr>
+      <th scope="row">Requisitos previos:</th>
+      <td>
+        Antes de comenzar esta evaluación deberías de haber leído los artículos
+        de este módulo.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Objetivo:</th>
+      <td>
+        Comprobar si has comprendido las tablas HTML y las características
+        asociadas.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## Punto de incio
+
+Para comenzar esta evaluación, crea una copia local de [blank-template.html](https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/blank-template.html), [minimal-table.css](https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/minimal-table.css), y [planets-data.txt](https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/planets-data.txt) en una nueva carpeta de tu ordenador.
+
+> **Nota:** Como alternativa, puedes usar una web como [JSBin](https://jsbin.com/) o [Thimble](https://thimble.mozilla.org/) para realizar tu evaluación. Puedes pegar el HTML, CSS y JavaScript en uno de estos editores online. Si el editor online que estas usando no tiene paneles separados para JavaScript/CSS, sientete libre de ponerlos en línea dentro del mismo HTML mediante el uso de `<script>`/`<style>`.
+
+## Resumen del proyecto
+
+Estás trabajando en la escuela; tus estudiantes están estudiando los planetas de nuestro sistema solar y quieres proporcionarles una forma sencilla de seguir los datos para buscar hechos sobre los planetas. Una tabla HTML sería ideal — tienes que coger los datos que tienes disponibles y convertirlos en una tabla siguiendo los pasos de abajo.
+
+La tabla finalizada debería de verse así:
+
+![](https://mdn.mozillademos.org/files/14609/assessment-table.png)
+
+También puedes ver el ejemplo [aquí](https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html) (no mires el código fuente — ¡no hagas trampas!)
+
+## Pasos para completarlo
+
+Los siguientes pasos describen lo que necesitas para completar el ejemplo de la tabla. Todos los datos que necesitarás están en el archivo `planets-data.txt`. Si tienes problemas para visualizar los datos, mira el ejemplo de arriba o intentalo dibujando un diagrama.
+
+1.  Abre tu copia de `blank-template.html`, y comienza la tabla dándole un contenedor exterior, una cabecera y un cuerpo. No necesitas un pie de tabla en este ejemplo.
+2.  Añade el subtítulo proporcionado a tu tabla.
+3.  Añade una línea a la cabecera que contenga todos los encabezados de columna.
+4.  Crea todas las líneas con su contenido, asegurandote marcar como cabecera aquellas celdas que lo sean.
+5.  Asegurate de que el contenido esta insertado en las celdas correctas — en los datos del .txt, cada línea del planeta esta al lado de su planeta asociado.
+6.  Añade atributos para que las líneas y columnas del encabezado no se puedan confundir con las líneas, columnas o grupos de líneas a las que encabezan.
+7.  Añade un borde negro alrededor de la columna que contiene los nombres de los planetas y sus encabezados.
+
+## Pistas y consejos
+
+- La primera celda de la línea de enbezado tiene que estar en blanco y unir dos columnas.
+- Los encabezados de la filas agrupadas (p. ej. _Jovian planets_) que están a la izquierda de los encabezados de nombres de planetas (p. ej. _Saturn_) son algo complicados de resolver — asegurate de que cada uno agrupa el número correcto de líneas y columnas
+- Una manera de asociar encabezados con sus líneas/columnas es mucha más fácil que la otra.
+
+## Evaluación
+
+Si estas siguiendo esta evaluación como parte de un curso organizado, deberías de ser capaz de entregar tu trabajo a tu profesor(a)/mentor para ver la puntuación. Si estas aprendiendo por tu cuenta, puedes obtener la guía de puntuación preguntando en [Learning Area Discourse thread](https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294) o en el canal IRC [#mdn](irc://irc.mozilla.org/mdn) en [Mozilla IRC](https://wiki.mozilla.org/IRC). Intenta hacer el ejercicio primero — ¡haciendo trampas no aprenderás nada!
+
+{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}