initial commit

39 files changed, 13580 insertions, 0 deletions

diff --git a/files/es/learn/html/como/index.html b/files/es/learn/html/como/index.html
new file mode 100644
index 0000000000..095e5bc54e
--- /dev/null
+++ b/files/es/learn/html/como/index.html
@@ -0,0 +1,141 @@
+---
+title: Solución de problemas comunes de HTML
+slug: Learn/HTML/como
+tags:
+  - CodificacióndeSecuenciadeComandos
+  - HTML
+translation_of: Learn/HTML/Howto
+---
+<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 style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span> </p>
diff --git a/files/es/learn/html/como/usando_atributos_de_datos/index.html b/files/es/learn/html/como/usando_atributos_de_datos/index.html
new file mode 100644
index 0000000000..7629974833
--- /dev/null
+++ b/files/es/learn/html/como/usando_atributos_de_datos/index.html
@@ -0,0 +1,75 @@
+---
+title: Uso de atributos de datos
+slug: Learn/HTML/como/Usando_atributos_de_datos
+translation_of: Learn/HTML/Howto/Use_data_attributes
+---
+<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/" title="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/forms/como_crear_widgets_de_formularios_personalizados/index.html b/files/es/learn/html/forms/como_crear_widgets_de_formularios_personalizados/index.html
new file mode 100644
index 0000000000..73ae6e6590
--- /dev/null
+++ b/files/es/learn/html/forms/como_crear_widgets_de_formularios_personalizados/index.html
@@ -0,0 +1,786 @@
+---
+title: Cómo crear widgets de formularios personalizados
+slug: Learn/HTML/Forms/como_crear_widgets_de_formularios_personalizados
+translation_of: Learn/Forms/How_to_build_custom_form_controls
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}</div>
+
+<p class="summary">Hay muchos casos donde los <a href="/en-US/docs/HTML/Forms/The_native_form_widgets" title="/en-US/docs/HTML/Forms/The_native_form_widgets">widgets de formularios HTML disponibles</a> simplemente no son suficientes. si desea <a href="/en-US/docs/Advanced_styling_for_HTML_forms" title="/en-US/docs/Advanced_styling_for_HTML_forms">establecer un estilo avanzado</a> en algunos widgets como el elemento {{HTMLElement("select")}} o si desea proporcionar comportamientos personalizados, no tiene más opción que crear sus propios widgets.</p>
+
+<p>En este aartículo, veremos cómo construir dicho widget. Para ello, trabajaremos con un ejemplo: Reconstruir el elemento {{HTMLElement("select")}}.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Nos enfocaremos en construir los widgets, no en cómo hacer que el código sea genérico y reutilizable; eso implicaría algún código JavaScript no trivial y manipulación del DOM en un contexto desconocido, y eso está fuera del alcance de este artículo.</p>
+</div>
+
+<h2 id="Diseño_estructura_y_semántica">Diseño, estructura, y semántica</h2>
+
+<p>Antes de crear un widget personalizado, debería iniciar por averiguar exactamente qué es lo que desea. Esto le ahorarrá tiempo considerable. En particular, es importante definir claramente todos los estados de su widget. Para hacer esto, es bueno comenzar con un widget existente, cuyos estados y comportamientos son bien conocidos, por lo que simplemente puede imitarlos tanto como sea posible.</p>
+
+<p>En nuestro ejemplo, reconstruiremos el elemento {{HTMLElement("select")}}. Este es el resultado que queremos lograr:</p>
+
+<p><img alt="The three states of a select box" src="/files/4481/custom-select.png" style="height: 135px; width: 366px;"></p>
+
+<p>Esta captura de pantall muestra los tres estados principales de nuestro widget: el estado normal (a la izquiera); el estado activo (en el centro) y el estado abierto (a la derecha).</p>
+
+<p>En términos de comportamiento, queremos que nuestro widget sea utilizable tanto con un ratón como con un teclado, al igual que cualquier widget nativo. Comencemos por definir cómo el widget llega a cada estado:</p>
+
+<dl>
+ <dt>El widget está en su estado normal cuando:</dt>
+ <dd>
+ <ul>
+  <li>La página carga</li>
+  <li>El widget estaba activo y el usuario hace clic en cualquier lugar fuera del widget</li>
+  <li>El widget estaba activo y el usuario mueve el foco a otro widget usando el teclado</li>
+ </ul>
+
+ <div class="note">
+ <p><strong>Nota:</strong> Mover el foco al rededor de la página generalmente se hace presionando la tecla de tabulación, pero este no es el estándar en todas partes. Por ejemplo, el ciclo a través de enlaces en una página se realiza en Safari de forma predeterminada usando la combinación <a href="http://www.456bereastreet.com/archive/200906/enabling_keyboard_navigation_in_mac_os_x_web_browsers/" title="http://www.456bereastreet.com/archive/200906/enabling_keyboard_navigation_in_mac_os_x_web_browsers/">combinación Opction+Tab</a>.</p>
+ </div>
+ </dd>
+ <dt>El widget está en su estado activo cuando:</dt>
+ <dd>
+ <ul>
+  <li>El usuario hace clic en él</li>
+  <li>El usuario presiona la tecla tab y obtiene foco</li>
+  <li>El widget estaba en su estado abierto y el usuario hace clic en el widget.</li>
+ </ul>
+ </dd>
+ <dt>El widget está en su estado abierto cuando:</dt>
+ <dd>
+ <ul>
+  <li>El widget está en cualquier otro estado diferente a abierto y el usuario hace clic en él.</li>
+ </ul>
+ </dd>
+</dl>
+
+<p>Una vez que sabemos cómo cambiar los estados, es importante definir cómo cambiar el valor del widget:</p>
+
+<dl>
+ <dt>El valor cambia cuando:</dt>
+ <dd>
+ <ul>
+  <li>El usuario hace clic en una opción cuando el widget está en estado abierto</li>
+  <li>El usuario pulsa las teclas de flecha hacia arriba o hacia abajocuando el widget está en estado activo</li>
+ </ul>
+ </dd>
+</dl>
+
+<p>Finalmente, definamos cómo se comportarán las opciones del widget:</p>
+
+<ul>
+ <li>Cuando se abre el widget, se resalta la opción seleccionada</li>
+ <li>Cuando el ratón está sobre una opción, la opción se resalta y la opción resaltada anteriormente vuelve a su estado normal</li>
+</ul>
+
+<p>Para los fines de nuestro ejemplo, nos detendremos con eso; sin embargo, si eres un lector cuidadoso, notarás que faltan algunos comportamientos. Por ejemplo, ¿qué crees que sucederá si el usuario pulsa la tecla de tabulación mientras el widget está en estado abierto? La respuesta es ... nada. OK, el comportamiento correcto parece obvio, pero el hecho es que, como no está definido en nuestras especificaciones, es muy fácil pasar por alto este comportamiento. Esto es especialmente cierto en un entorno de equipo cuando las personas que diseñan el comportamiento del widget son diferentes de las que lo implementan.</p>
+
+<p>Otro ejemplo divertido: ¿qué pasará si el usuario pulsa las teclas de flecha hacia arriba o hacia abajo mientras el widget está en estado abierto? Este es un poco más complicado. Si considera que el estado activo y el estado abierto son completamente diferentes, la respuesta es nuevamente "no pasará nada" porque no definimos ninguna interacción de teclado para el estado abierto. Por otro lado, si considera que el estado activo y el estado abierto se superponen un poco, el valor puede cambiar pero la opción definitivamente no se resaltará en consecuencia, una vez más porque no definimos ninguna interacción del teclado sobre las opciones cuando el widget es en su estado abierto (solo hemos definido lo que debería suceder cuando se abre el widget, pero nada después de eso).</p>
+
+<p>En nuestro ejemplo, las especificaciones faltantes son obvias, así que las manejaremos, pero puede ser un problema real en widgets nuevos y exóticos, para los cuales nadie tiene la menor idea de cuál es el comportamiento correcto. Por lo tanto, siempre es bueno pasar tiempo en esta etapa de diseño, porque si defines un comportamiento deficiente u olvidas definir uno, será muy difícil redefinirlo una vez que los usuarios se hayan acostumbrado. Si tiene dudas, solicite las opiniones de los demás y, si tiene el presupuesto para ello, no dude en realizar las pruebas de usuario. Este proceso se llama Diseño UX. Si desea obtener más información sobre este tema, debe consultar los siguientes recursos útiles:</p>
+
+<ul>
+ <li><a href="http://www.uxmatters.com/" rel="external" title="http://www.uxmatters.com/">UXMatters.com</a></li>
+ <li><a href="http://uxdesign.com/" rel="external" title="http://uxdesign.com/">UXDesign.com</a></li>
+ <li><a href="http://uxdesign.smashingmagazine.com/" rel="external" title="http://uxdesign.smashingmagazine.com/">The UX Design section of SmashingMagazine</a></li>
+</ul>
+
+<div class="note">
+<p><strong>Nota: </strong>Ademas, en la mayoría de los sistemas hay una forma de abrir el elemento {{HTMLElement("select")}} para ver todas las opciones disponibles (esto es lo mismo que hacer clic en el elemento {{HTMLElement("select")}} con un ratón). Esto se logra con Alt+Flecha abajo en Windows y no fué implementado en nuestro ejemplo —pero sería facil hacerlo, ya que el mecanismo ya se implementó para el evento <code>clic</code>.</p>
+</div>
+
+<h3 id="Definiendo_la_estructura_y_semántica_HTML">Definiendo la estructura y semántica HTML</h3>
+
+<p>Ahora que se ha decidido la funcionalidad básica del widget, es hora de comenzar a construir nuestro widget. El primer paso es definir su estructura HTML y darle una semántica básica. Esto es lo que necesitamos para reconstruir un elemento {{HTMLElement("select")}}:</p>
+
+<pre class="brush: html">&lt;!-- Este es nuestro contenedor principal para nuestro widget.
+     El atributo tabindex es lo que permite al usuario enforcar el widget.
+     Veremos más adelante que es mejor configurarlo a través de JavaScript. --&gt;
+&lt;div class="select" tabindex="0"&gt;
+
+  &lt;!-- Este contenedor será usado para mostrar el valor actual del widget --&gt;
+  &lt;span class="value"&gt;Cherry&lt;/span&gt;
+
+  &lt;!-- Este contenedor contedrá todas las opciones disponibles para nuestro widget.
+       Como es una lista, tiene sentido usar el elemento ul. --&gt;
+  &lt;ul class="optList"&gt;
+    &lt;!-- Cada opción solo contiene el valor que se mostrará, veremos más tarde
+         cómo manejar el valor real que será enviado con el formulario de datos --&gt;
+    &lt;li class="option"&gt;Cherry&lt;/li&gt;
+    &lt;li class="option"&gt;Lemon&lt;/li&gt;
+    &lt;li class="option"&gt;Banana&lt;/li&gt;
+    &lt;li class="option"&gt;Strawberry&lt;/li&gt;
+    &lt;li class="option"&gt;Apple&lt;/li&gt;
+  &lt;/ul&gt;
+
+&lt;/div&gt;</pre>
+
+<p>Tenga en cuanta el uso de nombres de clases; estos identifican cada parte relevante independientemente de los elementos HTML subyacentes reales utilizados. Esto es importante para garantizar que no vinculamos nuestro CSS y JavaScript a una estructura HTML sólida, de modo que podamos realizar cambios despues en la implementación sin romper el código que usa el widget. Pro ejemplo, si desea implementar el equivalente del elemento {{HTMLElement("optgroup")}}.</p>
+
+<h3 id="Creating_the_look_and_feel_using_CSS">Creating the look and feel using CSS</h3>
+
+<p>Now that we have a structure, we can start designing our widget. The whole point of building this custom widget is to be able to style this widget exactly as we want. To that end, we will split our CSS work into two parts: the first part will be the CSS rules absolutely necessary to have our widget behave like a {{HTMLElement("select")}} element, and the second part will consist of the fancy styles used to make it look the way we want.</p>
+
+<h4 id="Required_styles">Required styles</h4>
+
+<p>The required styles are those necessary to handle the three states of our widget.</p>
+
+<pre class="brush: css">.select {
+  /* This will create a positioning context for the list of options */
+  position: relative;
+
+  /* This will make our widget become part of the text flow and sizable at the same time */
+  display : inline-block;
+}</pre>
+
+<p>We need an extra class <code>active</code> to define the look and feel of our widget when it is in its active state. Because our widget is focusable, we double this custom style with the {{cssxref(":focus")}} pseudo-class in order to be sure they will behave the same.</p>
+
+<pre class="brush: css">.select.active,
+.select:focus {
+  outline: none;
+
+  /* This box-shadow property is not exactly required, however it's so important to be sure
+     the active state is visible that we use it as a default value, feel free to override it. */
+  box-shadow: 0 0 3px 1px #227755;
+}</pre>
+
+<p>Now, let's handle the list of options:</p>
+
+<pre class="brush: css">/* The .select selector here is syntactic sugar to be sure the classes we define are
+   the ones inside our widget. */
+.select .optList {
+  /* This will make sure our list of options will be displayed below the value
+     and out of the HTML flow */
+  position : absolute;
+  top      : 100%;
+  left     : 0;
+}</pre>
+
+<p>We need an extra class to handle when the list of options is hidden. This is necessary in order to manage the differences between the active state and the open state that do not exactly match.</p>
+
+<pre class="brush: css">.select .optList.hidden {
+  /* This is a simple way to hide the list in an accessible way,
+     we will talk more about accessibility in the end */
+  max-height: 0;
+  visibility: hidden;
+}</pre>
+
+<h4 id="Beautification">Beautification</h4>
+
+<p>So now that we have the basic functionality in place, the fun can start. The following is just an example of what is possible, and will match the screenshot at the beginning of this article. However, you should feel free to experiment and see what you can come up with.</p>
+
+<pre class="brush: css">.select {
+  /* All sizes will be expressed with the em value for accessibility reasons
+     (to make sure the widget remains resizable if the user uses the
+     browser's zoom in a text-only mode). The computations are made
+     assuming 1em == 16px which is the default value in most browsers.
+     If you are lost with px to em conversion, try http://riddle.pl/emcalc/ */
+  font-size   : 0.625em; /* this (10px) is the new font size context for em value in this context */
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  /* We need extra room for the down arrow we will add */
+  padding : .1em 2.5em .2em .5em; /* 1px 25px 2px 5px */
+  width   : 10em; /* 100px */
+
+  border        : .2em solid #000; /* 2px */
+  border-radius : .4em; /* 4px */
+  box-shadow    : 0 .1em .2em rgba(0,0,0,.45); /* 0 1px 2px */
+
+  /* The first declaration is for browsers that do not support linear gradients.
+     The second declaration is because WebKit based browsers haven't unprefixed it yet.
+     If you want to support legacy browsers, try http://www.colorzilla.com/gradient-editor/ */
+  background : #F0F0F0;
+  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+  /* Because the value can be wider than our widget, we have to make sure it will not
+     change the widget's width */
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  vertical-align: top;
+
+  /* And if the content overflows, it's better to have a nice ellipsis. */
+  white-space  : nowrap;
+  text-overflow: ellipsis;
+}</pre>
+
+<p>We don't need an extra element to design the down arrow; instead, we're using the {{cssxref(":after")}} pseudo-element. However, it could also be implemented using a simple background image on the <code>select</code> class.</p>
+
+<pre class="brush: css">.select:after {
+  content : "▼"; /* We use the unicode caracter U+25BC; see http://www.utf8-chartable.de */
+  position: absolute;
+  z-index : 1; /* This will be important to keep the arrow from overlapping the list of options */
+  top     : 0;
+  right   : 0;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  height  : 100%;
+  width   : 2em;  /* 20px */
+  padding-top : .1em; /* 1px */
+
+  border-left  : .2em solid #000; /* 2px */
+  border-radius: 0 .1em .1em 0;  /* 0 1px 1px 0 */
+
+  background-color : #000;
+  color : #FFF;
+  text-align : center;
+}</pre>
+
+<p>Next, let's style the list of options:</p>
+
+<pre class="brush: css">.select .optList {
+  z-index : 2; /* We explicitly said the list of options will always overlap the down arrow */
+
+  /* this will reset the default style of the ul element */
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  /* This will ensure that even if the values are smaller than the widget,
+     the list of options will be as large as the widget itself */
+  min-width : 100%;
+
+  /* In case the list is too long, its content will overflow vertically
+     (which will add a vertical scrollbar automatically) but never horizontally
+     (because we haven't set a width, the list will adjust its width automatically.
+     If it can't, the content will be truncated) */
+  max-height: 10em; /* 100px */
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  border: .2em solid #000; /* 2px */
+  border-top-width : .1em; /* 1px */
+  border-radius: 0 0 .4em .4em; /* 0 0 4px 4px */
+
+  box-shadow: 0 .2em .4em rgba(0,0,0,.4); /* 0 2px 4px */
+  background: #f0f0f0;
+}</pre>
+
+<p>For the options, we need to add a <code>highlight</code> class to be able to identify the value the user will pick (or has picked).</p>
+
+<pre class="brush: css">.select .option {
+  padding: .2em .3em; /* 2px 3px */
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFFFFF;
+}</pre>
+
+<p>So here's the result with our three states:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col" style="text-align: center;">Basic state</th>
+   <th scope="col" style="text-align: center;">Active state</th>
+   <th scope="col" style="text-align: center;">Open state</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{EmbedLiveSample("Basic_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}</td>
+   <td>{{EmbedLiveSample("Active_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}</td>
+   <td>{{EmbedLiveSample("Open_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}</td>
+  </tr>
+  <tr>
+   <td colspan="3" style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_1" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_1">Check out the source code</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Bring_your_widget_to_life_with_JavaScript">Bring your widget to life with JavaScript</h2>
+
+<p>Now that our design and structure are ready, we can write the JavaScript code to make the widget actually work.</p>
+
+<div class="warning">
+<p><strong>Warning:</strong> The following code is educational and should not be used as-is. Among many things, as we'll see, it is not future-proof and it will not work on legacy browsers. It also has redundant parts that should be optimized in production code.</p>
+</div>
+
+<div class="note">
+<p><strong>Note:</strong> Creating reusable widgets is something that can be a bit tricky. The <a href="http://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html" rel="external" title="http://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html">W3C Web Component draft</a> is one of the answers to this specific issue. <a href="http://x-tags.org/" rel="external" title="http://x-tags.org/">The X-Tag project</a> is a test implementation of this specification; we encourage you to take a look at it.</p>
+</div>
+
+<h3 id="Why_isn't_it_working">Why isn't it working?</h3>
+
+<p>Before we start, it's important to remember something very important about JavaScript: inside a browser, <strong>it's an unreliable technology</strong>. When you are building custom widgets, you'll have to rely on JavaScript because it's a necessary thread to tie everything together. However, there are many cases in which JavaScript isn't able to run in the browser:</p>
+
+<ul>
+ <li>The user has turned off JavaScript: This is the most unusual case ever; very few people turn off JavaScript nowadays.</li>
+ <li>The script is not loading. This is one of the most common cases, especially in the mobile world where the network is not very reliable.</li>
+ <li>The script is buggy. You should always consider this possibility.</li>
+ <li>The script is in conflict with a third party script. This can happen with tracking scripts or any bookmarklets the user uses.</li>
+ <li>The script is in conflict with, or is affected by, a browser extension (such as Firefox's <a href="https://addons.mozilla.org/fr/firefox/addon/noscript/" rel="external" title="https://addons.mozilla.org/fr/firefox/addon/noscript/">NoScript</a> extension or Chrome's <a href="https://chrome.google.com/webstore/detail/notscripts/odjhifogjcknibkahlpidmdajjpkkcfn" rel="external" title="https://chrome.google.com/webstore/detail/notscripts/odjhifogjcknibkahlpidmdajjpkkcfn">NotScripts</a> extension).</li>
+ <li>The user is using a legacy browser, and one of the features you require is not supported. This will happen frequently when you make use of cutting-edge APIs.</li>
+</ul>
+
+<p>Because of these risks, it's really important to seriously consider what will happen if JavaScript isn't working. Dealing in detail with this issue is out of the scope of this article because it's closely linked to how you want to make your script generic and reusable, but we'll consider the basics of this in our example.</p>
+
+<p>In our example, if our JavaScript code isn't running, we'll fall back to displaying a standard {{HTMLElement("select")}} element. To achieve this, we need two things.</p>
+
+<p>First, we need to add a regular {{HTMLElement("select")}} element before each use of our custom widget. This is actually also required in order to be able to send data from our custom widget along with the rest of our form data; more about this later.</p>
+
+<pre class="brush: html">&lt;body class="no-widget"&gt;
+  &lt;form&gt;
+    &lt;select name="myFruit"&gt;
+      &lt;option&gt;Cherry&lt;/option&gt;
+      &lt;option&gt;Lemon&lt;/option&gt;
+      &lt;option&gt;Banana&lt;/option&gt;
+      &lt;option&gt;Strawberry&lt;/option&gt;
+      &lt;option&gt;Apple&lt;/option&gt;
+    &lt;/select&gt;
+
+    &lt;div class="select"&gt;
+      &lt;span class="value"&gt;Cherry&lt;/span&gt;
+      &lt;ul class="optList hidden"&gt;
+        &lt;li class="option"&gt;Cherry&lt;/li&gt;
+        &lt;li class="option"&gt;Lemon&lt;/li&gt;
+        &lt;li class="option"&gt;Banana&lt;/li&gt;
+        &lt;li class="option"&gt;Strawberry&lt;/li&gt;
+        &lt;li class="option"&gt;Apple&lt;/li&gt;
+      &lt;/ul&gt;
+    &lt;/div&gt;
+  &lt;/form&gt;
+
+&lt;/body&gt;</pre>
+
+<p>Second, we need two new classes to let us hide the unneeded element (that is, the "real" {{HTMLElement("select")}} element if our script isn't running, or the custom widget if it is running). Note that by default, our HTML code hides our custom widget.</p>
+
+<pre class="brush: css">.widget select,
+.no-widget .select {
+  /* This CSS selector basically says:
+     - either we have set the body class to "widget" and thus we hide the actual {{HTMLElement("select")}} element
+     - or we have not changed the body class, therefore the body class is still "no-widget",
+       so the elements whose class is "select" must be hidden */
+  position : absolute;
+  left     : -5000em;
+  height   : 0;
+  overflow : hidden;
+}</pre>
+
+<p>Now we just need a JavaScript switch to determine if the script is running or not. This switch is very simple: if at page load time our script is running, it will remove the <code>no-widget</code> class and add the <code>widget</code> class, thereby swapping the visibility of the {{HTMLElement("select")}} element and of the custom widget.</p>
+
+<pre class="brush: js">window.addEventListener("load", function () {
+  document.body.classList.remove("no-widget");
+  document.body.classList.add("widget");
+});</pre>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col" style="text-align: center;">Without JS</th>
+   <th scope="col" style="text-align: center;">With JS</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{EmbedLiveSample("No_JS",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_2")}}</td>
+   <td>{{EmbedLiveSample("JS",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_2")}}</td>
+  </tr>
+  <tr>
+   <td colspan="2" style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_2" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_2">Check out the source code</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note:</strong> If you really want to make your code generic and reusable, instead of doing a class switch it's far better to just add the widget class to hide the {{HTMLElement("select")}} elements, and to dynamically add the DOM tree representing the custom widget after every {{HTMLElement("select")}} element in the page.</p>
+</div>
+
+<h3 id="Making_the_job_easier">Making the job easier</h3>
+
+<p>In the code we are about to build, we will use the standard DOM API to do all the work we need. However, although DOM API support has gotten much better in browsers, there are always issues with legacy browsers (especially with good old Internet Explorer).</p>
+
+<p>If you want to avoid trouble with legacy browsers, there are two ways to do so: using a dedicated framework such as <a href="http://jquery.com/" rel="external" title="http://jquery.com/">jQuery</a>, <a href="https://github.com/julienw/dollardom" rel="external" title="https://github.com/julienw/dollardom">$dom</a>, <a href="http://prototypejs.org/" rel="external" title="http://prototypejs.org/">prototype</a>, <a href="http://dojotoolkit.org/" rel="external" title="http://dojotoolkit.org/">Dojo</a>, <a href="http://yuilibrary.com/" rel="external" title="http://yuilibrary.com/">YUI</a>, or the like, or by polyfilling the missing feature you want to use (which can easily be done through conditional loading, with the <a href="http://yepnopejs.com/" rel="external" title="http://yepnopejs.com/">yepnope</a> library for example).</p>
+
+<p>The features we plan to use are the following (ordered from the riskiest to the safest):</p>
+
+<ol>
+ <li>{{domxref("element.classList","classList")}}</li>
+ <li>{{domxref("EventTarget.addEventListener","addEventListener")}}</li>
+ <li><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach">forEach</a></code> (This is not DOM but modern JavaScript)</li>
+ <li>{{domxref("element.querySelector","querySelector")}} and {{domxref("element.querySelectorAll","querySelectorAll")}}</li>
+</ol>
+
+<p>Beyond the availability of those specific features, there is still one issue remaining before starting. The object returned by the {{domxref("element.querySelectorAll","querySelectorAll()")}} function is a {{domxref("NodeList")}} rather than an <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code>. This is important because <code>Array</code> objects support the <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach">forEach</a></code> function, but {{domxref("NodeList")}} doesn't. Because {{domxref("NodeList")}} really looks like an <code>Array</code> and because <code>forEach</code> is so convenient to use, we can easily add the support of <code>forEach</code> to {{domxref("NodeList")}} in order to make our life easier, like so:</p>
+
+<pre class="brush: js">NodeList.prototype.forEach = function (callback) {
+  Array.prototype.forEach.call(this, callback);
+}</pre>
+
+<p>We weren't kidding when we said it's easy to do.</p>
+
+<h3 id="Building_event_callbacks">Building event callbacks</h3>
+
+<p>The ground is ready, we can now start to define all the functions that will be used each time the user interacts with our widget.</p>
+
+<pre class="brush: js">// This function will be used each time we want to deactivate a custom widget
+// It takes one parameter
+// select : the DOM node with the `select` class to deactivate
+function deactivateSelect(select) {
+
+  // If the widget is not active there is nothing to do
+  if (!select.classList.contains('active')) return;
+
+  // We need to get the list of options for the custom widget
+  var optList = select.querySelector('.optList');
+
+  // We close the list of option
+  optList.classList.add('hidden');
+
+  // and we deactivate the custom widget itself
+  select.classList.remove('active');
+}
+
+// This function will be used each time the user wants to (de)activate the widget
+// It takes two parameters:
+// select : the DOM node with the `select` class to activate
+// selectList : the list of all the DOM nodes with the `select` class
+function activeSelect(select, selectList) {
+
+  // If the widget is already active there is nothing to do
+  if (select.classList.contains('active')) return;
+
+  // We have to turn off the active state on all custom widgets
+  // Because the deactivateSelect function fulfill all the requirement of the
+  // forEach callback function, we use it directly without using an intermediate
+  // anonymous function.
+  selectList.forEach(deactivateSelect);
+
+  // And we turn on the active state for this specific widget
+  select.classList.add('active');
+}
+
+// This function will be used each time the user wants to open/closed the list of options
+// It takes one parameter:
+// select : the DOM node with the list to toggle
+function toggleOptList(select) {
+
+  // The list is kept from the widget
+  var optList = select.querySelector('.optList');
+
+  // We change the class of the list to show/hide it
+  optList.classList.toggle('hidden');
+}
+
+// This function will be used each time we need to highlight an option
+// It takes two parameters:
+// select : the DOM node with the `select` class containing the option to highlight
+// option : the DOM node with the `option` class to highlight
+function highlightOption(select, option) {
+
+  // We get the list of all option available for our custom select element
+  var optionList = select.querySelectorAll('.option');
+
+  // We remove the highlight from all options
+  optionList.forEach(function (other) {
+    other.classList.remove('highlight');
+  });
+
+  // We highlight the right option
+  option.classList.add('highlight');
+};</pre>
+
+<p>That's all you need in order to handle the various states of the custom widget.</p>
+
+<p>Next, we bind these functions to the appropriate events:</p>
+
+<pre class="brush: js">// We handle the event binding when the document is loaded.
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+  // Each custom widget needs to be initialized
+  selectList.forEach(function (select) {
+
+    // as well as all its `option` elements
+    var optionList = select.querySelectorAll('.option');
+
+    // Each time a user hovers their mouse over an option, we highlight the given option
+    optionList.forEach(function (option) {
+      option.addEventListener('mouseover', function () {
+        // Note: the `select` and `option` variable are closures
+        // available in the scope of our function call.
+        highlightOption(select, option);
+      });
+    });
+
+    // Each times the user click on a custom select element
+    select.addEventListener('click', function (event) {
+      // Note: the `select` variable is a closure
+      // available in the scope of our function call.
+
+      // We toggle the visibility of the list of options
+      toggleOptList(select);
+    });
+
+    // In case the widget gain focus
+    // The widget gains the focus each time the user clicks on it or each time
+    // they use the tabulation key to access the widget
+    select.addEventListener('focus', function (event) {
+      // Note: the `select` and `selectList` variable are closures
+      // available in the scope of our function call.
+
+      // We activate the widget
+      activeSelect(select, selectList);
+    });
+
+    // In case the widget loose focus
+    select.addEventListener('blur', function (event) {
+      // Note: the `select` variable is a closure
+      // available in the scope of our function call.
+
+      // We deactivate the widget
+      deactivateSelect(select);
+    });
+  });
+});</pre>
+
+<p>At that point, our widget will change state according to our design, but its value doesn't get updated yet. We'll handle that next.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col" style="text-align: center;">Live example</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_3")}}</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_3" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_3">Check out the source code</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Handling_the_widget's_value">Handling the widget's value</h3>
+
+<p>Now that our widget is working, we have to add code to update its value according to user input and make it possible to send the value along with form data.</p>
+
+<p>The easiest way to do this is to use a native widget under the hood. Such a widget will keep track of the value with all the built-in controls provided by the browser, and the value will be sent as usual when a form is submitted. There's no point in reinventing the wheel when we can have all this done for us.</p>
+
+<p>As seen previously, we already use a native select widget as a fallback for accessibility reasons; we can simply synchronize its value with that of our custom widget:</p>
+
+<pre class="brush: js">// This function updates the displayed value and synchronizes it with the native widget.
+// It takes two parameters:
+// select : the DOM node with the class `select` containing the value to update
+// index  : the index of the value to be selected
+function updateValue(select, index) {
+  // We need to get the native widget for the given custom widget
+  // In our example, that native widget is a sibling of the custom widget
+  var nativeWidget = select.previousElementSibling;
+
+  // We also need  to get the value placeholder of our custom widget
+  var value = select.querySelector('.value');
+
+  // And we need the whole list of options
+  var optionList = select.querySelectorAll('.option');
+
+  // We set the selected index to the index of our choice
+  nativeWidget.selectedIndex = index;
+
+  // We update the value placeholder accordingly
+  value.innerHTML = optionList[index].innerHTML;
+
+  // And we highlight the corresponding option of our custom widget
+  highlightOption(select, optionList[index]);
+};
+
+// This function returns the current selected index in the native widget
+// It takes one parameter:
+// select : the DOM node with the class `select` related to the native widget
+function getIndex(select) {
+  // We need to access the native widget for the given custom widget
+  // In our example, that native widget is a sibling of the custom widget
+  var nativeWidget = select.previousElementSibling;
+
+  return nativeWidget.selectedIndex;
+};</pre>
+
+<p>With these two functions, we can bind the native widgets to the custom ones:</p>
+
+<pre class="brush: js">// We handle event binding when the document is loaded.
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+  // Each custom widget needs to be initialized
+  selectList.forEach(function (select) {
+    var optionList = select.querySelectorAll('.option'),
+        selectedIndex = getIndex(select);
+
+    // We make our custom widget focusable
+    select.tabIndex = 0;
+
+    // We make the native widget no longer focusable
+    select.previousElementSibling.tabIndex = -1;
+
+    // We make sure that the default selected value is correctly displayed
+    updateValue(select, selectedIndex);
+
+    // Each time a user clicks on an option, we update the value accordingly
+    optionList.forEach(function (option, index) {
+      option.addEventListener('click', function (event) {
+        updateValue(select, index);
+      });
+    });
+
+    // Each time a user uses their keyboard on a focused widget, we update the value accordingly
+    select.addEventListener('keyup', function (event) {
+      var length = optionList.length,
+          index  = getIndex(select);
+
+      // When the user hits the down arrow, we jump to the next option
+      if (event.keyCode === 40 &amp;&amp; index &lt; length - 1) { index++; }
+
+      // When the user hits the up arrow, we jump to the previous option
+      if (event.keyCode === 38 &amp;&amp; index &gt; 0) { index--; }
+
+      updateValue(select, index);
+    });
+  });
+});</pre>
+
+<p>In the code above, it's worth noting the use of the <code><a href="/en-US/docs/Web/API/HTMLElement/tabIndex" title="/en-US/docs/Web/API/HTMLElement/tabIndex">tabIndex</a></code> property. Using this property is necessary to ensure that the native widget will never gain focus, and to make sure that our custom widget gains focus when the user uses his keyboard or his mouse.</p>
+
+<p>With that, we're done! Here's the result:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col" style="text-align: center;">Live example</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_4")}}</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_4" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_4">Check out the source code</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>But wait a second, are we really done?</p>
+
+<h2 id="Make_it_accessible">Make it accessible</h2>
+
+<p>We have built something that works and though we're far from a fully-featured select box, it works nicely. But what we've done is nothing more than fiddle with the DOM. It has no real semantics, and even though it looks like a select box, from the browser's point of view it isn't one, so assistive technologies won't be able to understand it's a select box. In short, this pretty new select box isn't accessible!</p>
+
+<p>Fortunately, there is a solution and it's called <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a>. ARIA stands for "Accessible Rich Internet Application", and it's <a href="http://www.w3.org/TR/wai-aria/" rel="external" title="http://www.w3.org/TR/wai-aria/">a W3C specification</a> specifically designed for what we are doing here: making web applications and custom widgets accessible. It's basically a set of attributes that extend HTML so that we can better describe roles, states and properties as though the element we've just devised was the native element it tries to pass for. Using these attributes is dead simple, so let's do it.</p>
+
+<h3 id="The_role_attribute">The <code>role</code> attribute</h3>
+
+<p>The key attribute used by <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a> is the <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques"><code>role</code></a> attribute. The <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques"><code>role</code></a> attribute accepts a value that defines what an element is used for. Each role defines its own requirements and behaviors. In our example, we will use the <code><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role">listbox</a></code> role. It's a "composite role", which means elements with that role expect to have children, each with a specific role (in this case, at least one child with the <code>option</code> role).</p>
+
+<p>It's also worth noting that ARIA defines roles that are applied by default to standard HTML markup. For example, the {{HTMLElement("table")}} element matches the role <code>grid</code>, and the {{HTMLElement("ul")}} element matches the role <code>list</code>. Because we use a {{HTMLElement("ul")}} element, we want to make sure the <code>listbox</code> role of our widget will supersede the <code>list</code> role of the {{HTMLElement("ul")}} element. To that end, we will use the role <code>presentation</code>. This role is designed to let us indicate that an element has no special meaning, and is used solely to present information. We will apply it to our {{HTMLElement("ul")}} element.</p>
+
+<p>To support the <code><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role">listbox</a></code> role, we just have to update our HTML like this:</p>
+
+<pre class="brush: html">&lt;!-- We add the role="listbox" attribute to our top element --&gt;
+&lt;div class="select" role="listbox"&gt;
+  &lt;span class="value"&gt;Cherry&lt;/span&gt;
+  &lt;!-- We also add the role="presentation" to the ul element --&gt;
+  &lt;ul class="optList" role="presentation"&gt;
+    &lt;!-- And we add the role="option" attribute to all the li elements --&gt;
+    &lt;li role="option" class="option"&gt;Cherry&lt;/li&gt;
+    &lt;li role="option" class="option"&gt;Lemon&lt;/li&gt;
+    &lt;li role="option" class="option"&gt;Banana&lt;/li&gt;
+    &lt;li role="option" class="option"&gt;Strawberry&lt;/li&gt;
+    &lt;li role="option" class="option"&gt;Apple&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;</pre>
+
+<div class="note">
+<p><strong>Note:</strong> Including both the <code>role</code> attribute and a <code>class</code> attribute is only necessary if you want to support legacy browsers that do not support the <a href="/en-US/docs/CSS/Attribute_selectors" title="/en-US/docs/CSS/Attribute_selectors">CSS attribute selectors</a>.</p>
+</div>
+
+<h3 id="The_aria-selected_attribute">The <code>aria-selected</code> attribute</h3>
+
+<p>Using the <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques"><code>role</code></a> attribute is not enough. <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a> also provides many states and property attributes. The more and better you use them, the better your widget will be understood by assistive technologies. In our case, we will limit our usage to one attribute: <code>aria-selected</code>.</p>
+
+<p>The <code>aria-selected</code> attribute is used to mark which option is currently selected; this lets assistive technologies inform the user what the current selection is. We will use it dynamically with JavaScript to mark the selected option each time the user chooses one. To that end, we need to revise our <code>updateValue()</code> function:</p>
+
+<pre class="brush: js">function updateValue(select, index) {
+  var nativeWidget = select.previousElementSibling;
+  var value = select.querySelector('.value');
+  var optionList = select.querySelectorAll('.option');
+
+  // We make sure that all the options are not selected
+  optionList.forEach(function (other) {
+    other.setAttribute('aria-selected', 'false');
+  });
+
+  // We make sure the chosen option is selected
+  optionList[index].setAttribute('aria-selected', 'true');
+
+  nativeWidget.selectedIndex = index;
+  value.innerHTML = optionList[index].innerHTML;
+  highlightOption(select, optionList[index]);
+};</pre>
+
+<p>Here is the final result of all these changes (you'll get a better feel for this by trying it with an assistive technology such as <a href="http://www.nvda-project.org/" rel="external" title="http://www.nvda-project.org/">NVDA</a> or <a href="http://www.apple.com/accessibility/voiceover/" rel="external" title="http://www.apple.com/accessibility/voiceover/">VoiceOver</a>):</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col" style="text-align: center;">Live example</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_5")}}</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_5" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_2">Check out the final source code</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>We have seen all the basics of building a custom form widget, but as you can see it's not trivial to do, and often it's better and easier to rely on third-party libraries instead of coding them from scratch yourself (unless, of course, your goal is to build such a library).</p>
+
+<p>Here are a few libraries you should consider before coding your own:</p>
+
+<ul>
+ <li><a href="http://jqueryui.com/" rel="external" title="http://jqueryui.com/">jQuery UI</a></li>
+ <li><a href="https://github.com/marghoobsuleman/ms-Dropdown" rel="external" title="https://github.com/marghoobsuleman/ms-Dropdown">msDropDown</a></li>
+ <li><a href="http://www.emblematiq.com/lab/niceforms/" rel="external" title="http://www.emblematiq.com/lab/niceforms/">Nice Forms</a></li>
+ <li><a href="https://www.google.fr/search?q=HTML+custom+form+controls&amp;ie=utf-8&amp;oe=utf-8&amp;aq=t&amp;rls=org.mozilla:fr:official&amp;client=firefox-a" rel="external" title="https://www.google.fr/search?q=HTML+custom+form+controls&amp;ie=utf-8&amp;oe=utf-8&amp;aq=t&amp;rls=org.mozilla:fr:official&amp;client=firefox-a">And many more…</a></li>
+</ul>
+
+<p>If you want to move forward, the code in this example needs some improvement before it becomes generic and reusable. This is an exercise you can try to perform. Two hints to help you in this: the first argument for all our functions is the same, which means those functions need the same context. Building an object to share that context would be wise. Also, you need to make it feature-proof; that is, it needs to be able to work better with a variety of browsers whose compatibility with the Web standards they use vary. Have fun!</p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}</p>
+
+<p> </p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Your first HTML form</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">The native form widgets</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/es/learn/html/forms/how_to_structure_an_html_form/index.html b/files/es/learn/html/forms/how_to_structure_an_html_form/index.html
new file mode 100644
index 0000000000..45f58520d1
--- /dev/null
+++ b/files/es/learn/html/forms/how_to_structure_an_html_form/index.html
@@ -0,0 +1,320 @@
+---
+title: Cómo estructurar un formulario HTML
+slug: Learn/HTML/Forms/How_to_structure_an_HTML_form
+translation_of: Learn/Forms/How_to_structure_a_web_form
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Forms/Your_first_form", "Learn/Forms/Basic_native_form_controls", "Learn/Forms")}}</div>
+
+<p class="summary">Una vez examinados los conceptos básicos, vamos a ver más en detalle los elementos que se utilizan para proporcionar estructura y significado a las diferentes partes de un formulario.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática y de <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">lenguajes HTML</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Entender cómo se estructuran los formularios HTML y se les proporciona semántica para dotarlos de criterios de usabilidad y accesibilidad.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>La flexibilidad que presentan los formularios los convierte en una de las estructuras más complejas en <a href="/es/docs/Learn/HTML" title="/en-US/docs/HTML">HTML</a>, puesto que puedes crear cualquier tipo de formulario básico a partir de los elementos y atributos destinados a esta función. El uso de una estructura correcta al crear un formulario HTML te ayudará a garantizar que el formulario presente las características de usabilidad y <a href="/es/docs/Learn/Accessibility">accesibilidad </a> adecuadas.</p>
+
+<h2 id="El_elemento_&lt;form>">El elemento &lt;form&gt;</h2>
+
+<p>El elemento {{HTMLElement ("form")}} define formalmente un formulario y los atributos que determinan el comportamiento del formulario. Cada vez que desees crear un formulario HTML, debes empezar utilizando este elemento y anidando todo el contenido dentro de él. Muchas tecnologías de asistencia y complementos del navegador pueden descubrir elementos {{HTMLElement ("form")}} e implementar códigos de apoyo (<em>hooks</em>) especiales para que sean más fáciles de usar.</p>
+
+<p>Ya lo vimos en el artículo anterior.</p>
+
+<div class="warning"><strong>Advertencia:</strong> Está estrictamente prohibido anidar un formulario dentro de otro formulario. Anidar formularios no es una buena idea porque puede ocasionar comportamientos impredecibles.</div>
+
+<p>Siempre es posible usar controles de formulario fuera de un elemento {{HTMLElement ("form")}}. Si la haces, por defecto ese control no tiene nada que ver con ningún formulario, a menos que lo asocies a algún formulario con el atributo <a href="/en-US/docs/Web/HTML/Attributes/form"><code>form</code></a>. Esto se introdujo para permitir vincular explícitamente un control a un formulario, incluso si este no está dentro de él.</p>
+
+<p>A continuación vamos a exponer los elementos estructurales que encontrarás en un formulario.</p>
+
+<h2 id="Los_elementos_&lt;fieldset>_y_&lt;legend>">Los elementos &lt;fieldset&gt; y &lt;legend&gt;</h2>
+
+<p>El elemento {{HTMLElement ("fieldset")}} es una forma cómoda de crear grupos de controles de formulario (también denominados <em>widgets</em>) que comparten el mismo propósito, con fines semánticos y de aplicación de estilo. Puedes etiquetar un elemento {{HTMLElement ("fieldset")}} incluyendo un elemento {{HTMLElement ("legend")}} justo debajo de la etiqueta de apertura {{HTMLElement ("fieldset")}}. El contenido textual del elemento {{HTMLElement ("legend")}} describe formalmente el propósito del elemento {{HTMLElement ("fieldset")}} que está incluido dentro.</p>
+
+<p>Muchas tecnologías de asistencia utilizarán el elemento {{HTMLElement ("legend")}} como si fuera una parte de la etiqueta de cada control dentro del elemento {{HTMLElement ("fieldset")}} correspondiente. Por ejemplo, algunos lectores de pantalla como <a href="http://www.freedomscientific.com/products/software/jaws/" rel="external" title="http://www.freedomscientific.com/products/fs/jaws-product-page.asp">Jaws</a> y <a href="http://www.nvda-project.org/" rel="external" title="http://www.nvda-project.org/">NVDA</a> leerán el contenido de la leyenda antes de decir la etiqueta de cada control.</p>
+
+<p>Un pequeño ejemplo:</p>
+
+<pre class="brush:html; notranslate">&lt;form&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Tamaño del zumo de fruta&lt;/legend&gt;
+    &lt;p&gt;
+      &lt;input type="radio" name="size" id="size_1" value="small"&gt;
+      &lt;label for="size_1"&gt;Pequeño&lt;/label&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="radio" name="size" id="size_2" value="medium"&gt;
+      &lt;label for="size_2"&gt;Mediano&lt;/label&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="radio" name="size" id="size_3" value="large"&gt;
+      &lt;label for="size_3"&gt;Grande&lt;/label&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Puedes encontrar este ejemplo en <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/fieldset-legend.html">fieldset-legend.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/fieldset-legend.html">consúltalo en vivo</a>).</p>
+</div>
+
+<p>Al leer el formulario anterior, un lector de pantalla dirá «Tamaño del zumo de fruta: pequeño» para el primer control de formulario, «Tamaño del zumo de fruta: mediano» para el segundo y «Tamaño del zumo de fruta: grande» para el tercero.</p>
+
+<p>El caso de uso que se muestra en este ejemplo es uno de los más importantes. Cada vez que tengas un conjunto de botones de opción, debes anidarlos dentro de un elemento {{HTMLElement ("fieldset")}}. Hay otros casos de uso y el elemento {{HTMLElement ("fieldset")}} también se puede usar en general para seccionar un formulario. Idealmente, los formularios largos deberían tener una extensión de varias páginas, pero si un formulario se alarga y ha de estar contenido en una sola página, colocar las diferentes secciones relacionadas dentro de diferentes conjuntos de campos mejora su usabilidad.</p>
+
+<p>Debido a la influencia que tiene sobre las tecnologías de asistencia, el elemento {{HTMLElement ("fieldset")}} es uno de los elementos clave para crear formularios accesibles. Sin embargo, no hay que abusar de él. Si es posible, cada vez que crees un formulario, intenta <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">escuchar cómo lo interpreta un lector de pantalla</a>. Si suena raro, intenta mejorar la estructura del formulario.</p>
+
+<h2 id="El_elemento_&lt;label>">El elemento &lt;label&gt;</h2>
+
+<p>Como vimos en el artículo anterior, el elemento {{HTMLElement ("label")}} es la forma formal de definir una etiqueta para un control de un formulario HTML. Este es el elemento más importante si deseas crear formularios accesibles porque cuando se implementan correctamente, los lectores de pantalla leen la etiqueta de un elemento de formulario junto con las instrucciones relacionadas, y esto además resulta muy útil para los usuarios videntes. Tomemos este ejemplo que vimos en el artículo anterior:</p>
+
+<pre class="brush: html notranslate">&lt;label for="name"&gt;Nombre:&lt;/label&gt; &lt;input type="text" id="name" name="user_name"&gt;</pre>
+
+<p>Con la etiqueta <code>&lt;label&gt;</code> asociada correctamente con <code>&lt;input&gt;</code> por su atributo <code>for</code> (que contiene el atributo <code>id</code> del elemento <code>&lt;input&gt;</code>), un lector de pantalla leerá algo como «Nombre, editar texto».</p>
+
+<p>Hay otra forma de asociar un control de formulario con una etiqueta: asociarlo implícitamente anidando el control de formulario dentro de <code>&lt;label&gt;</code>.</p>
+
+<pre class="brush: html notranslate">&lt;label for="name"&gt;
+  Nombre: &lt;input type="text" id="name" name="user_name"&gt;
+&lt;/label&gt;</pre>
+
+<p>Incluso en estos casos, se aconseja establecer el atributo <code>for</code> para garantizar que todas las tecnologías de asistencia comprendan la relación entre la etiqueta y el control de formulario.</p>
+
+<p>Si no hay ninguna etiqueta, o si el control de formulario no está asociado implícita o explícitamente con alguna etiqueta, un lector de pantalla leerá algo así como «Editar texto en blanco», lo cual no es de mucha ayuda.</p>
+
+<h3 id="¡También_se_puede_hacer_clic_en_las_etiquetas!">¡También se puede hacer clic en las etiquetas!</h3>
+
+<p>Otra ventaja de configurar correctamente las etiquetas es que puedes hacer clic o pulsar en la etiqueta para activar el control de formulario correspondiente. Esto es útil para controles como entradas de texto, donde puedes hacer clic tanto en la etiqueta como en la entrada de texto para proporcionar el foco al control de formulario, pero es útil especialmente para botones de opción y casillas de verificación, porque la zona sensible de este control puede ser muy pequeña, y puede ser útil para facilitar su activación.</p>
+
+<p>Por ejemplo, al hacer clic en el texto de la etiqueta «Me gustan las cerezas» del ejemplo siguiente, cambiará el estado seleccionado de la casilla de verificación <em>taste_cherry</em>:</p>
+
+<pre class="brush:html; notranslate">&lt;form&gt;
+  &lt;p&gt;
+    &lt;input type="checkbox" id="taste_1" name="taste_cherry" value="cherry"&gt;
+    &lt;label for="taste_1"&gt;Me gustan las cerezas&lt;/label&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;input type="checkbox" id="taste_2" name="taste_banana" value="banana"&gt;
+    &lt;label for="taste_2"&gt;Me gustan los plátanos&lt;/label&gt;
+  &lt;/p&gt;
+&lt;/form&gt;</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Puedes encontrar este ejemplo en <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/checkbox-label.html">checkbox-label.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/checkbox-label.html">consúltalo en vivo</a>).</p>
+</div>
+
+<h3 id="Etiquetas_múltiples">Etiquetas múltiples</h3>
+
+<p>Estrictamente hablando, es posible poner varias etiquetas en un solo control de formulario, pero no suele ser una buena idea porque algunas tecnologías de asistencia pueden tener problemas para manejarlas. En caso de tener varias etiquetas, hay que anidar el control de formulario y sus etiquetas dentro de un único elemento {{htmlelement ("label")}}.</p>
+
+<p>Consideremos este ejemplo:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Los campos obligatorios se marcan con un &lt;abbr title = "required"&gt;*&lt;/abbr&gt;.&lt;/p&gt;
+
+&lt;!-- Así que esto: --&gt;
+&lt;div&gt;
+  &lt;label for="username"&gt;Nombre:&lt;/label&gt;
+  &lt;input type="text" name="username"&gt;
+  &lt;label for="username"&gt;&lt;abbr title="required" aria-label="required"&gt;*&lt;/abbr&gt;&lt;/label&gt;
+&lt;/div&gt;
+
+&lt;!-- sería mejor hacerlo así: --&gt;
+&lt;div&gt;
+  &lt;label for="username"&gt;
+    &lt;span&gt;Nombre:&lt;/span&gt;
+    &lt;input id="username" type="text" name="username"&gt;
+    &lt;abbr title="required" aria-label="required"&gt;*&lt;/abbr&gt;
+  &lt;/label&gt;
+&lt;/div&gt;
+
+&lt;!-- Pero probablemente lo mejor es esto: --&gt;
+&lt;div&gt;
+  &lt;label for="username"&gt;Nombre: &lt;abbr title="required" aria-label="required"&gt;*&lt;/abbr&gt;&lt;/label&gt;
+  &lt;input id="username" type="text" name="username"&gt;
+&lt;/div&gt;</pre>
+
+<p>{{EmbedLiveSample("Etiquetas_múltiples", 120, 120)}}</p>
+
+<p>El párrafo de la parte superior establece una regla para los elementos que son obligatorios. La regla ha de incluirse <em>antes</em> de usarse para que tanto los usuarios videntes como los usuarios que utilizan tecnologías de asistencia y lectores de pantalla, sepan lo que significa antes de encontrar un elemento obligatorio. Pero si bien esto ayuda a informar a los usuarios de lo que significa un asterisco, no es posible confiar plenamente en ello. Cuando un lector de pantalla se encuentre con un asterisco pronunciará «estrella». Cuando un usuario vidente pase el ratón por encima, debería aparecer una etiqueta de «obligatorio», lo cual se logra con el uso del atributo <code>title</code>. Pero los títulos que se leen en voz alta dependen de la configuración del lector de pantalla, por lo que es más fiable incluir también el atributo <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute">aria-label</a></code>, que los lectores de pantalla siempre leen.</p>
+
+<p>Las variantes anteriores aumentan en efectividad a medida que se avanza por ellas:</p>
+
+<ul>
+ <li>En el primer ejemplo, la etiqueta no se lee en absoluto con la entrada de texto; solo se obtiene «Editar texto en blanco», y además las etiquetas se leen por separado. Los múltiples elementos <code>&lt;label&gt;</code> confunden al lector de pantalla.</li>
+ <li>En el segundo ejemplo, las cosas son un poco más claras: la etiqueta que se lee junto con la entrada de texto es «Editar texto nombre estrella nombre obligatorio», pero las etiquetas aún se leen por separado. Las cosas continúan siendo un poco confusas, pero esta vez funciona algo mejor porque <code>&lt;input&gt;</code> tiene una etiqueta asociada.</li>
+ <li>El tercer ejemplo es el mejor: la etiqueta se lee en conjunto, y la etiqueta que se lee con la entrada es «Editar texto nombre requerido».</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Es posible que obtengas resultados ligeramente diferentes dependiendo de tu lector de pantalla. Esta prueba se hizo con VoiceOver (NVDA se comporta de manera similar). Nos encantaría conocer tus experiencias.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Puedes encontrar este ejemplo en GitHub como <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/required-labels.html">required-labels.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/required-labels.html">o consultarlo en vivo</a>). No pruebes el ejemplo con las dos o tres versiones sin los comentarios porque los lectores de pantalla se confundirán si hay múltiples etiquetas y múltiples entradas con el mismo ID.</p>
+</div>
+
+<h2 id="Estructuras_HTML_comunes_que_se_utilizan_en_los_formularios">Estructuras HTML comunes que se utilizan en los formularios</h2>
+
+<p>Más allá de las estructuras específicas de los formularios web, es bueno recordar que el marcado de los formularios es solo HTML. Esto significa que puedes usar todo el poder del HTML para estructurar un formulario web.</p>
+
+<p>Como puedes ver en los ejemplos, es una práctica común delimitar una etiqueta y su control de formulario con un elemento {{HTMLElement ("li")}} dentro de una lista {{HTMLElement ("ul")}} o {{HTMLElement ("ol")}}. Los elementos {{HTMLElement ("p")}} y {{HTMLElement ("div")}} también se usan con frecuencia. Se recomiendan las listas para estructurar múltiples casillas de verificación o botones de opción.</p>
+
+<p>Además del elemento {{HTMLElement ("fieldset")}}, también es una práctica común usar títulos HTML (por ejemplo, {{htmlelement ("h1")}}, {{htmlelement ("h2")}}), y seccionar (por ejemplo, {{htmlelement ("section")}}), para estructurar formas complejas.</p>
+
+<p>Depende de ti, sobre todo, encontrar un estilo de codificación cómodo que dé como resultado formas con buena accesibilidad y usabilidad. Las secciones independientes con funciones diferentes deben estar contenidas en elementos {{htmlelement ("section")}} separados, con elementos {{htmlelement ("fieldset")}} para contener botones de opción.</p>
+
+<h3 id="Aprendizaje_activo_construir_una_estructura_de_formulario">Aprendizaje activo: construir una estructura de formulario</h3>
+
+<p>Pongamos en práctica estas ideas y creemos un formulario un poco más complicado: un formulario de pago. Este formulario contendrá una serie de tipos de control que quizás aún no comprendas. No te preocupes por esto por ahora; en el artículo siguiente descubrirás cómo funcionan (<a href="/es/docs/Learn/HTML/Forms/The_native_form_widgets">Los controles básicos de formulario originales</a>). Por ahora, lee con detenimiento las descripciones y sigue las instrucciones, y empieza a formarte una idea de qué elementos de delimitación se utilizan para estructurar el formulario y por qué.</p>
+
+<ol>
+ <li>Para comenzar, haz una copia local de nuestro <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">archivo de plantilla en blanco</a> y el <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.css">CSS de nuestro formulario de pago</a> en un nuevo directorio de tu ordenador.</li>
+ <li>Añade dentro del elemento HTML {{htmlelement ("head")}} la línea siguiente para aplicar el CSS al HTML:
+  <pre class="brush: html notranslate">&lt;link href="payment-form.css" rel="stylesheet"&gt;</pre>
+ </li>
+ <li>A continuación, añade el elemento externo {{htmlelement ("form")}} para crear tu formulario:
+  <pre class="brush: html notranslate">&lt;form&gt;
+
+&lt;/form&gt;</pre>
+ </li>
+ <li>Añade un encabezado y un párrafo dentro de las etiquetas <code>&lt;form&gt;</code>&gt; para informar a los usuarios cómo se marcan los campos obligatorios:
+  <pre class="brush: html notranslate">&lt;h1&gt;Forma de pago&lt;/h1&gt;
+&lt;p&gt;Los campos obligatorios van seguidos de &lt;strong&gt; &lt;abbr title = "required"&gt; * &lt;/abbr&gt; &lt;/strong&gt;.&lt;/p&gt;</pre>
+ </li>
+ <li>A continuación añadimos al formulario una sección de código más grande, justo debajo de nuestra entrada anterior. Aquí verás que delimitamos con un elemento {{htmlelement ("section")}} independiente los campos con la información de contacto. Además, hay un conjunto de dos botones de opción, cada uno de los cuales colocamos dentro de su elemento de lista ({{htmlelement ("li")}}) propio. También hay dos entradas de texto estándar {{htmlelement ("input")}} y sus elementos {{htmlelement ("label")}} asociados, cada uno anidado dentro de un elemento {{htmlelement ("p")}} y una entrada de texto para introducir una contraseña. Añade este código a tu formulario:
+  <pre class="brush: html notranslate">&lt;section&gt;
+    &lt;h2&gt;Información de contacto&lt;/h2&gt;
+    &lt;fieldset&gt;
+      &lt;legend&gt;Título&lt;/legend&gt;
+      &lt;ul&gt;
+          &lt;li&gt;
+            &lt;label for="title_1"&gt;
+              &lt;input type="radio" id="title_1" name="title" value="K" &gt;
+              Rey
+            &lt;/label&gt;
+          &lt;/li&gt;
+          &lt;li&gt;
+            &lt;label for="title_2"&gt;
+              &lt;input type="radio" id="title_2" name="title" value="Q"&gt;
+              Reina
+            &lt;/label&gt;
+          &lt;/li&gt;
+          &lt;li&gt;
+            &lt;label for="title_3"&gt;
+              &lt;input type="radio" id="title_3" name="title" value="J"&gt;
+              Bufón
+            &lt;/label&gt;
+          &lt;/li&gt;
+      &lt;/ul&gt;
+    &lt;/fieldset&gt;
+    &lt;p&gt;
+      &lt;label for="name"&gt;
+        &lt;span&gt;Nombre:&lt;/span&gt;
+        &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
+      &lt;/label&gt;
+      &lt;input type="text" id="name" name="username"&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;label for="mail"&gt;
+        &lt;Span&gt;Correo electrónico:&lt;/ span&gt;
+        &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
+      &lt;/label&gt;
+      &lt;input type="email" id="mail" name="usermail"&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;label for="pwd"&gt;
+        &lt;span&gt;Contraseña:&lt;/span&gt;
+        &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
+      &lt;/label&gt;
+      &lt;input type="password" id="pwd" name="password"&gt;
+    &lt;/p&gt;
+&lt;/section&gt;</pre>
+ </li>
+ <li>La segunda <code>&lt;section&gt;</code> de nuestro formulario es la información de pago. Hay tres controles diferentes, junto con sus etiquetas, cada uno contenido dentro de un elemento <code>&lt;p&gt;</code>. El primero es un menú desplegable ({{htmlelement ("select")}}) para seleccionar el tipo de tarjeta de crédito. El segundo es un elemento <code>&lt;input&gt;</code> de tipo <code>tel</code>, para introducir un número de tarjeta de crédito. Si bien podríamos haber usado el tipo <code>number</code>, no queremos una interfaz de usuario con control de número. El último es un elemento <code>&lt;input&gt;</code> de tipo <code>date</code>, para introducir la fecha de caducidad de la tarjeta; aparecerá como un control de selección de fecha en navegadores compatibles, y como una entrada de texto normal en navegadores no compatibles. Estos tipos de entrada más nuevos volverán a aparecer en el artículo <a href="/en-US/docs/Learn/Forms/HTML5_input_types">Tipos de entrada HTML5</a>.<br>
+  <br>
+  Introduce los datos siguientes a continuación de la sección anterior:
+  <pre class="brush: html notranslate">&lt;section&gt;
+    &lt;h2&gt;Información de pago&lt;/h2&gt;
+    &lt;p&gt;
+      &lt;label for="card"&gt;
+        &lt;span&gt;Tipo de tarjeta:&lt;/span&gt;
+      &lt;/label&gt;
+      &lt;select id="card" name="usercard"&gt;
+        &lt;option value="visa"&gt;Visa&lt;/option&gt;
+        &lt;option value="mc"&gt;Mastercard&lt;/option&gt;
+        &lt;option value="amex"&gt;American Express&lt;/option&gt;
+      &lt;/select&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;label for="number"&gt;
+        &lt;span&gt;Número de tarjeta:&lt;/span&gt;
+        &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
+      &lt;/label&gt;
+      &lt;input type="tel" id="number" name="cardnumber"&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;label for="date"&gt;
+        &lt;span&gt;Fecha de caducidad:&lt;/span&gt;
+        &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
+        &lt;em&gt;el formato mm/aa&lt;/em&gt;
+      &lt;/label&gt;
+      &lt;input type="date" id="date" name="expiration"&gt;
+    &lt;/p&gt;
+&lt;/section&gt;</pre>
+ </li>
+ <li>La última sección que añadimos es mucho más simple y contiene solo un {{htmlelement ("button")}} de tipo <code>submit</code>, para enviar los datos del formulario. Añádelo al final de tu formulario:
+  <pre class="brush: html notranslate">&lt;p&gt; &lt;button type="submit"&gt;Validar el pago&lt;/button&gt; &lt;/p&gt;</pre>
+ </li>
+</ol>
+
+<p>Debajo puedes ver en acción el formulario terminado (también lo encontrarás en GitHub; consulta el <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.html">código fuente</a> de nuestro payment-form.html y <a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/payment-form.html">ejecútalo en vivo</a>):</p>
+
+<p>{{EmbedLiveSample("A_payment_form","100%",620, "", "/en-US/Learn/Forms/How_to_structure_a_web_form/Example")}}</p>
+
+<h2 id="¡Prueba_tus_habilidades!">¡Prueba tus habilidades!</h2>
+
+<p>Has llegado al final de este artículo pero ¿puedes recordar la información más importante? Puedes encontrar pruebas adicionales para comprobar que has comprendido la información antes de continuar — visita <a class="external external-icon" href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Test_your_skills:_Form_structure" rel="noopener">Prueba tus habilidades: Estructura de formularios</a>.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Ahora tienes todos los conocimientos necesarios para estructurar adecuadamente tus formularios web. Expondremos muchas de las características que se presentan aquí en los artículos siguientes, y el próximo artículo analizará con más detalle el uso de todos los diferentes tipos de controles de formulario que vas a querer usar para recopilar la información de tus usuarios.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="http://www.alistapart.com/articles/sensibleforms/" rel="external" title="http://www.alistapart.com/articles/sensibleforms/">A List Apart: <em>Sensible Forms: A Form Usability Checklist</em></a></li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Forms/Your_first_form", "Learn/Forms/Basic_native_form_controls", "Learn/Forms")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Tu primer formulario HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">Cómo estructurar un formulario HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">Los controles básicos de formulario originales</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/HTML5_input_types">Tipos de entrada HTML5</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Additional_form_controls">Controles de formulario adicionales</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/UI_pseudo-classes">Pseudoclasses UI</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Aplicar estilo a formularios HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Validación de datos en un formulario</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Enviar los datos de un formulario</a></li>
+</ul>
+
+<h3 id="Temas_avanzados">Temas avanzados</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Enviar formularios con JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">Cómo crear controles de formulario personalizados</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">Formularios HTML en navegadores antiguos</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Cuestiones avanzadas de aplicación de estilo para formularios HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Tabla de compatibilidad de los controles de formulario</a> según su código propietario</li>
+</ul>
diff --git a/files/es/learn/html/forms/index.html b/files/es/learn/html/forms/index.html
new file mode 100644
index 0000000000..c607c7993a
--- /dev/null
+++ b/files/es/learn/html/forms/index.html
@@ -0,0 +1,366 @@
+---
+title: Formularios HTML
+slug: Learn/HTML/Forms
+tags:
+  - Featured
+  - Forms
+  - Formulario(2)
+  - Guide
+  - Guía
+  - HTML
+  - NeedsTranslation
+  - TopicStub
+  - Web
+translation_of: Learn/Forms
+---
+<p><span class="seoSummary">Esta guía está constituida por una serie de artículos que te ayudarán a dominar los formularios en HTML.   </span>El formulario HTML  es una herramienta  cuya finalidad es interactuar con el usuario; sin embargo, debido a razones históricas y técnicas, no siempre resulta obvio como explotar su enorme potencial. En esta guía, cubriremos todos los aspectos de los formularios HTML, desde su estructura hasta su estilo, desde la manipulación de sus datos hasta los <em>widgets</em> personalizados. ¡Aprenderás a disfrutar de las grandes prestaciones que nos brindan!</p>
+
+<h2 id="Artículos">Artículos</h2>
+
+<ol>
+ <li><a href="/en-US/docs/HTML/Forms/My_first_HTML_form" title="/en-US/docs/HTML/Forms/My_first_HTML_form">Mi primer formulario HTML</a></li>
+ <li><a href="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form" title="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form"><span>Cómo estructurar un formulario HTML</span></a></li>
+ <li><a href="/en-US/docs/HTML/Forms/The_native_form_widgets" title="/en-US/docs/HTML/Forms/The_native_form_widgets"><span>Los <em>widgets</em> nativos de formulario</span></a></li>
+ <li>CSS para formularios HTML
+  <ol>
+   <li><a href="/en-US/docs/HTML/Forms/Styling_HTML_forms" title="/en-US/docs/HTML/Forms/Styling_HTML_forms"><span>Aplicando estilos a formularios HTML</span></a></li>
+   <li><a href="/en-US/docs/Web/Guide/HTML/Forms/Advanced_styling_for_HTML_forms" title="/en-US/docs/Advanced_styling_for_HTML_forms">Estilos avanzados para formularios HTML</a></li>
+   <li><a href="/en-US/docs/Property_compatibility_table_for_form_widgets" title="/en-US/docs/Property_compatibility_table_for_form_widgets">Tabla de compatibilidad de propiedades para <em>widgets</em> de formulario</a></li>
+  </ol>
+ </li>
+ <li><a href="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data"><span>Enviando y recibiendo datos</span></a></li>
+ <li><a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">Validación de los datos del formulario</a></li>
+ <li><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">Cómo crear un <em>widget</em> de formulario personalizado</a></li>
+ <li><a href="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript" title="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript">Enviando formularios mediante JavaScript</a>
+  <ol>
+   <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects">Usando el objeto FormData</a></li>
+  </ol>
+ </li>
+ <li><a href="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers" title="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers">Formularios HTML en navegadores antiguos</a></li>
+</ol>
+
+<h2 id="Documentación_HTML">Documentación HTML</h2>
+
+<h3 id="HTML_Elements">HTML Elements</h3>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Elemento</th>
+   <th scope="col">Interfaz DOM relacionada</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td style="vertical-align: top;">{{HTMLElement("button")}}</td>
+   <td style="vertical-align: top;">{{domxref("HTMLButtonElement")}}</td>
+   <td style="vertical-align: top;">El elemento  <code>button</code> representa un boton clickeable.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{HTMLElement("datalist")}}</td>
+   <td style="vertical-align: top;">{{domxref("HTMLDataListElement")}}</td>
+   <td style="vertical-align: top;">El elemento <span style="font-family: courier new;">datalist</span> element contiene un conjunto de elementos{{ HTMLElement("option") }} que representan posibles opciones para el valor de otros elementos del formulario.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{HTMLElement("fieldset")}}</td>
+   <td style="vertical-align: top;">{{domxref("HTMLFieldSetElement")}}</td>
+   <td style="vertical-align: top;">El  <span style="font-family: courier new;">fieldset</span> se usa para agrupar distintos elementos dentro de un formulario.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{HTMLElement("form")}}</td>
+   <td style="vertical-align: top;">{{domxref("HTMLFormElement")}}</td>
+   <td style="vertical-align: top;">El elemento  <code>form </code>representa una seccion del documento html que contiene elementos interactivos a traves de los cuales se le permite al usuario enviar informacion hacia un servidor web.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{HTMLElement("input")}}</td>
+   <td style="vertical-align: top;">{{domxref("HTMLInputElement")}}</td>
+   <td style="vertical-align: top;">El elemento   <code>input</code> es usado para crear controles interactivos para los formularios.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{HTMLElement("keygen")}}</td>
+   <td style="vertical-align: top;">{{domxref("HTMLKeygenElement")}}</td>
+   <td style="vertical-align: top;">El elemento <code>keygen</code> existe para facilitar la generación de llaves u el envío de las llaves publicas como parte de un formulario HTML.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{HTMLElement("label")}}</td>
+   <td style="vertical-align: top;">{{domxref("HTMLLabelElement")}}</td>
+   <td style="vertical-align: top;">El  <code>label</code> determina un título para un item de la interfaz del usuario.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{HTMLElement("legend")}}</td>
+   <td style="vertical-align: top;">{{domxref("HTMLLegendElement")}}</td>
+   <td style="vertical-align: top;">El elemento <code>legend</code>  representa una etiqueta para el contenido del elemento {{ HTMLElement("fieldset") }} que lo contiene.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{HTMLElement("meter")}}</td>
+   <td style="vertical-align: top;">{{domxref("HTMLMeterElement")}}</td>
+   <td style="vertical-align: top;">EL elemento <code>meter</code>  representa un valor escalar dentro de un rango conocido, o un valor fraccional.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{HTMLElement("optgroup")}}</td>
+   <td style="vertical-align: top;">{{domxref("HTMLOptGroupElement")}}</td>
+   <td style="vertical-align: top;">
+    <p>El elemento <code>optgroup</code> crea un grupo de opciones dentro de un elemento {{ HTMLElement("select") }} .</p>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{HTMLElement("option")}}</td>
+   <td style="vertical-align: top;">{{domxref("HTMLOptionElement")}}</td>
+   <td style="vertical-align: top;">El elemento<em> </em><code>option<em> </em></code>es usado para crear un control de opcion que representa un item dentro de alguno de los elementos {{ HTMLElement("select") }}, {{ HTMLElement("optgroup") }} o {{ HTMLElement("datalist") }} .</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{HTMLElement("output")}}</td>
+   <td style="vertical-align: top;">{{domxref("HTMLOutputElement")}}</td>
+   <td style="vertical-align: top;">El elemento <code>output</code> representa un resultado de un calculo.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{HTMLElement("progress")}}</td>
+   <td style="vertical-align: top;">{{domxref("HTMLProgressElement")}}</td>
+   <td style="vertical-align: top;">El elemento <code>progress</code> es usado para mostrar el progreso de la realización de una tarea.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{HTMLElement("select")}}</td>
+   <td style="vertical-align: top;">{{domxref("HTMLSelectElement")}}</td>
+   <td style="vertical-align: top;">El elemento <code>select</code> representa el control que presenta un menu de opciones.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{HTMLElement("textarea")}}</td>
+   <td style="vertical-align: top;">{{domxref("HTMLTextAreaElement")}}</td>
+   <td style="vertical-align: top;">EL elemento <code>textarea</code> representa un campo multi-linea de edicion de text plano.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Nota:</strong> Todos los elementos de formulario, al igual que el resto de elementos HTML, soportan la interfaz DOM {{domxref("HTMLElement")}}.</p>
+</div>
+
+<h3 id="HTML_Attributes">HTML Attributes</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Nombre del atributo</th>
+   <th>Elementos</th>
+   <th>Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>accept</td>
+   <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td>
+   <td>Lista de tipos que acepta el servidor, típicamente un tipo de fichero.</td>
+  </tr>
+  <tr>
+   <td style="white-space: nowrap;">accept-charset</td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>Lista de <em>charsets </em>(conjuntos de caracteres) aceptados.</td>
+  </tr>
+  <tr>
+   <td>action</td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>La URI del programa con el que procesar la información enviada a mediante el formulario.</td>
+  </tr>
+  <tr>
+   <td>autocomplete</td>
+   <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td>
+   <td>Indica si los controles en este formulario serán o no autocompletados por el navegador</td>
+  </tr>
+  <tr>
+   <td>autofocus</td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+   <td>El elemento debería poseer el foco automáticamente tras cargar  la página.</td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <td>challenge</td>
+   <td>{{ HTMLElement("keygen") }}</td>
+   <td>Una cadena de comprobación que es enviada junto con la clave pública.</td>
+  </tr>
+  <tr>
+   <td>checked</td>
+   <td>{{ HTMLElement("input") }}</td>
+   <td>Indica si el elemento debe estar seleccionado (checked) tras cargar la página.</td>
+  </tr>
+  <tr>
+   <td>cols</td>
+   <td>{{ HTMLElement("textarea") }}</td>
+   <td>Define el número de columnas en un elemento de tipo textarea.</td>
+  </tr>
+  <tr>
+   <td>data</td>
+   <td>{{ HTMLElement("object") }}</td>
+   <td>Especifica la URL del recurso.</td>
+  </tr>
+  <tr>
+   <td>dirname</td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>disabled</td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Indica si el usuario puede o no interactuar con el elemento.</td>
+  </tr>
+  <tr>
+   <td>enctype</td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>Define el tipo de contenido del formulario cuando el método de envío es POST.</td>
+  </tr>
+  <tr>
+   <td>for</td>
+   <td>{{ HTMLElement("label") }}, {{ HTMLElement("output") }}</td>
+   <td>
+    <p>Establece una asociación con otros elementos</p>
+   </td>
+  </tr>
+  <tr>
+   <td>form</td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Indica el elemento <strong>form</strong> que contiene este elemento.</td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <td>high</td>
+   <td>{{ HTMLElement("meter") }}</td>
+   <td>Indicates the lower bound of the upper range.</td>
+  </tr>
+  <tr>
+   <td>keytype</td>
+   <td>{{ HTMLElement("keygen") }}</td>
+   <td>Especifica el tipo de clave generada.</td>
+  </tr>
+  <tr>
+   <td>list</td>
+   <td>{{ HTMLElement("input") }}</td>
+   <td>Determina una lista de opciones predefinidas para sugerir al usuario.</td>
+  </tr>
+  <tr>
+   <td>low</td>
+   <td>{{ HTMLElement("meter") }}</td>
+   <td>Indicates the upper bound of the lower range.</td>
+  </tr>
+  <tr>
+   <td>max</td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td>
+   <td>Indica el máximo valor permitido.</td>
+  </tr>
+  <tr>
+   <td>maxlength</td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Define el máximo número de caracteres permitidos en el elemento.</td>
+  </tr>
+  <tr>
+   <td>method</td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>
+    <p>Define qué método HTTP se usará al enviar el formulario. puede ser <strong>GET</strong> (por defecto) o <strong>POST</strong></p>
+   </td>
+  </tr>
+  <tr>
+   <td>min</td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}</td>
+   <td>Indica el mínimo valor permitido.</td>
+  </tr>
+  <tr>
+   <td>multiple</td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td>
+   <td>Indica si mútiples valores pueden ser introducidos en un input de tipo email o file.</td>
+  </tr>
+  <tr>
+   <td>name</td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Especifica el nombre del elemento. Este nombre se usará asociado al dato que contiene al enviar al servidor el formulario.</td>
+  </tr>
+  <tr>
+   <td>novalidate</td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>Indica que el formulario no debería validarse al momento de ser enviado.</td>
+  </tr>
+  <tr>
+   <td>optimum</td>
+   <td>{{ HTMLElement("meter") }}</td>
+   <td>Indica el valor numérico óptimo.</td>
+  </tr>
+  <tr>
+   <td>pattern</td>
+   <td>{{ HTMLElement("input") }}</td>
+   <td>Establece la expresión regular con la que validar el valor del elemento.</td>
+  </tr>
+  <tr>
+   <td>placeholder</td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Proporciona una pista al usuario de lo que el campo debe contener. Se muestra cuando el campo está vacío.</td>
+  </tr>
+  <tr>
+   <td>readonly</td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Indica si el elemento se puede o no editar.</td>
+  </tr>
+  <tr>
+   <td>required</td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Cuando un campo del formulario es requerido, el usuario no puede dejarlo vacío.</td>
+  </tr>
+  <tr>
+   <td>rows</td>
+   <td>{{ HTMLElement("textarea") }}</td>
+   <td>Defines the number of rows in a textarea.</td>
+  </tr>
+  <tr>
+   <td>selected</td>
+   <td>{{ HTMLElement("option") }}</td>
+   <td>En una lista de selección, la opción con el atributo selected será la que está seleccionada por defecto</td>
+  </tr>
+  <tr>
+   <td>size</td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td>
+   <td>Defina la anchura del elemento (en píxeles). Si el elemento es de tipo <strong>text</strong> o <strong>password</strong> el ancho se referirá al número de caracteres.</td>
+  </tr>
+  <tr>
+   <td>src</td>
+   <td>{{ HTMLElement("img") }}</td>
+   <td>El URL del recurso</td>
+  </tr>
+  <tr>
+   <td>step</td>
+   <td>{{ HTMLElement("input") }}</td>
+   <td>Determina el incremento de cada paso con el que se cubre un rango desde un valor mínimo hasta un valor máximo.</td>
+  </tr>
+  <tr>
+   <td>target</td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>type</td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}</td>
+   <td>Determina el tipo del elemento.</td>
+  </tr>
+  <tr>
+   <td>usemap</td>
+   <td>{{ HTMLElement("input") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>value</td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td>
+   <td>Establece el valor actual del elemento.</td>
+  </tr>
+  <tr>
+   <td>wrap</td>
+   <td>{{ HTMLElement("textarea") }}</td>
+   <td>Cuando un texto tiene una longitud mayor que el ancho del elemento sobre el que se muestra, determina si el elemento debe simular saltos de línea para que todo el texto quede visible en el elemento.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Referencia_a_la_normativa">Referencia a la normativa</h3>
+
+<ul>
+ <li><a href="http://www.w3.org/html/wg/drafts/html/master/forms.html#forms" lang="en" rel="external" title="http://www.w3.org/TR/html5/forms.html">W3C HTML 5.1 Specification (Forms)</a></li>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#forms" rel="external" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#forms">WHATWG HTML Living Standard (Forms)</a></li>
+</ul>
diff --git a/files/es/learn/html/forms/property_compatibility_table_for_form_controls/index.html b/files/es/learn/html/forms/property_compatibility_table_for_form_controls/index.html
new file mode 100644
index 0000000000..115b5580fe
--- /dev/null
+++ b/files/es/learn/html/forms/property_compatibility_table_for_form_controls/index.html
@@ -0,0 +1,2003 @@
+---
+title: Tabla de compatibilidad de propiedades CSS para controles de formulario
+slug: Learn/HTML/Forms/Property_compatibility_table_for_form_controls
+translation_of: Learn/Forms/Property_compatibility_table_for_form_controls
+---
+<div>{{learnsidebar}}</div>
+
+<p class="summary">Las siguientes tablas de compatibilidad intentan resumir el estado del soporte de CSS para formularios HTML. Debido a la complejidad de los formularios CSS y HTML, estas tablas no se pueden considerar una referencia perfecta. Sin embargo, le darán una buena idea de lo que se puede y no se puede hacer, lo que le ayudará al aprender a hacer las cosas.</p>
+
+<h2 id="Cómo_leer_las_tablas">Cómo leer las tablas</h2>
+
+<h3 id="Valores">Valores</h3>
+
+<p>Para cada propiedad, hay cuatro valores posibles:</p>
+
+<dl>
+ <dt>Si</dt>
+ <dd>Existe un soporte razonablemente consistente para la propiedad en todos los navegadores. Es posible que aún enfrente efectos secundarios extraños en ciertos casos extremos.</dd>
+ <dt>Parcial</dt>
+ <dd>Si bien la propiedad funciona, con frecuencia puede enfrentar efectos secundarios extraños o inconsistencias. Probablemente debería evitar estas propiedades a menos que primero domine esos efectos secundarios.</dd>
+ <dt>No</dt>
+ <dd>La propiedad simplemente no funciona o es tan inconsistente que no es confiable.</dd>
+ <dt>n.a.</dt>
+ <dd>La propiedad no tiene ningún significado para este tipo de widget.</dd>
+</dl>
+
+<h3 id="Representación">Representación</h3>
+
+<p>Para cada propiedad hay dos representaciones posibles:</p>
+
+<dl>
+ <dt>N (Normal)</dt>
+ <dd>Indica que la propiedad se aplica tal cual</dd>
+ <dt>T (Retocada)</dt>
+ <dd>Indica que la propiedad se aplica con la regla adicional como se muestra a continuación:</dd>
+</dl>
+
+<pre class="brush: css notranslate">* {
+  /* Turn off the native look and feel */
+  -webkit-appearance: none;
+  appearance: none;
+
+/* for Internet Explorer */
+  background: none;
+}</pre>
+
+<h2 id="Tablas_de_compatibilidad">Tablas de compatibilidad</h2>
+
+<h3 id="Comportamientos_globales">Comportamientos globales</h3>
+
+<p>Algunos comportamientos son comunes a muchos navegadores a nivel global::</p>
+
+<dl>
+ <dt>{{cssxref("border")}}, {{cssxref("background")}}, {{cssxref("border-radius")}}, {{cssxref("height")}}</dt>
+ <dd>El uso de una de estas propiedades puede desactivar parcial o totalmente la apariencia nativa de los widgets en algunos navegadores. Tenga cuidado cuando los use.</dd>
+ <dt>{{cssxref("line-height")}}</dt>
+ <dd>Esta propiedad se admite de forma inconsistente en todos los navegadores y debe evitarla.</dd>
+ <dt>{{cssxref("text-decoration")}}</dt>
+ <dd>Esta propiedad no es compatible con el navegador Opera en widgets de formulario.</dd>
+ <dt>{{cssxref("text-overflow")}}</dt>
+ <dd>Opera, Safari, y IE9 no admiten esta propiedad en widgets de formulario.</dd>
+ <dt>{{cssxref("text-shadow")}}</dt>
+ <dd>Opera no admite {{cssxref("text-shadow")}} en widgets de formularios e IE9 no lo admite en absoluto.</dd>
+</dl>
+
+<h3 id="Text_fields">Text fields</h3>
+
+<p>See the <code>{{htmlelement("input/text", "text")}}</code>, <code>{{htmlelement("input/search", "search")}}</code>, and <code>{{htmlelement("input/password", "password")}}</code> input types.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col" style="text-align: center;">N</th>
+   <th scope="col" style="text-align: center;">T</th>
+   <th scope="col">Note</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>CSS box model</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td>
+    <ol>
+     <li>WebKit browsers (mostly on Mac OSX and iOS) use the native look &amp; feel for the search fields. Therefore, it's required to use <code>-webkit-appearance:none</code> to be able to apply this property to search fields.</li>
+     <li>On Windows 7, Internet Explorer 9 does not apply the border unless <code>background:none</code> is applied.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td>
+    <ol>
+     <li>WebKit browsers (mostly on Mac OSX and iOS) use the native look &amp; feel for the search fields. Therefore, it's required to use <code>-webkit-appearance:none</code> to be able to apply this property to search fields.</li>
+     <li>On Windows 7, Internet Explorer 9 does not apply the border unless <code>background:none</code> is applied.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td>
+    <ol>
+     <li>WebKit browsers (mostly on Mac OSX and iOS) use the native look &amp; feel for the search fields. Therefore, it's required to use <code>-webkit-appearance:none</code> to be able to apply this property to search fields.</li>
+     <li>On Windows 7, Internet Explorer 9 does not apply the border unless <code>background:none</code> is applied.</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Text and font</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}<sup>[1]</sup></th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td>
+    <ol>
+     <li>If the {{cssxref("border-color")}} property is not set, some WebKit based browsers will apply the {{cssxref("color")}} property to the border as well as the font on <code>{{htmlelement("textarea")}}</code>s.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td>See the note about {{cssxref("line-height")}}</td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
+   <td>See the note about Opera</td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>IE9 supports this property only on <code>{{htmlelement("textarea")}}</code>s, whereas Opera only supports it on single line text fields.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Border and background</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td>
+    <ol>
+     <li>WebKit browsers (mostly on Mac OSX and iOS) use the native look &amp; feel for the search fields. Therefore, it's required to use <code>-webkit-appearance:none</code> to be able to apply this property to search fields. On Windows 7, Internet Explorer 9 does not apply the border unless <code>background:none</code> is applied.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td>
+    <ol>
+     <li>WebKit browsers (mostly on Mac OSX and iOS) use the native look &amp; feel for the search fields. Therefore, it's required to use <code>-webkit-appearance:none</code> to be able to apply this property to search fields. On Windows 7, Internet Explorer 9 does not apply the border unless <code>background:none</code> is applied.</li>
+     <li>On Opera the {{cssxref("border-radius")}} property is applied only if an explicit border is set.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>IE9 does not support this property.</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Buttons">Buttons</h3>
+
+<p>See the <code>{{htmlelement("input/button", "button")}}</code>,  <code>{{htmlelement("input/submit", "submit")}}</code>, and <code>{{htmlelement("input/reset", "reset")}}</code> input types and the <code>{{htmlelement("button")}}</code> element.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col" style="text-align: center;">N</th>
+   <th scope="col" style="text-align: center;">T</th>
+   <th scope="col">Note</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>CSS box model</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td>
+    <ol>
+     <li>This property is not applied on WebKit based browsers on Mac OSX or iOS.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td>
+    <ol>
+     <li>This property is not applied on WebKit based browsers on Mac OSX or iOS.</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Text and font</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td>See the note about {{cssxref("line-height")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Border and background</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>On Opera the {{cssxref("border-radius")}} property is applied only if an explicit border is set.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>IE9 does not support this property.</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Number">Number</h3>
+
+<p>See the  <code>{{htmlelement("input/number", "number")}}</code> input type. There is no standard way to change the style of spinners used to change the value of the field, with the spinners on Safari being outside the field.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col" style="text-align: center;">N</th>
+   <th scope="col" style="text-align: center;">T</th>
+   <th scope="col">Note</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>CSS box model</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>On Opera, the spinners are zoomed in, which can hide the content of the field.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>On Opera, the spinners are zoomed in, which can hide the content of the field.</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Text and font</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td>See the note about {{cssxref("line-height")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Border and background</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td colspan="1" rowspan="3">
+    <p>Supported but there is too much inconsistency between browsers to be reliable.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Check_boxes_and_radio_buttons">Check boxes and radio buttons</h3>
+
+<p>See the <code>{{htmlelement("input/checkbox", "checkbox")}}</code> and <code>{{htmlelement("input/radio", "radio")}}</code> input types.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col" style="text-align: center;">N</th>
+   <th scope="col" style="text-align: center;">T</th>
+   <th scope="col">Note</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>CSS box model</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>Some browsers add extra margins and others stretch the widget.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>Some browsers add extra margins and others stretch the widget.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Text and font</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Border and background</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Select_boxes_single_line">Select boxes (single line)</h3>
+
+<p>See the <code>{{htmlelement("select")}}</code>,  <code>{{htmlelement("optgroup")}}</code> and  <code>{{htmlelement("option")}}</code> elements.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col" style="text-align: center;">N</th>
+   <th scope="col" style="text-align: center;">T</th>
+   <th scope="col">Note</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>CSS box model</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>This property is okay on the <code>{{htmlelement("select")}}</code> element, but it cannot be the case on the <code>{{htmlelement("option")}}</code> or <code>{{htmlelement("optgroup")}}</code> elements.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[2]</sup></td>
+   <td>
+    <ol>
+     <li>The property is applied, but in an inconsistent way between browsers on Mac OSX.</li>
+     <li>The property is well applied on the <code>{{htmlelement("select")}}</code> element, but is inconsistently handled on <code>{{htmlelement("option")}}</code> and <code>{{htmlelement("optgroup")}}</code> elements.</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Text and font</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>On Mac OSX, WebKit based browsers do not support this property on native widgets and they, along with Opera, do not support it at all on <code>{{htmlelement("option")}}</code> and <code>{{htmlelement("optgroup")}}</code> elements.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>On Mac OSX, WebKit based browsers do not support this property on native widgets and they, along with Opera, do not support it at all on <code>{{htmlelement("option")}}</code> and <code>{{htmlelement("optgroup")}}</code> elements.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>IE9 does not support this property on <code>{{htmlelement("select")}}</code>, <code>{{htmlelement("option")}}</code>, and <code>{{htmlelement("optgroup")}}</code> elements; WebKit based browsers on Mac OSX do not support this property on <code>{{htmlelement("option")}}</code> and <code>{{htmlelement("optgroup")}}</code> elements.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>IE9 on Windows 7 and WebKit based browsers on Mac OSX do not support this property on this widget.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>Only Firefox provides full support for this property. Opera does not support this property at all and other browsers only support it on the <code>{{htmlelement("select")}}</code> element.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td>
+   <td>
+    <ol>
+     <li>Most of the browsers only support this property on the <code>{{htmlelement("select")}}</code> element.</li>
+     <li>IE9 does not support this property.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td>
+   <td>
+    <ol>
+     <li>Most of the browsers only support this property on the <code>{{htmlelement("select")}}</code> element.</li>
+     <li>IE9 does not support this property.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>Most of the browsers only support this property on the <code>{{htmlelement("select")}}</code> element.</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Border and background</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td colspan="1" rowspan="3">
+    <ol>
+     <li>Most of the browsers only support this property on the <code>{{htmlelement("select")}}</code> element.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Note Firefox does not provide any way to change the down arrow on the <code>{{htmlelement("select")}}</code> element.</p>
+
+<h3 id="Select_boxes_multiline">Select boxes (multiline)</h3>
+
+<p>See the <code>{{htmlelement("select")}}</code>, <code>{{htmlelement("optgroup")}}</code> and  <code>{{htmlelement("option")}}</code> elements and the <a href="/en-US/docs/Web/HTML/Attributes/size"><code>size</code> attribute</a>.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col" style="text-align: center;">N</th>
+   <th scope="col" style="text-align: center;">T</th>
+   <th scope="col">Note</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>CSS box model</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>Opera does not support {{cssxref("padding-top")}} and {{cssxref("padding-bottom")}} on the <code>{{htmlelement("select")}}</code> element.</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Text and font</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td>See the note about {{cssxref("line-height")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>IE9 does not support this property on <code>{{htmlelement("select")}}</code>, <code>{{htmlelement("option")}}</code>, and <code>{{htmlelement("optgroup")}}</code> elements; WebKit based browsers on Mac OSX do not support this property on <code>{{htmlelement("option")}}</code> and <code>{{htmlelement("optgroup")}}</code> elements.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>IE9 on Windows 7 and WebKit based browser on Mac OSX do not support this property on this widget.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>Only supported by Firefox and IE9+.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>Most of the browsers only support this property on the <code>{{htmlelement("select")}}</code> element.</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Border and background</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>On Opera the {{cssxref("border-radius")}} property is applied only if an explicit border is set.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>IE9 does not support this property.</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Datalist">Datalist</h3>
+
+<p>See the <code>{{htmlelement("datalist")}}</code> and <code>{{htmlelement("input")}}</code> elements and the <a href="/en-US/docs/Web/HTML/Attributes/list"><code>list</code> attribute</a>.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col" style="text-align: center;">N</th>
+   <th scope="col" style="text-align: center;">T</th>
+   <th scope="col">Note</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>CSS box model</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Text and font</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Border and background</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="File_picker">File picker</h3>
+
+<p>See the <code>{{htmlelement("input/file", "file")}}</code> input type.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col" style="text-align: center;">N</th>
+   <th scope="col" style="text-align: center;">T</th>
+   <th scope="col">Note</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>CSS box model</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Text and font</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>Supported, but there is too much inconsistency between browsers to be reliable.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>Many browsers apply this property to the select button.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>It acts more or less like an extra left margin outside the widget.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Border and background</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>Supported, but there is too much inconsistency between browsers to be reliable.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>IE9 does not support this property.</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Date_pickers">Date pickers</h3>
+
+<p>See the <code>{{htmlelement("input/date", "date")}}</code> and <code>{{htmlelement("input/time", "time")}}</code> input types. Many properties are supported, but there is too much inconstency between browsers to be reliable.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col" style="text-align: center;">N</th>
+   <th scope="col" style="text-align: center;">T</th>
+   <th scope="col">Note</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>CSS box model</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Text and font</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Border and background</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Color_pickers">Color pickers</h3>
+
+<p>See the <code>{{htmlelement("input/color", "color")}}</code> input type:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col" style="text-align: center;">N</th>
+   <th scope="col" style="text-align: center;">T</th>
+   <th scope="col">Note</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>CSS box model</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td>
+    <ol>
+     <li>Opera handles this like a select widget with the same restriction.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td>
+    <ol>
+     <li>Opera handles this like a select widget with the same restriction.</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Text and font</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Border and background</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td colspan="1" rowspan="3">
+    <ol>
+     <li>Supported, but there is too much inconsistency between browsers to be reliable.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Meters_and_progress">Meters and progress</h3>
+
+<p>See the <code>{{htmlelement("meter")}}</code> and <code>{{htmlelement("progress")}}</code> elements:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col" style="text-align: center;">N</th>
+   <th scope="col" style="text-align: center;">T</th>
+   <th scope="col">Note</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>CSS box model</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>Chrome hides the <code>{{htmlelement("progress")}}</code> and <code>{{htmlelement("meter")}}</code> element when the {{cssxref("padding")}} property is applied on a tweaked element.</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Text and font</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Border and background</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td colspan="1" rowspan="3">
+    <ol>
+     <li>Supported, but there is too much inconsistency between browsers to be reliable.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Range">Range</h3>
+
+<p>See the <code>{{htmlelement("input/range", "range")}}</code> input type. There is no standard way to change the style of the range grip and Opera has no way to tweak the default rendering of the range widget.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col" style="text-align: center;">N</th>
+   <th scope="col" style="text-align: center;">T</th>
+   <th scope="col">Note</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>CSS box model</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>Chrome and Opera add some extra space around the widget, whereas Opera on Windows 7 stretches the range grip.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td>
+    <ol>
+     <li>The {{cssxref("padding")}} is applied, but has no visual effect.</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Text and font</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Border and background</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td colspan="1" rowspan="3">
+    <ol>
+     <li>Supported, but there is too much inconsistency between browsers to be reliable.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Image_buttons">Image buttons</h3>
+
+<p>See the <code>{{htmlelement("input/image", "image")}}</code> input type:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col" style="text-align: center;">N</th>
+   <th scope="col" style="text-align: center;">T</th>
+   <th scope="col">Note</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>CSS box model</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td></td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Text and font</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td></td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Border and background</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
+   <td colspan="1"></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td colspan="1">
+    <ol>
+     <li>IE9 does not support this property.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
+   <td colspan="1">
+    <ol>
+     <li>IE9 does not support this property.</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also">See also</h2>
+
+<h3 id="Learning_path">Learning path</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Your first HTML form</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">The native form widgets</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/HTML5_input_types">HTML5 input types</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Additional_form_controls">Additional form controls</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/UI_pseudo-classes">UI pseudo-classes</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a></li>
+</ul>
+
+<h3 id="Advanced_Topics">Advanced Topics</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li>
+</ul>
diff --git a/files/es/learn/html/forms/prueba_tus_habilidades_colon__controles_html5/index.html b/files/es/learn/html/forms/prueba_tus_habilidades_colon__controles_html5/index.html
new file mode 100644
index 0000000000..b73c8d4442
--- /dev/null
+++ b/files/es/learn/html/forms/prueba_tus_habilidades_colon__controles_html5/index.html
@@ -0,0 +1,75 @@
+---
+title: 'Prueba tus habilidades: controles HTML5'
+slug: 'Learn/HTML/Forms/Prueba_tus_habilidades:_controles_HTML5'
+tags:
+  - Aprendizaje
+  - Evaluación
+  - Formulário
+  - HTML5
+  - Principiante
+translation_of: 'Learn/Forms/Test_your_skills:_HTML5_controls'
+---
+<div>{{learnsidebar}}</div>
+
+<p>El objetivo de esta prueba es evaluar si has comprendido nuestro artículo <a href="/en-US/docs/Learn/Forms/HTML5_input_types">The HTML5 input types</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/" rel="noopener">CodePen</a>, <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a>, o <a href="https://glitch.com/" rel="noopener">Glitch</a> para trabajar en las tareas.<br>
+ <br>
+ Si te atascas, pide ayuda — mira la sección <a href="https://wiki.developer.mozilla.org/es/docs/Learn/HTML/Introduccion_a_HTML/Prueba_tus_habilidades:_Enlaces#Evaluaci%C3%B3n_o_ayuda_adicional">Evaluación o ayuda adicional</a> al final de esta página.</p>
+</div>
+
+<h2 id="Controles_HTML5_1">Controles HTML5 1</h2>
+
+<p>Primero exploraremos algunos de los tipos nuevos de <code>input</code> en HTML5. Crea las etiquetas <code>input</code> apropiadas para que un usuario actualice sus detalles para:</p>
+
+<ol>
+ <li>Email</li>
+ <li>Website</li>
+ <li>Número de teléfono</li>
+ <li>Color favorito</li>
+</ol>
+
+<p>Intenta actualizar el código en vivo más abajo para retrear el ejemplo terminado:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/forms/tasks/html5-controls/html5-controls1.html", '100%', 700)}}</p>
+
+<div class="blockIndicator note">
+<p><a href="/en-US/docshttps://github.com/mdn/learning-area/blob/master/html/forms/tasks/html5-controls/html5-controls1-download.html">Descarga el código inicial de esta tarea</a> para trabajar en tu propio editor o en un editor en línea.</p>
+</div>
+
+<h2 id="Controles_HTML5_2">Controles HTML5 2</h2>
+
+<p>A continuación, queremos que implementes un control deslizante para permitir al usuario escoger el número máximo de personas para invitar a su fiesta.</p>
+
+<ol>
+ <li>Implemente un control deslizante básico que acompañe a la etiqueta provista.</li>
+ <li>Establezca un valor minimo de 1, uno máximo de 30 y un valor inicial de 10.</li>
+ <li>Crea un elemento de salida correspondiente para poner el valor actual del deslizador. Asígnale la clase invite-output, y asocialo semanticamente con le entrada. Si haces esto correctamente, el JavaScript incluido en la página automáticamente actualizará el valor cuando se deslice el control.</li>
+</ol>
+
+<p>Intenta actualizar el código en vivo más abajo para retrear el ejemplo terminado:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/forms/tasks/html5-controls/html5-controls2.html", '100%', 700)}}</p>
+
+<div class="blockIndicator note">
+<p><a href="https://github.com/mdn/learning-area/blob/master/html/forms/tasks/html5-controls/html5-controls2-download.html">Descarga el código inicial 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 controles HTML5 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/forms/prueba_tus_habilidades_colon__otros_controles/index.html b/files/es/learn/html/forms/prueba_tus_habilidades_colon__otros_controles/index.html
new file mode 100644
index 0000000000..1496025a8d
--- /dev/null
+++ b/files/es/learn/html/forms/prueba_tus_habilidades_colon__otros_controles/index.html
@@ -0,0 +1,87 @@
+---
+title: 'Prueba tus habilidades: Otros controles'
+slug: 'Learn/HTML/Forms/Prueba_tus_habilidades:_Otros_controles'
+translation_of: 'Learn/Forms/Test_your_skills:_Other_controls'
+---
+<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/Forms/Other_form_controls">Otros controles de formulario</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/" rel="noopener">CodePen</a>, <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a>, o <a href="https://glitch.com/" rel="noopener">Glitch</a> para trabajar en las tareas.<br>
+ <br>
+ Si te atascas, pide ayuda — mira la sección <a href="https://wiki.developer.mozilla.org/es/docs/Learn/HTML/Introduccion_a_HTML/Prueba_tus_habilidades:_Enlaces#Evaluaci%C3%B3n_o_ayuda_adicional">Evaluación o ayuda adicional</a> al final de esta página.</p>
+</div>
+
+<h2 id="Otros_controles_1">Otros controles 1</h2>
+
+<p>En nuestra primera evaluación de "Otros controles", te pediremos crear una entrada de texto de líneas múltiples.</p>
+
+<ol>
+ <li>Crea una entrada básica de texto de múltiples líneas.</li>
+ <li>Asócialo semánticamente con la etiqueta de "Comentario" asociado.</li>
+ <li>Define la entrada con 35 columnas y 10 filas de espacio en cual agregar comentarios.</li>
+ <li>Define para los comentatios una longitud máxima de 100 caracteres.</li>
+</ol>
+
+<p>Intenta actualizar el código en vivo más abajo para mostrar el ejemplo terminado:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/forms/tasks/other-controls/other-controls1.html", '100%', 700)}}</p>
+
+<div class="blockIndicator note">
+<p><a href="https://github.com/mdn/learning-area/blob/master/html/forms/tasks/other-controls/other-controls1-download.html" rel="noopener">Descarga el inicio de esta tarea</a> para trabajar en tu propio editor o en un editor en línea.</p>
+</div>
+
+<h2 id="Otros_controles_2">Otros controles 2</h2>
+
+<p>Ahora es tiempo de implementar un menú desplegable, para permitir al usuario escoger su comida favorita de las opciones entregadas.</p>
+
+<ol>
+ <li>Crea tu estructura de caja básica.</li>
+ <li>Asóciala semánticamente con la etiqueta de "comentarios" entregada.</li>
+ <li>Dentro de la lista, divide las opciones en 2 subgrupos - "principales" y "meriendas".</li>
+</ol>
+
+<p>Intenta actualizar el código en vivo más abajo para mostrar el ejemplo terminado:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/forms/tasks/other-controls/other-controls2.html", '100%', 700)}}</p>
+
+<div class="blockIndicator note">
+<p><a href="https://github.com/mdn/learning-area/blob/master/html/forms/tasks/other-controls/other-controls2-download.html" rel="noopener">Descarga el inicio de esta tarea</a> para trabajar en tu propio editor o en un editor en línea.</p>
+</div>
+
+<h2 id="Otros_controles_3">Otros controles 3</h2>
+
+<p>En la tarea final de esta evaluación, comenzaremos con la misma lista de opciones de comida. Sin embargo, esta vez queremos hacer las cosas de otra forma:</p>
+
+<ol>
+ <li>Crea una entrada de texto básica, que esté asociada semánticamente con la etiqueta entregada.</li>
+ <li>Coloca las opciones de comida en una lista que pueda ser asociada con una entrada de formulario.</li>
+ <li>Asocia la lista con tu entrada de texto, de forma que cuando escribas caracteres, cualquier opción de la lista que coincida con la secuencia de caracteres ingresada, aparezca en un listado desplegable como sugerencia de autocompletado.</li>
+</ol>
+
+<p>Intenta actualizar el código en vivo más abajo para mostrar el ejemplo terminado:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/forms/tasks/other-controls/other-controls3.html", '100%', 700)}}</p>
+
+<div class="blockIndicator note">
+<p><a href="https://github.com/mdn/learning-area/blob/master/html/forms/tasks/other-controls/other-controls3-download.html" rel="noopener">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 Otros controles 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/forms/sending_and_retrieving_form_data/index.html b/files/es/learn/html/forms/sending_and_retrieving_form_data/index.html
new file mode 100644
index 0000000000..d6ca2161a4
--- /dev/null
+++ b/files/es/learn/html/forms/sending_and_retrieving_form_data/index.html
@@ -0,0 +1,328 @@
+---
+title: Sending form data
+slug: Learn/HTML/Forms/Sending_and_retrieving_form_data
+translation_of: Learn/Forms/Sending_and_retrieving_form_data
+---
+<div>{{LearnSidebar}} {{PreviousMenuNext("Aprende / HTML / Formularios / The_native_form_widgets", "Aprender / html / Formularios / Form_validation", "Aprender / html / Forms")}}</div>
+
+<p class="summary">En este artículo se analiza lo que sucede cuando un usuario envía un formulario - ¿A dónde van los datos y cómo los manejamos cuando llegan allí? - También tenemos en cuenta algunos de los problemas de seguridad asociados con el envío de los datos del formulario.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Requisitos previos:</th>
+   <td>Conocimientos básicos de informática, una <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">comprensión de HTML</a> , y conocimientos básicos de <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP">HTTP</a> y <a href="/en-US/docs/Learn/Server-side/First_steps">programación del lado del servidor</a> .</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Para entender lo que sucede cuando se envía los datos del formulario, incluyendo la obtención de una idea básica de cómo se procesan los datos en el servidor</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="¿A_dónde_van_los_datos">¿A dónde van los datos?</h2>
+
+<p>Aquí vamos a discutir lo que ocurre con los datos cuando se envía un formulario.</p>
+
+<h3 id="Sobre_la_arquitectura_cliente_servidor">Sobre la arquitectura cliente / servidor</h3>
+
+<p>La web se basa en una arquitectura cliente / servidor muy básica que se puede resumir de la siguiente manera: un cliente (normalmente un navegador Web) envía una petición a un servidor (la mayoría de las veces un servidor web como <a href="http://httpd.apache.org/" rel="external" title="http://www.apache.org/">Apache</a> , <a href="http://nginx.com/" rel="external" title="http://nginx.com/">Nginx</a> , <a href="http://www.iis.net/" rel="external" title="http://www.iis.net/">IIS</a> , <a href="http://tomcat.apache.org/" rel="external" title="http://tomcat.apache.org/">Tomcat</a> , etc.), utilizando el <a href="/en-US/docs/HTTP" title="/en-US/docs/HTTP">protocolo HTTP</a> . El servidor responde a la solicitud utilizando el mismo protocolo.</p>
+
+<p><img alt="Un esquema básico de la arquitectura cliente Web / servidor" src="/files/4291/client-server.png" style="display: block; height: 141px; margin: 0px auto; width: 400px;"></p>
+
+<p>En el lado del cliente, un formulario HTML no es más que una manera fácil de usar conveniente para configurar una petición HTTP para enviar datos a un servidor. Esto permite al usuario para proporcionar información a ser entregada en la petición HTTP.</p>
+
+<div class="note">
+<p><strong>Nota</strong> : Para tener una mejor idea de cómo funcionan las arquitecturas cliente-servidor, lea nuestra <a href="/en-US/docs/Learn/Server-side/First_steps">programación de páginas web del lado del servidor, módulo: primeros pasos</a>. En el lado del cliente: Debes definir como envías los datos.</p>
+</div>
+
+<p>El elemento {{HTMLElement ( "form")}} define cómo se enviarán los datos. Todos sus atributos están diseñados para que pueda configurar la solicitud que se enviará cuando un usuario pulsa un botón de envío. Los dos atributos más importantes son {{htmlattrxref ( "acción", "forma")}} y {{htmlattrxref ( "método", "forma")}}.</p>
+
+<h4 id="El_atributo_htmlattrxref_acción_forma.">El atributo {{htmlattrxref ( "acción", "forma")}}.</h4>
+
+<p>Este atributo define el lugar donde los datos se envian. Su valor debe ser una dirección URL válida. Si no se proporciona este atributo, los datos serán enviados a la dirección URL de la página que contiene el formulario.</p>
+
+<p>En este ejemplo, los datos se envían a una dirección URL absoluta - <code>http://foo.com</code>:</p>
+
+<pre class="brush: html">&lt;Acción del formulario = "http://foo.com"&gt;</pre>
+
+<p class="brush: html">Aquí, nosotros usamos una URL relativa - los datos se envían a una dirección URL diferente en el servidor:</p>
+
+<pre class="brush: html">&lt;Acción del formulario = "/ somewhere_else"&gt;</pre>
+
+<p class="brush: html">Cuando se especifica sin atributos, como abajo, el {{HTMLElement ( "form")}} los datos se envían a la misma página en que la "forma" está presente :</p>
+
+<pre class="brush: html">&lt;Form&gt;</pre>
+
+<p class="brush: html">Muchas páginas más antiguas utilizan la siguiente notación para indicar que los datos deben ser enviados a la misma página que contiene el formulario; Esto fue necesario porque hasta HTML5, el atributo {{htmlattrxref ( "acción", "form")}} fue requerido . Esto ya no es necesario.</p>
+
+<pre class="brush: html">&lt;Form action = "#"&gt;</pre>
+
+<div class="note">
+<p><strong>Nota:</strong> Es posible especificar una dirección URL que utiliza el protocolo HTTPS (HTTP seguro). Al hacer esto, los datos se cifran junto con el resto de la solicitud, incluso si el propio formulario está alojado en una página insegura se accede a través de HTTPS. Por otro lado, si el formulario está alojado en una página segura, pero se especifica una dirección URL HTTP insegura con el atributo {{htmlattrxref ( "acción", "form")}} , todos los navegadores mostrarán una advertencia de seguridad para el usuario cada vez  que intenten enviar datos, ya que estos no se pueden cifrar.</p>
+</div>
+
+<h4 id="El_atributo_htmlattrxref_método_form">El atributo {{htmlattrxref ( "método", "form")}}</h4>
+
+<p>Este atributo define cómo se envían los datos. El <a href="/en-US/docs/HTTP" title="/en-US/docs/HTTP">protocolo HTTP</a> proporciona varias formas de realizar una solicitud; Los datos del formulario HTML se pueden transmitir a través de un número de diferentes queridos, los más comunes de los cuales son el método <code>GET</code> y el método <code>POST</code>.</p>
+
+<p>Para entender la diferencia entre estos dos métodos, vamos a dar un paso atrás y examinar cómo funciona HTTP. Cada vez que desee llegar a un recurso en la Web, el navegador envía una petición a una URL. Una petición HTTP consta de dos partes: un encabezado que contiene un conjunto de metadatos mundial sobre las capacidades del navegador, y un cuerpo que puede contener la información necesaria paraque el servidor pueda procesar la petición específica.</p>
+
+<h5 id="El_método_GET">El método GET</h5>
+
+<p>El método <code>GET</code> es  utilizado por el navegador para pedir al servidor que se envíe de vuelta un recurso dado: "Hey servidor, quiero conseguir este recurso." En este caso, el navegador envía un cuerpo vacío. Debido a que el cuerpo está vacío, si un formulario se envía utilizando este método, los datos enviados al servidor se anexan a la URL.</p>
+
+<p>Considere la siguiente forma:</p>
+
+<pre class="brush: html">&lt;form action="http://foo.com" method="get"&gt;
+  &lt;div&gt;
+    &lt;label for="decir"&gt; ¿Qué saludo quiere decir? &lt;/label&gt;
+    &lt;input name="decir" id="decir" value="Hola"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="para"&gt; ¿A quién se lo quiere decir? &lt;/label&gt;
+    &lt;input name="para" value="mamá"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt; Botón enviar mis saludos &lt;/ button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Dado que el método <code>GET</code>ha conseguido el recurso, verá en la URL lo siguiente en la barra de direcciones del navegador <code>www.foo.com/?say=Hi&amp;to=Mom</code>  cuando se envía el formulario.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14685/url-parameters.png" style="display: block; margin: 0 auto;">Los datos se añaden a la URL como una serie de pares de nombre / valor. Después que la dirección web URL ha terminado, se incluye un signo de interrogación ( <code>?</code>) seguido de los pares de nombre / valor, cada uno separado por un signo ( <code>&amp;</code>). En este caso estamos pasando dos piezas de datos en el servidor:</p>
+
+<ul>
+ <li><code>say</code>, Que tiene un valor de <code>Hi</code></li>
+ <li><code>to</code>, Que tiene un valor de <code>Mom</code></li>
+</ul>
+
+<p>La solicitud HTTP se ve así:</p>
+
+<pre>GET /? = Decir Hola &amp; a = mamá HTTP / 1.1
+Anfitrión: foo.com</pre>
+
+<div class="note">
+<p><strong>Nota</strong> : Puede encontrar este ejemplo en GitHub - ver <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/get-method.html">llegar-method.html</a> ( <a href="https://mdn.github.io/learning-area/html/forms/sending-form-data/get-method.html">verlo en directo también</a> ).</p>
+</div>
+
+<h5 id="El_método_POST">El método POST</h5>
+
+<p>El <code>POST</code>método es un poco diferente. Es el método que el navegador utiliza para comunicarse con el servidor cuando se pide una respuesta que tenga en cuenta los datos proporcionados en el cuerpo de la petición HTTP: "Hey servidor, echa un vistazo a estos datos y envíame de vuelta un resultado apropiado." Si un formulario se envía utilizando este método, los datos se anexan al cuerpo de la petición HTTP.</p>
+
+<p>Veamos un ejemplo - se trata de algo similar a como se vió en el método <code>GET</code>del apartado anterior, pero con el {{htmlattrxref ( "método", "form")}} atributo establecido <code>post</code>.</p>
+
+<pre class="brush: html">&lt;Form action = "http://foo.com" method = "post"&gt;
+  &lt;Div&gt;
+    &lt;Label for = "dice"&gt; Lo saludo qué quiere decir? &lt;/ Label&gt;
+    &lt;Input name = "decir" id = "decir" value = "Hola"&gt;
+  &lt;/ Div&gt;
+  &lt;Div&gt;
+    &lt;Label for = "para"&gt; ¿Quién usted quiere decir que a? &lt;/ Label&gt;
+    &lt;Input name = "a" value = "mamá"&gt;
+  &lt;/ Div&gt;
+  &lt;Div&gt;
+    &lt;&gt; Botón enviar mis saludos &lt;/ botón&gt;
+  &lt;/ Div&gt;
+&lt;/ Form&gt;</pre>
+
+<p>Cuando el formulario se envía mediante el método <code>POST</code>, no se obtienen los datos adjuntos en la dirección URL, y la solicitud HTTP se parece a esto y los datos son incluidos en el cuerpo de la petición en su lugar:</p>
+
+<pre>POST / HTTP/1.1
+Anfitrión: foo.com
+Content-Type: application / x-www-form-urlencoded
+Content-Length: 13
+
+decir = Hi &amp; a = mamá</pre>
+
+<p>La cabecera <code>Content-Length</code> indica el tamaño del cuerpo, y la cabecera <code>Content-Type</code> indica el tipo de recurso que se envía al servidor. Discutiremos estas cabeceras más adelante.</p>
+
+<div class="note">
+<p><strong>Nota</strong> : Puede encontrar este ejemplo en GitHub - ver <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/post-method.html">post-method.html</a> ( <a href="https://mdn.github.io/learning-area/html/forms/sending-form-data/post-method.html">verlo en directo también</a> ).</p>
+</div>
+
+<h4 id="Visualización_de_peticiones_HTTP">Visualización de peticiones HTTP</h4>
+
+<p>Las peticiones HTTP nunca se muestran al usuario (si quieres verlos, es necesario utilizar herramientas como el <a href="/en-US/docs/Tools/Network_Monitor">Monitor de red Firefox</a> o las <a href="https://developers.google.com/chrome-developer-tools/" title="https://developers.google.com/chrome-developer-tools/">herramientas de desarrollo de Chrome</a> ). A modo de ejemplo, los datos del formulario se muestran a continuación en la pestaña de Chrome red:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14691/network-monitor.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>Lo único que se muestra al usuario es la dirección URL llamada. Como mencionamos anteriormente, con una petición<code>GET</code> del usuario,se verán los datos en su barra de direcciones, pero con una petición <code>POST</code> no será de esta manera. Esto puede ser muy importante por dos razones:</p>
+
+<ol>
+ <li>Si necesita enviar una contraseña (o cualquier otra pieza sensible de los datos), nunca utilice el método<code>GET</code> o se arriesga a mostrar en la barra de direcciones, lo que sería muy inseguro.</li>
+ <li>Si necesita enviar una gran cantidad de datos, el método <code>POSt</code> es preferible debido a que algunos navegadores limitan los tamaños de las direcciones URL. Además, muchos servidores limitan la longitud de las URL que aceptan.</li>
+</ol>
+
+<h3 id="En_el_lado_Servidor_la_recuperación_de_los_datos">En el lado  Servidor: la recuperación de los datos</h3>
+
+<p>Sea cual sea el método HTTP que elija, el servidor recibe una cadena que será analizada con el fin de obtener los datos como una lista de pares clave / valor. La forma de acceder a esta lista depende de la plataforma de desarrollo que use y de las estructuras específicas que pueda estar usando con él. La tecnología se utiliza también determina cómo se manejan claves duplicadas; A menudo,se da prioridad al valor recibido más recientemente para una clave dada .</p>
+
+<h4 id="Ejemplo_PHP_Raw">Ejemplo: PHP Raw</h4>
+
+<p><a href="http://php.net/">PHP</a> ofrece algunos objetos globales para acceder a los datos. Suponiendo que usted ha utilizado el método<code>POST</code>, el siguiente ejemplo sólo toma los datos y lo muestra al usuario. Por supuesto, lo que se hace con los datos depende de usted. Es posible visualizarlos, almacenarlos en una base de datos, enviarlos por correo electrónico, o procesarlos de alguna otra manera.</p>
+
+<pre class="brush: php">&lt;? Php
+  // La variable global $ _POST que permite acceder a los datos enviados con el método POST por su nombre
+  // Para acceder a los datos enviados con el método GET, puede usar $ _GET
+  $ = Decir htmlspecialchars ($ _POST [ 'decir']);
+  $ A = htmlspecialchars ($ _POST [ 'a']);
+
+  echo $ digamos, '', $ a;
+?&gt;</pre>
+
+<p>Este ejemplo muestra una página con los datos que enviamos. Esto se puede ver en acción en nuestro archivo ejemplo <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/php-example.html">php-example.html</a> - que contiene un ejemplo similar en forma como el que hemos visto antes, con un <code>method</code>con parámetro <code>post</code>y un <code>action</code> con parámetro <code>php-example.php</code> Cuando se envía, envía los datos del formulario al script <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/php-example.php">php-ejemplo.php</a> , que contiene el código de PHP que se ha visto en el bloque anterior. Cuando se ejecuta este código, la salida en el navegador es <code>Hi Mom</code>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14693/php-result.png" style="display: block; margin: 0 auto;"></p>
+
+<div class="note">
+<p><strong>Nota</strong> : Este ejemplo no funcionará cuando se carga en un navegador localmente - los navegadores no pueden interpretar  código PHP, por lo que cuando se envía el formulario en el navegador sólo  se puede ofrecer la descarga del archivo PHP para usted. Para conseguir que funcione, es necesario ejecutar el ejemplo a través de un servidor PHP de algún tipo. Buenas opciones para probar PHP locales son <a href="https://www.mamp.info/en/downloads/">MAMP</a> (Mac y Windows) y <a href="http://ampps.com/download">AMPPS</a> (Mac, Windows, Linux).</p>
+</div>
+
+<h4 id="Ejemplo_Python">Ejemplo: Python</h4>
+
+<p>Este ejemplo muestra como se puede utilizar Python para hacer la misma cosa - mostrar los datos presentados en una página web. Se utiliza el <a href="http://flask.pocoo.org/">framework Flask</a> para la prestación de las plantillas, el manejo de la presentación de datos de formulario, etc (ver <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/python-example.py">python-example.py</a> ).</p>
+
+<pre class="line-numbers  language-html"><code class="language-html">from flask import Flask, render_template, request
+app = Flask(__name__)
+
+@app.route('/', methods=['GET', 'POST'])
+def form():
+    return render_template('form.html')
+
+@app.route('/hello', methods=['GET', 'POST'])
+def hello():
+    return render_template('greeting.html', say=request.form['say'], to=request.form['to'])
+
+if __name__ == "__main__":
+    app.run()</code></pre>
+
+<p>Las dos plantillas de referencia en el código anterior son los siguientes:</p>
+
+<ul>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/form.html">form.html</a> : La misma forma que hemos visto anteriormente en la {{anch ( "El método POST")}} sección, pero con el <code>action</code>conjunto a <code>\{{ url_for('hello') }}</code>. (Esta es una <a href="http://jinja.pocoo.org/docs/2.9/">Jinja2</a> plantilla, que es básicamente HTML, pero puede contener llamadas al código Python que ejecuta el servidor web que figura entre corchetes. <code>url_for('hello')</code>Básicamente está diciendo "redirigir a <code>/hello</code>cuando se envía el formulario").</li>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/greeting.html">greeting.html</a> :<span id="result_box" lang="es"><span>Esta plantilla solo contiene una línea que representa los dos bits de datos que se le pasan cuando se procesa</span></span>. Esto se hace a través de la función <code>hello()</code>que se ha visto anteriormente, y que se ejecuta cuando la URL<code>/hello</code> es accedida.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong> : Una vez más, este código no funcionará si sólo intenta cargarlo en un navegador directamente. Python funciona un poco diferente a PHP - Para ejecutar este código local que necesita para <a href="/en-US/docs/Learn/Server-side/Django/development_environment#Installing_Python_3">instalar Python / PIP</a> , a continuación, instalar el frasco utilizando <code>pip3 install flask</code>. En este punto, usted debe ser capaz de ejecutar el ejemplo utilizando <code>python3 python-example.py</code>, a continuación, deberá navegar a <code>localhost:5000</code>en su barra de direcciones.</p>
+</div>
+
+<h4 id="Otros_lenguajes_y_frameworks">Otros lenguajes y frameworks</h4>
+
+<p>Hay muchas otras tecnologías del lado del servidor que puede utilizar para el manejo de formularios, incluyendo <a href="/en-US/docs/" title="/en-US/docs/">Perl</a> , <a href="/en-US/docs/" title="/en-US/docs/">Java</a> , <a href="http://www.microsoft.com/net" title="http://www.microsoft.com/net">.Net</a> , <a href="/en-US/docs/" title="/en-US/docs/">Rubí</a> , etc. Sólo tiene que elegir el que más le guste. Dicho esto, vale la pena señalar que es muy raro de usar estas tecnologías directamente porque esto puede ser complicado. Es más común el uso de uno de los muchos marcos de trabajo para un manejo más fácil del código, tales como:</p>
+
+<ul>
+ <li><a href="http://symfony.com/" rel="external" title="http://symfony.com/">Symfony</a> para PHP</li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django" rel="external" title="https://www.djangoproject.com/">Django</a> para Python (un poco más pesado que el <a href="http://flask.pocoo.org/">frasco</a> , pero con más herramientas y opciones).</li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Express</a> de Node.js</li>
+ <li><a href="http://rubyonrails.org/" rel="external" title="http://rubyonrails.org/">Ruby on Rails</a> Ruby</li>
+ <li><a href="http://grails.org/" rel="external" title="http://grails.org/">Grails</a> para Java</li>
+ <li>etc.</li>
+</ul>
+
+<p>Vale la pena señalar que incluso el uso de estos marcos, trabajar con formularios no es necesariamente <em>fácil</em> . Pero es mucho más fácil que tratar de escribir toda la funcionalidad  a partir de cero, además, le ahorrará mucho tiempo.</p>
+
+<div class="note">
+<p><strong>Nota</strong> : Está más allá del alcance de este artículo para enseñarle cualquier lenguaje del lado del servidor o marcos de trabajo. Los enlaces de arriba le dará un poco de ayuda,en caso de que desee aprender.</p>
+</div>
+
+<h2 id="Un_caso_especial_el_envío_de_archivos">Un caso especial: el envío de archivos</h2>
+
+<p>El envío de archivos con formularios HTML es un caso especial. Los archivos son datos binarios - o considerados como tal - mientras que todos los demás datos son datos de texto. Debido a que HTTP es un protocolo de texto, existen requisitos especiales para el manejo de datos binarios.</p>
+
+<h3 id="El_htmlattrxref_enctype_form_atributo">El {{htmlattrxref ( "enctype", "form")}} atributo</h3>
+
+<p>Este atributo le permite especificar el valor de la cabecera <code>Content-Type</code> HTTP incluido en la solicitud que se genera cuando se envía el formulario. Esta cabecera es muy importante porque le dice al servidor qué tipo de datos se está enviando. Por defecto, su valor es <code>application/x-www-form-urlencoded</code>. En términos humanos, esto significa: "<span class="short_text" id="result_box" lang="es"><span>Estos son datos de formulario que han sido codificados dentro de los parámetros de la URL</span></span>."</p>
+
+<p>Si desea enviar archivos, es necesario tomar tres pasos adicionales:</p>
+
+<ul>
+ <li>Ajuste el {{htmlattrxref ( "método", "form")}} atributo <code>POST</code>porque el contenido del archivo no se puede poner dentro de los parámetros de URL.</li>
+ <li>Establecer el valor de {{htmlattrxref ( "enctype", "form")}} que <code>multipart/form-data</code>debido a que los datos se dividen en múltiples partes, una para cada archivo más uno para los datos de texto incluidos en el cuerpo del formulario (si también se introduce el texto en la formulario).</li>
+ <li>Incluir uno o más widgets <a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets#File_picker">selector de archivos</a> para permitir a los usuarios seleccionar el archivo (s) que será subido.</li>
+</ul>
+
+<p>Por ejemplo:</p>
+
+<pre class="brush: html">&lt;Form method = "post" enctype = "multipart / form-data"&gt;
+  &lt;Div&gt;
+    &lt;Label for = "archivo"&gt; ​​Elija un archivo &lt;/ label&gt;
+    &lt;Input type = "file" id = "file" name = "myFile"&gt;
+  &lt;/ Div&gt;
+  &lt;Div&gt;
+    &lt;&gt; Botón Enviar el archivo &lt;/ botón&gt;
+  &lt;/ Div&gt;
+&lt;/ Form&gt;</pre>
+
+<div class="note">
+<p><strong>Nota:</strong> Algunos navegadores son compatibles con la {{htmlattrxref ( "múltiple", "input")}} atributo en el elemento {{HTMLElement ( "input")}}, lo que permite elegir más de un archivo  para subir con un único elemento <code>&lt;input&gt;</code> . Cómo el servidor gestiona los archivos realmente depende de la tecnología utilizada en el servidor. Como se mencionó anteriormente, el uso de un marco le hará la vida mucho más fácil.</p>
+</div>
+
+<div class="warning">
+<p><strong>Advertencia:</strong> Muchos servidores están configurados con un límite de tamaño para los archivos y las peticiones HTTP con el fin de prevenir el abuso. Es importante comprobar este límite con el administrador del servidor antes de enviar un archivo.</p>
+</div>
+
+<h2 id="Precauciones_de_seguridad_comunes">Precauciones de seguridad comunes</h2>
+
+<p>Cada vez que envíe datos a un servidor, debe tener en cuenta la seguridad de sus formularios HTML que son con mucho, los vectores de ataque más comunes (en lugares donde ocurren los ataques contra servidores). Los problemas nunca vienen de los formulariosHTML mismos - sino que proceden de cómo el servidor maneja los datos.</p>
+
+<p><span id="result_box" lang="es"><span>Dependiendo de lo que estés haciendo, hay algunos problemas de seguridad muy conocidos con los que te enfrentarás</span></span>:</p>
+
+<h3 id="XSS_y_CSRF">XSS y CSRF</h3>
+
+<p>Cross-Site Scripting (XSS) y Cross-Site Request Falsification (CSRF) son tipos comunes de ataques que se producen cuando se muestran los datos enviados por un usuario y que son devueltos a otro usuario para otro uso.</p>
+
+<p>XSS permite a los atacantes inyectar secuencias de comandos del lado del cliente en páginas Web visitadas por otros usuarios. Una vulnerabilidad de secuencias de comandos entre sitios, puede ser utilizada por los atacantes para eludir los controles de acceso, como la <a href="/en-US/docs/JavaScript/Same_origin_policy_for_JavaScript" title="/ Es-ES / docs / JavaScript / Same_origin_policy_for_JavaScript">política del mismo origen</a> . El efecto de estos ataques pueden ir desde una pequeña molestia a un riesgo de seguridad.</p>
+
+<p>Los ataques CSRF son similares a los ataques XSS porque comienzan de la misma manera - mediante la inyección de comandos de cliente en páginas Web - pero su objetivo es diferente. Los atacantes CSRF tratan de escalar privilegios  de un usuario de mayores privilegios (por ejemplo, un administrador de sitio) para realizar una acción que no deberían ser capaces de hacer (por ejemplo, el envío de datos a un usuario no fiable).</p>
+
+<p>Los ataques XSS explotan la confianza depositada a un usuario de un sitio web, mientras que los ataques CSRF abusan de la confianza que un sitio web ofrece para sus usuarios.</p>
+
+<p>Para evitar estos ataques, siempre se deben comprobar los datos que un usuario envía a su servidor y (si es necesario mostrarlos) <span id="result_box" lang="es"><span>trate de no mostrar el contenido HTML provisto por el usuario</span></span>. En su lugar, se deben procesar los datos proporcionados por el usuario para no mostrarlos al pie de la letra. <span style="line-height: 1.5;">Casi todos los marcos de trabajo (<strong>frameworks</strong>) en el mercado hoy implementan un filtro mínimo que eliminan el código HTML {{HTMLElement ( "script")}}, {{HTMLElement ( "iframe")}} y {{HTMLElement ( "objeto")}} si fuesen enviados por cualquier usuario. Esto ayuda a mitigar el riesgo, pero no necesariamente lo erradica.</span></p>
+
+<h3 id="Inyección_SQL">Inyección SQL</h3>
+
+<p>La inyección de SQL es un tipo de ataque que intenta realizar acciones en una base de datos utilizada por el sitio web de destino. Esto normalmente implica el envío de una petición SQL con la esperanza de que el servidor la ejecutará (por lo general cuando el servidor de aplicaciones intenta almacenar los datos enviados por un usuario). Esto es en realidad <a href="https://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project" rel="external" title="https://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project">uno de los principales vectores de ataque contra los sitios web </a> .</p>
+
+<p>Las consecuencias pueden ser terribles, que van desde la pérdida de datos o hasta que los ataques  tomen el control de la infraestructura de todo el sitio web mediante el uso de una escalada de privilegios. Esta es una amenaza muy seria y nunca debe almacenar los datos enviados por un usuario sin realizar alguna sanitización (por ejemplo, mediante el uso <code><a href="http://www.php.net/manual/en/function.mysql-real-escape-string.php" rel="external" title="http://www.php.net/manual/en/function.mysql-real-escape-string.php">mysql_real_escape_string()</a></code>de una infraestructura de PHP / MySQL).</p>
+
+<h3 id="Inyección_de_cabecera_HTTP_y_la_inyección_de_correo_electrónico">Inyección de cabecera HTTP y la inyección de correo electrónico</h3>
+
+<p>Este tipo de ataques pueden ocurrir cuando su aplicación se basa cabeceras HTTP o mensajes de correo electrónico basado en la entrada de datos por un usuario en un formulario. Estos no dañan directamente su servidor o afectan a sus usuarios, pero son una puerta abierta a problemas más profundos tales como el secuestro de sesión o ataques de phishing.</p>
+
+<p>Estos ataques son en su mayoría en silencio, y pueden volver a su servidor en un <a href="http://en.wikipedia.org/wiki/Zombie_(computer_science)" rel="exernal" title="http://en.wikipedia.org/wiki/Zombie_(computer_science)">zombi</a> .</p>
+
+<h3 id="Sea_paranoico_Nunca_confíe_en_sus_usuarios">Sea paranoico: Nunca confíe en sus usuarios</h3>
+
+<p>Entonces, ¿cómo se lucha contra estas amenazas? Este es un tema mucho más allá de esta guía, pero hay algunas reglas a tener en cuenta. La regla más importante es: nunca vuelva a confiar en sus usuarios, incluyáse a sí mismo; incluso un usuario de confianza podría haber sido secuestrado.</p>
+
+<p>Todos los datos que vienen a su servidor deben comprobarse y ser desinfectados. Siempre. Sin excepción.</p>
+
+<ul>
+ <li>Escapar caracteres potencialmente peligrosos. Los caracteres específicos con los que debe tener cuidado variarán dependiendo del contexto en el que se utilizan los datos y la plataforma de servidores que emplean, pero todos los lenguajes del lado del servidor tienen funciones de este.</li>
+ <li>Limite la cantidad de entrada de datos para permitir sólo lo necesario.</li>
+ <li>Sandbox subido archivos (almacenarlos en un servidor diferente y permitir el acceso al archivo sólo a través de un subdominio diferente o incluso mejor a través de un nombre de dominio totalmente diferente).</li>
+</ul>
+
+<p>Debería evitar muchos o  la mayoría de estos problemas, si sigue estas tres reglas, pero siempre es una buena idea  obtener una revisión de seguridad realizada por una tercera parte competente. No asuma que usted ha visto todos los posibles problemas.</p>
+
+<div class="note">
+<p><strong>Nota</strong> : La <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">seguridad del sitio web</a> el artículo de nuestro <a href="/en-US/docs/Learn/Server-side">lado del servidor</a> tema de aprendizaje analiza las amenazas anteriores y las posibles soluciones con más detalle.</p>
+</div>
+
+<h2 id="Conclusión">Conclusión</h2>
+
+<p>Como se puede ver, el envío de los datos del formulario es fácil, pero asegurar una aplicación puede ser complicado. Sólo recuerde que un desarrollador de aplicaciones para usuario no es el que debe definir el modelo de seguridad de los datos. Sí, como veremos, es posible <a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/ es-ES / docs / HTML / Formularios / Data_form_validation">realizar la validación de los datos del lado del cliente</a> , pero el servidor no puede confiar en esta validación porque no tiene manera de saber realmente lo que  sucede en el lado del cliente.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<p>Si desea obtener más información sobre la seguridad de una aplicación web, se puede excavar en estos recursos:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Server-side/First_steps">programación web del lado del servidor primeros pasos</a></li>
+ <li><a href="https://www.owasp.org/index.php/Main_Page" rel="external" title="https://www.owasp.org/index.php/Main_Page">El Proyecto Open Web Application Security (OWASP)</a></li>
+ <li><a href="http://shiflett.org/" rel="external" title="http://shiflett.org/">el blog de Chris Shiflett sobre Seguridad en PHP</a></li>
+</ul>
+
+<p>{{PreviousMenuNext ( "Aprende / html / Formularios / The_native_form_widgets", "Saber / html / Formularios / Form_validation", "Aprender / html / Forms")}}</p>
diff --git a/files/es/learn/html/forms/styling_html_forms/index.html b/files/es/learn/html/forms/styling_html_forms/index.html
new file mode 100644
index 0000000000..26b4173ee8
--- /dev/null
+++ b/files/es/learn/html/forms/styling_html_forms/index.html
@@ -0,0 +1,345 @@
+---
+title: Estilizando formularios HTML
+slug: Learn/HTML/Forms/Styling_HTML_forms
+translation_of: Learn/Forms/Styling_web_forms
+---
+<p>En este artículo aprenderemos como utilizar <a href="/es/docs/Web/CSS">CSS</a> con formularios <a href="/es/docs/Web/HTML">HTML</a>  para hacerlos más atractivos. Aunque parezca extraño, esto es algo que puede llegar a ser complicado. Por razones históricas y técnicas, los widgets de formulario no suelen llevarse bien con CSS. Por este motivo, muchos desarrolladores prefieren <a href="https://developer.mozilla.org/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">construir sus propios widgets</a> para tener el control de su aspecto en vez de utilizar los nativos. De todas formas, con los modernos navegadores, los diseñadores web <span style="line-height: 23.3333339691162px;">cada vez</span><span style="line-height: 1.5;"> tienen  más control sobre el diseño de los elementos de formulario. Vamos a profundizar en esto.</span></p>
+
+<h2 id="¿Porqué_es_tan_difícil_aplicar_estilos_a_formularios_con_CSS">¿Porqué es tan difícil aplicar estilos a formularios con CSS?</h2>
+
+<p>En los principios de la Web —allá por1995—se añadieron los controles de formulario en la <a href="http://www.ietf.org/rfc/rfc1866.txt">2ª especificación HTML.</a> Debido a la complejidad de los widgets de formulario, los implementadores prefirieron dejar que el sistema operativo subyacente se encargara de su manejo y presentación.</p>
+
+<p>Pocos años después,  se creó<span style="line-height: 23.3333339691162px;"> </span><span style="line-height: 1.5;">CSS y lo que era una necesidad técnica</span>— es decir, el uso de widgets nativos para implementar controles de formulario—empezó a requerir estilizado. Y en los primeros días de CSS, el estilizado de formularios no fué una prioridad.</p>
+
+<p>Por otra parte, como los usuarios estaban acostumbrados a la apariencia visual de sus plataformas respectivas, los fabricantes de navegadores fueron reacios a hacer que los controles de formularios pudieran recibir estilos.</p>
+
+<p>Hoy en día, ni siquiera uno solo de los navegadores actuales implementa <span style="line-height: 23.3333339691162px;">completamente</span><span style="line-height: 1.5;"> a CSS 2.1. Afortunadamente, con el tiempo, los fabricantes de navegadores han ido mejorado su soporte a CSS para los elementos de formulario e, incluso considerando que su usabilidad tiene mala reputación, actualmente, ya se puede usar CSS para estilizar </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Forms" style="line-height: 1.5;">formularios HTML.</a></p>
+
+<h3 id="No_todos_los_widgets_se_crean_igual_con_CSS">No todos los widgets se crean igual con CSS</h3>
+
+<p>Actualmente aun se encuentran dificultades cuando se utiliza CSS con formularios; estos problemas se pueden dividir en tres categorías.</p>
+
+<h4 id="El_bueno">El bueno</h4>
+
+<p>A algunos elementos se les puede dar estilo con pocos o ningún problema independientemente de la plataforma. Entre estos se incluyen los siguientes elementos estructurales:</p>
+
+<ol>
+ <li>{{HTMLElement("form")}}</li>
+ <li>{{HTMLElement("fieldset")}}</li>
+ <li>{{HTMLElement("label")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output">&lt;output&gt;</a></li>
+</ol>
+
+<p style="line-height: 23.3333339691162px;">Esto también incluye todos los campos de texto (tanto los de línea simple como los de línea múltiple) y los botones.</p>
+
+<ol style="line-height: 23.3333339691162px;">
+</ol>
+
+<p style="line-height: 18px; font-size: 1.28571428571429rem;">El malo</p>
+
+<p>Hay otros elementos a los que raramente se les puede aplicar estilos y pueden llegar a requerir  <span style="line-height: 23.3333339691162px;">técnicas</span><span style="line-height: 1.5;"> complejas y </span><span style="line-height: 1.5;">ocasionalmente necesitan conocimientos avanzados de CSS3.</span></p>
+
+<p>Entre estos se incluyen el elemento {{HTMLElement("legend")}} ; que no puede posicionarse adecuadamente en todas las plataformas.  Los elementos checkbox y los botones de radio no permiten que se le apliquen estilos directamente;  de todas formas, gracias a CSS3 esto puede soslayarse. Al contenido de  <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-placeholder">placeholder </a>no se le puede aplicar estilo de ninguna forma convencional; sin embargo, todos los navegadores que lo implementan  también implementan pseudo-elementos<span style="line-height: 23.3333339691162px;"> o </span><span style="line-height: 1.5;">pseud</span><span style="line-height: 1.5;">o-clases propi</span>etarias que permiten darles estilo<span style="line-height: 1.5;">.</span></p>
+
+<p><span style="line-height: 1.5;">Veremos como trabajar con estos casos específicos en el artículo </span><a href="/en-US/docs/Advanced_styling_for_HTML_forms" style="line-height: 23.3333339691162px;" title="/en-US/docs/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a><span style="line-height: 23.3333339691162px;">.</span></p>
+
+<h4 id="El_feo">El feo</h4>
+
+<p>En algunos elementos, simplemente no se puede utilizar CSS. Estos son todos los elementos avanzados de interface de usuario tales como los controles range, color, o date, e igualmente pasa con los widgets desplegables como <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select">select</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option">option</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup">optgropup </a>y <a href="/es/docs/HTML/Elemento/datalist">datalist</a>. Respecto al selector de archivos, es bien sabido que no puede aplicarse estilo en absoluto. Los nuevos elementos <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress">progress </a>y <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter">meter </a>también caen dentro de esta categoría.</p>
+
+<p>El principal problema con todos estos widgets viene de que todos ellos tienen una estructura muy compleja y CSS no es lo suficientemente expresivo para estilizar cada una de sus sutiles partes. Si lo que se quiere es personalizar estos widgets se deberá recurrir a javaScript para construir un árbol DOM que te permita acceder a ellos. Para aprender como conseguirlo mirar en el artículo <a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" style="line-height: 23.3333339691162px; text-decoration: underline;" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets"><span style="line-height: 23.3333339691162px;"><u>How to </u></span>build<span style="line-height: 23.3333339691162px;"><u> </u></span>custom<span style="line-height: 23.3333339691162px;"><u> </u></span>form<span style="line-height: 23.3333339691162px;"><u> </u></span>widgets</a>.</p>
+
+<h2 id="Estilizado_básico">Estilizado básico</h2>
+
+<p>Aplicar estilos a <a href="https://developer.mozilla.org/es/docs/Web/Guide/HTML/Forms/Styling_HTML_forms#El_bueno">elementos que son fáciles de estilizar</a> con CSS, no debería suponer ninguna dificultad ya que básicamente se comportan como cualquier otro elemento HTML. De todas formas, el agente de usuario de estilos para cada navegador puede mostrar pequeñas inconsistencias por lo que a continuación daremos algunos trucos para ayudar a aplicar estilos más cómodamente.</p>
+
+<h3 id="Campos_de_búsqueda">Campos de búsqueda</h3>
+
+<p>Las cajas de búsqueda son el único tipo de campo de texto que pueden ofrecer más dificultad al aplicar estilos. En los navegadores basados en webkit (Chrome, Safari, etc.) se debe lidiar con la propiedad -webkit-. Discutiremos esta propiedad más tarde en el artículo: <a href="/en-US/docs/Advanced_styling_for_HTML_forms" style="line-height: 23.3333339691162px; text-decoration: underline;" title="/en-US/docs/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a><span style="line-height: 23.3333339691162px;">.</span></p>
+
+<h4 id="Ejemplo">Ejemplo</h4>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;input type="search"&gt;
+&lt;/form&gt;
+</pre>
+
+<pre class="brush: css">input[type=search] {
+  border: 1px dotted #999;
+  border-radius: 0;
+
+  -webkit-appearance: none;
+}</pre>
+
+<p><img alt="This is a screenshot of a search filed on Chrome, with and without the use of -webkit-appearance" src="/files/4153/search-chrome-macos.png" style="border-style: solid; border-width: 1px; height: 107px; width: 179px;"></p>
+
+<p>En esta captura de pantalla pueden verse dos campos de búsqueda en Chrome, ambos campos tienen definido el borde como en nuestro ejemplo, pero el primero no utiliza -webkit- mientras que el segundo si lo hace con -webkit-appearance:none. Las diferencias son evidentes.</p>
+
+<h3 id="Fuentes_y_texto">Fuentes y texto</h3>
+
+<p>Las fuentes y capacidades de texto de CSS  se pueden utilizar sin problemas en cualquier widget (y sí, se puede utilizar <a href="/es/docs/Web/CSS/@font-face">@font-face</a> en formularios). De todas formas, el comportamiento de los navegadores no es siempre consistente. Por defecto, algunos widgets no heredan <a href="/es/docs/Web/CSS/font-family">font-family</a> ni <a href="/es/docs/Web/CSS/font-size">font-size</a> de sus antecesores. Y muchos navegadores utilizan la apariencia por defecto. Para mantener la coherencia de los formularios con el resto de elementos se deben añadir las siguientes reglas a la hoja de estilos:</p>
+
+<pre class="brush: css">button, input, select, textarea {
+  font-family : inherit;
+  font-size   : 100%;
+}</pre>
+
+<p>La siguiente captura de pantalla muestra estas incosistencias; a la izquierda la apariencia por defecto en Firefox sobre Mac OS X, usando las fuentes por defecto de la plataforma. A la derecha los mismos elementos aplicando nuestras reglas de armonización de fuentes.</p>
+
+<p><img alt="This is a screenshot of the main form widgets on Firefox on Mac OSX, with and without font harmonization" src="/files/4157/font-firefox-macos.png" style="border-style: solid; border-width: 1px; height: 234px; width: 420px;"></p>
+
+<p>Hay muchas controversia sobre si los formularios tienen mejor aspecto usando los estilos por defecto del sistema o usando estilos personalizados que coincidan con el resto del contenido. Como diseñador del sitio o aplicación Web esta decisión  es suya.</p>
+
+<h3 id="Modelo_de_cajas">Modelo de cajas</h3>
+
+<p>Todos los campos de texto tienen soporte completo para las propiedades relacionadas con el modelo de cajas de CSS (<a href="/es/docs/Web/CSS/width">width</a>, <a href="/es/docs/Web/CSS/height">height</a>, <a href="/es/docs/Web/CSS/padding_paspartu">padding</a>, margin y <a href="/es/docs/CSS/border">border</a>). Igual que antes, los navegadores se remiten a los estilos por defecto del sistema cuando muestran estos widgets. A cada cual te corresponde el como combinarlos dentro del resto de contenido. Si  se quieres mantener el aspecto nativo de los widgets, entonces hay que afrontar pequeñas inconsistencias de tamaño.</p>
+
+<p>Esto es porque cada widget tiene sus propias reglas para el orden, margen y padding. Por lo que si quieres darle el mismo tamaño a varios widgets diferentes se debe usar la propiedad box-sizing: </p>
+
+<pre class="brush: css">input, textarea, select, button {
+  width : 150px;
+  margin: 0;
+
+  -webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
+     -moz-box-sizing: border-box; /* For legacy (Firefox &lt;29) Gecko based browsers */
+          box-sizing: border-box;
+}</pre>
+
+<p><img alt="This is a screenshot of the main form widgets on Chrome on Windows 7, with and without the use of box-sizing." src="/files/4161/size-chrome-win7.png" style="border-style: solid; border-width: 1px; height: 213px; width: 358px;"></p>
+
+<p>En la captura de pantalla de arriba, la columna la izquierda es sin utilizar box-sizing, mientras que la de la derecha usa esta propiedad con el valor border-box. Obsérvese cómo esto permite asegurar que todos los elementos ocupan la misma cantidad de espacio, independientemente de las reglas por defecto de la plataforma.</p>
+
+<h3 id="Posicionado">Posicionado</h3>
+
+<p>El posicionado de formularios HTML <span style="line-height: 23.3333339691162px;">no es </span><span style="line-height: 1.5;">generalmente  un problema; sin embargo, hay dos elementos a los que prestar una especial atención:</span></p>
+
+<h4 id="legend">legend</h4>
+
+<p>El elemento <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend">legend </a>no tiene problemas de estilizado a excepción de las reglas de posición. En los navegadores el elemento <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend">legend </a>se posiciona encima del borde superior de su antecesor <a href="/es/docs/HTML/Elemento/fieldset">fieldset</a>. No existe ninguna posibilidad de colocarlo dentro del flujo HTML más allá del borde superior. Sin embargo se puede posicionar de forma relativa o absoluta mediante la propiedad position. En cualquier caso sigue siendo parte del borde de fieldset.</p>
+
+<p>Debido a que el elemento legend es muy importante por razones de accesibilidad (esto es lo que leen las tecnologías de asistencia como parte de las etiquetas de cada elemento de formulario dentro del fieldset), bastante menudo se empareja con un título que se oculta pero siendo aun accesible, de la forma siguiente:</p>
+
+<h5 id="HTML">HTML</h5>
+
+<pre class="brush: html">&lt;fieldset&gt;
+  &lt;legend&gt;Hi!&lt;/legend&gt;
+  &lt;h1&gt;Hello&lt;/h1&gt;
+&lt;/fieldset&gt;</pre>
+
+<h5 id="CSS">CSS</h5>
+
+<pre class="brush: css">legend {
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}</pre>
+
+<h4 id="textarea">textarea</h4>
+
+<p>Por defecto, todos los navegadores consideran el elemento <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea">textarea </a>como un inline block alineado con la línea base del texto. Esto es algo que raramente es lo que en realidad se quiere. Para convertir este elemento de un inline-block a uno tipo block, se realiza bastante fácilmente utilizando la propiedad <a href="/es/docs/CSS/display">display</a>. Si lo que quieres es utilizarlo inline, es corriente cambiar la alineación vertical: </p>
+
+<pre class="brush: css">textarea {
+  vertical-align: top;
+}</pre>
+
+<h2 id="Ejemplo_2">Ejemplo</h2>
+
+<p>Vamos a ver un ejemplo de como aplicar estilo a un formulario HTML. Esto nos ayudará a tener las ideas más claras. A continuación construiremos el siguiente formulario de contacto de esta postal:</p>
+
+<p><img alt="This is what we want to achieve with HTML and CSS" src="/files/4149/screenshot.png" style="border-style: solid; border-width: 1px; height: 249px; width: 370px;"></p>
+
+<h3 id="HTML_2">HTML</h3>
+
+<p>El HTML  incluye poco más de lo que se utiliza en el primer artículo de <a href="/en-US/docs/HTML/Forms/My_first_HTML_form">esta guía</a>; apenas el título y algún ID más.</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;h1&gt;to: Mozilla&lt;/h1&gt;
+
+  &lt;div id="from"&gt;
+    &lt;label for="name"&gt;from:&lt;/label&gt;
+    &lt;input type="text" id="name" name="user_name"&gt;
+  &lt;/div&gt;
+
+  &lt;div id="reply"&gt;
+    &lt;label for="mail"&gt;reply:&lt;/label&gt;
+    &lt;input type="email" id="mail" name="user_email"&gt;
+  &lt;/div&gt;
+
+  &lt;div id="message"&gt;
+    &lt;label for="msg"&gt;Your message:&lt;/label&gt;
+    &lt;textarea id="msg" name="user_message"&gt;&lt;/textarea&gt;
+  &lt;/div&gt;
+
+  &lt;div class="button"&gt;
+    &lt;button type="submit"&gt;Send your message&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="CSS_2">CSS</h3>
+
+<p>¿Aqui es donde empieza la diversión! Antes de empezar a codificar, necesitamos tres elementos adicionales:</p>
+
+<ol>
+ <li>El <a href="https://developer.mozilla.org/files/4151/background.jpg">fondo </a>de la postal</li>
+ <li>Una fuente tipográfica: <a href="http://www.fontsquirrel.com/fonts/Secret-Typewriter" rel="external" title="http://www.fontsquirrel.com/fonts/Secret-Typewriter">la "Secret Typewriter" de fontsquirrel.com</a></li>
+ <li>Una fuente manuscrita: <a href="http://www.fontsquirrel.com/fonts/Journal" rel="external" title="http://www.fontsquirrel.com/fonts/Journal">la "Journal" fde fontsquirrel.com</a></li>
+</ol>
+
+<p>Ahora podemos repasar el código. Primero preparamos las bases definiendo las reglas <span style="line-height: 23.3333339691162px;"> </span><a href="https://developer.mozilla.org/es/docs/Web/CSS/@font-face" style="line-height: 23.3333339691162px;" title="@font-face permite al autor especificar fuentes online para visualizar en sus páginas web. Al permitir a los autores proporcionar sus propias fuentes, @font-face elimina la necesidad de depender del numero limitado de fuentes de usuarios instaladas en sus computadoras."><code>@font-face</code></a> y los elementos básicos de <a href="https://developer.mozilla.org/es/docs/Web/HTML/Elemento/body" style="line-height: 23.3333339691162px;" title="This article hasn't been written yet. Please consider contributing!"><code>&lt;body&gt;</code></a> y <a href="https://developer.mozilla.org/es/docs/Web/HTML/Elemento/form" style="line-height: 23.3333339691162px;" title="This article hasn't been written yet. Please consider contributing!"><code>&lt;form&gt;</code></a><span style="line-height: 23.3333339691162px;"> </span></p>
+
+<pre class="brush: css">@font-face{
+  font-family : "handwriting";
+
+  src : url('journal.eot');
+  src : url('journal.eot?') format('eot'),
+        url('journal.woff') format('woff'),
+        url('journal.ttf') format('truetype');
+}
+
+@font-face{
+  font-family : "typewriter";
+
+  src : url('veteran_typewriter.eot');
+  src : url('veteran_typewriter.eot?') format('eot'),
+        url('veteran_typewriter.woff') format('woff'),
+        url('veteran_typewriter.ttf') format('truetype');
+}
+
+body {
+  font  : 21px sans-serif;
+
+  padding : 2em;
+  margin  : 0;
+
+  background : #222;
+}
+
+form {
+  position: relative;
+
+  width  : 740px;
+  height : 498px;
+  margin : 0 auto;
+
+  background: #FFF url(background.jpg);
+}</pre>
+
+<p>Ahora podemos posicionar los elementos, incluidos el título y los elementos del formulario.</p>
+
+<pre class="brush: css">h1 {
+  position : absolute;
+  left : 415px;
+  top  : 185px;
+
+  font : 1em "typewriter", sans-serif;
+}
+
+#from {
+  position: absolute;
+  left : 398px;
+  top  : 235px;
+}
+
+#reply {
+  position: absolute;
+  left : 390px;
+  top  : 285px;
+}
+
+#message {
+  position: absolute;
+  left : 20px;
+  top  : 70px;
+}</pre>
+
+<p>Aquí es donde empezamos a trabajar los propios elementos. Primero, nos aseguramos que los elementos <span style="line-height: 23.3333339691162px;"> </span><a href="https://developer.mozilla.org/es/docs/Web/HTML/Elemento/label" style="line-height: 23.3333339691162px;" title="This article hasn't been written yet. Please consider contributing!"><code>&lt;label&gt;</code></a> reciben la fuente correcta.</p>
+
+<pre class="brush: css">label {
+  font : .8em "typewriter", sans-serif;
+}</pre>
+
+<p>Los campos de texto necesitan algunas reglas comunes. Dicho simplemente, le quitamos bordes y fondos y redefinimos el padding y margin.</p>
+
+<pre class="brush: css">input, textarea {
+  font    : .9em/1.5em "handwriting", sans-serif;
+
+  border  : none;
+  padding : 0 10px;
+  margin  : 0;
+  width   : 240px;
+
+  background: none;
+}</pre>
+
+<p>Cuando uno de estos campos recibe el foco, vamos a resaltarlo con un fondo transparente gris claro. Tome nota de que es importante añadir la propiedad <span style="line-height: 23.3333339691162px;"> </span><a class="new" href="https://developer.mozilla.org/es/docs/Web/CSS/outline" style="color: rgb(153, 0, 0); line-height: 23.3333339691162px;" title="The documentation about this has not yet been written; please consider contributing!"><code>outline</code></a><span style="line-height: 23.3333339691162px;"> </span> para quitar el resaltado de enfoque añadido por defecto por algunos navegadores.</p>
+
+<pre class="brush: css">input:focus, textarea:focus {
+  background   : rgba(0,0,0,.1);
+  border-radius: 5px;
+  outline      : none;
+}</pre>
+
+<p>Ahora que nuestros campos de texto están terminados, necesitamos ajustar como se muestran los campos de simple y múltiple línea para que coincidan, ya que lo normal es que por defecto no se vean igual.</p>
+
+<p>El campo de línea simple requiere de algunos trucos para que se vean bien en Internet Explorer. Internet Explorer no define la altura de los campos basándose en la altura natural de la fuente (lo cual es el comportamiento normal del resto de navegadores). Para corregir esto necesitamos añadir explícitamente la altura a los campos de la siguiente forma:</p>
+
+<pre class="brush: css">input {
+    height: 2.5em; /* for IE */
+    vertical-align: middle; /* This is optional but it makes legacy IEs look better */
+}</pre>
+
+<p>Los elementos <code style="color: rgb(153, 0, 0); line-height: 23.3333339691162px;"><a class="new" href="https://developer.mozilla.org/es/docs/Web/HTML/Elemento/textarea" style="color: rgb(153, 0, 0); line-height: 23.3333339691162px;" title="This article hasn't been written yet. Please consider contributing!">&lt;textarea&gt;</a> </code>se muestran por defecto como bloques, Las dos cosas importantes aquí son las propiedades  <a class="new" href="https://developer.mozilla.org/es/docs/Web/CSS/resize" style="color: rgb(153, 0, 0); line-height: 19.0909080505371px;" title="The documentation about this has not yet been written; please consider contributing!"><code>resize</code></a><span style="line-height: 19.0909080505371px;"> y </span><code style="line-height: 19.0909080505371px;"><a href="https://developer.mozilla.org/es/docs/Web/CSS/overflow" style="line-height: 19.0909080505371px;" title="La propiedad CSS overflow  especifica: si recortar contenido, dibujar barras de desplazamiento o mostrar el contenido excedente en un elemento a nivel de bloque.">overflow</a>. </code>Ya que nuestro <code style="line-height: 19.0909080505371px;">diseño </code>es de tamaño fijo, utilizaremos la propiedad <code>resize</code> para impedir que el usuario pueda cambiar el tamaño de los campos multilínea. La propiedad <span style="line-height: 19.0909080505371px;"> </span><a href="https://developer.mozilla.org/es/docs/Web/CSS/overflow" style="line-height: 19.0909080505371px;" title="La propiedad CSS overflow  especifica: si recortar contenido, dibujar barras de desplazamiento o mostrar el contenido excedente en un elemento a nivel de bloque."><code>overflow</code></a><span style="line-height: 19.0909080505371px;"> </span> se utiliza para que el campo se muestre de forma más consistente a través de diversos navegadores; algunos de ellos ponen por defecto esta propiedad en <code>auto</code>, pero en nuestro caso, es mejor asegurarse de que todos estén en <code>auto.</code></p>
+
+<pre class="brush: css">textarea {
+  display : block;
+
+  padding : 10px;
+  margin  : 10px 0 0 -10px;
+  width   : 340px;
+  height  : 360px;
+
+  resize  : none;
+  overflow: auto;
+}</pre>
+
+<p>El elemento <code style="line-height: 19.0909080505371px;"><a href="https://developer.mozilla.org/es/docs/Web/HTML/Elemento/button" style="line-height: 19.0909080505371px;" title="This article hasn't been written yet. Please consider contributing!">&lt;button&gt;</a> </code>se acomoda muy bien a CSS; se puede hacer lo que se quiera con el, ¡incluso utilizando<code style="line-height: 19.0909080505371px;"> <a href="https://developer.mozilla.org/en-US/docs/CSS/Pseudo-elements">pseudo-elementos</a>!</code></p>
+
+<pre class="brush: css">button {
+  position     : absolute;
+  left         : 440px;
+  top          : 360px;
+
+  padding      : 5px;
+
+  font         : bold .6em sans-serif;
+  border       : 2px solid #333;
+  border-radius: 5px;
+  background   : none;
+
+  cursor       : pointer;
+
+-webkit-transform: rotate(-1.5deg);
+   -moz-transform: rotate(-1.5deg);
+    -ms-transform: rotate(-1.5deg);
+     -o-transform: rotate(-1.5deg);
+        transform: rotate(-1.5deg);
+}
+
+button:after {
+  content: " &gt;&gt;&gt;";
+}
+
+button:hover,
+button:focus {
+  outline   : none;
+  background: #000;
+  color   : #FFF;
+}</pre>
+
+<p>Y ¡listo! Sientase libre de probarlo usted mismo; como comprobará ¡esto funciona!</p>
+
+<h2 id="Conclusión">Conclusión</h2>
+
+<p>Como puede verse, mientras que queramos construir formularios solo con campos de texto y botones, es sencillo aplicarles estilos con CSS. Si desea saber más pequeños trucos de CSS que le hagan más fácil la vida al trabajar con formularios, echele un vistazo a la parte de formularios de <a href="http://necolas.github.com/normalize.css" rel="external" style="line-height: 19.0909080505371px;" title="http://necolas.github.com/normalize.css">the normalize.css project</a><span style="line-height: 19.0909080505371px;">.</span></p>
+
+<p><span style="line-height: 19.0909080505371px;">En el próximo artículo, veremos como manejar widgets de formulario de la categoría de "el malo" y "el feo".</span></p>
diff --git a/files/es/learn/html/forms/the_native_form_widgets/index.html b/files/es/learn/html/forms/the_native_form_widgets/index.html
new file mode 100644
index 0000000000..c8a2651837
--- /dev/null
+++ b/files/es/learn/html/forms/the_native_form_widgets/index.html
@@ -0,0 +1,326 @@
+---
+title: Controles de formulario originales
+slug: Learn/HTML/Forms/The_native_form_widgets
+translation_of: Learn/Forms/Basic_native_form_controls
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Forms/How_to_structure_an_HTML_form", "Learn/Forms/HTML5_input_types", "Learn/Forms")}}</div>
+
+<p class="summary">En el <a href="/es/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">artículo anterior</a>, marcamos un ejemplo de formulario web funcional, presentamos algunos controles de formulario y elementos estructurales comunes, y nos centramos en las mejores prácticas de accesibilidad. A continuación, veremos con detalle las funciones de los diferentes controles de formulario, o <em>widgets</em>, y estudiaremos todas las diferentes opciones de que se dispone para la recopilación de diferentes tipos de datos. En este artículo en particular, veremos el conjunto original de controles de formulario, disponible en todos los navegadores desde los primeros días de la web.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática y de <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">lenguaje HTML</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Comprender en detalle el conjunto original de controles de formulario originales disponibles en los navegadores para la recopilación de datos y su implementación con HTML.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Ya conoces algunos elementos de formulario, incluidos {{HTMLelement ('form')}}, {{HTMLelement ('fieldset')}}, {{HTMLelement ('legend')}}, {{HTMLelement ('textarea' )}}, {{HTMLelement ('label')}}, {{HTMLelement ('button')}} y {{HTMLelement ('input')}}. Este artículo expone:</p>
+
+<ul>
+ <li>Los tipos de entrada comunes {{HTMLelement('input/button', 'button')}}, {{HTMLelement('input/checkbox', 'checkbox')}}, {{HTMLelement('input/file', 'file')}}, {{HTMLelement('input/hidden', 'hidden')}}, {{HTMLelement('input/image', 'image')}}, {{HTMLelement('input/password', 'password')}}, {{HTMLelement('input/radio', 'radio')}}, {{HTMLelement('input/reset', 'reset')}}, {{HTMLelement('input/submit', 'submit')}} y {{HTMLelement('input/text', 'text')}}.</li>
+ <li>Algunos de los atributos que comunes para todos los controles de formulario.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Las características que se consideran en este artículo son compatibles con todos los navegadores, lo que no es el caso para todos los controles de formulario. En los próximos dos artículos vamos a exponer los controles de formulario que se han añadido a HTML5 más recientemente. Si quieres una referencia más avanzada, consulta nuestra <a href="/es/docs/Web/HTML/Elemento#Formularios">referencia a elementos de formulario HTML</a>, y en particular nuestra extensa referencia a <a href="/es/docs/Web/HTML/Elemento/input">tipos &lt;input&gt;</a>.</p>
+</div>
+
+<h2 id="Campos_de_entrada_de_texto">Campos de entrada de texto</h2>
+
+<p>Los campos de texto {{htmlelement ("input")}} son los controles de formulario más básicos. Son un modo muy cómodo de permitir al usuario introducir cualquier tipo de datos, y ya hemos visto algunos ejemplos sencillos.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Los campos de texto de los formularios HTML son controles de entrada de texto sencillos sin formato. Esto significa que no puedes usarlos para aplicar una <a href="/en-US/docs/Rich-Text_Editing_in_Mozilla" title="/en-US/docs/Rich-Text_Editing_in_Mozilla">edición enriquecida </a> (negrita, cursiva, etc.). Todos los controles de formulario que encuentres con texto enriquecido son controles de formulario personalizados creados con HTML, CSS y JavaScript.</p>
+</div>
+
+<p>Todos los controles de texto básicos comparten algunos comportamientos comunes:</p>
+
+<ul>
+ <li>Se pueden marcar como {{htmlattrxref ("readonly","input")}} (el usuario no puede modificar el valor de entrada, pero este se envía con el resto de los datos del formulario) o {{htmlattrxref ("disabled","input")}} (el valor de entrada no se puede modificar y nunca se envía con el resto de los datos del formulario).</li>
+ <li>Pueden tener un {{htmlattrxref ("placeholder","input")}}; se trata de un texto que aparece dentro de la caja de entrada de texto y que se usa para describir brevemente el propósito de la caja de texto.</li>
+ <li>Pueden presentar una limitación de <a href="/en-US/docs/Web/HTML/Attributes/size">tamaño</a> (el tamaño físico de la caja de texto) y de la <a href="/en-US/docs/Web/HTML/Attributes/maxlength" title="/en-US/docs/HTML/Element/input#attr-maxlength">extensión máxima</a> (el número máximo de caracteres que se pueden poner en la caja de texto).</li>
+ <li>Admiten <a href="/en-US/docs/HTML/Element/input#attr-spellcheck" title="/en-US/docs/HTML/Element/input#attr-spellcheck"> corrección ortográfica</a> (utilizando el atributo <a href="/en-US/docs/Web/HTML/Attributes/spellcheck"><code>spellcheck</code></a>), si el navegador la admite.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: El elemento {{htmlelement ("input")}} es único entre los elementos HTML porque puede tomar muchas formas diferentes según el valor de su atributo. Se utiliza para crear la mayoría de los tipos de controles de formulario, que incluyen campos de texto de una sola línea, controles para la fecha y la hora, controles sin introducción de texto, como casillas de verificación, botones de opción y selectores de color, y botones.</p>
+</div>
+
+<h3 id="Campos_de_texto_de_una_sola_línea">Campos de texto de una sola línea</h3>
+
+<p>Un campo de texto de una sola línea se crea utilizando un elemento {{HTMLElement ("input")}} cuyo valor de atributo {{htmlattrxref ("type","input")}} se establece en <code>text</code>, u omitiendo por completo el atributo {{htmlattrxref ( "type","input")}} (<code>text</code> es el valor predeterminado). El valor <code>text</code> de este atributo también es el valor alternativo si el navegador no reconoce el valor que has especificado para el atributo {{htmlattrxref ("type","input")}} (por ejemplo, si especificas <code>type="color"</code> y el navegador no está dotado en origen de un control de selección de colores).</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Puedes encontrar ejemplos de todos los tipos de campo de texto de una sola línea en GitHub en <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/single-line-text-fields.html">single-line-text-fields.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/single-line-text-fields.html">o consultarlo en vivo</a>).</p>
+</div>
+
+<p>Aquí hay un ejemplo básico de campo de texto de una sola línea:</p>
+
+<pre class="brush: html notranslate">&lt;input type="text" id="comment" name="comment" value="I'm a text field"&gt;</pre>
+
+<p>Los campos de texto de una sola línea solo tienen una restricción verdadera: si escribes el texto con saltos de línea, el navegador elimina esos saltos de línea antes de enviar los datos al servidor.</p>
+
+<p><em>La captura de pantalla siguiente muestra los tipos de entrada de texto predeterminado, activo (con el foco) y deshabilitado en Firefox 71 y Safari en macOS y en Chrome 79 y Edge 18 en Windows 10.</em></p>
+
+<p><img alt="Captura de pantalla del atributo deshabilitado y predeterminado: estilo para  una entrada de texto activa (con el foco) en Firefox, Safari, Chrome y Edge." src="https://mdn.mozillademos.org/files/17021/disabled.png" style="height: 113px; width: 442px;"></p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: HTML5 ha mejorado el campo de texto básico original de una sola línea al añadir valores especiales para el atributo {{htmlattrxref ("type", "input")}} que imponen restricciones de validación específicas y otras características, por ejemplo, específicas para introducir direcciones URL o números. Los expondremos en el artículo siguiente: <a href="/en-US/docs/Learn/Forms/HTML5_input_types">Los tipos de entrada en HTML5</a>.</p>
+</div>
+
+<h4 id="Campo_de_contraseña">Campo de contraseña</h4>
+
+<p>Uno de los tipos de entrada originales era el tipo de campo de texto <code>password</code>:</p>
+
+<pre class="brush: html notranslate">&lt;input type="password" id="pwd" name="pwd"&gt;</pre>
+
+<p>El valor de la contraseña no añade restricciones especiales al texto que se introduce, pero oculta el valor que se introduce en el campo (por ejemplo, con puntos o asteriscos) para impedir que otros puedan leerlo.</p>
+
+<p>Ten en cuenta que esto es solo una función de interfaz de usuario; a menos que envíes tu formulario en modo seguro, se enviará como texto plano, lo que es malo desde el punto de vista de la seguridad porque alguien con malas intenciones podría interceptar tus datos y robar tus contraseñas, datos de tarjetas de crédito o cualquier otra cosa que hayas enviado. La mejor manera de proteger a los usuarios de esto es alojar cualquier página que contenga formularios en una ubicación de conexión segura (es decir, en una dirección <code>https://</code>), de modo que los datos se cifren antes de enviarse.</p>
+
+<p>Los navegadores reconocen las implicaciones de seguridad de enviar datos de formulario por una conexión insegura y disponen de mensajes de advertencia para disuadir a los usuarios de usar formularios no seguros. Para obtener más información sobre las implementaciones de Firefox al respecto, consulta el artículo <a href="/es/docs/Seguridad/ContraseñasInseguras">Contraseñas inseguras</a>.</p>
+
+<h3 id="Contenido_oculto">Contenido oculto</h3>
+
+<p>Otro control de texto original es el tipo de entrada <code>hidden</code>. Se usa para crear un control de formulario que es invisible para el usuario, pero que aun así se envía al servidor junto con el resto de los datos del formulario una vez se transmiten; por ejemplo, es posible que desees enviar una marca de tiempo al servidor que indique cuándo se realizó un pedido. Al estar oculto, el usuario no puede ver ni editar su valor intencionadamente, el control nunca recibirá el foco y un lector de pantalla tampoco lo detectará.</p>
+
+<pre class="brush: html notranslate">&lt;input type="hidden" id="timestamp" name="timestamp" value="1286705410"&gt;
+</pre>
+
+<p>Si creas un elemento así, es necesario establecer sus atributos <code>name</code> y <code>value</code>. Su valor puede establecerse dinámicamente a través de JavaScript. El tipo de entrada oculta no debe tener ninguna etiqueta asociada.</p>
+
+<p>Otros tipos de entrada de texto, como {{HTMLElement ("input / search", "search")}}, {{HTMLElement ("input / url", "url")}} y {{HTMLElement ("input / tel" , "tel")}}, se añadieron con HTML5. Se tratarán en el próximo artículo: Tipos de entrada HTML5.</p>
+
+<h2 id="Elementos_de_selección_casillas_de_verificación_y_botones_de_opción">Elementos de selección: casillas de verificación y botones de opción</h2>
+
+<p>Los elementos de selección (o <em>checkable items</em>, en inglés) son controles cuyo estado puede cambiar cuando se hace clic en ellos o en sus etiquetas asociadas. Hay dos tipos de elementos de selección: las casillas de verificación (o <em>check boxes</em>) y los botones de opción (o <em>radio buttons</em>). Ambos usan el atributo <code>checked</code> para indicar si el control de formulario está seleccionado por defecto o no.</p>
+
+<p>Vale la pena señalar que estos controles no se comportan exactamente como otros controles de formulario. Para la mayoría de los controles de formulario, cuando se envía el formulario, se envían todos los controles que tienen un atributo <a href="/en-US/docs/Web/HTML/Attributes/name"><code>name</code></a>, incluso si en ellos no se ha introducido ningún valor. En el caso de elementos de selección, sus valores se envían solo si están seleccionados. Si no están seleccionados, no se envía nada, ni siquiera su nombre. Si están seleccionados pero no tienen ningún valor asignado, el nombre se envía con el valor <em>on.</em></p>
+
+<div class="note">
+<p><strong>Nota</strong>: Puedes encontrar los ejemplos de esta sección en GitHub como <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/checkable-items.html">checkable-items.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/checkable-items.html">o consultarlos en vivo</a>).</p>
+</div>
+
+<p>Para una usabilidad/accesibilidad óptima, te recomendamos delimitar cada lista de elementos que estén relacionados entre sí dentro de un elemento {{htmlelement ("fieldset")}} con un elemento {{htmlelement ("legend")}} que proporcione una descripción general de la lista. Cada par individual de elementos {{htmlelement ("label")}}/{{htmlelement ("input")}} ha de estar contenido en un elemento de lista propio (o similar). El elemento {{htmlelement ('label')}} asociado se coloca en general inmediatamente después del botón de opción o la casilla de verificación, con las instrucciones para el grupo de botones de opción o casillas de verificación, que suelen ser el contenido del elemento {{htmlelement ("legend")}}. Observa las estructuras de ejemplo en los ejemplos asociados anteriores.</p>
+
+<h3 id="Casillas_de_verificación">Casillas de verificación</h3>
+
+<p>Las casillas de verificación se crean estableciendo el atributo <a href="/en-US/docs/Web/HTML/Attributes/type"><code>type</code></a> del elemento {{HTMLElement ("input")}} en el valor {{HTMLElement ("input / checkbox", "checkbox")}}.</p>
+
+<pre class="brush: html notranslate">&lt;input type="checkbox" id="carrots" name="carrots" value="carrots" checked&gt;
+</pre>
+
+<p>Al incluir el atributo <code><a href="/en-US/docs/Web/HTML/Attributes/checked">checked</a></code>, la casilla de verificación se marca automáticamente cuando se carga la página. Al hacer clic en la casilla de verificación o en su etiqueta asociada, la casilla de verificación se activa o desactiva.</p>
+
+<p>Las capturas de pantalla siguientes muestran casillas de verificación predeterminadas, activas (con el foco) y deshabilitadas en Firefox 71 y Safari 13 en macOS y Chrome 79 y Edge 18 en Windows 10:</p>
+
+<p><img alt="Casillas de verificación predeterminadas, activas y deshabilitadas en Firefox 71 y Safari 13 en Mac y Chrome 79 y Edge 18 en Windows 10" src="https://mdn.mozillademos.org/files/17024/checkboxes.png" style="height: 203px; width: 293px;"></p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Las casillas de verificación y los botones de opción con atributo <code><a href="/en-US/docs/Web/HTML/Attributes/checked">checked</a></code> al cargarse coinciden con la pseudoclase {{cssxref ('<code>:default</code>')}}, incluso aunque ya no estén seleccionadas. Las que están seleccionadas coinciden con la pseudoclase <code>{{cssxref(':checked')}}</code>.</p>
+</div>
+
+<p id="Radio_button">Debido a su naturaleza activa-inactiva, las casillas de verificación se consideran botones de conmutación, y muchos desarrolladores y diseñadores han ampliado el estilo de casilla de verificación predeterminado para crear botones que parecen interruptores de conmutación. Aquí puedes ver un <a href="https://mdn.github.io/learning-area/html/forms/toggle-switch-example/">ejemplo en acción</a> (observa también el <a href="https://github.com/mdn/learning-area/blob/master/html/forms/toggle-switch-example/index.html">código fuente</a>).</p>
+
+<h3 id="Botón_de_opción">Botón de opción</h3>
+
+<p>Un botón de opción se crea estableciendo el atributo {{htmlattrxref ("type", "input")}} del elemento {{HTMLElement ("input")}} en el valor <code>radio</code>:</p>
+
+<pre class="brush: html notranslate">&lt;input type="radio" id="soup" name="meal" checked&gt;</pre>
+
+<p>Es posible asociar diversos botones de opción. Si comparten el mismo valor de atributo {{htmlattrxref ("name", "input")}}, se considera que están en el mismo grupo de botones. Solo un botón dentro de un grupo puede estar activado en cada momento. Esto significa que cuando uno de ellos se selecciona, todos los demás se deseleccionan automáticamente. Al enviar el formulario, solo se envía el valor del botón de opción seleccionado. Si ninguno de ellos está seleccionado, se considera que el conjunto completo de botones de opción está en un estado desconocido y no se envía ningún valor con el formulario. Cuando en un grupo de botones con el mismo nombre se selecciona uno de los botones de opción, no es posible deseleccionar todos los botones sin reiniciar el formulario.</p>
+
+<pre class="brush: html notranslate">&lt;fieldset&gt;
+  &lt;legend&gt;¿Cuál es tu comida favorita?&lt;/legend&gt;
+  &lt;ul&gt;
+    &lt;li&gt;
+      &lt;label for="soup"&gt;Sopa&lt;/label&gt;
+      &lt;input type="radio" id="soup" name="meal" value="soup" checked&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      &lt;label for="curry"&gt;Curry&lt;/label&gt;
+      &lt;input type="radio" id="curry" name="meal" value="curry"&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      &lt;label for="pizza"&gt;Pizza&lt;/label&gt;
+      &lt;input type="radio" id="pizza" name="meal" value="pizza"&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/fieldset&gt;</pre>
+
+<p>Las capturas de pantalla siguientes muestran botones de opción sin seleccionar y seleccionados, algunos con el foco y otros desactivados sin seleccionar y seleccionados, en Firefox 71 y Safari 13 en MacOS y Chrome 79 y Edge 18 en Windows 10.</p>
+
+<p><img alt="Botones de opción en Firefox 71 y Safari 13 en Mac y Chrome 79 y Edge 18 en Windows 10" src="https://mdn.mozillademos.org/files/17022/radios.png" style="height: 142px; width: 196px;"></p>
+
+<h2 id="Botones">Botones</h2>
+
+<p>El botón de opción no es realmente un botón, a pesar de su nombre; sigamos adelante y echemos un vistazo a los controles de formulario que son botones propiamente. Hay tres tipos de entrada según el tipo de botones que se utilicen:</p>
+
+<dl>
+ <dt><code>submit</code></dt>
+ <dd>Envía los datos del formulario al servidor. Para los elementos {{HTMLElement ("button")}}, omitir el atributo <code>type</code> (o introducir un valor de tipo no válido) da como resultado un botón de envío (<em>submit</em>).</dd>
+ <dt><code>reset</code></dt>
+ <dd>Restablece todos los controles de formulario a sus valores por defecto.</dd>
+ <dt><code>button</code></dt>
+ <dd>Botones que no tienen efecto automático, pero que se pueden personalizar con código JavaScript.</dd>
+</dl>
+
+<p>Además, el elemento {{htmlelement ("button")}} puede tomar un atributo <code>type</code> para imitar estos tres tipos de entrada. La diferencia principal entre los dos es que los elementos <code>&lt;button&gt;</code> propiamente admiten aplicación de estilo en mayor medida.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: El tipo de entrada <code>image</code> también se representa como un botón. También desarrollaremos este tema más adelante.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Puedes encontrar los ejemplos de esta sección en GitHub como <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/button-examples.html">button-examples.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/button-examples.html">o consultarlos en vivo</a>).</p>
+</div>
+
+<p>A continuación puedes encontrar ejemplos de cada tipo de botón <code>&lt;input&gt;</code>, junto con el tipo de botón equivalente.</p>
+
+<h3 id="enviar">enviar</h3>
+
+<pre class="brush: html notranslate">&lt;button type="submit"&gt;
+    Este es un &lt;strong&gt;botón de envío&lt;/strong&gt;
+&lt;/button&gt;
+
+&lt;input type="submit" value="Este es un botón de envío"&gt;</pre>
+
+<h3 id="reiniciar">reiniciar</h3>
+
+<pre class="brush: html notranslate">&lt;button type="reset"&gt;
+    Este es un &lt;strong&gt;botón de reinicio&lt;/strong&gt;
+&lt;/button&gt;
+
+&lt;input type="reset" value="Este es un botón de reinicio"&gt;</pre>
+
+<h3 id="anónimo">anónimo</h3>
+
+<pre class="brush: html notranslate">&lt;button type="button"&gt;
+    Este es un &lt;strong&gt;botón anónimo&lt;/strong&gt;
+&lt;/button&gt;
+
+&lt;input type="button" value="Este es un botón anónimo"&gt;</pre>
+
+<p>Los botones siempre se comportan igual, independientemente de su usas un elemento {{HTMLElement ("button")}} o un elemento {{HTMLElement ("input")}}. Sin embargo, como puedes ver en los ejemplos, los elementos {{HTMLElement ("button")}} te permiten usar HTML en tu contenido, que se inserta entre las etiquetas <code>&lt;button&gt;</code> de apertura y cierre. Los elementos {{HTMLElement ("input")}}, por otro lado, son elementos vacíos; el contenido que muestran está inserto en el atributo <code>value</code> y, por lo tanto, solo acepta contenido de texto sin formato.</p>
+
+<p>Los ejemplos siguientes muestran los tipos de entrada de botones predeterminados, activos y deshabilitados: en Firefox 71 y Safari 13 en macOS, y Chrome 79 y Edge 18 en Windows 10.</p>
+
+<p><img alt="Tipos de entrada de botones predeterminados, activos y deshabilitados en Firefox 71 y Safari 13 en Mac y Chrome 79 y Edge 18 en Windows 10" src="https://mdn.mozillademos.org/files/17023/buttons.png" style="height: 182px; width: 286px;"></p>
+
+<h3 id="Botón_de_imagen">Botón de imagen</h3>
+
+<p>El control <strong>botón de imagen</strong> se muestra exactamente como un elemento {{HTMLElement ("img")}}, excepto que cuando el usuario hace clic en él, se comporta como un botón de envío.</p>
+
+<p>Se crea un botón de imagen usando un elemento {{HTMLElement ("input")}} con su atributo {{htmlattrxref ("type","input")}} establecido en el valor <code>image</code>. Este elemento admite exactamente el mismo conjunto de atributos que el elemento {{HTMLElement ("img")}}, además de todos los atributos que admiten el resto de botones de formulario.</p>
+
+<pre class="brush: html notranslate">&lt;input type="image" alt="¡Púlsame!" src="my-img.png" width="80" height="30"&gt;</pre>
+
+<p>Si el botón de imagen se usa para enviar un formulario, este control no envía su valor; en lugar de ello se envían las coordenadas X e Y del clic que se ha hecho sobre la imagen (las coordenadas son relativas a la imagen, lo que significa que la esquina superior izquierda de la imagen representa la coordenada (0, 0)). Las coordenadas se envían como dos pares clave/valor:</p>
+
+<ul>
+ <li>La clave del valor X es el valor del atributo {{htmlattrxref ("name","input")}} seguido de la cadena de caracteres «<em>.x</em>».</li>
+ <li>La clave del valor Y es el valor del atributo {{htmlattrxref ("name","input")}} seguido de la cadena de caracteres «<em>.y</em>».</li>
+</ul>
+
+<p>Por ejemplo, cuando haces clic en las coordenadas (123, 456) de la imagen y se hace el envío por el método <code>get</code>, verás los valores añadidos a la URL de la manera siguiente:</p>
+
+<pre class="notranslate">http://foo.com?pos.x=123&amp;pos.y=456</pre>
+
+<p>Esta es una forma muy cómoda de construir un «mapa dinámico». La forma en que se envían y recuperan estos valores se detalla en el artículo <a href="/es/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Enviar los datos del formulario</a>.</p>
+
+<h2 id="Selector_de_archivos">Selector de archivos</h2>
+
+<p>Hay un último tipo de <code>&lt;input&gt;</code> que nos llegó a principios del HTML: el tipo entrada de archivo. Los formularios pueden enviar archivos a un servidor (esta acción específica también se detalla en el artículo <a href="/es/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Enviar los datos del formulario</a>). El control de selección de archivos se puede usar para elegir uno o más archivos para enviar.</p>
+
+<p>Para crear un <a href="/en-US/docs/Web/HTML/Element/input/file">control de selección de archivos</a>, utilizas el elemento {{HTMLElement ("input")}} con su atributo {{htmlattrxref ("type","input")}} establecido en <code>file</code>. Es posible restringir los tipos de archivos que se aceptan utilizando el atributo {{htmlattrxref ("accept","input")}}. Además, puedes permitir que el usuario elija más de un archivo añadiendo el atributo {{htmlattrxref ("multiple","input")}}.</p>
+
+<h4 id="Ejemplo">Ejemplo</h4>
+
+<p>En este ejemplo, se crea un control de selección de archivos que solicita archivos de imágenes gráficas. El usuario puede seleccionar múltiples archivos en este caso.</p>
+
+<pre class="brush: html notranslate">&lt;input type="file" name="file" id="file" accept="image/*" multiple&gt;</pre>
+
+<p>En algunos dispositivos móviles, el control de selección de archivos puede acceder a fotos, vídeos y audio capturados directamente por la cámara y el micrófono del dispositivo y añadir información de captura al atributo <code>accept</code> de la manera siguiente:</p>
+
+<pre class="notranslate">&lt;input type="file" accept="image/*;capture=camera"&gt;
+&lt;input type="file" accept="video/*;capture=camcorder"&gt;
+&lt;input type="file" accept="audio/*;capture=microphone"&gt;</pre>
+
+<h2 id="Atributos_comunes">Atributos comunes</h2>
+
+<p>Muchos de los elementos que se utilizan para definir controles de formulario tienen sus atributos específicos propios. Sin embargo, hay un conjunto de atributos que son comunes para todos los elementos de formulario. Ya has conocido algunos, pero a continuación encontrarás una lista de esos atributos comunes para referencias futuras:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Nombre del atributo</th>
+   <th scope="col">Valor por defecto</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTML/Attributes/autofocus">autofocus</a></code></td>
+   <td>false</td>
+   <td>Este atributo booleano te permite especificar que el elemento ha de tener el foco de entrada automáticamente cuando se carga la página. En un documento, solo un elemento asociado a un formulario puede tener este atributo especificado.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTML/Attributes/disabled">disabled</a></code></td>
+   <td>false</td>
+   <td>Este atributo booleano indica que el usuario no puede interactuar con el elemento. Si no se especifica este atributo, el elemento hereda su configuración del elemento que lo contiene, por ejemplo, {{HTMLElement ("fieldset")}}. Si el elemento que lo contiene no tiene el atributo establecido en <code>disabled</code>, el elemento está habilitado.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTML/Attributes/form">form</a></code></td>
+   <td></td>
+   <td>El elemento <code>&lt;form&gt;</code> con el que está asociado el control, que se usa cuando no está anidado dentro de ese formulario. El valor del atributo debe ser el atributo <code>id</code> de un elemento {{HTMLElement ("form")}} del mismo documento. Esto te permite asociar un formulario con un control de formulario que esté fuera de aquel, incluso si está dentro de un elemento de formulario diferente.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTML/Attributes/name">name</a></code></td>
+   <td></td>
+   <td>El nombre del elemento; se envía con los datos del formulario.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTML/Attributes/value">value</a></code></td>
+   <td></td>
+   <td>El valor inicial del elemento.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Conclusión">Conclusión</h2>
+
+<p>Este artículo ha expuesto los tipos de entrada más antiguos: el conjunto original que se introdujo en los primeros días de HTML, que es compatible con todos los navegadores. En el artículo siguiente veremos los valores del atributo <code>type</code> que se han añadido en HTML5 más recientemente.</p>
+
+<p>{{PreviousMenuNext("Learn/Forms/How_to_structure_an_HTML_form", "Learn/Forms/HTML5_input_types", "Learn/Forms")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Tu primer formulario HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">Cómo estructurar un formulario HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">Los controles básicos de formulario originales</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/HTML5_input_types">Tipos de entrada HTML5</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Additional_form_controls">Controles de formulario adicionales</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/UI_pseudo-classes">Pseudoclases UI</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Aplicar estilo a formularios HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Validación de datos en un formulario</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Enviar los datos de un formulario</a></li>
+</ul>
+
+<h3 id="Temas_avanzados">Temas avanzados</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Enviar formularios con JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">Cómo crear widgets de formularios personalizados</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">Formularios HTML en navegadores antiguos</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Cuestiones avanzadas de aplicación de estilo para formularios HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Tabla de compatibilidad de los controles de formulario</a></li>
+</ul>
diff --git a/files/es/learn/html/forms/tipos_input_html5/index.html b/files/es/learn/html/forms/tipos_input_html5/index.html
new file mode 100644
index 0000000000..d463399e93
--- /dev/null
+++ b/files/es/learn/html/forms/tipos_input_html5/index.html
@@ -0,0 +1,276 @@
+---
+title: Tipos de input de HTML5
+slug: Learn/HTML/Forms/Tipos_input_HTML5
+translation_of: Learn/Forms/HTML5_input_types
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Forms/Basic_native_form_controls", "Learn/Forms/Other_form_controls", "Learn/Forms")}}</div>
+
+<p class="summary">En el <a href="/en-US/docs/Learn/Forms/Basic_native_form_controls">artículo anterior</a> vimos el elemento {{htmlelement("input")}} y los valores de su atributo <code>type</code>, disponibles desde los inicios de HTML. Ahora veremos en detalle la funcionalidad de los controles de formulario más recientes, incluyendo algunos tipos de input nuevos, los cuales fueron añadidos en HTML5 para permitir la recolección de tipos de datos específicos</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Requisitos previos:</th>
+   <td>Formación básica en informática, y una <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">comprensión básica de HTML</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Entender los valores de tipo input disponibles más recientes para crear controles de formulario nativos, y cómo implementarlos utilizando HTML.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: La mayoría de las características discutidas en este artículo tienen un amplio soporte en todos los navegadores, anotaremos cualquier excepción. Si quieres más detalles referente al soporte de navegadores, deberías consultar nuestra <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Forms">referéncia de elementos de formulario HTML</a>, y en particular nuestra referéncia extensiva de <a href="/en-US/docs/Web/HTML/Element/input">Tipos de &lt;input&gt;</a>.</p>
+</div>
+
+<p>Debido a que la apariéncia de un control de formulario puede ser algo distinta con respecto a unas especificaciones del diseñador, los desarrolladores web a veces construyen sus propios controles de formulario personalizados. Cubrimos este aspecto en un tutorial avanzado: <a href="/en-US/docs/Learn/Forms/How_to_build_custom_form_widgets">Cómo construir widgets de formulario personalizados</a>.</p>
+
+<h2 id="Campo_de_dirección_de_correo_electrónico">Campo de dirección de correo electrónico</h2>
+
+<p>Este tipo de campo se define utilizando el valor  <code>email</code> en el atributo {{htmlattrxref("type","input")}} del elemento &lt;input&gt;:</p>
+
+<pre class="brush: html notranslate">&lt;input type="email" id="email" name="email"&gt;</pre>
+
+<p>Cuando se utiliza este valor {{htmlattrxref("type","input")}} , se le obliga al usuario a escribir dentro del campo una dirección de correo electrónico válida. Cualquier otro contenido ocasiona que el navegador muestre un mensaje de error cuando se envía el formulario. Puedes verlo en acción en la siguiente captura de pantalla</p>
+
+<p><img alt='An invalid email input showing the message "Please enter an email address."' src="https://mdn.mozillademos.org/files/17027/email_address_invalid.png" style="display: block; height: 224px; margin: 0 auto; width: 369px;"></p>
+
+<p>Puedes utilizar también el atributo <a href="/en-US/docs/Web/HTML/Attributes/multiple"><code>multiple</code></a> en combinación con el tipo input<code>email</code> para permitir que sean introducidas varias direcciones de correo electrónico separadas por comas en el mismo input:</p>
+
+<pre class="brush: html notranslate">&lt;input type="email" id="email" name="email" multiple&gt;</pre>
+
+<p>En algunos dispositivos, en particular dispositivos táctiles con teclados dinámicos como los smart phones, debería presentarse un teclado virtual que es más adecuado para introducir direcciones de correo electrónico, incluyendo la tecla <code>@</code>. Mira como ejemplo la siguiente captura de pantalla del teclado de Firefox para Android:</p>
+
+<p><img alt="firefox for android email keyboard, with ampersand displayed by default." src="https://mdn.mozillademos.org/files/17054/fx-android-email-type-keyboard.jpg" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0 auto; width: 400px;"></p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Puedes encontrar ejemplos sobre los tipos de entrada de texto básicos en <a href="https://mdn.github.io/learning-area/html/forms/basic-input-examples/">Ejemplos input básicos</a> (Consulta también el <a href="https://github.com/mdn/learning-area/blob/master/html/forms/basic-input-examples/index.html">código fuente</a>).</p>
+</div>
+
+<p>Mejorar la experiéncia del usuario para usuarios con estos dispositivos, es otra buena razón para utilizar estos tipos de input más recientes.</p>
+
+<h3 id="Validación_del_lado_cliente">Validación del lado cliente</h3>
+
+<p>Como puedes haber visto anteriormente, <code>email</code>, junto con otros tipos de <code>input</code> más recientes, proporciona la validación de errores <em>en el lado cliente</em> de forma predeterminada, realizados por el navegador antes de que los datos obtenidos se envíen al servidor. <em>Es</em> una ayuda útil guiar a los usuarios a rellenar un formulario de forma precisa y puede ahorrar tiempo: es útil saber de inmediato que tu dato no es correcto, en vez de tener que esperar el viaje de ida y vuelta al servidor.</p>
+
+<p>Pero <em>no debería ser considerado</em> una medida de seguridad exhaustiva! Tus aplicaciones siempre deben realizar comprobaciones de seguridad en cada dato, tanto en el <em>lado servidor</em> como en el lado cliente debido a que la validación en el lado cliente es muy fácil desactivarla, por lo que usuarios malintencionados pueden enviar fácilmente datos incorrectos al servidor. Lee <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Seguridad en el sitio web</a> para tener una idea de lo que <em>podría</em> ocurrir; Implementar validación en el lado servidor está más allá del alcance de este módulo-guía, pero debería tenerlo en cuenta.</p>
+
+<p>Ten en cuenta que <code>a@b</code> es una dirección de correo electrónico válida de acuerdo a las restricciones proporcionadaas por defecto. Esto es debido a que el tipo de input <code>email</code>, permite por defecto direcciones de correo electrónico de una intranet. Para implementar un comportamiento diferente de validación puedes utilizar el atributo <code><a href="/en-US/docs/Web/HTML/Attributes/pattern">pattern</a></code>, y también puedes utilizar mensajes de error personalizados; Hablaremos de cómo utilizar estas características en <a href="/en-US/docs/Learn/Forms/Form_validation">Validación de formularios en el lado cliente</a> en un artículo posterior.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Si los datos introducidos no son una dirección de correo electrónico, habrá coincidéncia con la pseudo clase {{cssxref(':invalid')}}, y la propiedad {{domxref('validityState.typeMismatch')}} devolverá <code>true</code>.</p>
+</div>
+
+<h2 id="Campo_de_búsqueda">Campo de búsqueda</h2>
+
+<p>Los campos de búsqueda están destinados a ser utilizados para crear cajas de búsqueda en páginas y aplicaciones. Este tipo de campo se define utilizando el valor <code>search</code> en su atributo {{htmlattrxref("type","input")}}:</p>
+
+<pre class="brush: html notranslate">&lt;input type="search" id="search" name="search"&gt;</pre>
+
+<p>La diferéncia principal entre un campo <code>text</code> y un campo <code>search</code>, es la forma en que el navegador aplica estilo a su apariéncia. A menudo los campos <code>search</code> se muestran con bordes redondeados; y a veces también muestran una "Ⓧ", el cual despeja el campo de cualquier valor cuando se pulsa sobre él. Adicionalmente, en dispositivos con teclado dinámico, la tecla enter del teclado puede leer "<strong>search</strong>" o mostrar un icono de lupa.</p>
+
+<p>La captura de pantalla siguiente muestra un campo de búsqueda con contenido, en Firefox 71, Safari 13, y Chrome 79 en macOS, y Edge 18 y Chrome 79 en Windows 10. Ten en cuenta que el icono de reseteo sólo aparece si el campo tiene un valor y, aparte de Safari, sólo se muestra cuando el campo tiene el foco.</p>
+
+<p><img alt="Screenshots of search fields on several platforms." src="https://mdn.mozillademos.org/files/17028/search_focus.png" style="height: 179px; width: 549px;"></p>
+
+<p>Otra característica que vale la pena señalar es que se puede guardar los valores de un campo <code>search</code> automáticamente y reutilizarse en múltiples páginas del mismo sitio web para ofrecer autocompletado. Esta característica suele ocurrir de forma automática en la mayoría de navegadores modernos.</p>
+
+<h2 id="Campo_número_de_teléfono">Campo número de teléfono</h2>
+
+<p>Se puede crear un campo especial para introducir números de teléfono utilizando <code>tel</code> como valor del atributo {{htmlattrxref("type","input")}}:</p>
+
+<pre class="brush: html notranslate">&lt;input type="tel" id="tel" name="tel"&gt;</pre>
+
+<p>Cuando se accede desde un dispositivo táctil con teclados dinámicos, muchos de ellos mostrarán un teclado numérico cuando se encuentren con <code>type="tel"</code>, lo que significa que este tipo es útil no sólo para ser utilizado para números de teléfono, sino también cuando sea útil un teclado numérico.</p>
+
+<p>La siguiente captura de pantalla del teclado de Firefox para Android proporciona un ejemplo:</p>
+
+<p><img alt="firefox for android email keyboard, with ampersand displayed by default." src="https://mdn.mozillademos.org/files/17056/fx-android-tel-type-keyboard.jpg" style="border-style: solid; border-width: 1px; display: block; height: 276px; margin: 0px auto; width: 400px;"></p>
+
+<p>Debido a la gran variedad de formatos de número de teléfono existentes, este tipo de campo no cumple con ningún tipo de restricción sobre el valor introducido por el usuario. (Esto significa que puede incluir letras, etc...).</p>
+
+<p>Como mencionamos anteriormente, se puede utilizar el atributo <code><a href="/en-US/docs/Web/HTML/Attributes/pattern">pattern</a></code> para que asuma restricciones, sobre el cuál aprenderemos en <a href="/en-US/docs/Learn/Forms/Form_validation">Validación de formulario en el lado cliente</a>.</p>
+
+<h2 id="Campo_URL">Campo URL</h2>
+
+<p>Se puede crear un tipo especial de campo para introducir URLs utilizando el valor <code>url</code> para el atributo {{htmlattrxref("type","input")}}:</p>
+
+<pre class="brush: html notranslate">&lt;input type="url" id="url" name="url"&gt;</pre>
+
+<p>Este tipo añade restricciones de validación en el campo. El navegador informará de un error si no se introdujo el protocolo (como <code>http:</code>), o si de algún modo el URL está mal formado. En dispositivos con teclados dinámicos a menudo mostrará por defecto algunas o todas las teclas como los dos puntos, el punto, y la barra inclinada.</p>
+
+<p>Mira el siguiente ejemplo tomado de Firefox para Android:</p>
+
+<p><img alt="firefox for android email keyboard, with ampersand displayed by default." src="https://mdn.mozillademos.org/files/17057/fx-android-url-type-keyboard.jpg" style="border-style: solid; border-width: 1px; display: block; height: 325px; margin: 0px auto; width: 400px;"></p>
+
+<div class="note"><strong>Nota:</strong> Solo porque el URL esté bien formado no significa necesariamente que la dirección al que hace referéncia exista!</div>
+
+<h2 id="Campo_numérico">Campo numérico</h2>
+
+<p>Se pueden crear controles para introducir números con el {{htmlattrxref("type","input")}} <code>number</code> de {{HTMLElement("input")}}. Este control se parece a un campo de texto pero solo permite números de punto flotante, y normalmente proporciona botones deslizadores para incrementar o reducir el valor del control. En dispositivos con teclados dinámicos generalmente se muestra el teclado numérico.</p>
+
+<p>La siguiente captura de pantalla tomada de Firefox para Android proporciona un ejemplo:</p>
+
+<p><img alt="firefox for android email keyboard, with ampersand displayed by default." src="https://mdn.mozillademos.org/files/17055/fx-android-number-type-keyboard.jpg" style="border-style: solid; border-width: 1px; display: block; height: 275px; margin: 0px auto; width: 400px;"></p>
+
+<p>Con el tipo de input <code>number</code>  puedes limitar los valores mínimo y máximo permitidos definiendo los atributos {{htmlattrxref("min","input")}} y  {{htmlattrxref("max","input")}}.</p>
+
+<p>También puedes utilizar el atributo <code>step</code> para cambiar el incremento y decremento causado por los botones deslizadores. Por defecto, el tipo de input number sólo valida si el número es un entero. Para permitir números decimales, especifica <code><a href="/en-US/docs/Web/HTML/Attributes/step">step="any"</a></code>. Si se omite, su valor por defecto es <code>1</code>, lo que significa que solo son válidos números enteros.</p>
+
+<p>Miremos algunos ejemplos. El primero de los siguientes crea un control numérico cuyo valor está restringido a cualquier valor entre <code>1</code> y <code>10</code>, y sus botones cambian su valor en incrementos o decrementos de <code>2</code>.</p>
+
+<pre class="brush: html notranslate">&lt;input type="number" name="age" id="age" min="1" max="10" step="2"&gt;</pre>
+
+<p>El segundo crea un control numérico cuyo valor está restringido a cualquier valor entre el <code>0</code> y <code>1</code> ambos inclusive, y sus botones cambian su valor en incrementos o decrementos de <code>0.01</code>.</p>
+
+<pre class="brush: html notranslate">&lt;input type="number" name="change" id="pennies" min="0" max="1" step="0.01"&gt;</pre>
+
+<p>El tipo de input <code>number</code> tiene sentido cuando esté limitado el rango de valores válidos, por ejemplo la edad de una persona o su altura. Si el rango es demasiado grande para que los cambios de incremento tengan sentido ( por ejemplo los códigos postales de USA, cuyo rango va de <code>00001</code> a <code>99999</code>), entonces sería una mejor opción utilizar el tipo <code>tel</code>: proporciona el teclado numérico mientras que omite el componente de interfaz de usuario de los deslizadores de número.</p>
+
+<div class="blockIndicator note">
+<p><strong>Ten en cuenta que</strong>: En versiones inferiores a la 10 de Internet Explorer no se soportan las entradas <code>number</code></p>
+</div>
+
+<h2 id="Slider_controls">Slider controls</h2>
+
+<p>Otra forma de tomar un número es usando un <strong>slider</strong>. Podrás observar cómo son bastantes parecidas a los sitios inmobiliarios, dónde quieres determinar un máximo de precio por propiedad y filtrar tu búsqueda en el. Observaremos un ejemplo en vivo.</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/forms/range-example/index.html", '100%', 200)}}</p>
+
+<p>Usage-wise, sliders are less accurate than text fields. Therefore, they are used to pick a number whose <em>precise</em> value is not necessarily important.</p>
+
+<p>A slider is created using the {{HTMLElement("input")}} with its {{htmlattrxref("type","input")}} attribute set to the value <code>range</code>. The slider-thumb can be moved via mouse or touch, or with the arrows of the keypad.</p>
+
+<p>It's important to properly configure your slider. To that end, it's highly recommended that you set the <code><a href="/en-US/docs/Web/HTML/Attributes/min">min</a></code>, <code><a href="/en-US/docs/Web/HTML/Attributes/max">max</a></code>, and <code><a href="/en-US/docs/Web/HTML/Attributes/step">step</a></code> attributes which set the minimum, maximum and increment values, respectively.</p>
+
+<p>Let's look at the code behind the above example, so you can see how its done. First of all, the basic HTML:</p>
+
+<pre class="brush: html notranslate">&lt;label for="price"&gt;Choose a maximum house price: &lt;/label&gt;
+&lt;input type="range" name="price" id="price" min="50000" max="500000" step="100" value="250000"&gt;
+&lt;output class="price-output" for="price"&gt;&lt;/output&gt;</pre>
+
+<p>This example creates a slider whose value may range between <code>50000</code> and <code>500000</code>, which increments/decrements by 100 at a time. We've given it default value of <code>250000</code>, using the <code>value</code> attribute.</p>
+
+<p>One problem with sliders is that they don't offer any kind of visual feedback as to what the current value is. This is why we've included an {{htmlelement("output")}} element — to contain the current value (we'll also look at this element in the next article). You could display an input value or the output of a calculation inside any element, but <code>&lt;output&gt;</code> is special — like <code>&lt;label&gt;</code>, it can take a <code>for</code> attribute that allows you to associate it with the element or elements that the output value came from.</p>
+
+<p>To actually display the current value, and update it as it changed, you must use JavaScript, but this is relatively easy to do:</p>
+
+<pre class="brush: js notranslate">const price = document.querySelector('#price')
+const output = document.querySelector('.price-output')
+
+output.textContent = price.value
+
+price.addEventListener('input', function() {
+  output.textContent = price.value
+});</pre>
+
+<p>Here we store references to the <code>range</code> input and the <code>output</code> in two variables. Then we immediately set the <code>output</code>'s <code><a href="/en-US/docs/Web/API/Node/textContent">textContent</a></code> to the current <code>value</code> of the input. Finally, an event listener is set to ensure that whenever the range slider is moved, the <code>output</code>'s <code>textContent</code> is updated to the new value.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: <code>range</code> inputs are not supported in versions of Internet Explorer below 10.</p>
+</div>
+
+<h2 id="Date_and_time_pickers">Date and time pickers</h2>
+
+<p>Gathering date and time values has traditionally been a nightmare for web developers. For good user experience, it is important to provide a calendar selection UI, enabling users to select dates without necessating context switching to a native calendar application or potentially entering them in differing formats that are hard to parse. The last minute of the previous millenium can be expressed in the following different ways, for example: 1999/12/31, 23:59 or 12/31/99T11:59PM.</p>
+
+<p>HTML date controls are available to handle this specific kind of data, providing calendar widgets and making the data uniform.</p>
+
+<p>A date and time control is created using the {{HTMLElement("input")}} element and an appropriate value for the {{htmlattrxref("type","input")}} attribute, depending on whether you wish to collect dates, times, or both. Here's a live example that falls back to {{htmlelement("select")}} elements in non-supporting browsers:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/forms/datetime-local-picker-fallback/index.html", '100%', 200)}}</p>
+
+<p>Let's look at the different available types in brief. Note that the usage of these types is quite complex, especially considering browser support (see below); to find out the full details, follow the links below to the reference pages for each type, including detailed examples.</p>
+
+<h3 id="datetime-local"><code>datetime-local</code></h3>
+
+<p><code><a href="/en-US/docs/Web/HTML/Element/input/datetime-local">&lt;input type="datetime-local"&gt;</a></code> creates a widget to display and pick a date with time with no specific time zone information.</p>
+
+<pre class="brush: html notranslate">&lt;input type="datetime-local" name="datetime" id="datetime"&gt;</pre>
+
+<h3 id="month"><code>month</code></h3>
+
+<p><code><a href="/en-US/docs/Web/HTML/Element/input/month">&lt;input type="month"&gt;</a></code> creates a widget to display and pick a month with a year.</p>
+
+<pre class="brush: html notranslate">&lt;input type="month" name="month" id="month"&gt;</pre>
+
+<h3 id="time"><code>time</code></h3>
+
+<p><code><a href="/en-US/docs/Web/HTML/Element/input/time">&lt;input type="time"&gt;</a></code> creates a widget to display and pick a time value. While time may <em>display</em> in 12-hour format, the <em>value returned</em> is in 24-hour format.</p>
+
+<pre class="brush: html notranslate">&lt;input type="time" name="time" id="time"&gt;</pre>
+
+<h3 id="week"><code>week</code></h3>
+
+<p><code><a href="/en-US/docs/Web/HTML/Element/input/week">&lt;input type="week"&gt;</a></code> creates a widget to display and pick a week number and its year.</p>
+
+<p>Weeks start on Monday and run to Sunday. Additionally, the first week 1 of each year contains the first Thursday of that year—which may not include the first day of the year, or may include the last few days of the previous year.</p>
+
+<pre class="brush: html notranslate">&lt;input type="week" name="week" id="week"&gt;</pre>
+
+<h3 id="Constraining_datetime_values">Constraining date/time values</h3>
+
+<p>All date and time controls can be constrained using the <code><a href="/en-US/docs/Web/HTML/Attributes/min">min</a></code> and <code><a href="/en-US/docs/Web/HTML/Attributes/max">max</a></code> attributes, with further constraining possible via the <code><a href="/en-US/docs/Web/HTML/Attributes/step">step</a></code> attribute (whose value varies according to input type).</p>
+
+<pre class="brush: html notranslate">&lt;label for="myDate"&gt;When are you available this summer?&lt;/label&gt;
+&lt;input type="date" name="myDate" min="2013-06-01" max="2013-08-31" step="7" id="myDate"&gt;</pre>
+
+<h3 id="Browser_support_for_datetime_inputs">Browser support for date/time inputs</h3>
+
+<p>You should be warned that the date and time widgets don't have the best browser support. At the moment, Chrome, Edge, and Opera support them well, but there is no support in Internet Explorer, Safari has some mobile support (but no desktop support), and Firefox supports <code>time</code> and <code>date</code> only.</p>
+
+<p>The reference pages linked to above provide suggestions on how to program fallbacks for non-supporting browsers; another option is to consider using a JavaScript library to provide a date picker. Most modern frameworks have good components available to provide this functionality, and there are standalone libraries available to (see <a href="https://flatlogic.com/blog/best-javascript-date-picker-libraries/">Top date picker javascript plugins and libraries</a> for some suggestions).</p>
+
+<h2 id="Color_picker_control">Color picker control</h2>
+
+<p>Colors are always a bit difficult to handle. There are many ways to express them: RGB values (decimal or hexadecimal), HSL values, keywords, etc.</p>
+
+<p>A <code>color</code> control can be created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value <code>color</code>:</p>
+
+<pre class="brush: html notranslate">&lt;input type="color" name="color" id="color"&gt;</pre>
+
+<p>When supported, clicking a color control will tend to display the operating system's default color picking functionality for you to actually make your choice with. The following screenshot taken on Firefox for macOS provides an example:</p>
+
+<p><img alt="firefox for android email keyboard, with ampersand displayed by default." src="https://mdn.mozillademos.org/files/17058/fx-macos-color.jpg" style="border-style: solid; border-width: 1px; display: block; height: 412px; margin: 0px auto; width: 700px;"></p>
+
+<p>And here is a live example for you to try out:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/forms/color-example/index.html", '100%', 200)}}</p>
+
+<p>The value returned is always a lowercase 6-value hexidecimal color.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: <code>color</code> inputs are not supported in Internet Explorer.</p>
+</div>
+
+<h2 id="Summary">Summary</h2>
+
+<p>That brings us to the end of our tour of the HTML5 form input types. There are a few other control types that cannot be easily grouped together due to their very specific behaviors, but which are still essential to know about. We cover those in the next article.</p>
+
+<p>{{PreviousMenuNext("Learn/Forms/Basic_native_form_controls", "Learn/Forms/Other_form_controls", "Learn/Forms")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Forms/Your_first_form">Your first form</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/How_to_structure_a_web_form">How to structure a web form</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Basic_native_form_controls">Basic native form controls</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/HTML5_input_types">The HTML5 input types</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Other_form_controls">Other form controls</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Styling_web_forms">Styling web forms</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Advanced_form_styling">Advanced form styling</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/UI_pseudo-classes">UI pseudo-classes</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Form_validation">Client-side form validation</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">Sending form data</a></li>
+</ul>
+
+<h3 id="Advanced_Topics">Advanced Topics</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Forms/How_to_build_custom_form_controls">How to build custom form controls</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li>
+</ul>
diff --git a/files/es/learn/html/forms/validacion_formulario_datos/index.html b/files/es/learn/html/forms/validacion_formulario_datos/index.html
new file mode 100644
index 0000000000..e967b68973
--- /dev/null
+++ b/files/es/learn/html/forms/validacion_formulario_datos/index.html
@@ -0,0 +1,845 @@
+---
+title: Validación de formularios de datos
+slug: Learn/HTML/Forms/Validacion_formulario_datos
+tags:
+  - Ejemplo
+  - Guía
+  - HTML
+  - Intermedio
+  - JavaScript
+  - Web
+  - formulários
+translation_of: Learn/Forms/Form_validation
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}</div>
+
+<p>Antes de enviar datos al servidor, es importante asegurarse de que se completan todos los controles de formulario requeridos, y en el formato correcto. Esto se denomina <strong>validación de formulario en el lado del cliente</strong> y ayuda a garantizar que los datos que se envían coinciden con los requisitos establecidos en los diversos controles de formulario. Este artículo te guiará por los conceptos básicos y ejemplos de validación de formularios en el lado del cliente.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, y entender cómo funcionan el <a href="/es/docs/Learn/HTML">HTML</a>, el <a href="/es/docs/Learn/CSS">CSS</a> y el <a href="/es/docs/Learn/JavaScript">JavaScript</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Entender qué es la validación de formularios en el lado del cliente, porqué es importante y cómo aplicar diversas técnicas para implementarla.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>La validación en el lado del cliente es una verificación inicial y una característica importante para garantizar una buena experiencia de usuario; mediante la detección de datos no válidos en el lado del cliente, el usuario puede corregirlos de inmediato. Si el servidor lo recibe y, a continuación, lo rechaza; se produce un retraso considerable en la comunicación entre el servidor y el cliente que insta al usuario a corregir sus datos.</p>
+
+<p>Sin embargo, ¡la validación en el lado del cliente <em>no debe considerarse </em> una medida de seguridad exhaustiva! Tus aplicaciones siempre deben realizar comprobaciones de seguridad de los datos enviados por el formulario <em>en el lado del servidor</em>, <strong>así como también</strong> en el lado del cliente, porque la validación en el lado del cliente es demasiado fácil de evitar, por lo que los usuarios malintencionados pueden enviar fácilmente datos incorrectos a tu servidor. Lee <a href="/es/docs/Learn/Server-side/Primeros_pasos/seguridad_sitios_web">Seguridad en los sitios web</a> para ver qué <em>podría</em> suceder. Cómo implementar la validación en el lado del servidor está fuera del alcance de este módulo, pero debes tenerlo en cuenta.</p>
+
+<h2 id="¿Qué_es_la_validación_de_formularios">¿Qué es la validación de formularios?</h2>
+
+<p>Ve a cualquier sitio web popular que incluya un formulario de registro y observa que proporcionan comentarios cuando no introduces tus datos en el formato que se espera. Recibirás mensajes como:</p>
+
+<ul>
+ <li>«Este campo es obligatorio» (No se puede dejar este campo en blanco).</li>
+ <li>«Introduzca su número de teléfono en el formato xxx-xxxx» (Se requiere un formato de datos específico para que se considere válido).</li>
+ <li>«Introduzca una dirección de correo electrónico válida» (los datos que introdujiste no están en el formato correcto).</li>
+ <li>«Su contraseña debe tener entre 8 y 30 caracteres y contener una letra mayúscula, un símbolo y un número». (Se requiere un formato de datos muy específico para tus datos).</li>
+</ul>
+
+<p>Esto se llama <strong>validación de formulario</strong>. Cuando introduces los datos, el navegador y/o el servidor web verifican que estén en el formato correcto y dentro de las restricciones establecidas por la aplicación. La validación realizada en el navegador se denomina validación <strong>en el lado del cliente</strong>, mientras que la validación realizada en el servidor se denomina validación <strong>en el lado del servidor</strong>. En este capítulo nos centraremos en la validación en el lado del cliente.</p>
+
+<p>Si la información está en el formato correcto, la aplicación permite que los datos se envíen al servidor y (en general) que se guarden en una base de datos; si la información no está en el formato correcto, da al usuario un mensaje de error que explica lo que debe corregir y le permite volver a intentarlo.</p>
+
+<p>Queremos que completar formularios web sea lo más fácil posible. Entonces, ¿por qué insistimos en validar nuestros formularios? Hay tres razones principales:</p>
+
+<ul>
+ <li><strong>Queremos obtener los datos correctos en el formato correcto.</strong> Nuestras aplicaciones no funcionarán correctamente si los datos de nuestros usuarios se almacenan en el formato incorrecto, son incorrectos o se omiten por completo.</li>
+ <li><strong>Queremos proteger los datos de nuestros usuarios</strong>. Obligar a nuestros usuarios a introducir contraseñas seguras facilita proteger la información de su cuenta.</li>
+ <li><strong>Queremos protegernos a nosotros mismo</strong>. Hay muchas formas en que los usuarios maliciosos puedan usar mal los formularios desprotegidos y dañar la aplicación (consulta <a href="/es/docs/Learn/Server-side/Primeros_pasos/seguridad_sitios_web">Seguridad del sitio web</a>).</li>
+</ul>
+
+<div class="warning"><strong>Atención:</strong> No confíes nunca en los datos que se pasan al servidor desde el cliente. Incluso si tu formulario se valida correctamente y evita la introducción de datos con formato incorrecto en el lado del cliente, un usuario malintencionado puede alterar la petición de red.</div>
+
+<h2 id="Diferentes_tipos_de_validación_en_el_lado_del_cliente">Diferentes tipos de validación en el lado del cliente</h2>
+
+<p>Hay dos tipos diferentes de validación por parte del cliente que encontrarás en la web:</p>
+
+<ul>
+ <li>La <strong>validación de formularios incorporada</strong> utiliza características de validación de formularios HTML5, que hemos visto en muchos lugares a lo largo de este módulo. Esta validación generalmente no requiere mucho JavaScript. La validación de formularios incorporada tiene un mejor rendimiento que JavaScript, pero no es tan personalizable como la validación con JavaScript.</li>
+ <li>La <strong>validación con JavaScript</strong> se codifica utilizando JavaScript. Esta validación es completamente personalizable, pero debes crearlo todo (o usar una biblioteca).</li>
+</ul>
+
+<h2 id="Usar_la_validación_de_formulario_incorporada">Usar la validación de formulario incorporada</h2>
+
+<p>Una de las características más importantes de los <a href="/en-US/docs/Learn/Forms/HTML5_input_types">controles de formulario de HTML5</a> es la capacidad de validar la mayoría de los datos de usuario sin depender de JavaScript. Esto se realiza mediante el uso de atributos de validación en los elementos del formulario. Los hemos visto anteriormente en el curso, pero recapitulamos aquí:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/HTML/Attributes/required">required</a></code>: Especifica si un campo de formulario debe completarse antes de que se pueda enviar el formulario.</li>
+ <li><code><a href="/en-US/docs/Web/HTML/Attributes/minlength">minlength</a></code> y <code><a href="/en-US/docs/Web/HTML/Attributes/maxlength">maxlength</a></code>: Especifican la longitud mínima y máxima de los datos de texto (cadenas).</li>
+ <li><code><a href="/en-US/docs/Web/HTML/Attributes/min">min</a></code> y <code><a href="/en-US/docs/Web/HTML/Attributes/max">max</a></code>: Especifican los valores mínimo y máximo de los tipos de entrada numéricos.</li>
+ <li><code>type</code>: Especifica si los datos deben ser un número, una dirección de correo electrónico o algún otro tipo de preajuste específico. </li>
+ <li><code><a href="/en-US/docs/Web/HTML/Attributes/pattern">pattern</a></code>: Especifica una <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions">expresión regular</a> que define un patrón que los datos que se introduzcan deben seguir.</li>
+</ul>
+
+<p>Si los datos que se introducen en un campo de formulario siguen todas las reglas que especifican los atributos anteriores, se consideran válidos. Si no, se consideran no válidos.</p>
+
+<p>Cuando un elemento es válido, se cumplen los aspectos siguientes:</p>
+
+<ul>
+ <li>El elemento coincide con la pseudoclase {{cssxref(":valid")}} de CSS, lo que te permite aplicar un estilo específico a los elementos válidos.</li>
+ <li>Si el usuario intenta enviar los datos, el navegador envía el formulario siempre que no haya nada más que lo impida (por ejemplo, JavaScript).</li>
+</ul>
+
+<p>Cuando un elemento no es válido, se cumplen los aspectos siguientes:</p>
+
+<ul>
+ <li>El elemento coincide con la pseudoclase {{cssxref(":invalid")}} de CSS, y a veces con otras pseudoclases de interfaz de usuario (UI) –por ejemplo, {{cssxref(":out-of-range")}}– dependiendo del error, que te permite aplicar un estilo específico a elementos no válidos.</li>
+ <li>Si el usuario intenta enviar los datos, el navegador bloquea el formulario y muestra un mensaje de error.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Hay varios errores que evitan que el formulario se envíe, incluidos {{domxref('validityState.badInput', 'badInput')}}, {{domxref('validityState.patternMismatch','patternMismatch')}}, {{domxref('validityState.rangeOverflow','rangeOverflow')}} o {{domxref('validityState.rangeUnderflow','rangeUnderflow')}}, {{domxref('validityState.stepMismatch','stepMismatch')}}, {{domxref('validityState.tooLong','tooLong')}} o {{domxref('validityState.tooShort','tooShort')}}, {{domxref('validityState.typeMismatch','typeMismatch')}}, {{domxref('validityState.valueMissing','valueMissing')}} o {{domxref('validityState.customError','customError')}}.</p>
+</div>
+
+<h2 id="Ejemplos_de_validación_de_formularios_incorporados">Ejemplos de validación de formularios incorporados</h2>
+
+<p>En esta sección probaremos algunos de los atributos que hemos comentado antes.</p>
+
+<h3 id="Archivo_de_inicio_sencillo">Archivo de inicio sencillo</h3>
+
+<p>Vamos a empezar con un ejemplo sencillo: una entrada que te permite elegir si prefieres un plátano o una cereza. Este ejemplo implica una simple entrada ({{HTMLElement("input")}}) de texto con una etiqueta ({{htmlelement("label")}}) asociada y un botón de envío ({{htmlelement ("button")}}). Puedes encontrar el código fuente en GitHub en <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a> y el ejemplo en vivo a continuación.</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;label for="choose"&gt;¿Prefieres un plátano o una cereza?&lt;/label&gt;
+  &lt;input id="choose" name="i_like"&gt;
+  &lt;button&gt;Enviar&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<pre class="brush: css notranslate">input:invalid {
+  border: 2px dashed red;
+}
+
+input:valid {
+  border: 2px solid black;
+}</pre>
+
+<p>{{EmbedLiveSample("Archivo_de_inicio_sencillo", "100%", 80)}}</p>
+
+<p>Para empezar, haz una copia de <code>fruit-start.html</code> en un nuevo directorio de tu disco duro.</p>
+
+<h3 id="El_atributo_required">El atributo <code>required</code></h3>
+
+<p>La característica de validación de HTML5 más simple es el atributo <code><a href="/en-US/docs/Web/HTML/Attributes/required">required</a></code>. Añade este atributo al elemento para que una entrada sea obligatoria. Cuando se establece este atributo, el elemento coincide con la pseudoclase de la interfaz de usuario {{cssxref(':required')}} y el formulario no se envía; muestra un mensaje de error al enviarlo si la entrada está vacía. Si está vacía, la entrada también se considera inválida, coincidiendo con la pseudoclase de interfaz de usuario {{cssxref(':invalid')}}.</p>
+
+<p>Añade un atributo <code>required</code> a tu entrada, como se muestra a continuación.</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;label for="choose"&gt;¿Prefieres un plátano o una cereza? (requerido) &lt;/label&gt;
+  &lt;input id="choose" name="i_like" <strong>required</strong>&gt;
+  &lt;button&gt;Enviar&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<p>Ten en cuenta el CSS que en el archivo de ejemplo se ha incluido:</p>
+
+<pre class="brush: css notranslate">input:invalid {
+  border: 2px dashed red;
+}
+
+input:invalid:required {
+  background-image: linear-gradient(to right, pink, lightgreen);
+}
+
+input:valid {
+  border: 2px solid black;
+}</pre>
+
+<p>Este CSS da un borde discontinuo rojo cuando la entrada no es válida, y un borde negro sólido más sutil cuando es válida. También añadimos un gradiente de fondo cuando la entrada es obligatoria <em>y</em> no válida. Prueba el nuevo comportamiento en el ejemplo siguiente:</p>
+
+<p>{{EmbedLiveSample("El_atributo_required", "100%", 80)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Puedes encontrar este ejemplo en vivo en GitHub como <a href="https://mdn.github.io/learning-area/html/forms/form-validation/fruit-required.html">fruit-validation.html</a> (consulta también el <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-required.html">código fuente</a>).</p>
+</div>
+
+<p>Intenta enviar el formulario sin introducir ningún valor. Observa que la entrada no válida recibe el cursor, aparece un mensaje de error predeterminado («Complete este campo») y el formulario no se puede enviar.</p>
+
+<p>La presencia del atributo <code>required</code> en cualquier elemento que admite este atributo significa que el elemento coincide con la pseudoclase {{cssxref(':required')}}, tenga o no un valor. Si en el elemento {{HTMLElement("input")}} no se ha introducido ningún valor, <code>input</code> coincidirá con la pseudoclase {{cssxref(':invalid')}}.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Para una buena experiencia de usuario, indica al usuario que campos de formulario se requieren. No solo es una buena experiencia de usuario, sino que lo exigen las pautas de <a href="/es/docs/Learn/Accessibility">accesibilidad</a> de WCAG. Además, solo requiere que los usuarios introduzcan los datos que realmente necesitas: Por ejemplo, ¿por qué realmente necesitas saber el género o el tratamiento de alguien?</p>
+</div>
+
+<h3 id="Validación_de_una_expresión_regular">Validación de una expresión regular</h3>
+
+<p>Otra característica útil de validación es el atributo <a href="/en-US/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a>, que espera una <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions">expresión regular</a> como valor. Una expresión regular (<em>regex</em>) es un patrón que se puede usar para establecer combinaciones de caracteres en cadenas de texto, por lo que las expresiones regulares son ideales para la validación de formularios y sirven para una gran variedad de otros usos en JavaScript.</p>
+
+<p>Las expresiones regulares son bastante complejas y no vamos a exponerlas exhaustivamente en este artículo. A continuación hay algunos ejemplos para que te hagas una idea de cómo funcionan.</p>
+
+<ul>
+ <li><code>a</code>: coincide con un carácter que es <code>a</code> (ni <code>b</code>, ni <code>aa</code>, etc.).</li>
+ <li><code>abc</code>: coincide con <code>a</code>, seguido de <code>b</code>, seguido de <code>c</code>.</li>
+ <li><code>ab?c</code>: coincide con <code>a</code>, seguida opcionalmente de una sola <code>b</code>, seguida de <code>c</code> (<code>ac</code> o <code>abc</code>).</li>
+ <li><code>ab*c</code>: coincide con <code>a</code>, seguido opcionalmente de cualquier número de <code>b</code>, seguido de <code>c</code>. (<code>ac</code>, <code>abc</code>, <code>abbbbbc</code>, etc.)</li>
+ <li><code>a|b</code>: coincide con un carácter que es <code>a</code> o <code>b</code>.</li>
+ <li><code>abc|xyz</code>: coincide exactamente con <code>abc</code> o <code>xyz</code> (pero no con <code>abcxyz</code> <code>a</code> o <code>y</code>, y así sucesivamente).</li>
+</ul>
+
+<p>Hay muchas más posibilidades que no exponemos aquí. Para obtener una lista completa y muchos ejemplos, consulta nuestro documento de <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions">expresiones regulares</a>.</p>
+
+<p>Implementemos un ejemplo. Actualiza tu HTML para añadir un atributo <a href="/en-US/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a> como este:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;label for="choose"&gt;¿Prefieres un plátano o una cereza?&lt;/label&gt;
+  &lt;input id="choose" name="i_like" required pattern="[Pp]látano|[Cc]ereza "&gt;
+  &lt;button&gt;Enviar&lt;/button&gt;
+&lt;/form&gt;
+</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">input:invalid {
+  border: 2px dashed red;
+}
+
+input:valid {
+  border: 2px solid black;
+}</pre>
+</div>
+
+<p>Esto nos da la siguiente actualización; pruébalo:</p>
+
+<p>{{EmbedLiveSample("Validación de una expresión regular", "100%", 80)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Puedes encontrar este ejemplo en vivo en GitHub como <a href="https://mdn.github.io/learning-area/html/forms/form-validation/fruit-pattern.html">fruit-pattern.html</a> (consulta también su <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-pattern.html">código fuente</a>).</p>
+</div>
+
+<p>En este ejemplo, el elemento {{HTMLElement("input")}} acepta uno de los cuatro valores posibles: las cadenas «plátano», «Plátano», «cereza» o «Cereza». Las expresiones regulares distinguen entre mayúsculas y minúsculas, pero hemos hecho que admita versiones en mayúsculas y minúsculas utilizando un patrón «Aa» adicional anidado dentro de corchetes.</p>
+
+<p>En este punto, intenta cambiar el valor dentro del atributo <a href="/en-US/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a> para que se vean iguales que algunos de los ejemplos vistos anteriormente, y observa que esto afecta a los valores que puedes añadir para que el valor de entrada sea válido. Intenta escribir algo por tu cuenta y mira cómo va. ¡Haz que estén relacionadas con la fruta siempre que sea posible para que tus ejemplos tengan sentido!</p>
+
+<p>Si un valor no vacío de {{HTMLElement("input")}} no coincide con el patrón de la expresión regular, <code>input</code> coincidirá con la pseudoclase {{cssxref(':invalid')}}.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Algunos tipos de elementos {{HTMLElement ("input")}} no necesitan validar una expresión regular con el atributo <a href="/en-US/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a>. Especificar el tipo de correo electrónico (<code>email</code>), por ejemplo, valida el valor de las entradas con un patrón de dirección de correo electrónico bien formado o un patrón que coincida con una lista de direcciones de correo electrónico separadas por comas si tiene el atributo <a href="/en-US/docs/Web/HTML/Attributes/multiple"><code>multiple</code></a>.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: El elemento {{HTMLElement("textarea")}} no admite el atributo <a href="/en-US/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a>.</p>
+</div>
+
+<h3 id="Restringir_la_longitud_de_tus_entradas">Restringir la longitud de tus entradas</h3>
+
+<p>Puedes restringir la longitud de los caracteres de todos los campos de texto creados por {{HTMLElement("input")}} o {{HTMLElement("textarea")}} utilizando los atributos <a href="/en-US/docs/Web/HTML/Attributes/minlength"><code>minlength</code></a> y <code><a href="/en-US/docs/Web/HTML/Attributes/maxlength">maxlength</a></code>. Un campo no es válido si tiene un valor y ese valor tiene menos caracteres que el valor de longitud mínima (<a href="/en-US/docs/Web/HTML/Attributes/minlength"><code>minlength</code></a>), o más que el valor de longitud máxima (<code><a href="/en-US/docs/Web/HTML/Attributes/maxlength">maxlength</a></code>).</p>
+
+<p>Los navegadores a menudo no permiten que el usuario escriba un valor más largo de lo esperado en los campos de texto. Lo que otorga una mejor experiencia de usuario que <code>maxlength</code> es proporcionar comentarios de recuento de caracteres de manera accesible y permitirles editar su contenido a un tamaño más reducido. Un ejemplo de esto es el límite de caracteres de Twitter. JavaScript, incluidas las <a href="https://github.com/mimo84/bootstrap-maxlength">soluciones que utilizan <code>maxlength</code></a>, se puede utilizar para proporcionar esta funcionalidad.</p>
+
+<h3 id="Restringir_los_valores_de_tus_entradas">Restringir los valores de tus entradas</h3>
+
+<p>Los atributos <code><a href="/en-US/docs/Web/HTML/Attributes/min">min</a></code> y <code><a href="/en-US/docs/Web/HTML/Attributes/max">max</a></code> se pueden usar para proporcionar a los campos numéricos (es decir, <code><a href="/en-US/docs/Web/HTML/Element/input/number">&lt;input type="number"&gt;</a></code>) un rango de valores válidos. El campo no será válido si contiene un valor fuera de este rango.</p>
+
+<p>Veamos otro ejemplo. Crea una nueva copia del archivo <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a>.</p>
+
+<p>Ahora elimina el contenido del elemento <code>&lt;body&gt;</code> y reemplázalo con lo siguiente:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="choose"&gt;¿Prefieres un plátano o una cereza?&lt;/label&gt;
+    &lt;input type="text" id="choose" name="i_like" required minlength="6" maxlength="6"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="number"&gt;¿Cuántos te gustaría comer?&lt;/label&gt;
+    &lt;input type="number" id="number" name="amount" value="1" min="1" max="10"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Enviar&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<ul>
+ <li>Aquí verás que le hemos dado al campo de <code>text</code> unos valores <code>minlength</code> y <code>maxlength</code> de seis, que es la misma longitud que tienen el plátano y la cereza.</li>
+ <li>También le hemos dado al campo <code>number</code> un <code>min</code> de uno y un <code>max</code> de diez. Los números introducidos que queden fuera de este rango se mostrarán como no válidos; los usuarios no podrán usar las flechas de incremento/decremento para mover el valor fuera de este rango. Si el usuario introduce un número desde el teclado fuera de este rango, los datos no serán válidos. El número no es obligatorio, por lo que eliminar el valor aún dará como resultado un valor válido.</li>
+</ul>
+
+<div class="hidden">
+<pre class="brush: css notranslate">input:invalid {
+  border: 2px dashed red;
+}
+
+input:valid {
+  border: 2px solid black;
+}
+
+div {
+  margin-bottom: 10px;
+}</pre>
+</div>
+
+<p>Aquí está el ejemplo que se ejecuta en vivo:</p>
+
+<p>{{EmbedLiveSample("Restringir_los_valores_de_tus_entradas", "100%", 100)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Puedes encontrar este ejemplo en vivo en GitHub como <a href="https://mdn.github.io/learning-area/html/forms/form-validation/fruit-length.html">fruit-length.html</a> (consulta también su <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-length.html">código fuente</a>).</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: <code>&lt;input type="number"&gt;</code> (y otros tipos, como <code>range</code> y <code>date</code>) también pueden tomar un atributo <a href="/en-US/docs/Web/HTML/Attributes/step"><code>step</code></a>, que especifica en qué incremento aumenta o disminuye el valor cuando se utilizan los controles de entrada (como el botones numéricos arriba y abajo). En el ejemplo anterior no hemos incluido un atributo <code>step</code>, por lo que el valor predeterminado es <code>1</code>. Esto significa que los valores de coma flotante, como 3.2, también se mostrarán como no válidos.</p>
+</div>
+
+<h3 id="Ejemplo_completo">Ejemplo completo</h3>
+
+<p>Aquí hay un ejemplo completo que muestra el uso de las funciones de validación integradas en HTML. En primer lugar, un poco de HTML:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;p&gt;
+    &lt;fieldset&gt;
+      &lt;legend&gt;¿Tienes carné de conducir?&lt;abbr title="Este campo es obligatorio" aria-label="required"&gt;*&lt;/abbr&gt;&lt;/legend&gt;
+      &lt;!-- Solo se puede seleccionar un botón de opción en un grupo con el mismo nombre,
+           y, por lo tanto, solo un botón de opción en un grupo con el mismo nombre que tiene marcado el atributo «requerido»
+           basta para hacer de una selección un requisito --&gt;
+      &lt;input type="radio" required name="driver" id="r1" value="yes"&gt;&lt;label for="r1"&gt;Sí&lt;/label&gt;
+      &lt;input type="radio" required name="driver" id="r2" value="no"&gt;&lt;label for="r2"&gt;No&lt;/label&gt;
+    &lt;/fieldset&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;label for="n1"&gt;¿Qué edad tienes?&lt;/label&gt;
+    &lt;!-- El atributo pattern puede actuar como una alternativa para los navegadores que
+         no implementan el tipo de entrada de número, pero admiten el atributo pattern.
+         Ten en cuenta que los navegadores que admiten el atributo pattern lo harán
+         fallar silenciosamente cuando se use con un campo numérico.
+         Su uso aquí solo actúa como una alternativa --&gt;
+     &lt;input type="number" min="12" max="120" step="1" id="n1" name="age"
+           pattern="\d+"&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;label for="t1"&gt;¿Cuál es tu fruta favorita?&lt;abbr title="Este campo es obligatorio" aria-label="required"&gt;*&lt;/abbr&gt;&lt;/label&gt;
+    &lt;input type="text" id="t1" name="fruit" list="l1" required
+           pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range "&gt;
+    &lt;datalist id="l1"&gt;
+      &lt;option&gt;Plátano&lt;/option&gt;
+      &lt;option&gt;Cereza&lt;/option&gt;
+      &lt;option&gt;Manzana&lt;/option&gt;
+      &lt;option&gt;Fresa&lt;/option&gt;
+      &lt;option&gt;Limón&lt;/option&gt;
+      &lt;option&gt;Naranja&lt;/option&gt;
+     &lt;/datalist&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;label for="t2"&gt;¿Cuál es tu dirección de correo electrónico? &lt;/label&gt;
+    &lt;input type="email" id="t2" name="email"&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;label for="t3"&gt;Deja un mensaje&lt;/label&gt;
+    &lt;textarea id="t3" name="msg" maxlength="140" rows="5"&gt;&lt;/textarea&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;button&gt;Enviar&lt;/button&gt;
+  &lt;/p&gt;
+&lt;/form&gt;</pre>
+
+<p>Y ahora, algo de CSS para añadir estilo al HTML:</p>
+
+<pre class="brush: css notranslate">form {
+  font: 1em sans-serif;
+  max-width: 320px;
+}
+
+p &gt; label {
+  display: block;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="number"],
+textarea,
+fieldset {
+  width : 100%;
+  border: 1px solid #333;
+  box-sizing: border-box;
+}
+
+input:invalid {
+  box-shadow: 0 0 5px 1px red;
+}
+
+input:focus:invalid {
+  box-shadow: none;
+}</pre>
+
+<p>Esto se traduce de la siguiente manera:</p>
+
+<p>{{EmbedLiveSample("Ejemplo_completo", "100%", 420)}}</p>
+
+<p>Consulta <a href="/es/docs/HTML/HTML5/Validacion_de_restricciones#Atributos_relacionados_con_validaciones">Atributos relacionados con la validación</a> para obtener una lista completa de los atributos que se pueden usar para restringir los valores de entrada y los tipos de entrada que los admiten.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Puedes encontrar este ejemplo en vivo en GitHub como <a href="https://mdn.github.io/learning-area/html/forms/form-validation/full-example.html">full-example.html</a> (consulta también su <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/full-example.html">código fuente</a>).</p>
+</div>
+
+<h2 id="Validar_formularios_utilizando_JavaScript">Validar formularios utilizando JavaScript</h2>
+
+<p>Debes usar JavaScript si quieres controlar la apariencia de los mensajes de error nativos o tratar con navegadores heredados que no admiten la validación de formularios incorporados en HTML. En esta sección veremos las diferentes formas de hacer esto.</p>
+
+<h3 id="La_API_de_validación_de_restricciones">La API de validación de restricciones</h3>
+
+<p>La mayoría de los navegadores admiten la <a href="/en-US/docs/Web/API/Constraint_validation">API de validación de restricciones</a>, que consta de un conjunto de métodos y propiedades disponibles en las interfaces DOM de elementos de formulario siguientes:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/API/HTMLButtonElement">HTMLButtonElement</a></code> (representa un elemento <code><a href="/en-US/docs/Web/HTML/Element/button">&lt;button&gt;</a></code>)</li>
+ <li><code><a href="/en-US/docs/Web/API/HTMLFieldSetElement">HTMLFieldSetElement</a></code> (representa un elemento <code><a href="/en-US/docs/Web/HTML/Element/fieldset">&lt;fieldset&gt;</a></code>)</li>
+ <li><code><a href="/en-US/docs/Web/API/HTMLInputElement">HTMLInputElement</a></code> (representa un elemento <code><a href="/en-US/docs/Web/HTML/Element/input">&lt;input&gt;</a></code>)</li>
+ <li><code><a href="/en-US/docs/Web/API/HTMLOutputElement">HTMLOutputElement</a></code> (representa un elemento <code><a href="/en-US/docs/Web/HTML/Element/output">&lt;output&gt;</a></code>)</li>
+ <li><code><a href="/en-US/docs/Web/API/HTMLSelectElement">HTMLSelectElement</a></code> (representa un elemento <code><a href="/en-US/docs/Web/HTML/Element/select">&lt;select&gt;</a></code>)</li>
+ <li><code><a href="/en-US/docs/Web/API/HTMLTextAreaElement">HTMLTextAreaElement</a></code> (representa un elemento <code><a href="/en-US/docs/Web/HTML/Element/textarea">&lt;textarea&gt;</a></code>)</li>
+</ul>
+
+<p id="Constraint_validation_API_properties">La API de validación de restricciones hace que las propiedades siguientes estén disponibles en los elementos anteriores.</p>
+
+<ul>
+ <li><code>validationMessage</code>: Devuelve un mensaje localizado que describe las restricciones de validación que el control no satisface (si corresponde). Si el control no es candidato para la validación de restricciones (<code>willValidate</code> es <code>false</code>) o el valor del elemento satisface sus restricciones (es válido), esto devolverá una cadena vacía.</li>
+ <li><code>validity</code>: Devuelve un objeto <code>ValidityState</code> que contiene varias propiedades que describen el estado de validez del elemento. Puedes encontrar todos los detalles de todas las propiedades disponibles en la página de referencia {{domxref("ValidityState")}}; a continuación se enumeran algunos de los más comunes:
+  <ul>
+   <li>{{domxref("ValidityState.patternMismatch", "patternMismatch")}}: Devuelve <code>true</code> si el valor no coincide con el {{htmlattrxref("pattern", "input")}} especificado, y <code>false</code> si coincide. Si es verdadero, el elemento coincide con la pseudoclase {{cssxref(":invalid")}} de CSS.</li>
+   <li>{{domxref("ValidityState.tooLong", "tooLong")}}: Devuelve <code>true</code> si el valor es mayor que la longitud máxima especificada por el atributo {{htmlattrxref("maxlength", "input")}}, o <code>false</code> si es menor o igual al máximo. Si es verdadero, el elemento coincide con la pseudoclase {{cssxref(":invalid")}} de CSS.</li>
+   <li>{{domxref("ValidityState.tooShort", "tooShort")}}: Devuelve <code>true</code> si el valor es menor que la longitud mínima especificada por el atributo {{htmlattrxref("minlength", "input")}}, o <code>false</code> si es mayor o igual al mínmo. Si es verdadero, el elemento coincide con la pseudoclase {{cssxref(":invalid")}} de CSS.</li>
+   <li>{{domxref("ValidityState.rangeOverflow", "rangeOverflow")}}: Devuelve <code>true</code> si el valor es mayor que el máximo especificado por el atributo {{htmlattrxref("max", "input")}}, o <code>false</code> si es menor o igual que el máximo. Si es verdadero, el elemento coincide con las pseudoclases {{cssxref(":invalid")}} y {{cssxref(":out-of-range")}} de CSS.</li>
+   <li>{{domxref("ValidityState.rangeUnderflow", "rangeUnderflow")}}: Devuelve <code>true</code> si el valor es menor que el mínimo especificado por el atributo {{htmlattrxref("min", "input")}}, o <code>false</code> si es mayor o igual que el mínimo. Si es verdadero, el elemento coincide con las pseudoclases {{cssxref(":invalid")}} y {{cssxref(":out-of-range")}} de CSS.</li>
+   <li>{{domxref("ValidityState.typeMismatch", "typeMismatch")}}: Devuelve <code>true</code> si el valor no está en la sintaxis requerida (cuando {{htmlattrxref("type", "input")}} es <code>email</code> o <code>url</code>), o <code>false</code> si la sintaxis es correcta. Si es verdadero, el elemento coincide con la pseudoclase {{cssxref(":invalid")}} de CSS.</li>
+   <li><code>valid</code>: Devuelve <code>true</code> si el elemento cumple con todas sus restricciones de validación y por lo tanto se considera válido, o <code>false</code> si falla alguna restricción. Si es verdadero, el elemento coincide con la pseudoclase {{cssxref(":valid")}} de CSS; o con la pseudoclase {{cssxref(":invalid")}} de CSS de lo contrario.</li>
+   <li><code>valueMissing</code>: Devuelve <code>true</code> si el elemento tiene un atributo {{htmlattrxref("required", "input")}} pero no tiene valor, o <code>false</code> de lo contrario. Si es verdadero, el elemento coincide con la pseudoclase {{cssxref(":invalid")}} de CSS.</li>
+  </ul>
+ </li>
+ <li><code>willValidate</code>: Devuelve <code>true</code> si el elemento se valida cuando se envía el formulario; <code>false</code> de lo contrario.</li>
+</ul>
+
+<p id="Constraint_validation_API_methods">La API de validación de restricciones también pone a disposición los siguientes métodos en los elementos anteriores.</p>
+
+<ul>
+ <li><code>checkValidity()</code>: Devuelve <code>true</code> si el valor del elemento no tiene problemas de validez; <code>false</code> en caso contrario. Si el elemento no es válido, este método también activa un <a href="/es/docs/Web/API/HTMLInputElement/invalid_event">evento <code>invalid</code></a> en el elemento.</li>
+ <li><code>setCustomValidity(<em>message</em>)</code>: Añade un mensaje de error personalizado al elemento; si configuras un mensaje de error personalizado, el elemento se considera no válido y se muestra el error especificado. Esto te permite utilizar el código JavaScript para establecer un fallo de validación distinto de los ofrecidos por las restricciones estándar de validación de HTML5. El mensaje se muestra al usuario cuando se informa del problema.</li>
+</ul>
+
+<h4 id="Implementar_un_mensaje_de_error_personalizado">Implementar un mensaje de error personalizado</h4>
+
+<p>Como has visto en los ejemplos de restricciones de validación de HTML5 anteriores, cada vez que un usuario intenta enviar un formulario no válido, el navegador muestra un mensaje de error. La forma en que se muestra este mensaje depende del navegador.</p>
+
+<p>Estos mensajes automatizados tienen dos inconvenientes:</p>
+
+<ul>
+ <li>No hay una forma estándar de cambiar su aspecto con CSS.</li>
+ <li>Dependen de la configuración regional del navegador, lo que significa que puedes tener una página en un idioma pero un mensaje de error en otro idioma, como se ve en la siguiente captura de pantalla de Firefox.</li>
+</ul>
+
+<p><img alt="Ejemplo de un mensaje de error en francés en una página de Firefox en inglés" src="/files/4329/error-firefox-win7.png" style="height: 97px; width: 228px;"></p>
+
+<p>La personalización de estos mensajes de error es uno de los casos de uso más comunes de la <a href="/en-US/docs/Web/API/Constraint_validation" rel="external">API de validación de restricciones</a>. Veamos un ejemplo simple de cómo hacer esto.</p>
+
+<p>Comenzaremos con un HTML simple (siéntete libre de poner esto en un archivo HTML en blanco; usa una copia nueva de <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a> como base, si lo deseas):</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;label for="mail"&gt;Me gustaría que me proporcionara una dirección de correo electrónico:&lt;label&gt;
+  &lt;input type="email" id="mail" name="mail"&gt;
+  &lt;button&gt;Enviar&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<p>Y añade a la página el JavaScript siguiente:</p>
+
+<pre class="brush: js notranslate">const email = document.getElementById("mail");
+
+email.addEventListener("input", function (event) {
+  if (email.validity.typeMismatch) {
+    email.setCustomValidity("¡Se esperaba una dirección de correo electrónico!");
+  } else {
+    email.setCustomValidity("");
+  }
+});</pre>
+
+<p>Aquí guardamos una referencia para la entrada de la dirección de correo electrónico, luego le añadimos un detector de eventos que ejecuta el código de <code>content</code> cada vez que el valor de la entrada cambia.</p>
+
+<p>Dentro del código que contiene, verificamos si la propiedad <code>validity.typeMismatch</code> de la entrada de la dirección de correo electrónico devuelve <code>true</code>, lo que significa que el valor que contiene no coincide con el patrón para una dirección de correo electrónico bien formada. Si es así, llamamos al método <a href="/es/docs/HTML/HTML5/Validacion_de_restricciones"><code>setCustomValidity()</code></a> con un mensaje personalizado. Esto hace que la entrada no sea válida, de modo que cuando intentas enviar el formulario, el envío falla y se muestra el mensaje de error personalizado.</p>
+
+<p>Si la propiedad <code>validity.typeMismatch</code> devuelve <code>false</code>, llamamos al método <code>setCustomValidity()</code> con una cadena vacía. Esto hace que la entrada sea válida, y el formulario se envía.</p>
+
+<p>Puedes probarlo a continuación:</p>
+
+<p>{{EmbedGHLiveSample("/en-US/learning-area/html/forms/form-validation/custom-error-message.html", '100%', 80)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Puede encontrar este ejemplo vivo en GitHub como <a href="https://mdn.github.io/learning-area/html/forms/form-validation/custom-error-message.html">custom-error-message.html</a> (véase también su <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/custom-error-message.html">código fuente</a>).</p>
+</div>
+
+<h4 id="Un_ejemplo_más_detallado">Un ejemplo más detallado</h4>
+
+<p>Ahora que hemos visto un ejemplo realmente sencillo, veamos cómo podemos usar esta API para construir una validación personalizada un poco más compleja.</p>
+
+<p>En primer lugar, el código HTML. Una vez más, siéntete libre de construir esto junto con nosotros:</p>
+
+<pre class="brush: html notranslate">&lt;form novalidate&gt;
+  &lt;p&gt;
+    &lt;label for="mail"&gt;
+      &lt;span&gt;Por favor, introduzca una dirección de correo electrónico: &lt;/span&gt;
+      &lt;input type="email" id="mail" name="mail" required minlength="8"&gt;
+      &lt;span class="error" aria-live="polite"&gt;&lt;/span&gt;
+    &lt;/label&gt;
+  &lt;/p&gt;
+  &lt;button&gt;Enviar&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<p>Este sencillo formulario usa el atributo <code><a href="/en-US/docs/Web/HTML/Attributes/novalidate">novalidate</a></code> para desactivar la validación automática del navegador; esto permite que nuestra secuencia de comandos tome control sobre la validación. Sin embargo, esto no deshabilita la compatibilidad para la API de validación de restricciones ni la aplicación de pseudoclases de CSS como {{cssxref(":valid")}}, etc. Eso significa que, aunque el navegador no verifica automáticamente la validez del formulario antes de enviar los datos, puedes hacerlo tú mismo y diseñar el formulario en consecuencia.</p>
+
+<p>Nuestra entrada para validar es <code><a href="/es/docs/Web/HTML/Elemento/input/email">&lt;input type="email"&gt;</a></code>, que es obligatoria y tiene una longitud mínima (<code>minlength</code>) de 8 caracteres. Vamos a verificar esto con nuestro propio código para que muestre un mensaje de error personalizado para cada elemento.</p>
+
+<p>Nuestro objetivo es mostrar los mensajes de error dentro de un elemento <code>&lt;span&gt;</code>. El atributo <a href="/en-US/docs/Accessibility/ARIA/ARIA_Live_Regions"><code>aria-live</code></a> se establece en ese <code>&lt;span&gt;</code> para asegurar que todo el mundo podrá ver nuestro mensaje de error personalizado, incluidos los usuarios de lectores de pantalla.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Un punto clave a tener en cuenta es que establecer el atributo <code>novalidate</code> en el formulario impide que el formulario muestre sus propios cuadros de diálogo de error, y nos permite mostrar los mensajes de error personalizados en el DOM de la manera que nosotros elijamos.</p>
+</div>
+
+<p>Ahora aplicaremos algo de CSS básico para mejorar ligeramente el aspecto del formulario y proporcionar algunos comentarios visuales cuando los datos de entrada no sean válidos:</p>
+
+<pre class="brush: css notranslate">body {
+  font: 1em sans-serif;
+  width: 200px;
+  padding: 0;
+  margin : 0 auto;
+}
+
+p * {
+  display: block;
+}
+
+input[type=email]{
+  -webkit-appearance: none;
+  appearance: none;
+
+  width: 100%;
+  border: 1px solid #333;
+  margin: 0;
+
+  font-family: inherit;
+  font-size: 90%;
+
+  box-sizing: border-box;
+}
+
+/* Este es nuestro diseño para los campos no válidos */
+input:invalid{
+  border-color: #900;
+  background-color: #FDD;
+}
+
+input:focus:invalid {
+  outline: none;
+}
+
+/* Este es el diseño para nuestros mensajes de error */
+.error {
+  width : 100%;
+  padding: 0;
+
+  font-size: 80%;
+  color: white;
+  background-color: #900;
+  border-radius: 0 0 5px 5px;
+
+  box-sizing: border-box;
+}
+
+.error.active {
+  padding: 0.3em;
+}</pre>
+
+<p>Vamos a ver el JavaScript que implementa la validación de error personalizada.</p>
+
+<pre class="brush: js notranslate">// Hay muchas formas de elegir un nodo DOM; aquí obtenemos el formulario y, a continuación, el campo de entrada
+// del correo electrónico, así como el elemento span en el que colocaremos el mensaje de error.
+const form  = document.getElementsByTagName('form')[0];
+
+const email = document.getElementById('mail');
+const emailError = document.querySelector('#mail + span.error');
+
+email.addEventListener('input', function (event) {
+  // Cada vez que el usuario escribe algo, verificamos si
+  // los campos del formulario son válidos.
+
+  if (email.validity.valid) {
+    // En caso de que haya un mensaje de error visible, si el campo
+    // es válido, eliminamos el mensaje de error.
+    emailError.innerHTML = ''; // Restablece el contenido del mensaje
+    emailError.className = 'error'; // Restablece el estado visual del mensaje
+  } else {
+    // Si todavía hay un error, muestra el error exacto
+    showError();
+  }
+});
+
+form.addEventListener('submit', function (event) {
+  // si el campo de correo electrónico es válido, dejamos que el formulario se envíe
+
+  if(!email.validity.valid) {
+    // Si no es así, mostramos un mensaje de error apropiado
+    showError();
+    // Luego evitamos que se envíe el formulario cancelando el evento
+    event.preventDefault();
+  }
+});
+
+function showError() {
+  if(email.validity.valueMissing) {
+    // Si el campo está vacío
+    // muestra el mensaje de error siguiente.
+    emailError.textContent = 'Debe introducir una dirección de correo electrónico.';
+  } else if(email.validity.typeMismatch) {
+    // Si el campo no contiene una dirección de correo electrónico
+    // muestra el mensaje de error siguiente.
+    emailError.textContent = 'El valor introducido debe ser una dirección de correo electrónico.';
+  } else if(email.validity.tooShort) {
+    // Si los datos son demasiado cortos
+    // muestra el mensaje de error siguiente.
+    emailError.textContent = 'El correo electrónico debe tener al menos ${ email.minLength } caracteres; ha introducido ${ email.value.length }.';
+  }
+
+  // Establece el estilo apropiado
+  emailError.className = 'error activo';
+}</pre>
+
+<p>Los comentarios explican las cosas bastante bien, pero de una manera muy breve:</p>
+
+<ul>
+ <li>Cada vez que cambiamos el valor de la entrada, verificamos si contiene datos válidos. Si es así, eliminamos cualquier mensaje de error que se muestre. Si los datos no son válidos, ejecutamos <code>showError()</code> para mostrar el error correspondiente.</li>
+ <li>Cada vez que intentamos enviar el formulario, verificamos nuevamente si los datos son válidos. Si es así, dejamos que envíe el formulario. Si no, ejecutamos <code>showError()</code> para mostrar el error correspondiente y detenemos el envío del formulario con <code><a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a></code>.</li>
+ <li>La función <code>showError()</code> usa varias propiedades de la entrada <code>validity</code> para determinar cuál es el error y luego muestra un mensaje de error según corresponda.</li>
+</ul>
+
+<p>Este es el resultado:</p>
+
+<p>{{EmbedGHLiveSample("/en-US/learning-area/html/forms/form-validation/detailed-custom-validation.html", '100%', 150)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Puedes encontrar este ejemplo en vivo en GitHub como <a href="https://mdn.github.io/learning-area/html/forms/form-validation/detailed-custom-validation.html">detailed-custom-validation.html</a> (consulta también su <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/detailed-custom-validation.html">código fuente</a>).</p>
+</div>
+
+<p>La API de validación de restricciones te proporciona una herramienta poderosa para manejar la validación de formularios, y te permite tener un control enorme sobre la interfaz de usuario más allá de lo que puedas hacer solo con HTML y CSS.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Para obtener más información, consulta nuestra <a href="/es/docs/HTML/HTML5/Validacion_de_restricciones">guía de validación de restricciones</a> y la referencia de <a href="/en-US/docs/Web/API/Constraint_validation">API de validación de restricciones</a>.</p>
+</div>
+
+<h3 id="Validar_formularios_sin_una_API_incorporada">Validar formularios sin una API incorporada</h3>
+
+<p>En algunos casos, como la compatibilidad heredada del navegador o los <a href="/es/docs/Learn/HTML/Forms/como_crear_widgets_de_formularios_personalizados">controles personalizados</a>, no podrás o no querrás usar la API de validación de restricciones. Todavía puedes usar JavaScript para validar tu formulario, pero vas a tener que escribirlo.</p>
+
+<p>Antes de validar el formulario, hazte estas preguntas:</p>
+
+<dl>
+ <dt>¿Qué tipo de validación debería realizar?</dt>
+ <dd>Debes determinar cómo validar los datos: operaciones de cadena, conversión de tipos, expresiones regulares, etc. Tú decides.</dd>
+ <dt>¿Qué debo hacer si el formulario no se valida?</dt>
+ <dd>Esto es claramente un problema de la interfaz de usuario. Tienes que decidir cómo se comportará el formulario. ¿El formulario va a enviar los datos de todos modos? ¿Deberías resaltar los campos que dan error? ¿Deberías mostrar mensajes de error?</dd>
+ <dt>¿Cómo puedo ayudar al usuario a corregir datos no válidos?</dt>
+ <dd>Para reducir la frustración del usuario, es muy importante proporcionar tanta información útil como sea posible para guiarlo a fin de que corrija sus entradas de datos. Debes ofrecer sugerencias por adelantado para que sepan lo que se espera de ellos, así como mensajes de error claros. Si deseas profundizar en los requisitos de interfaz de usuario para la validación de formularios, aquí hay algunos artículos útiles que debes leer:
+ <ul>
+  <li>SmashingMagazine: <a href="http://uxdesign.smashingmagazine.com/2012/06/27/form-field-validation-errors-only-approach/" rel="external">Form-Field Validation: The Errors-Only Approach</a> [Validación de campo de formulario: El enfoque de solo errores]</li>
+  <li>SmashingMagazine: <a href="http://www.smashingmagazine.com/2009/07/07/web-form-validation-best-practices-and-tutorials/" rel="external">Web Form Validation: Best Practices and Tutorials </a> [Validación de formularios web: Buenas prácticas y tutoriales]</li>
+  <li>Six Revision: <a href="http://sixrevisions.com/user-interface/best-practices-for-hints-and-validation-in-web-forms/" rel="external">Best Practices for Hints and Validation in Web Forms</a> [Buenas prácticas para sugerencias y validación de formularios web]</li>
+  <li>A List Apart: <a href="http://www.alistapart.com/articles/inline-validation-in-web-forms/" rel="external">Inline Validation in Web Forms</a> [Validación en línea de formularios web]</li>
+ </ul>
+ </dd>
+</dl>
+
+<h4 id="Un_ejemplo_que_no_usa_la_API_de_validación_de_restricciones">Un ejemplo que no usa la API de validación de restricciones</h4>
+
+<p>Para ilustrar esto, mostramos una versión simplificada del ejemplo anterior que funciona con navegadores con compatibilidad heredada.</p>
+
+<p>El HTML es casi el mismo; solo hemos eliminado las funciones de validación de HTML.</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;p&gt;
+    &lt;label for="mail"&gt;
+        &lt;span&gt;Por favor, introduzca una dirección de correo electrónico: &lt;/span&gt;
+        &lt;input type="text" class="mail" id="mail" name="mail"&gt;
+        &lt;span class="error" aria-live="polite"&gt;&lt;/span&gt;
+    &lt;/label&gt;
+  &lt;/p&gt;
+  &lt;!-- Algunos navegadores con compatibilidad heredada deben tener el atributo «type»
+       establecido explícitamente en el elemento «button» de «submit»--&gt;
+  &lt;button type="submit"&gt;Enviar&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<p>Del mismo modo, no es necesario cambiar mucho el CSS; acabamos de convertir la pseudoclase {{cssxref(":invalid")}} de CSS en una clase real y evitamos usar el selector de atributos que no funciona en Internet Explorer 6.</p>
+
+<pre class="brush: css notranslate">body {
+  font: 1em sans-serif;
+  width: 200px;
+  padding: 0;
+  margin : 0 auto;
+}
+
+form {
+  max-width: 200px;
+}
+
+p * {
+  display: block;
+}
+
+input.mail {
+  -webkit-appearance: none;
+
+  width: 100%;
+  border: 1px solid #333;
+  margin: 0;
+
+  font-family: inherit;
+  font-size: 90%;
+
+  box-sizing: border-box;
+}
+
+/* Este es nuestro diseño para los campos no válidos */
+input.invalid{
+  border-color: #900;
+  background-color: #FDD;
+}
+
+input:focus.invalid {
+  outline: none;
+}
+
+/* Este es el diseño para nuestros mensajes de error */
+.error {
+  width : 100%;
+  padding: 0;
+
+  font-size: 80%;
+  color: white;
+  background-color: #900;
+  border-radius: 0 0 5px 5px;
+  box-sizing: border-box;
+}
+
+.error.active {
+  padding: 0.3em;
+}</pre>
+
+<p>Los grandes cambios están en el código JavaScript, que necesita hacer mucho más trabajo pesado.</p>
+
+<pre class="brush: js notranslate">// Hay menos formas de elegir un nodo DOM con navegadores antiguos
+const form  = document.getElementsByTagName('form')[0];
+const email = document.getElementById('mail');
+
+// Lo siguiente es un truco para llegar al siguiente nodo de elementos hermanos en el DOM
+// Esto es peligroso porque puedes construir fácilmente un bucle infinito.
+// En los navegadores modernos es mejor usar element.nextElementSibling
+let error = email;
+while ((error = error.nextSibling).nodeType != 1);
+
+// según la especificación HTML5
+const emailRegExp = /^[a-zA-Z0-9.!#$%&amp;'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
+
+// Muchos navegadores antiguos no son compatibles con el método addEventListener.
+// Aquí hay una manera simple de manejar esto; está lejos de ser la única.
+function addEvent(element, event, callback) {
+  let previousEventCallBack = element["on"+event];
+  element["on"+event] = function (e) {
+    const output = callback(e);
+
+    // Una devolución de llamada que devuelve «false» detiene la cadena de devolución de llamada
+    // e interrumpe la ejecución de la devolución de llamada del evento.
+    if (output === false) return false;
+
+    if (typeof previousEventCallBack === 'function') {
+      output = previousEventCallBack(e);
+      if(output === false) return false;
+    }
+  }
+};
+
+// Ahora podemos reconstruir nuestra restricción de validación
+// Debido a que no confiamos en la pseudoclase de CSS, tenemos que
+// establecer explícitamente la clase valid/invalid en nuestro campo de correo electrónico
+addEvent(window, "load", function () {
+  // Aquí probamos si el campo está vacío (recuerda, el campo no es obligatorio)
+  // Si no es así, verificamos si su contenido es una dirección de correo electrónico con el formato correcto.
+  const test = email.value.length === 0 || emailRegExp.test(email.value);
+
+  email.className = test ? "valid" : "invalid";
+});
+
+// Esto define lo que sucede cuando el usuario escribe en el campo
+addEvent(email, "input", function () {
+  const test = email.value.length === 0 || emailRegExp.test(email.value);
+  if (test) {
+    email.className = "valid";
+    error.innerHTML = "";
+    error.className = "error";
+  } else {
+    email.className = "invalid";
+  }
+});
+
+// Esto define lo que sucede cuando el usuario intenta enviar los datos.
+addEvent(form, "submit", function () {
+  const test = email.value.length === 0 || emailRegExp.test(email.value);
+
+  if (!test) {
+    email.className = "invalid";
+    error.innerHTML = "I expect an e-mail, darling!";
+    error.className = "error active";
+
+    // Algunos navegadores antiguos no son compatibles con el método event.preventDefault ()
+    return false;
+  } else {
+    email.className = "valid";
+    error.innerHTML = "";
+    error.className = "error";
+  }
+});</pre>
+
+<p>El resultado es el siguiente:</p>
+
+<p>{{EmbedLiveSample("Validar_formularios_sin_una_API_incorporada", "100%", 130)}}</p>
+
+<p>Como puedes ver, no es tan difícil construir un sistema de validación por tu cuenta. La parte difícil es hacer que sea lo suficientemente genérico para que se pueda usar en diferentes plataformas y en cualquier forma. Hay muchas bibliotecas de archivos disponibles para realizar la validación de formularios, como por ejemplo <a href="http://rickharrison.github.com/validate.js/" rel="external">Validate.js</a></p>
+
+<p>.</p>
+
+<h2 id="Prueba_tus_habilidades!">Prueba tus habilidades!</h2>
+
+<p>Has llegado al final de este artículo pero ¿puedes recordar la información más importante?Puedes encontrar pruebas adicionales para comprovar que has comprendido la información antes de que continue — visita <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Test_your_skills:_Form_validation">Prueba tus habilidades: Validación de formularios</a>.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La validación de formularios en el lado del cliente a veces requiere JavaScript si deseas personalizar el estilo y los mensajes de error, pero <em>siempre</em> requiere que pienses cuidadosamente en el usuario. Recuerda que siempre debes ayudar a tus usuarios a corregir los datos que proporcionan. Para ese fin, asegúrate de:</p>
+
+<ul>
+ <li>Mostrar mensajes de error explícitos.</li>
+ <li>Ser permisivo con el formato de entrada.</li>
+ <li>Señalar exactamente dónde se produce el error, especialmente en formularios extensos.</li>
+</ul>
+
+<p>Una vez que hayas verificado que el formulario se ha completado correctamente, puedes proceder a enviarlo. Vamos a exponer el <a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">envío de los datos del formulario</a> en el próximo artículo.</p>
+
+<p>{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Forms/Your_first_form">Tu primer formulario</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/How_to_structure_a_web_form">Cómo estructurar un formulario web</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Basic_native_form_controls">Los controles de formulario básicos originales</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/HTML5_input_types">Los tipos de entrada en HTML5</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Other_form_controls">Otros controles de formulario</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Styling_web_forms">Aplicar estilo a formularios web</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Advanced_form_styling">Aplicación de estilo a formularios avanzada</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/UI_pseudo-classes">Pseudoclases UI</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Form_validation">Validación de formularios en el lado del cliente</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">Enviar los datos de un formulario</a></li>
+</ul>
+
+<h3 id="Temas_avanzados">Temas avanzados</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Forms/How_to_build_custom_form_controls">Cómo construir controles de formulario personalizados</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Sending_forms_through_JavaScript">Enviar formularios por JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_widgets">Tabla de compatibilidad de propiedades para controles de formulario</a></li>
+</ul>
diff --git a/files/es/learn/html/forms/your_first_html_form/index.html b/files/es/learn/html/forms/your_first_html_form/index.html
new file mode 100644
index 0000000000..df9d73bc60
--- /dev/null
+++ b/files/es/learn/html/forms/your_first_html_form/index.html
@@ -0,0 +1,305 @@
+---
+title: Mi primer formulario HTML
+slug: Learn/HTML/Forms/Your_first_HTML_form
+tags:
+  - Ejemplo
+  - Guía
+  - HTML
+  - Principiante
+  - Web
+  - formulários
+translation_of: Learn/Forms/Your_first_form
+---
+<div>{{LearnSidebar}}{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}}</div>
+
+<p class="summary">El primer artículo de nuestra serie te proporciona una primera experiencia de creación de un formulario web, que incluye diseñar un formulario sencillo con controles de formulario adecuados y otros elementos HTML, añadir un poco de estilo muy simple con CSS y describir cómo se envían los datos a un servidor. Ampliaremos cada uno de estos subtemas más adelante.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática y de <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">lenguaje HTML</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Familiarizarse con los formularios web, para qué se usan, cómo diseñarlos y qué elementos HTML básicos vas a necesitar para casos sencillos.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="¿Qué_son_los_formularios_web">¿Qué son los formularios web?</h2>
+
+<p>Los <strong>formularios web</strong> son uno de los principales puntos de interacción entre un usuario y un sitio web o aplicación. Los formularios permiten a los usuarios la introducción de datos, que generalmente se envían a un servidor web para su procesamiento y almacenamiento (consulta <a href="/es/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Enviar los datos de un formulario</a> más adelante en el módulo), o se usan en el lado del cliente para provocar de alguna manera una actualización inmediata de la interfaz (por ejemplo, se añade otro elemento a una lista, o se muestra u oculta una función de interfaz de usuario).</p>
+
+<p>El HTML de un <strong>formulario web</strong> está compuesto por uno o más <strong>controles de formulario</strong> (a veces llamados <strong>widgets</strong>), además de algunos elementos adicionales que ayudan a estructurar el formulario general; a menudo se los conoce como <strong>formularios HTML</strong>. Los controles pueden ser campos de texto de una o varias líneas, cajas desplegables, botones, casillas de verificación o botones de opción, y se crean principalmente con el elemento {{htmlelement("input")}}, aunque hay algunos otros elementos que también hay que conocer.</p>
+
+<p>Los controles de formulario también se pueden programar para forzar la introducción de formatos o valores específicos (<strong>validación de formulario</strong>), y se combinan con etiquetas de texto que describen su propósito para los usuarios con y sin discapacidad visual.</p>
+
+<h2 id="Diseñar_tu_formulario">Diseñar tu formulario</h2>
+
+<p>Antes de comenzar a escribir código, siempre es mejor dar un paso atrás y tomarte el tiempo necesario para pensar en tu formulario. Diseñar una maqueta rápida te ayudará a definir el conjunto de datos adecuado que deseas pedirle al usuario que introduzca. Desde el punto de vista de la experiencia del usuario (UX), es importante recordar que cuanto más grande es tu formulario, más te arriesgas a frustrar a las personas y perder usuarios. Tiene que ser simple y conciso: solicita solo los datos que necesitas.</p>
+
+<p>Diseñar formularios es un paso importante cuando creas un sitio web o una aplicación. Va más allá del alcance de este artículo exponer la experiencia de usuario de los formularios, pero si deseas profundizar en ese tema, puedes leer los artículos siguientes:</p>
+
+<ul>
+ <li>Smashing Magazine tiene algunos <a href="https://www.smashingmagazine.com/2018/08/ux-html5-mobile-form-part-1/" rel="external" title="http://uxdesign.smashingmagazine.com/tag/forms/">artículos muy buenos sobre formularios UX</a>, incluido el artículo —antiguo pero relevante— <a href="https://www.smashingmagazine.com/2011/11/extensive-guide-web-form-usability/" rel="external" title="http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/">An Extensive Guide To Web Form Usability</a> [Amplia guía de usabilidad para formularios web].</li>
+ <li>UXMatters también es un recurso que da buenos consejos, desde <a href="http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php" rel="external" title="http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php"> buenas prácticas básicas</a> hasta cuestiones complejas como los <a href="http://www.uxmatters.com/mt/archives/2010/03/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php" title="http://www.uxmatters.com/mt/archives/2010/03/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php"> formularios de varias páginas</a>.</li>
+</ul>
+
+<p>En este artículo, vamos a crear un formulario de contacto sencillo. Hagamos un esbozo.</p>
+
+<p><img alt="Esbozo aproximado del formulario que vamos a construir" src="/files/4579/form-sketch-low.jpg" style="border-style: solid; border-width: 1px; display: block; height: 352px; margin: 0px auto; width: 400px;"></p>
+
+<p>Nuestro formulario va a tener tres campos de texto y un botón. Le pedimos al usuario su nombre, su correo electrónico y el mensaje que desea enviar. Al pulsar el botón sus datos se enviarán a un servidor web.</p>
+
+<h2 id="Aprendizaje_activo_La_implementación_de_nuestro_formulario_HTML">Aprendizaje activo: La implementación de nuestro formulario HTML</h2>
+
+<p>De acuerdo, intentemos crear el HTML para nuestro formulario. Vamos a utilizar los elementos HTML siguientes: {{HTMLelement("form")}}, {{HTMLelement("label")}}, {{HTMLelement("input")}}, {{HTMLelement("textarea")}} y {{HTMLelement("button")}}.</p>
+
+<p>Antes de continuar, haz una copia local de nuestra <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">plantilla HTML simple</a>: introduce aquí tu formulario HTML.</p>
+
+<h3 id="El_elemento_HTMLelementform">El elemento {{HTMLelement("form")}}</h3>
+
+<p>Todos los formularios comienzan con un elemento {{HTMLelement("form")}}, como este:</p>
+
+<pre class="brush:html; notranslate">&lt;form action="/my-handling-form-page" method="post"&gt;
+
+&lt;/form&gt;</pre>
+
+<p>Este elemento define formalmente un formulario. Es un elemento contenedor, como un elemento {{HTMLelement("section")}} o {{HTMLelement("footer")}}, pero específico para contener formularios; también admite algunos atributos específicos para la configuración de la forma en que se comporta el formulario. Todos sus atributos son opcionales, pero es una práctica estándar establecer siempre al menos los atributos <a href="/en-US/docs/Web/HTML/Attributes/action"><code>action</code></a> y <a href="/en-US/docs/Web/HTML/Attributes/method"><code>method</code></a>:</p>
+
+<ul>
+ <li>El atributo <code>action</code> define la ubicación (URL) donde se envían los datos que el formulario ha recopilado cuando se validan.</li>
+ <li>El atributo <code>method</code> define con qué método HTTP se envían los datos (generalmente <code>get</code> o <code>post</code>).</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Veremos cómo funcionan esos atributos en nuestro artículo <a href="/es/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data">Enviar los datos de un formulario</a> que encontrarás más adelante.</p>
+</div>
+
+<p>Por ahora, añade el elemento {{htmlelement("form")}} anterior a tu elemento HTML {{htmlelement("body")}}.</p>
+
+<h3 id="Los_elementos_HTMLelementlabel_HTMLelementinput_y_HTMLelementtextarea">Los elementos {{HTMLelement("label")}}, {{HTMLelement("input")}} y {{HTMLelement("textarea")}}</h3>
+
+<p>Nuestro formulario de contacto no es complejo: la parte para la entrada de datos contiene tres campos de texto, cada uno con su elemento {{HTMLelement("label")}} correspondiente:</p>
+
+<ul>
+ <li>El campo de entrada para el nombre es un {{HTMLelement("input/text", "campo de texto de una sola línea")}}.</li>
+ <li>El campo de entrada para el correo electrónico es una {{HTMLelement ("input/email", "entrada de datos de tipo correo electrónico")}}: un campo de texto de una sola línea que acepta solo direcciones de correo electrónico.</li>
+ <li>El campo de entrada para el mensaje es {{HTMLelement("textarea")}}; un campo de texto multilínea.</li>
+</ul>
+
+<p>En términos de código HTML, para implementar estos controles de formulario necesitamos algo como lo siguiente:</p>
+
+<pre class="brush:html; notranslate" dir="rtl">&lt;form action="/my-handling-form-page" method="post"&gt;
+ &lt;ul&gt;
+  &lt;li&gt;
+    &lt;label for="name"&gt;Nombre:&lt;/label&gt;
+    &lt;input type="text" id="name" name="user_name"&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;label for="mail"&gt;Correo electrónico:&lt;/label&gt;
+    &lt;input type="email" id="mail" name="user_mail"&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;label for="msg"&gt;Mensaje:&lt;/label&gt;
+    &lt;textarea id="msg" name="user_message"&gt;&lt;/textarea&gt;
+  &lt;/li&gt;
+ &lt;/ul&gt;
+&lt;/form&gt;</pre>
+
+<p>Actualiza el código de tu formulario para que se vea como el anterior.</p>
+
+<p>Los elementos {{HTMLelement("li")}} están ahí para estructurar nuestro código convenientemente y facilitar la aplicación de estilo (ver más adelante en el artículo). Por motivos de usabilidad y accesibilidad incluimos una etiqueta explícita para cada control de formulario. Ten en cuenta el uso del atributo <a href="/en-US/docs/Web/HTML/Attributes/for"> <code>for</code> </a> en todos los elementos {{HTMLelement("label")}}, que toma como valor el <a href="/en-US/docs/Web/HTML/Attributes/id"><code>id</code></a> del control de formulario con el que está asociado; así es como asocias un formulario con su etiqueta.</p>
+
+<p>Hacer esto presenta muchas ventajas porque la etiqueta está asociada al control del formulario y permite que los usuarios con ratón, panel táctil y dispositivos táctiles hagan clic en la etiqueta para activar el control correspondiente, y también proporciona accesibilidad con un nombre que los lectores de pantalla leen a sus usuarios. Encontrarás más detalles sobre las etiquetas de los formularios en <a href="/es/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">Cómo estructurar un formulario web</a>.</p>
+
+<p>En el elemento {{HTMLelement("input")}}, el atributo más importante es <code>type</code>. Este atributo es muy importante porque define la forma en que el elemento {{HTMLelement("input")}} aparece y se comporta. Encontrarás más información sobre esto en el artículo sobre <a href="/es/docs/Learn/HTML/Forms/The_native_form_widgets">Controles de formularios nativos básicos</a> más adelante.</p>
+
+<ul>
+ <li>En nuestro ejemplo sencillo, usamos el valor {{HTMLelement("input/text")}} para la primera entrada, el valor predeterminado para este atributo. Representa un campo de texto básico de una sola línea que acepta cualquier tipo de entrada de texto.</li>
+ <li>Para la segunda entrada, usamos el valor {{HTMLelement("input/email")}}, que define un campo de texto de una sola línea que solo acepta una dirección de correo electrónico. Esto convierte un campo de texto básico en una especie de campo «inteligente» que efectúa algunas comprobaciones de validación de los datos que el usuario escribe. También hace que aparezca un diseño de teclado más apropiado para introducir direcciones de correo electrónico (por ejemplo, con un símbolo @ por defecto) en dispositivos con teclados dinámicos, como teléfonos inteligentes. Encontrarás más información sobre la validación de formularios en el artículo de <a href="/es/docs/Learn/HTML/Forms/Validacion_formulario_datos">Validación de formularios por parte del cliente</a> más adelante.</li>
+</ul>
+
+<p>Por último, pero no por ello menos importante, ten en cuenta la sintaxis de <code>&lt;input&gt;</code> en contraposición con la de <code>&lt;textarea&gt;&lt;/textarea&gt;</code>. Esta es una de las rarezas del HTML. La etiqueta <code>&lt;input&gt;</code> es un elemento vacío, lo que significa que no necesita una etiqueta de cierre. El elemento {{HTMLElement("textarea")}} no es un elemento vacío, lo que significa que debe cerrarse con la etiqueta de cierre adecuada. Esto tiene un impacto en una característica específica de los formularios: el modo en que defines el valor predeterminado. Para definir el valor predeterminado de un elemento {{HTMLElement("input")}}, debes usar el atributo <a href="/en-US/docs/Web/HTML/Attributes/value"><code>value</code></a> de esta manera:</p>
+
+<pre class="brush:html; notranslate">&lt;input type="text" value="por defecto este elemento se llena con este texto"&gt;</pre>
+
+<p>Por otro lado, si deseas definir un valor predeterminado para un elemento {{HTMLElement("textarea")}}, lo colocas entre las etiquetas de apertura y cierre del elemento {{HTMLElement("textarea")}}, así:</p>
+
+<pre class="brush:html; notranslate">&lt;textarea&gt;
+Por defecto, este elemento contiene este texto
+&lt;/textarea&gt;</pre>
+
+<h3 id="El_elemento_HTMLelementbutton">El elemento {{HTMLelement("button")}}</h3>
+
+<p>El marcado de nuestro formulario está casi completo; solo necesitamos añadir un botón para permitir que el usuario envíe sus datos una vez que haya completado el formulario. Esto se hace con el elemento {{HTMLelement("button")}}; añade lo siguiente justo encima de la etiqueta de cierre <code>&lt;/form&gt;</code>:</p>
+
+<pre class="brush:html; notranslate">&lt;li class="button"&gt;
+  &lt;button type="submit"&gt;Envíe su mensaje&lt;/button&gt;
+&lt;/li&gt;</pre>
+
+<p>El elemento {{htmlelement("button")}} también acepta un atributo de <code>type</code>, que a su vez acepta uno de estos tres valores: <code>submit</code>, <code>reset</code> o <code>button</code>.</p>
+
+<ul>
+ <li>Un clic en un botón <code>submit</code> (el valor predeterminado) envía los datos del formulario a la página web definida por el atributo <code>action</code> del elemento {{HTMLelement("form")}}.</li>
+ <li>Un clic en un botón <code>reset</code> restablece de inmediato todos los controles de formulario a su valor predeterminado. Desde el punto de vista de UX, esto se considera una mala práctica, por lo que debes evitar usar este tipo de botones a menos que realmente tengas una buena razón para incluirlos.</li>
+ <li>Un clic en un botón <code>button</code> no hace... ¡nada! Eso suena tonto, pero es muy útil para crear botones personalizados: puedes definir su función con JavaScript.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: También puedes usar el elemento {{HTMLElement("input")}} con el atributo <code>type</code> correspondiente para generar un botón, por ejemplo <code>&lt;input type="submit"&gt;</code>. La ventaja principal del elemento {{HTMLelement("button")}} es que el elemento {{HTMLelement("input")}} solo permite texto sin formato en su etiqueta, mientras que el elemento {{HTMLelement("button")}} permite contenido HTML completo, lo que permite generar botones creativos más complejos.</p>
+</div>
+
+<h2 id="Aplicar_estilo_básico_a_un_formulario">Aplicar estilo básico a un formulario</h2>
+
+<p>Ahora que has terminado de escribir el código HTML de tu formulario, guárdalo y observa lo que ocurre en un navegador. Por ahora, se verá bastante feo.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Si crees que no has escrito bien el código HTML, compáralo con nuestro ejemplo final: véase <a href="https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form.html">first-form.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html">ver en vivo</a>).</p>
+</div>
+
+<p>Resulta notablemente difícil aplicar estilo a los formularios. Está más allá del alcance de este artículo enseñarte cómo aplicar estilo a los formularios en detalle, por lo que por el momento solo vamos a exponer cómo añadir un poco de CSS para que se vea un poco bien.</p>
+
+<p>En primer lugar, añade un elemento {{htmlelement("style")}} a tu página, dentro de la cabecera del HTML. Debe quedar así:</p>
+
+<pre class="brush: html notranslate">&lt;style&gt;
+
+&lt;/style&gt;</pre>
+
+<p>Dentro de las etiquetas <code>style</code>, añade el código CSS siguiente:</p>
+
+<pre class="brush:css; notranslate">form {
+  /* Centrar el formulario en la página */
+  margin: 0 auto;
+  width: 400px;
+  /* Esquema del formulario */
+  padding: 1em;
+  border: 1px solid #CCC;
+  border-radius: 1em;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+form li + li {
+  margin-top: 1em;
+}
+
+label {
+  /* Tamaño y alineación uniforme */
+  display: inline-block;
+  width: 90px;
+  text-align: right;
+}
+
+input,
+textarea {
+  /* Para asegurarse de que todos los campos de texto tienen la misma configuración de letra
+     Por defecto, las áreas de texto tienen un tipo de letra monoespaciada */
+  font: 1em sans-serif;
+
+  /* Tamaño uniforme del campo de texto */
+  width: 300px;
+  box-sizing: border-box;
+
+  /* Hacer coincidir los bordes del campo del formulario */
+  border: 1px solid #999;
+}
+
+input:focus,
+textarea:focus {
+  /* Destacado adicional para elementos que tienen el cursor */
+  border-color: #000;
+}
+
+textarea {
+  /* Alinear los campos de texto multilínea con sus etiquetas */
+  vertical-align: top;
+
+  /* Proporcionar espacio para escribir texto */
+  height: 5em;
+}
+
+.button {
+  /* Alinear los botones con los campos de texto */
+  padding-left: 90px; /* mismo tamaño que los elementos de la etiqueta */
+}
+
+button {
+  /* Este margen adicional representa aproximadamente el mismo espacio que el espacio
+     entre las etiquetas y sus campos de texto */
+  margin-left: .5em;
+}</pre>
+
+<p>Guarda y vuelve a cargar, y observa que tu formulario presenta un aspecto mucho menos feo.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Puedes encontrar nuestra versión en GitHub en <a href="https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form-styled.html">first-form-styled.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form-styled.html">ver en vivo</a>).</p>
+</div>
+
+<h2 id="Enviar_los_datos_del_formulario_a_un_servidor_web">Enviar los datos del formulario a un servidor web</h2>
+
+<p>La última parte, y quizás la más complicada, es manejar los datos del formulario en el lado del servidor. El elemento {{HTMLelement("form")}} define dónde y cómo enviar los datos gracias a los atributos <a href="/en-US/docs/Web/HTML/Attributes/action"><code>action</code></a> y <a href="/en-US/docs/Web/HTML/Attributes/method"><code>method</code></a>.</p>
+
+<p>Proporcionamos un nombre (<a href="/en-US/docs/Web/HTML/Attributes/name"><code>name</code></a>) a cada control de formulario. Los nombres son importantes tanto en el lado del cliente como del servidor; le dicen al navegador qué nombre debe dar a cada dato y, en el lado del servidor, dejan que el servidor maneje cada dato por su nombre. Los datos del formulario se envían al servidor como pares de nombre/valor.</p>
+
+<p>Para poner nombre a los diversos datos que se introducen en un formulario, debes usar el atributo <code>name</code> en cada control de formulario que recopila un dato específico. Veamos de nuevo algunos de nuestros códigos de formulario:</p>
+
+<pre class="brush:html; notranslate">&lt;form action="/my-handling-form-page" method="post"&gt;
+ &lt;ul&gt;
+  &lt;li&gt;
+    &lt;label for="name"&gt;Nombre:&lt;/label&gt;
+    &lt;input type="text" id="name" name="user_name" /&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;label for="mail"&gt;Correo electrónico:&lt;/label&gt;
+    &lt;input type="email" id="mail" name="user_email" /&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;label for="msg"&gt;Mensaje:&lt;/label&gt;
+    &lt;textarea id="msg" name="user_message"&gt;&lt;/textarea&gt;
+  &lt;/li&gt;
+
+  ...
+</pre>
+
+<p>En nuestro ejemplo, el formulario envía tres datos denominados «<code>user_name</code>», «<code>user_email</code>» y «<code>user_message</code>». Esos datos se envían a la URL «<code>/my-handling-form-page</code>» utilizando el método <a href="/en-US/docs/Web/HTTP/Methods/POST"><code>post</code> de HTTP</a>.</p>
+
+<p>En el lado del servidor, la secuencia de comandos de la URL «<code>/my-handling-form-page</code>» recibe los datos como una lista de tres elementos clave/valor contenidos en la solicitud HTTP. La forma en que este script maneja esos datos depende de ti. Cada lenguaje de servidor (PHP, Python, Ruby, Java, C#, etc.) tiene su propio mecanismo de manipulación de datos de formulario. No profundizaremos sobre el tema en esta guía, pero si deseas obtener más información, proporcionamos algunos ejemplos en nuestro artículo <a href="/es/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data"><span>Enviar los datos de un formulario</span></a> que encontrarás más adelante.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>¡Enhorabuena!, has creado tu primer formulario web. Debería verse así:</p>
+
+<p>{{ EmbedLiveSample('A_simple_form', '100%', '240', '', 'Learn/Forms/Your_first_form/Example') }}</p>
+
+<p>Pero esto es solo el comienzo: ahora ha llegado el momento de profundizar en el tema. Los formularios tienen mucho más potencial de lo que hemos visto aquí y los artículos siguientes de este módulo te ayudarán a dominarlo.</p>
+
+<p>{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Forms/Your_first_form">Tu primer formulario</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/How_to_structure_a_web_form">Cómo estructurar un formulario web</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Basic_native_form_controls">Los controles de formulario básicos originales</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/HTML5_input_types">Los tipos de entrada en HTML5</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Other_form_controls">Otros controles de formulario</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Styling_web_forms">Aplicación de estilo a formularios web</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Advanced_form_styling">Aplicación de estilo a formularios avanzada</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/UI_pseudo-classes">Pseudoclases UI</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Form_validation">Validación del formulario del lado del cliente</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">Enviar los datos de un formulario</a></li>
+</ul>
+
+<h3 id="Temas_avanzados">Temas avanzados</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Forms/How_to_build_custom_form_controls">Cómo construir controles de formulario personalizados</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Sending_forms_through_JavaScript">Enviar formularios a través de JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_widgets">Tabla de compatibilidad para las propiedades de los controles de formulario</a></li>
+</ul>
diff --git a/files/es/learn/html/index.html b/files/es/learn/html/index.html
new file mode 100644
index 0000000000..6262b7f957
--- /dev/null
+++ b/files/es/learn/html/index.html
@@ -0,0 +1,66 @@
+---
+title: 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="in-page-callout webdev">
+<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/introduccion_a_html/advanced_text_formatting/index.html b/files/es/learn/html/introduccion_a_html/advanced_text_formatting/index.html
new file mode 100644
index 0000000000..7e96d3c6d7
--- /dev/null
+++ b/files/es/learn/html/introduccion_a_html/advanced_text_formatting/index.html
@@ -0,0 +1,695 @@
+---
+title: Formateo de texto avanzado
+slug: Learn/HTML/Introduccion_a_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
+---
+<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/introduccion_a_html/creating_hyperlinks/index.html b/files/es/learn/html/introduccion_a_html/creating_hyperlinks/index.html
new file mode 100644
index 0000000000..330bf0d7db
--- /dev/null
+++ b/files/es/learn/html/introduccion_a_html/creating_hyperlinks/index.html
@@ -0,0 +1,346 @@
+---
+title: Crear hipervínculos
+slug: Learn/HTML/Introduccion_a_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
+---
+<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 {{anch("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 «<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/introduccion_a_html/debugging_html/index.html b/files/es/learn/html/introduccion_a_html/debugging_html/index.html
new file mode 100644
index 0000000000..114b93ff0f
--- /dev/null
+++ b/files/es/learn/html/introduccion_a_html/debugging_html/index.html
@@ -0,0 +1,171 @@
+---
+title: Depurar el HTML
+slug: Learn/HTML/Introduccion_a_HTML/Debugging_HTML
+tags:
+  - Error
+  - Guía
+  - HTML
+  - Principiante
+  - Validación
+  - Validador
+  - depurar
+  - programar
+translation_of: Learn/HTML/Introduction_to_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/introduccion_a_html/estructura/index.html b/files/es/learn/html/introduccion_a_html/estructura/index.html
new file mode 100644
index 0000000000..1f5f1e315c
--- /dev/null
+++ b/files/es/learn/html/introduccion_a_html/estructura/index.html
@@ -0,0 +1,298 @@
+---
+title: Estructura web y documentación
+slug: Learn/HTML/Introduccion_a_HTML/estructura
+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
+---
+<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/introduccion_a_html/estructuración_de_una_página_de_contenido/index.html b/files/es/learn/html/introduccion_a_html/estructuración_de_una_página_de_contenido/index.html
new file mode 100644
index 0000000000..686940212e
--- /dev/null
+++ b/files/es/learn/html/introduccion_a_html/estructuración_de_una_página_de_contenido/index.html
@@ -0,0 +1,105 @@
+---
+title: Estructuración de una Página de contenido
+slug: Learn/HTML/Introduccion_a_HTML/Estructuración_de_una_página_de_contenido
+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
+---
+<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/introduccion_a_html/index.html b/files/es/learn/html/introduccion_a_html/index.html
new file mode 100644
index 0000000000..64c70649cb
--- /dev/null
+++ b/files/es/learn/html/introduccion_a_html/index.html
@@ -0,0 +1,77 @@
+---
+title: Introducción a HTML
+slug: Learn/HTML/Introduccion_a_HTML
+tags:
+  - CodingScripting
+  - Enlaces
+  - Estructura
+  - HTML
+  - Introducción a HTML
+  - Texto
+  - semántica
+translation_of: Learn/HTML/Introduction_to_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="in-page-callout webdev">
+<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/introduccion_a_html/iniciar/index.html b/files/es/learn/html/introduccion_a_html/iniciar/index.html
new file mode 100644
index 0000000000..c05aa6a9f0
--- /dev/null
+++ b/files/es/learn/html/introduccion_a_html/iniciar/index.html
@@ -0,0 +1,767 @@
+---
+title: Empezar con HTML
+slug: Learn/HTML/Introduccion_a_HTML/iniciar
+tags:
+  - Atributos
+  - Elemento
+  - Guía
+  - HTML
+  - Principiante
+  - comentários
+translation_of: Learn/HTML/Introduction_to_HTML/Getting_started
+---
+<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>
+
+<div></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/introduccion_a_html/marking_up_a_letter/index.html b/files/es/learn/html/introduccion_a_html/marking_up_a_letter/index.html
new file mode 100644
index 0000000000..e53bb01826
--- /dev/null
+++ b/files/es/learn/html/introduccion_a_html/marking_up_a_letter/index.html
@@ -0,0 +1,88 @@
+---
+title: Marcando una Carta
+slug: Learn/HTML/Introduccion_a_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
+---
+<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/introduccion_a_html/metados_en/index.html b/files/es/learn/html/introduccion_a_html/metados_en/index.html
new file mode 100644
index 0000000000..6fc5f94ab0
--- /dev/null
+++ b/files/es/learn/html/introduccion_a_html/metados_en/index.html
@@ -0,0 +1,299 @@
+---
+title: ¿Qué hay en la cabecera? Metadatos en HTML
+slug: Learn/HTML/Introduccion_a_HTML/Metados_en
+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
+---
+<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.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.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.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png"&gt;
+&lt;!-- iPhone con pantalla de alta resolución: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png"&gt;
+&lt;!-- iPad de primera y segunda generación: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.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.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png"&gt;
+&lt;!-- favicon básico --&gt;
+&lt;link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.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("header")}} 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/introduccion_a_html/prueba_tus_habilidades_colon__enlaces/index.html b/files/es/learn/html/introduccion_a_html/prueba_tus_habilidades_colon__enlaces/index.html
new file mode 100644
index 0000000000..0e8dc1bfaf
--- /dev/null
+++ b/files/es/learn/html/introduccion_a_html/prueba_tus_habilidades_colon__enlaces/index.html
@@ -0,0 +1,99 @@
+---
+title: 'Prueba tus habilidades: Enlaces'
+slug: 'Learn/HTML/Introduccion_a_HTML/Prueba_tus_habilidades:_Enlaces'
+translation_of: 'Learn/HTML/Introduction_to_HTML/Test_your_skills:_Links'
+---
+<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 {{anch("Evaluación o ayuda adicional")}} 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/introduccion_a_html/prueba_tus_habilidades_colon__texto_básico_html/index.html b/files/es/learn/html/introduccion_a_html/prueba_tus_habilidades_colon__texto_básico_html/index.html
new file mode 100644
index 0000000000..f35a083987
--- /dev/null
+++ b/files/es/learn/html/introduccion_a_html/prueba_tus_habilidades_colon__texto_básico_html/index.html
@@ -0,0 +1,72 @@
+---
+title: 'Prueba tus habilidades: Texto básico HTML'
+slug: 'Learn/HTML/Introduccion_a_HTML/Prueba_tus_habilidades:_Texto_básico_HTML'
+tags:
+  - Aprendizaje
+  - HTML
+  - Principiante
+  - Prueba tus habilidades
+  - Texto
+translation_of: 'Learn/HTML/Introduction_to_HTML/Test_your_skills:_HTML_text_basics'
+---
+<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 {{anch("Assessment or further help")}} 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/introduccion_a_html/test_your_skills_colon__advanced_html_text/index.html b/files/es/learn/html/introduccion_a_html/test_your_skills_colon__advanced_html_text/index.html
new file mode 100644
index 0000000000..f29638eb81
--- /dev/null
+++ b/files/es/learn/html/introduccion_a_html/test_your_skills_colon__advanced_html_text/index.html
@@ -0,0 +1,67 @@
+---
+title: 'Pon a prueba tus habilidades: texto HTML avanzado'
+slug: 'Learn/HTML/Introduccion_a_HTML/Test_your_skills:_Advanced_HTML_text'
+translation_of: 'Learn/HTML/Introduction_to_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> {{anch("Assessment or further help")}} 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/introduccion_a_html/texto/index.html b/files/es/learn/html/introduccion_a_html/texto/index.html
new file mode 100644
index 0000000000..912acb7dfe
--- /dev/null
+++ b/files/es/learn/html/introduccion_a_html/texto/index.html
@@ -0,0 +1,970 @@
+---
+title: Fundamentos de texto en HTML
+slug: Learn/HTML/Introduccion_a_HTML/texto
+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
+---
+<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/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
new file mode 100644
index 0000000000..5169cfc976
--- /dev/null
+++ b/files/es/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html
@@ -0,0 +1,366 @@
+---
+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="https://wiki.developer.mozilla.org/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/images_in_html/index.html b/files/es/learn/html/multimedia_and_embedding/images_in_html/index.html
new file mode 100644
index 0000000000..22734a9b24
--- /dev/null
+++ b/files/es/learn/html/multimedia_and_embedding/images_in_html/index.html
@@ -0,0 +1,510 @@
+---
+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 {{anch("imágenes de fondo CSS")}}. 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/index.html b/files/es/learn/html/multimedia_and_embedding/index.html
new file mode 100644
index 0000000000..5e0ffe97a8
--- /dev/null
+++ b/files/es/learn/html/multimedia_and_embedding/index.html
@@ -0,0 +1,73 @@
+---
+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/Introduccion_a_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="/en-US/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=" /en-US/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=" /en-US/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=" /en-US/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=" /en-US/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=" /en-US/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/mozilla_splash_page/index.html b/files/es/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html
new file mode 100644
index 0000000000..662d565e31
--- /dev/null
+++ b/files/es/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html
@@ -0,0 +1,138 @@
+---
+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  {{anch("Assessment or further help")}} 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/other_embedding_technologies/index.html b/files/es/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html
new file mode 100644
index 0000000000..67b01247a4
--- /dev/null
+++ b/files/es/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html
@@ -0,0 +1,371 @@
+---
+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  {{anch("Security concerns")}} 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 {{anch("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.</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 {{anch("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.</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/responsive_images/index.html b/files/es/learn/html/multimedia_and_embedding/responsive_images/index.html
new file mode 100644
index 0000000000..daa97085e9
--- /dev/null
+++ b/files/es/learn/html/multimedia_and_embedding/responsive_images/index.html
@@ -0,0 +1,265 @@
+---
+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 style="display: none;"> </span>Objetivo:<span style="display: none;"> </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="https://wiki.developer.mozilla.org/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/video_and_audio_content/index.html b/files/es/learn/html/multimedia_and_embedding/video_and_audio_content/index.html
new file mode 100644
index 0000000000..e9b5571e23
--- /dev/null
+++ b/files/es/learn/html/multimedia_and_embedding/video_and_audio_content/index.html
@@ -0,0 +1,319 @@
+---
+title: Video and audio content
+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/tablas/conceptos_básicos_de_las_tablas_html/index.html b/files/es/learn/html/tablas/conceptos_básicos_de_las_tablas_html/index.html
new file mode 100644
index 0000000000..7259adf427
--- /dev/null
+++ b/files/es/learn/html/tablas/conceptos_básicos_de_las_tablas_html/index.html
@@ -0,0 +1,563 @@
+---
+title: Conceptos básicos de las tablas HTML
+slug: Learn/HTML/Tablas/Conceptos_básicos_de_las_tablas_HTML
+translation_of: Learn/HTML/Tables/Basics
+---
+<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/tablas/funciones_avanzadas_de_las_tablas_html_y_accesibilidad/index.html b/files/es/learn/html/tablas/funciones_avanzadas_de_las_tablas_html_y_accesibilidad/index.html
new file mode 100644
index 0000000000..a74817c5d4
--- /dev/null
+++ b/files/es/learn/html/tablas/funciones_avanzadas_de_las_tablas_html_y_accesibilidad/index.html
@@ -0,0 +1,471 @@
+---
+title: Funciones avanzadas de las tablas HTML y accesibilidad
+slug: Learn/HTML/Tablas/Funciones_avanzadas_de_las_tablas_HTML_y_accesibilidad
+translation_of: Learn/HTML/Tables/Advanced
+---
+<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/tablas/index.html b/files/es/learn/html/tablas/index.html
new file mode 100644
index 0000000000..7d04eb0cbf
--- /dev/null
+++ b/files/es/learn/html/tablas/index.html
@@ -0,0 +1,34 @@
+---
+title: Tablas HTML
+slug: Learn/HTML/Tablas
+translation_of: Learn/HTML/Tables
+---
+<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/tablas/structuring_planet_data/index.html b/files/es/learn/html/tablas/structuring_planet_data/index.html
new file mode 100644
index 0000000000..e9868bb95a
--- /dev/null
+++ b/files/es/learn/html/tablas/structuring_planet_data/index.html
@@ -0,0 +1,72 @@
+---
+title: 'Evaluación: Estructurando datos planetarios'
+slug: Learn/HTML/Tablas/Structuring_planet_data
+translation_of: Learn/HTML/Tables/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>