---
title: Macros usadas comunmente
slug: MDN/Structures/Macros/Commonly-used_macros
tags:
  - CSS
  - Estructuras
  - Macros
  - Referencia
translation_of: MDN/Structures/Macros/Commonly-used_macros
---
<p>{{MDNSidebar}}</p>

<p><span class="seoSummary">Esta página enumera muchas de las macros de propósito general creadas para usarlas en MDN. Para obtener información sobre cómo usar estas macros, consulta {{web.link("/es/docs/MDN/Contribute/Structures/Macros", "Uso de macros")}} y {{web.link("/es/docs/MDN/Contribute/Editor/Links#Usar_macros_de_enlaces", "Usar macros de enlaces")}}.</span> Consulta {{web.link("/es/docs/MDN/Contribute/Structures/Macros/Other", "Otras macros")}} para obtener información sobre las macros que se utilizan con poca frecuencia, que se utilizan solo en contextos especiales o, están en desuso. También hay una {{web.link("/es/dashboards/macros", "lista completa de todas las macros en MDN")}}. </p>

<p>Consulta también la {{web.link("/es/docs/MDN/Contribute/Guidelines/CSS_style_guide", "guía de estilo CSS")}} para conocer los estilos disponibles para usarlos.</p>

<h2 id="Enlaces">Enlaces</h2>

<h3 id="Creando_un_solo_hipervínculo">Creando un solo hipervínculo</h3>

<p id="To_another_MDN_page_or_its_section_ (anch_SectionOnPage_manch_Link_LinkItem_LinkItemDL)">En general, no es necesario utilizar macros para crear enlaces arbitrarios. Utiliza el botón <strong>Enlace</strong> en la interfaz del editor para crear enlaces. </p>

<ul>
 <li>La macro {{TemplateLink("Glossary")}} crea un vínculo a la entrada de un término específico en el {{web.link("/es/docs/Glossary", "glosario")}} de MDN. Esta macro acepta un parámetro obligatorio y dos opcionales:

  <p>Ejemplos:</p>

  <ol>
   <li>El nombre del término (tal como "HTML").</li>
   <li>El texto que se mostrará en el artículo en lugar del nombre del término (esto se debe usar con poca frecuencia).{{Optional_Inline}}</li>
   <li>Si se especifica este parámetro y no es cero, no se aplica el estilo personalizado que normalmente se aplica a los enlaces del glosario.{{Optional_Inline}}</li>
  </ol>

  <ul>
   <li><code>\{{Glossary("HTML")}}</code> produce {{Glossary("HTML")}}</li>
   <li><code>\{{Glossary("CSS", "Hojas de estilo en cascada")}}</code> produce {{Glossary("CSS", "Hojas de estilo en cascada")}}</li>
   <li><code>\{{Glossary("HTML", "", 1)}}</code> produce {{Glossary("HTML", "", 1)}}</li>
  </ul>
 </li>
 <li>{{TemplateLink("anch")}} — crea un enlace a una sección en la página:
  <ul>
   <li><code>\{{anch("Enlace a páginas en referencias")}}</code>;</li>
   <li>
    <p>Demo: {{anch("Enlace a páginas en referencias")}}</p>
   </li>
  </ul>
 </li>
</ul>

<h3 id="Enlace_a_páginas_en_referencias">Enlace a páginas en referencias</h3>

<p>Hay varias macros para vincular páginas en áreas de referencia específicas de MDN.</p>

