path: root/files/es/learn/html/introduction_to_html/advanced_text_formatting/index.html

---
title: Formateo de texto avanzado
slug: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting
tags:
  - CodingScripting
  - Guía
  - HTML
  - Lista de descripción
  - Novato
  - Principiante
  - Texto
  - abreviatura
  - aprende
  - cita
  - semántica
translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting
original_slug: Learn/HTML/Introduccion_a_HTML/Advanced_text_formatting
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</div>

<p class="summary">Hay muchos otros elementos en HTML para dar formato al texto, que no expusimos en el artículo {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Fundamentos de texto HTML")}}. Los elementos descritos en este artículo son menos conocidos, pero aún así es muy útil conocerlos (no obstante, no es una lista completa de ninguna manera). Aquí aprenderás cómo marcar citas, listas de descripción, código de computadora y otro texto relacionado, subíndices y superíndices, información de contacto y mucho más.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Prerrequisitos:</th>
   <td>Estar familiarizado con HTML, cubierto en {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}. Aplicación de formato a texto en documentos HTML, según lo expuesto en la sección {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Fundamentos de texto HTML")}}.</td>
  </tr>
  <tr>
   <th scope="row">Objetivo:</th>
   <td>Aprender a utilizar elementos HTML menos conocidos para marcar características semánticas avanzadas.</td>
  </tr>
 </tbody>
</table>

<h2 id="Listas_de_descripciones">Listas de descripciones</h2>

<p>En los fundamentos del texto HTML, explicamos cómo {{web.link("/es/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists", "marcar listas básicas")}} en HTML, pero no mencionamos el tercer tipo de lista con la que te encontrarás ocasionalmente: <strong>listas de descripción</strong>. El propósito de estas listas es marcar un conjunto de elementos y sus descripciones asociadas, como términos y definiciones, o preguntas y respuestas. Veamos un ejemplo de un conjunto de términos y definiciones:</p>

<pre class="brush: bash notranslate">soliloquio
En las obras dramáticas, corresponde a cuando un personaje se habla a sí mismo para representar sus pensamientos o sentimientos internos y, en el proceso, transmitirlos a la audiencia (pero no a otros personajes).
monólogo
En las obras dramáticas, corresponde a cuando un personaje habla de sus pensamientos en voz alta para compartirlos con el público y cualquier otro personaje presente.
aparte
En las obras dramáticas, corresponde a cuando un personaje comparte un comentario solo con la audiencia para dar efecto cómico o dramático. Suele ser un sentimiento, un pensamiento o información adicional.</pre>

<p>Las listas de descripción utilizan un contenedor diferente al de los otros tipos de listas — {{HTMLElement("dl")}} («<em><b>d</b>escription <b>l</b>ist</em>» o lista de descripciones); además, cada término está envuelto en un elemento {{HTMLElement("dt")}} («<em><b>d</b>escription <b>t</b>erm</em>» o término a describir), y cada descripción está envuelta en un elemento {{HTMLElement("dd")}} («<em><b>d</b>escription <b>d</b>efinition</em>» o definición de descripción). Para redondear esta información veamos un ejemplo:</p>

<div id="listas-de-descripciones-ejemplo-activo-1">
<pre class="brush: html notranslate">&lt;dl&gt;
  &lt;dt&gt;soliloquio&lt;/dt&gt;
  &lt;dd&gt;En las obras dramáticas, corresponde a cuando un personaje se habla a sí mismo para representar sus pensamientos o sentimientos internos y, en el proceso, transmitirlos a la audiencia (pero no a otros personajes).&lt;/dd&gt;
  &lt;dt&gt;monólogo&lt;/dt&gt;
  &lt;dd&gt;En las obras dramáticas, corresponde a cuando un personaje habla de sus pensamientos en voz alta para compartirlos con el público y cualquier otro personaje presente.&lt;/dd&gt;
  &lt;dt&gt;aparte&lt;/dt&gt;
  &lt;dd&gt;En las obras dramáticas, corresponde a cuando un personaje comparte un comentario solo con la audiencia para dar efecto cómico o dramático. Suele ser un sentimiento, un pensamiento o información adicional.&lt;/dd&gt;
&lt;/dl&gt;</pre>
</div>

<p>Los estilos predeterminados del navegador mostrarán listas de descripciones con las descripciones sangradas un poco más que los términos.</p>

<p>{{ EmbedLiveSample('listas-de-descripciones-ejemplo-activo-1', '100%', '285px', '', '', 'hide-codepen-jsfiddle') }}</p>

<p>Ten en cuenta que un solo término puede tener múltiples descripciones, por ejemplo:</p>

<div id="listas-de-descripciones-ejemplo-activo-2">
<pre class="brush: html notranslate">&lt;dl&gt;
  &lt;dt&gt;aparte&lt;/dt&gt;
  &lt;dd&gt;En las obras dramáticas, corresponde a cuando un personaje comparte un comentario solo con la audiencia para dar efecto cómico o dramático. Suele ser un sentimiento, un pensamiento o información adicional.&lt;/dd&gt;
  &lt;dd&gt;Si la obra es impresa, es una sección de contenido que se relaciona con el tema, pero no encaja directamente en el flujo principal de contenido, de modo que se presenta por separado (a menudo en una caja de texto en el margen).&lt;/dd&gt;
&lt;/dl&gt;</pre>
</div>

<p>{{ EmbedLiveSample('listas-de-descripciones-ejemplo-activo-2', '100%', '193px', '', '', 'hide-codepen-jsfiddle') }}</p>

<h3 id="Aprendizaje_activo_Marcar_un_conjunto_de_definiciones">Aprendizaje activo: Marcar un conjunto de definiciones</h3>

<p>Es hora de practicar las listas de descripciones; agrega elementos al texto sin formato en el campo <em>Código editable</em> para que aparezca como una lista de descripción en el campo <em>Salida en vivo</em>. Puedes usar tus propios términos y descripciones si lo deseas.</p>

<p>Si cometes un error, siempre puedes restablecer el código anterior pulsando el botón <em>Restablecer</em>. Si te quedas realmente encallado, pulsa el botón <em>Mostrar solución</em> para ver una buena propuesta.</p>

<div class="hidden">
<h6 id="Código_reproducible">Código reproducible</h6>

<pre class="brush: html notranslate">&lt;h2&gt;Salida en vivo&lt;/h2&gt;

&lt;div class="output" style="min-height: 50px;"&gt;
&lt;/div&gt;

&lt;h2&gt;Código editable&lt;/h2&gt;
&lt;p class="a11y-label"&gt;Pulsa Esc para quitar el foco del área de código (Tab inserta un carácter de tabulación).&lt;/p&gt;

&lt;textarea id="code" class="input" style="min-height: 100px; width: 95%"&gt;
Tocino
El pegamento que une al mundo.
Huevos
El pegamento que une el pastel.
Café
La bebida que hace que el mundo funcione por la mañana.
Un color marrón claro.&lt;/textarea&gt;

&lt;div class="playable-buttons"&gt;
  &lt;input id="reset" type="button" value="Restablecer"&gt;
  &lt;input id="solution" type="button" value="Mostrar solución"&gt;
&lt;/div&gt;</pre>

<pre class="brush: css notranslate">html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}</pre>

<pre class="brush: js notranslate">const textarea = document.getElementById('code');
const reset = document.getElementById('reset');
const solution = document.getElementById('solution');
const output = document.querySelector('.output');
const code = textarea.value;
const userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Mostrar solución';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Mostrar solución') {
    textarea.value = solutionEntry;
    solution.value = 'Ocultar solución';
  } else {
    textarea.value = userEntry;
    solution.value = 'Mostrar solución';
  }
  updateCode();
});

