diff options
Diffstat (limited to 'files/es/web/html/element/mark/index.html')
| -rw-r--r-- | files/es/web/html/element/mark/index.html | 142 |
1 files changed, 142 insertions, 0 deletions
diff --git a/files/es/web/html/element/mark/index.html b/files/es/web/html/element/mark/index.html new file mode 100644 index 0000000000..38ed980e3a --- /dev/null +++ b/files/es/web/html/element/mark/index.html @@ -0,0 +1,142 @@ +--- +title: '<mark>: el elemento de resaltado de texto' +slug: Web/HTML/Elemento/mark +tags: + - HTML + - HTML5 + - 'HTML:Elemento' + - mark + - para_revisar +translation_of: Web/HTML/Element/mark +--- +<div>{{HTMLRef}}</div> + +<p>El <strong> Elemento HTML Mark <code><mark></code></strong> representa un texto <strong>marcado</strong> o <strong>resaltado</strong> como referencia o anotación, debido a su relevancia o importancia en un contexto particular.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/mark.html", "tabbed-shorter")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Categorías de contenido</th> + <td>Contenido de flujo, contenido de párrafo, contenido palpable</td> + </tr> + <tr> + <th>Contenido permitido</th> + <td><a href="/en/Dom/Content_categories#Phrasing_content" title="en/Dom/Content categories#Phrasing content">Contenido estático</a></td> + </tr> + <tr> + <th>Omisión de etiquetas</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th>Elementos padre permitidos</th> + <td>Cualquier elemento que acepte <a href="/en/Dom/Content_categories#Phrasing_content" title="en/Dom/Content categories#Phrasing content">contenido estático</a></td> + </tr> + <tr> + <th>Roles ARIA permitidos</th> + <td>Cualquiera</td> + </tr> + <tr> + <th>Documento normativo</th> + <td><a class="external" href="http://www.google.com/url?q=http%3A%2F%2Fwww.whatwg.org%2Fspecs%2Fweb-apps%2Fcurrent-work%2Fmultipage%2Ftext-level-semantics.html%23the-mark-element&sa=D&sntz=1&usg=AFQjCNFWrrJ-Y17m5GxNva7WqE-i6zuWcA" rel="external nofollow">HTML 5, sección 4.6.17</a></td> + </tr> + <tr> + <th>DOM interface</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento no tiene atributos que no sean los <a class="new " href="https://developer.mozilla.org/es/docs/Web/HTML/Atributos_Globales" rel="internal">atributos globales</a>, comunes a todos los elementos.</p> + +<h2 id="Notas_de_uso">Notas de uso</h2> + +<ul> + <li>En una cita ({{HTMLElement("q")}}) o en otro bloque ({{HTMLElement("blockquote")}}), generalmente indica texto que es de especial interés pero que no está destacado en el material de origen, o material que necesita especial escrutinio, aunque el autor original no lo considerase importante.</li> + <li>Por otro lado, <code><mark></code> indica una parte del contenido del documento que probablemente sea relevante para el usuario. Por ejemplo, se puede utilizar en una página que muestra los resultados de búsqueda para resaltar cada uno de estos por palabra.</li> + <li>No uses el elemento <code><mark></code> para resaltado de sintaxis; usa el elemento {{ HTMLElement("span") }} para este fin.</li> +</ul> + +<div class="blockIndicator note"> +<p>No se debe confundir el elemento <code><span style="font-family: Courier New;"><mark></span></code> con el elemento {{ HTMLElement("strong") }}. El elemento {{ HTMLElement("strong") }} se utiliza para denotar intervalos de texto de especial <em>importancia,</em> mientras que el elemento <code><mark></code> se utiliza para denotar intervalos de texto de especial <em>relevancia.</em></p> +</div> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Marcar_texto_de_interés">Marcar texto de interés</h3> + +<p>En este ejemplo, <mark> se utiliza para resaltar texto en una cita que es de particular insterés para el usuario.</p> + +<pre class="brush: html"><blockquote> + It is a period of civil war. Rebel spaceships, striking from a + hidden base, have won their first victory against the evil + Galactic Empire. During the battle, <mark>Rebel spies managed + to steal secret plans</mark> to the Empire’s ultimate weapon, + the DEATH STAR, an armored space station with enough power to + destroy an entire planet. +</blockquote></pre> + +<p>El resultado sería:</p> + +<p>{{EmbedLiveSample("Marking_text_of_interest", 650, 130)}}</p> + +<h3 id="Identificando_fragmentos_sensibles_al_contexto">Identificando fragmentos sensibles al contexto</h3> + +<p>Este ejemplo demuestra el uso de <code><mark></code> para marcar resultados de búsqueda en el fragmento.</p> + +<pre class="brush: html"><p>It is a dark time for the Rebellion. Although the Death +Star has been destroyed, <mark class="match">Imperial</mark> +troops have driven the Rebel forces from their hidden base and +pursued them across the galaxy.</p> + +<p>Evading the dreaded <mark class="match">Imperial</mark> +Starfleet, a group of freedom fighters led by Luke Skywalker +has established a new secret base on the remote ice world of +Hoth.</p></pre> + +<p>Para ayudar a distinguir el uso de <code><mark></code> en los resultados de búsqueda de otro uso potencial, este ejemplo aplica la clase "match" a cada coincidencia.</p> + +<p>El resultado se vería:</p> + +<p>{{EmbedLiveSample("Identifying_context-sensitive_passages", 650, 130)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-mark-element', '<mark>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-mark-element', '<mark>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegador">Compatibilidad de navegador</h2> + + + +<p>{{Compat("html.elements.mark")}}</p> + +<h2 id="Consulta_también">Consulta también</h2> + +<ul> + <li>Otros <a href="/en/HTML/Text-level_semantics_elements" title="en/HTML/Text-level semantics elements">elementos de la semántica a nivel de texto</a> : {{ HTMLElement("a") }}, {{ HTMLElement("em") }}, {{ HTMLElement("strong") }}, {{ HTMLElement("cite") }} , {{ HTMLElement("q") }} , {{ HTMLElement("dfn") }}, {{ HTMLElement("abbr") }}, {{ HTMLElement("time") }} , {{ HTMLElement("code") }} ,{{ HTMLElement("var") }}, {{ HTMLElement("samp") }} ,{{ HTMLElement("kbd") }} ,{{ HTMLElement("sub") }} , {{ HTMLElement("sup") }} ,{{ HTMLElement("i") }} , {{ HTMLElement("b") }}, {{ HTMLElement("mark") }} , {{ HTMLElement("ruby") }} , {{ HTMLElement("rp") }} , {{ HTMLElement("rt") }} , {{ HTMLElement("bdo") }}, {{ HTMLElement("span") }} , {{ HTMLElement("br") }} , {{ HTMLElement("wbr") }}.</li> +</ul> |