<ul>
 <li>{{TemplateLink("cssxref")}} links to a page in the <a href="/en-US/docs/Web/CSS/Reference">CSS Reference</a>.<br>
  Ejemplo: <code>\{{CSSxRef("cursor")}}</code>, da como resultado: {{CSSxRef("cursor")}}.</li>
 <li>{{TemplateLink("DOMxRef")}} enlaces a páginas en la referencia DOM; si incluyes paréntesis al final, la plantilla sabe que debe mostrar el enlace para que aparezca el nombre de una función. Por ejemplo, <code>\{{DOMxRef("document.getElementsByName()")}}</code> da como resultado: {{DOMxRef("document.getElementsByName()")}} mientras que <code>\{{DOMxRef("Node")}}</code> da como resultado: {{DOMxRef("Node")}}.</li>
 <li>{{TemplateLink("event")}} enlaces a páginas en la referencia de Evento del DOM, por ejemplo: <code>\{{Event("change")}}</code> da como resultado {{Event("change")}}.</li>
 <li>{{TemplateLink("HTMLElement")}} enlaza a un elemento HTML en la Referencia HTML.</li>
 <li>{{TemplateLink("htmlattrxref")}} enlaza a un atributo HTML, ya sea una descripción de atributo global si solo especificas el nombre del atributo o un atributo asociado con un elemento específico si especificas un nombre de atributo y un nombre de elemento. Por ejemplo, <code>\{{HTMLAttrxRef("lang")}}</code> creará este enlace: {{HTMLAttrxRef("lang")}}. <code>\{{HTMLAttrxRef("type", "input")}}</code> creará este enlace: {{HTMLAttrxRef("type", "input")}}.</li>
 <li>{{TemplateLink("jsxref")}} enlaza a una página en la {{JSxRef("../Referencia", "Referencia de JavaScript")}}.</li>
 <li>{{TemplateLink("SVGAttr")}} enlaza a un atributo SVG específico. Por ejemplo, <code>\{{SVGAttr("d")}}</code> crea este enlace: {{SVGAttr("d")}}.</li>
 <li>{{TemplateLink("SVGElement")}} enlaza a un elemento SVG en la Referencia SVG.</li>
 <li>{{TemplateLink("httpheader")}} enlaza a un {{web.link("/es/docs/Web/HTTP/Headers", "header de HTTP")}}.</li>
 <li>{{TemplateLink("HTTPMethod")}} enlaza a un {{web.link("/es/docs/Web/HTTP/Methods", "método de solicitud HTTP")}}.</li>
 <li>{{TemplateLink("HTTPStatus")}} enlaces a un {{web.link("/es/docs/Web/HTTP/Status", "código de estado de respuesta HTTP")}}.</li>
</ul>

<h3 id="Enlazar_a_errores">Enlazar a errores</h3>

<ul>
 <li><code>Bugs</code>
  <ul>
   <li>{{TemplateLink("bug")}} te permite enlazar a un error en bugzilla.mozilla.org fácilmente usando esta sintaxis: <code>\{{Bug(123456)}}</code>. Esto te da: {{Bug(123456)}}.</li>
   <li>{{TemplateLink("WebkitBug")}} inserta un enlace a un error en la base de datos de errores de <code>WebKit</code>. For example, <code>\{{WebkitBug(31277)}}</code> inserta {{WebkitBug(31277)}}.</li>
  </ul>
 </li>
</ul>

<h3 id="Ayuda_a_la_navegación_para_guías_multipágina">Ayuda a la navegación para guías multipágina</h3>

<p>{{TemplateLink("Previous")}}, {{TemplateLink("Next")}} y {{TemplateLink("PreviousNext")}} proporcionan controles de navegación para artículos que forman parte de secuencias. Para las plantillas unidireccionales, el único parámetro necesario es la ubicación wiki del artículo anterior o siguiente de la secuencia. Para {{TemplateLink("PreviousNext")}}, los dos parámetros necesarios son las ubicaciones wiki de los artículos correspondientes. El primer parámetro es para el artículo anterior y el segundo es para el artículo siguiente.</p>

<h2 id="Ejemplos_de_código">Ejemplos de código</h2>

<h3 id="Ejemplos_en_vivo">Ejemplos en vivo</h3>

<ul>
 <li>{{TemplateLink("EmbedLiveSample")}} te permite insertar la salida de un ejemplo de código en una página, como se describe en {{web.link("/es/docs/MDN/Contribute/Structures/Live_samples", "Ejemplos en vivo")}}.</li>
 <li>{{TemplateLink("LiveSampleLink")}} crea un vínculo a una página que contiene el resultado de un ejemplo de código en una página, como se describe en {{web.link("/es/docs/MDN/Contribute/Structures/Live_samples", "Ejemplos en vivo")}}.</li>