const htmlSolution = '&lt;dl&gt;\n &lt;dt&gt;Tocino&lt;/dt&gt;\n &lt;dd&gt;El pegamento que une al mundo.&lt;/dd&gt;\n &lt;dt&gt;Huevos&lt;/dt&gt;\n &lt;dd&gt;El pegamento que une el pastel.&lt;/dd&gt;\n &lt;dt&gt;Café&lt;/dt&gt;\n &lt;dd&gt;La bebida que hace que el mundo funcione por la mañana.&lt;/dd&gt;\n &lt;dd&gt;Un color marrón claro.&lt;/dd&gt;\n&lt;/dl&gt;';
const solutionEntry = htmlSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

// captura la tecla de tabulación en el área de texto y en su lugar
// hace que se escriba una tabulación en la posición del cursor

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('\t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  const scrollPos = textarea.scrollTop;
  const caretPos = textarea.selectionStart;

  const front = (textarea.value).substring(0, caretPos);
  const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Actualiza el userCode guardado cada vez que el usuario actualiza el código del área de texto

textarea.onkeyup = function(){
  // Solo queremos guardar el estado cuando se muestra el código de usuario,
  // no es la solución, por lo que la solución no se guarda sobre el código del usuario
  if(solution.value === 'Mostrar solución') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};</pre>
</div>

<p>{{ EmbedLiveSample('Código_reproducible', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p>

<h2 id="Citas">Citas</h2>

<p>HTML también dispone de elementos para el marcado de citas; cual elemento utilices depende de si estás marcando la cita como un bloque o como un elemento en línea.</p>

<h3 id="Cita_en_bloque_independiente_blockquote">Cita en bloque independiente (<em>blockquote</em>)</h3>

<p>Si una sección de contenido a nivel de bloque (ya sea un párrafo, varios párrafos, una lista, etc.) se cita en otro lugar, debes envolverla dentro de un elemento {{HTMLElement("blockquote")}} para indicarlo, e incluye una URL que apunte a la fuente de la cita dentro de un atributo {{HTMLAttrxRef("cite", "blockquote")}}. Por ejemplo, el siguiente marcado tomado de la página del elemento <code>&lt;blockquote&gt;</code> de MDN:</p>

<pre class="brush: html notranslate">&lt;p&gt;El &lt;strong&gt;elemento HTML &lt;code&gt;&amp;lt;blockquote&amp;gt;&lt;/code&gt;&lt;/strong&gt; (o &lt;em&gt;elemento HTML de cita
en bloque independiente&lt;/em&gt;) indica que el texto al que delimita es una cita ampliada.&lt;/p&gt;</pre>

<p>Para convertir esto en una cita en bloque independiente, simplemente harías lo siguiente:</p>

<div id="blockquote-ejemplo-en-vivo">
<pre class="brush: html notranslate">&lt;p&gt;A continuación se muestra una cita en bloque independiente...&lt;/p&gt;
&lt;blockquote cite="https://developer.mozilla.org/es/docs/Web/HTML/Element/blockquote"&gt;
  &lt;p&gt;El &lt;strong&gt;elemento HTML &lt;code&gt;&amp;lt;blockquote&amp;gt;&lt;/code&gt;&lt;/strong&gt; (o &lt;em&gt;elemento HTML de cita
  en bloque independiente&lt;/em&gt;) indica que el texto al que delimita es una cita ampliada.&lt;/p&gt;
&lt;/blockquote&gt;</pre>
</div>

<p>El estilo predeterminado del navegador lo mostrará como un párrafo con sangría, para indicar que se trata de una cita; el párrafo anterior a la cita sirve para demostrarlo.</p>

<p>{{EmbedLiveSample('blockquote-ejemplo-en-vivo', '100%', '117px', '', '', 'hide-codepen-jsfiddle')}}</p>

<h3 id="Citas_en_línea">Citas en línea</h3>

<p>Las citas en línea funcionan exactamente de la misma manera, excepto que usan el elemento {{HTMLElement("q")}}. Por ejemplo, el siguiente fragmento de marcado contiene una cita <code>&lt;q&gt;</code> de la página MDN:</p>

<pre class="brush: html notranslate">&lt;p&gt;El elemento de cita — &lt;code&gt;&amp;lt;q&amp;gt;&lt;/code&gt; — se &lt;q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q"&gt;utiliza en
para citas breves que no requieren saltos de párrafo.&lt;/q&gt;&lt;/p&gt;</pre>

<p>El estilo predeterminado del navegador lo representará como texto normal entre comillas para indicar una cita, así:</p>

<p>{{ EmbedLiveSample('Citas_en_línea', '100%', '78px', '', '', 'hide-codepen-jsfiddle')}}</p>

<h3 id="Citas_2">Citas</h3>

<p>El contenido del atributo {{HTMLAttrxRef("cite", "blockquote")}} suena útil, pero desafortunadamente los navegadores, lectores de pantalla, etc. no hacen mucho con él. No hay forma de hacer que el navegador muestre el contenido de <code>cite</code> sin escribir tu propia solución usando JavaScript o CSS. Si deseas que la fuente de la cita esté disponible en la página, lo debes hacer en el texto a través de un enlace o de alguna otra forma apropiada.</p>

<p>Hay un elemento {{HTMLElement("cite")}}, pero está destinado a contener el título del recurso que se cita, p. ej. el nombre del libro. Sin embargo, no hay razón por la que no puedas vincular el texto dentro de <code>&lt;cite&gt;</code> a la fuente de la cita de alguna manera:</p>

<pre class="brush: html notranslate">&lt;p&gt;De acuerdo con &lt;a href="https://developer.mozilla.org/es/docs/Web/HTML/Element/blockquote"&gt;
&lt;cite&gt;página de citas en bloque independiente de MDN&lt;/cite&gt;&lt;/a&gt;:
&lt;/p&gt;

&lt;blockquote cite="https://developer.mozilla.org/es/docs/Web/HTML/Element/blockquote"&gt;
  &lt;p&gt;El &lt;strong&gt;elemento HTML &lt;code&gt;&amp;lt;blockquote&amp;gt;&lt;/code&gt;&lt;/strong&gt; (o &lt;em&gt;elemento HTML de cita
  en bloque independiente&lt;/em&gt;) indica que el texto al que delimita es una cita ampliada.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;El elemento de cita — &lt;code&gt;&amp;lt;q&amp;gt;&lt;/code&gt; — se &lt;q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q"&gt;utiliza en
citas breves que no requieren saltos de párrafo.&lt;/q&gt; -- &lt;a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q"&gt;
&lt;cite&gt;página q de MDN&lt;/cite&gt;&lt;/a&gt;.&lt;/p&gt;</pre>

<p>Las citas se escriben en cursiva de forma predeterminada.</p>

<p>{{ EmbedLiveSample('Citas_2', '100%', '179px', '', '', 'hide-codepen-jsfiddle') }}</p>

<h3 id="Aprendizaje_activo_¿Quién_dijo_eso">Aprendizaje activo: ¿Quién dijo eso?</h3>

<p>¡Es hora de otro ejemplo de aprendizaje activo! En este ejemplo, nos gustaría que:</p>

<ol>
 <li>Conviertas el párrafo del medio en una cita en bloque independiente, que incluya un atributo <code>cite</code>.</li>
 <li>Conviertas "La necesidad de eliminar el diálogo interno negativo" en el tercer párrafo en una cita en línea e incluya un atributo <code>cite</code>.</li>
 <li>Envuelvas el título de cada fuente en etiquetas <code>&lt;cite&gt;</code> y conviertas cada una en un enlace a esa fuente.</li>
</ol>

<p>Las fuentes de citación que necesitas son:</p>

<ul>
 <li>http://www.brainyquote.com/quotes/authors/c/confucius.html para la citas de Confucio</li>
 <li>http://www.affirmationsforpositivethinking.com para "La necesidad de eliminar el diálogo interno negativo".</li>
</ul>

<p>Si cometes un error, siempre puedes restablecer el código anterior pulsando el botón <em>Restablecer</em>. Si te quedas realmente encallado, pulsa el botón <em>Mostrar solución</em> para ver una buena propuesta.</p>

<div class="hidden">
<h6 id="Código_reproducible_2">Código reproducible 2</h6>

<pre class="brush: html notranslate">&lt;h2&gt;Salida en vivo&lt;/h2&gt;

&lt;div class="output" style="min-height: 50px;"&gt;
&lt;/div&gt;

&lt;h2&gt;Código editable&lt;/h2&gt;
&lt;p class="a11y-label"&gt;Pulsa Esc para quitar el foco del área de código (Tab inserta un carácter de tabulación).&lt;/p&gt;

&lt;textarea id="code" class="input" style="min-height: 150px; width: 95%"&gt;
&lt;p&gt;Hola y bienvenido a mi página de motivación. Como dice el sitio de citas de Confucio:&lt;/p&gt;
&lt;p&gt;No importa qué tan lento vayas siempre que no te detengas.&lt;/p&gt;
&lt;p&gt;También me encanta el concepto de pensamiento positivo y La necesidad de eliminar el diálogo interno negativo (como se menciona en Afirmaciones para el pensamiento positivo).&lt;/p&gt;
&lt;/textarea&gt;

&lt;div class="playable-buttons"&gt;
  &lt;input id="reset" type="button" value="Restablecer"&gt;
  &lt;input id="solution" type="button" value="Mostrar solución"&gt;
&lt;/div&gt;</pre>

<pre class="brush: css notranslate">html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}</pre>

<pre class="brush: js notranslate">const textarea = document.getElementById('code');
const reset = document.getElementById('reset');
const solution = document.getElementById('solution');
const output = document.querySelector('.output');
const code = textarea.value;
const userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Mostrar solución';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Mostrar solución') {
    textarea.value = solutionEntry;
    solution.value = 'Ocultar solución';
  } else {
    textarea.value = userEntry;
    solution.value = 'Mostrar solución';
  }
  updateCode();
});

const htmlSolution = '&lt;p&gt;Hola y bienvenido a mi página de motivación. Como dice &lt;a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"&gt;&lt;cite&gt;el sitio de citas de Confucio:&lt;/cite&gt;&lt;/a&gt;:&lt;/p&gt;\n\n&lt;blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html"&gt;\n&lt;p&gt;No importa qué tan lento vayas siempre que no te detengas.&lt;/p&gt;\n&lt;/blockquote&gt;\n\n&lt;p&gt;También me encanta el concepto de pensamiento positivo y &lt;q cite="http://www.affirmationsforpositivethinking.com"&gt;La necesidad de eliminar el diálogo interno negativo&lt;/q&gt; (como se menciona en &lt;a href="http://www.affirmationsforpositivethinking.com"&gt;&lt;cite&gt;Afirmaciones para el pensamiento positivo&lt;/cite&gt;&lt;/a&gt;).&lt;/p&gt;';
const solutionEntry = htmlSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

// captura la tecla de tabulación en el área de texto y en su lugar
// hace que se escriba una tabulación en la posición del cursor

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('\t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  const scrollPos = textarea.scrollTop;
  const caretPos = textarea.selectionStart;

  const front = (textarea.value).substring(0, caretPos);
  const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Actualiza el userCode guardado cada vez que el usuario actualiza el código del área de texto

textarea.onkeyup = function(){
  // Solo queremos guardar el estado cuando se muestra el código de usuario,
  // no es la solución, por lo que la solución no se guarda sobre el código del usuario
  if(solution.value === 'Mostrar solución') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};</pre>
</div>

<p>{{ EmbedLiveSample('Código_reproducible_2', 700, 450, "", "", "hide-codepen-jsfiddle") }}</p>

<h2 id="Abreviaturas">Abreviaturas</h2>

<p>Otro elemento bastante común que encontrarás cuando busques en la Web es {{HTMLElement("abbr")}} — se usa para envolver una abreviatura o acrónimo, y proporcionar una expansión completa del término (incluida dentro de un atributo {{HTMLAttrxRef("title")}}. Veamos un par de ejemplos:</p>

<div id="ejemplo-de-abreviaturas-en-vivo">
<pre class="brush: html notranslate">&lt;p&gt;Usamos &lt;abbr title="Lenguaje de marcado de hipertexto"&gt;HTML&lt;/abbr&gt; para estructurar nuestros documentos web.&lt;/p&gt;

&lt;p&gt;Creo que el &lt;abbr title="Reverendo""&gt;Rev.&lt;/abbr&gt; Green lo hizo en la cocina con la motosierra.&lt;/p&gt;</pre>
</div>

<p>Estos saldrán con un aspecto similar a este (la expansión aparecerá en una descripción emergente cuando se coloque el cursor sobre el término):</p>

<p>{{EmbedLiveSample('ejemplo-de-abreviaturas-en-vivo', '100%', '94px', '', '', 'hide-codepen-jsfiddle')}}</p>

<div class="note">
<p><strong>Nota</strong>: Hay otro elemento, {{HTMLElement("acronym")}}, que básicamente hace lo mismo que <code>&lt;abbr&gt;</code>, y se diseñó específicamente para acrónimos en lugar de las abreviaturas. Sin embargo, este ha caído en desuso — no era compatible con los navegadores ni con <code>&lt;abbr&gt;</code>, y <code>&lt;abbr&gt;</code> tiene una función tan similar que se consideró inútil conservar ambos. Solo utiliza <code>&lt;abbr&gt;</code>.</p>
</div>

<h3 id="Aprendizaje_activo_Marcar_una_abreviatura">Aprendizaje activo: Marcar una abreviatura</h3>

<p>Para esta simple tarea de aprendizaje activo, nos gustaría que simplemente marcaras una abreviatura. Puedes usar el ejemplo que encontrarás a continuación o reemplazarla por una de tu elección. </p>

<div class="hidden">
<h6 id="Código_reproducible_3">Código reproducible</h6>

<pre class="brush: html notranslate">&lt;h2&gt;Salida en vivo&lt;/h2&gt;

&lt;div class="output" style="min-height: 50px;"&gt;
&lt;/div&gt;

&lt;h2&gt;Código editable&lt;/h2&gt;
&lt;p class="a11y-label"&gt;Pulsa Esc para quitar el foco del área de código (Tab inserta un carácter de tabulación).&lt;/p&gt;

&lt;textarea id="code" class="input" style="min-height: 50px; width: 95%"&gt;
&lt;p&gt;La NASA sin duda hace un interesante trabajo.&lt;/p&gt;
&lt;/textarea&gt;

&lt;div class="playable-buttons"&gt;
  &lt;input id="reset" type="button" value="Restablecer"&gt;
  &lt;input id="solution" type="button" value="Mostrar solución"&gt;
&lt;/div&gt;</pre>

<pre class="brush: css notranslate">html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}</pre>

<pre class="brush: js notranslate">const textarea = document.getElementById('code');
const reset = document.getElementById('reset');
const solution = document.getElementById('solution');
const output = document.querySelector('.output');
const code = textarea.value;
const userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Mostrar solución';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Mostrar solución') {
    textarea.value = solutionEntry;
    solution.value = 'Ocultar solución';
  } else {
    textarea.value = userEntry;
    solution.value = 'Mostrar solución';
  }
  updateCode();
});