</ul>

<h2 id="Generar_la_barra_lateral">Generar la barra lateral</h2>

<p>Hay plantillas para casi todas las grandes colecciones de páginas. Por lo general, enlazan a la página principal de <code>reference/guide/tutorial</code> (esto, a menudo es necesario porque nuestras rutas de navegación a veces no lo pueden hacer) y colocan el artículo en la categoría apropiada.</p>

<ul>
 <li>{{TemplateLink("CSSRef")}} genera la barra lateral para las páginas de referencia CSS.</li>
 <li>{{TemplateLink("HTMLRef")}} genera la barra lateral para las páginas de referencia HTML.</li>
 <li>{{TemplateLink("APIRef")}} genera la barra lateral para las páginas de referencia de la API web.</li>
</ul>

<h2 id="Formato_de_propósito_general">Formato de propósito general</h2>

<h3 id="Indicadores_en_línea_para_documentación_de_APIs">Indicadores en línea para documentación de APIs</h3>

<p>{{TemplateLink("optional_inline")}} y {{TemplateLink("ReadOnlyInline")}} se utilizan en la documentación de la API, normalmente cuando se describe la lista de propiedades de un objeto o parámetros de una función.</p>

<p>Uso: <code>\{{Optional_Inline}}</code> o <code>\{{ReadOnlyInline}}</code>. Ejemplo:</p>

<dl>
 <dt><code>isCustomObject</code>{{ReadOnlyInline}}</dt>
 <dd>Indica, si es <code>true</code>, que el objeto es personalizado.</dd>
 <dt><code>parameterX</code>{{Optional_Inline}}</dt>
 <dd>Blah blah blah...</dd>
</dl>

<h2 id="Indicadores_de_estado_y_compatibilidad">Indicadores de estado y compatibilidad</h2>

<h3 id="Indicadores_en_línea_sin_parámetros_adicionales">Indicadores en línea sin parámetros adicionales</h3>

<h4 id="Non-standard"><code>Non-standard</code></h4>

<p>{{TemplateLink("Non-standard_Inline")}} inserta una marca en línea que indica que la API no se ha estandarizado y no está en un seguimiento de estándares.</p>

<h5 id="Sintaxis">Sintaxis</h5>

<p><code>\{{Non-standard_Inline}}</code></p>

<h5 id="Ejemplos">Ejemplos</h5>

<ul>
 <li>Icono: {{Non-standard_Inline}}</li>
</ul>

<h4 id="Experimental">Experimental</h4>

<p>{{TemplateLink("experimental_inline")}} inserta una marca en línea que indica que la API no está ampliamente implementada y puede cambiar en el futuro.</p>

<h5 id="Sintaxis_2">Sintaxis</h5>

<p><code>\{{Experimental_Inline}}</code></p>

<h5 id="Ejemplos_2">Ejemplos</h5>

<ul>
 <li>Icon: {{Experimental_Inline}}</li>
</ul>

<h3 id="Indicadores_en_línea_que_apoyan_la_especificación_de_la_tecnología">Indicadores en línea que apoyan la especificación de la tecnología</h3>

<p>En estas macros, el parámetro (cuando se especifica) debe ser una de las cadenas "html", "js", "css" o "gecko", seguida del número de versión.</p>

<h4 id="Desaprobado">Desaprobado</h4>

<p>{{TemplateLink("Deprecated_Inline")}} inserta una marca desaprobado en línea (<code>Deprecated_Inline</code>) para desalentar el uso de una API que oficialmente está en desuso. <strong>Nota</strong>: "Desaprobado" significa que el elemento ya no se debe utilizar, pero sigue funcionando. Si quieres decir que ya no funciona, utiliza el término "obsoleto".</p>

<p>No utilices el parámetro en ningún área independiente del navegador (HTML, API, JS, CSS, …).</p>