const htmlSolution = '&lt;p&gt;La &lt;abbr title="Administración Nacional de Aeronáutica y del Espacio"&gt;NASA&lt;/abbr&gt; sin duda hace un interesante trabajo.&lt;/p&gt;';
const solutionEntry = htmlSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

// captura la tecla de tabulación en el área de texto y en su lugar
// hace que se escriba una tabulación en la posición del cursor

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('\t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  const scrollPos = textarea.scrollTop;
  const caretPos = textarea.selectionStart;

  const front = (textarea.value).substring(0, caretPos);
  const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Actualiza el userCode guardado cada vez que el usuario actualiza el código del área de texto

textarea.onkeyup = function(){
  // Solo queremos guardar el estado cuando se muestra el código de usuario,
  // no es la solución, por lo que la solución no se guarda sobre el código del usuario
  if(solution.value === 'Mostrar solución') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};</pre>
</div>

<p>{{ EmbedLiveSample('Código_reproducible_3', 700, 300, "", "", "hide-codepen-jsfiddle") }}</p>

<h2 id="Marcar_la_información_de_contacto">Marcar la información de contacto</h2>

<p>HTML tiene un elemento para marcar la información de contacto — {{HTMLElement("address")}}. Este simplemente envuelve tus datos de contacto, por ejemplo:</p>

<pre class="brush: html notranslate">&lt;address&gt;
  &lt;p&gt;Chris Mills, Manchester, The Grim North, Reino Unido&lt;/p&gt;
&lt;/address&gt;</pre>

<p>También podrías incluir un marcado más complejo y otras formas de información de contacto, por ejemplo:</p>

<pre class="brush: html notranslate">&lt;address&gt;
  &lt;p&gt;
    Chris Mills&lt;br&gt;
    Manchester&lt;br&gt;
    The Grim North&lt;br&gt;
    Reino Unido
  &lt;/p&gt;

  &lt;ul&gt;
    &lt;li&gt;Tel: 01234 567 890&lt;/li&gt;
    &lt;li&gt;Email: me@grim-north.co.uk&lt;/li&gt;
  &lt;/ul&gt;
&lt;/address&gt;</pre>

<p>Ten en cuenta que algo como esto también estaría bien, si la página vinculada contuviera la información de contacto:</p>

<pre class="brush: html notranslate">&lt;address&gt;
  &lt;p&gt;Página escrita por &lt;a href="../authors/chris-mills/"&gt;Chris Mills&lt;/a&gt;.&lt;/p&gt;
&lt;/address&gt;</pre>

<h2 id="Superíndice_y_subíndice">Superíndice y subíndice</h2>

<p>En ocasiones, necesitarás utilizar superíndice y subíndice al marcar elementos como fechas, fórmulas químicas y ecuaciones matemáticas para que tengan el significado correcto. Los elementos {{HTMLElement("sup")}} y {{HTMLElement("sub")}} se ocupan de ello. Por ejemplo:</p>

<pre class="brush: html notranslate">&lt;p&gt;Nací el 25&lt;sup&gt;th&lt;/sup&gt; de mayo de 2001.&lt;/p&gt;
&lt;p&gt;La fórmula química de la cafeína es C&lt;sub&gt;8&lt;/sub&gt;H&lt;sub&gt;10&lt;/sub&gt;N&lt;sub&gt;4&lt;/sub&gt;O&lt;sub&gt;2&lt;/sub&gt;.&lt;/p&gt;
&lt;p&gt;If x&lt;sup&gt;2&lt;/sup&gt; es 9, x debe ser igual 3 o -3.&lt;/p&gt;</pre>

<p>La salida de este código se ve así:</p>

<p>{{ EmbedLiveSample('Superíndice_y_subíndice', '100%', '141px', '', '', 'hide-codepen-jsfiddle') }}</p>

<h2 id="Representación_del_código_informático">Representación del código informático</h2>

<p>Hay una serie de elementos disponibles para marcar código informático usando HTML:</p>

<ul>
 <li>{{HTMLElement("code")}}: Para marcar fragmentos genéricos de código informático.</li>
 <li>{{HTMLElement("pre")}}: Para respetar los espacios en blanco (en general, en los bloques de código) — si utilizas la sangría o diversos espacios en blanco consecutivos dentro de un texto, los navegadores los ignorarán y no se mostrarán en la página. Sin embargo, si delimitas el texto con las etiquetas <code>&lt;pre&gt;&lt;/pre&gt;</code>, los espacios en blanco se representarán de forma idéntica a como se ven en tu editor de texto.</li>
 <li>{{HTMLElement("var")}}: Para marcar específicamente nombres de variables.</li>
 <li>{{HTMLElement("kbd")}}: Para marcar entradas de teclado (y de otro tipo) en el ordenador.</li>
 <li>{{HTMLElement("samp")}}: Para marcar la salida de un programa de ordenador.</li>
</ul>

<p>Veamos algunos ejemplos. Deberías intentar jugar con estos (intenta obtener una copia de nuestro archivo de ejemplo <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/other-semantics.html">other-semantics.html</a>):</p>

<pre class="brush: html notranslate">&lt;pre&gt;&lt;code&gt;var para = document.querySelector('p');

para.onclick = function() {
  alert('¡Guau!, ¡deja de apretar!');
}&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;No debes utilizar elementos de presentación como &lt;code&gt;&amp;lt;font&amp;gt;&lt;/code&gt; y &lt;code&gt;&amp;lt;center&amp;gt;&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;En el ejemplo de JavaScript anterior, &lt;var&gt;para&lt;/var&gt; representa un elemento de párrafo.&lt;/p&gt;


&lt;p&gt;Selecciona todo el texto con &lt;kbd&gt;Ctrl&lt;/kbd&gt;/&lt;kbd&gt;Cmd&lt;/kbd&gt; + &lt;kbd&gt;A&lt;/kbd&gt;.&lt;/p&gt;

&lt;pre&gt;$ &lt;kbd&gt;ping mozilla.org&lt;/kbd&gt;
&lt;samp&gt;PING mozilla.org (63.245.215.20): 56 bytes de datos
64 bytes de 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms&lt;/samp&gt;&lt;/pre&gt;</pre>

<p>El código anterior se verá así:</p>

<p>{{ EmbedLiveSample('Representación_del_código_informático','100%',300, "", "", "hide-codepen-jsfiddle") }}</p>

<h2 id="Marcar_horas_y_fechas">Marcar horas y fechas</h2>

<p>HTML también proporciona el elemento {{HTMLElement("time")}} para marcar horas y fechas en un formato legible por la máquina. Por ejemplo:</p>

<pre class="brush: html notranslate">&lt;time datetime="2016-01-20"&gt;20 Enero 2016&lt;/time&gt;
</pre>

<p>¿Por qué es útil esto? Bueno, hay muchas formas diferentes en que los humanos escriben las fechas. La fecha anterior se podría escribir como:</p>

<ul>
 <li>20 Enero 2016</li>
 <li>20th January 2016</li>
 <li>Ene 20 2016</li>
 <li>20/01/16</li>
 <li>01/20/16</li>
 <li>El 20 del mes que viene</li>
 <li><span lang="fr">20e Janvier 2016</span></li>
 <li><span lang="ja">2016年1月20日</span></li>
 <li>... y así sucesivamente ...</li>
</ul>

<p>Pero estas diferentes formas no las pueden reconocer fácilmente las computadoras — ¿qué pasaría si quisieras tomar automáticamente las fechas de todos los eventos en una página e insertarlas en un calendario? El elemento {{HTMLElement("time")}} te permite adjuntar una fecha/hora inequívoca y legible por la máquina para este propósito.</p>

<p>El ejemplo básico anterior solo proporciona una fecha simple legible por la máquina, pero hay muchas otras opciones que son posibles, por ejemplo:</p>

<pre class="brush: html notranslate">&lt;!-- Fecha simple estándar --&gt;
&lt;time datetime="2016-01-20"&gt;20 Enero 2016&lt;/time&gt;
&lt;!-- Solo año y mes --&gt;
&lt;time datetime="2016-01"&gt;Enero 2016&lt;/time&gt;
&lt;!-- Solo mes y día --&gt;
&lt;time datetime="01-20"&gt;20 Enero 2016&lt;/time&gt;
&lt;!-- Solo tiempo, horas y minutos --&gt;
&lt;time datetime="19:30"&gt;19:30&lt;/time&gt;
&lt;!-- ¡También puedes hacer segundos y milisegundos! --&gt;
&lt;time datetime="19:30:01.856"&gt;19:30:01.856&lt;/time&gt;
&lt;!-- Fecha y hora --&gt;
&lt;time datetime="2016-01-20T19:30"&gt;7.30pm, 20 Enero 2016&lt;/time&gt;
&lt;!-- Fecha y hora con desplazamiento de zona horaria --&gt;
&lt;time datetime="2016-01-20T19:30+01:00"&gt;7.30pm, 20 Enero 2016 es 8.30pm en Francia&lt;/time&gt;
&lt;!-- Llamar a un número de semana específico --&gt;
&lt;time datetime="2016-W04"&gt;La cuarta semana de 2016&lt;/time&gt;
</pre>

<h2 id="¡Pon_a_prueba_tus_habilidades!">¡Pon a prueba tus habilidades!</h2>

<p>Has llegado al final de este artículo, pero ¿puedes recordar la información más importante? Puedes encontrar más pruebas para verificar que has retenido esta información antes de continuar; consulta {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_Advanced_HTML_text", "Pon a prueba tus habilidades: Texto HTML avanzado")}}.</p>

<h2 id="Resumen">Resumen</h2>

<p>Esto marca el final de nuestro estudio de la semántica del texto HTML. Ten en cuenta que lo que has visto durante este curso no es una lista exhaustiva de elementos de texto HTML — quisimos tratar de cubrir los aspectos esenciales y algunos de los más comunes que verás en la naturaleza, o al menos podrían resultarte interesantes. Para encontrar muchos más elementos HTML, puedes echarle un vistazo a nuestra {{web.link("/es/docs/Web/HTML/Element", "referencia de elementos HTML")}} (la {{web.link("/es/docs/Web/HTML/Element#Inline_text_semantics", "La sección Semántica de texto en línea")}} sería un gran lugar para comenzar). En el próximo artículo veremos los elementos HTML que usarás para estructurar las diferentes partes de un documento HTML.</p>

<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</p>

<h2 id="En_este_módulo">En este módulo</h2>

<ul>
 <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}</li>
 <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "¿Qué hay en el «head»? Metadatos en HTML")}}</li>
 <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Fundamentos de texto HTML")}}</li>
 <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Crear hipervínculos")}}</li>
 <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Formateo de texto avanzado")}}</li>
 <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Estructura web y documentación")}}</li>
 <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Depurar HTML")}}</li>
 <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Marcado para una carta")}}</li>
 <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Estructuración del contenido de una página")}}</li>
</ul>