<h5 id="Sintaxis_3">Sintaxis</h5>

<p><code>\{{Deprecated_Inline}}</code> o <code>\{{Deprecated_Inline("gecko5")}}</code></p>

<h5 id="Ejemplos_3">Ejemplos</h5>

<ul>
 <li>Icon: {{Deprecated_Inline}}</li>
 <li>Insignia: {{Deprecated_Inline("gecko5")}}</li>
</ul>

<h4 id="Obsoleto">Obsoleto</h4>

<p>{{TemplateLink("Obsolete_Inline")}} inserta una marca de obsoleto en línea (<code>Deprecated_Inline</code>) para evitar el uso de, por ejemplo, una función, método o propiedad que oficialmente es obsoleto.</p>

<p>No utilices el parámetro en ningún área independiente del navegador (HTML, API, JS, CSS, …).</p>

<h5 id="Sintaxis_4">Sintaxis</h5>

<p><code>\{{Obsolete_Inline}}</code> u <code>\{{Obsolete_Inline("js1.8.5")}}</code></p>

<h5 id="Ejemplos_4">Ejemplos</h5>

<ul>
 <li>Icon: {{Obsolete_Inline}}</li>
 <li>Badge: {{Obsolete_Inline("js1.8.5")}}</li>
</ul>

<h3 id="Plantilla_de_insignias">Plantilla de insignias</h3>

<p>Estas macros se utilizan principalmente en la página {{web.link("/es/docs/Web/API", "WebAPI")}}. Consulta {{anch("Creación de nuevas insignias")}} para obtener información sobre cómo crear una nueva insignia (<code>Badge</code>).</p>

<h3 id="Indicadores_de_encabezado_de_página_o_sección">Indicadores de encabezado de página o sección</h3>

<p>Estas plantillas tienen la misma semántica que sus contrapartes en línea descritas anteriormente. Las plantillas se deben colocar directamente debajo del título de la página principal (o la ruta de navegación si está disponible) en la página de referencia. También se pueden utilizar para marcar una sección en una página.</p>

<ul>
 <li>{{TemplateLink("Non-standard_Header")}}: <code>\{{Non-standard_Header}}</code> {{Non-standard_Header}}</li>
 <li>{{TemplateLink("SeeCompatTable")}} se debe usar en páginas que documentan {{web.link("/es/docs/MDN/Contribute/Guidelines/Conventions_definitions#Experimental", "características experimentales")}}. Ejemplo: <code>\{{SeeCompatTable}}</code> {{SeeCompatTable}}</li>
 <li>{{TemplateLink("Deprecated_Header")}}: <code>\{{Deprecated_Header}}</code> {{Deprecated_Header}}</li>
 <li>{{TemplateLink("Deprecated_Header")}} con parámetro: <code>\{{Deprecated_Header("gecko5")}}</code> {{Deprecated_Header("gecko5")}} No utilices el parámetro en ninguna área de diagnóstico del navegador (HTML, APIs, JS, CSS, …).</li>
 <li>{{TemplateLink("Obsolete_Header")}}: <code>\{{Obsolete_Header}}</code> {{Obsolete_Header}}</li>
 <li>{{TemplateLink("Obsolete_Header")}} con parámetro: <code>\{{Obsolete_Header("gecko30")}}</code> {{Obsolete_Header("gecko30")}} No utilice el parámetro en ninguna área de diagnóstico del navegador (HTML, APIs, JS, CSS, …).</li>
 <li>{{TemplateLink("secureContext_header")}}: <code>\{{SecureContext_Header}}</code> {{SecureContext_Header}}</li>
</ul>

<h3 id="Indica_que_una_función_está_disponible_en_workers_web">Indica que una función está disponible en <code>workers</code> web</h3>

<p>La macro {{TemplateLink("AvailableInWorkers")}} inserta un cuadro de nota localizado que indica que una función está disponible en el contexto de {{web.link("/es/docs/Web/API/Web_Workers_API", "workers web")}}.</p>

<p>{{AvailableInWorkers}}</p>