Revision 593947 of span

<p>{{ Elementos_HTML() }}</p>
<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3>
<p><strong>span</strong> - <em>abarcar</em>. Es un contenedor en línea. Sirve para aplicar estilo al texto o agrupar elementos en línea.</p>
<dl>
 <dd>
  <strong>Sus etiquetas son</strong>: <code>&lt;span&gt;</code> y <code>&lt;/span&gt;</code> (ambas obligatorias).</dd>
 <dd>
  <strong>Está definido como</strong>: Elemento <a href="/es/HTML/Elemento/Tipos_de_elementos#especial" title="es/HTML/Elemento/Tipos_de_elementos#especial">especial</a>, y por lo tanto <a href="/es/HTML/Elemento/Tipos_de_elementos#enlinea" title="es/HTML/Elemento/Tipos_de_elementos#enlinea">en línea</a>.</dd>
</dl>
<dl>
 <dd>
  <strong>Crea una caja</strong>: En línea.</dd>
 <dd>
  <strong>Puede contener</strong>: Texto, y/o Elementos <a href="/es/HTML/Elemento/Tipos_de_elementos#enlinea" title="es/HTML/Elemento/Tipos_de_elementos#enlinea">en línea</a>.</dd>
</dl>
<h4 id="Atributos" name="Atributos">Atributos</h4>
<table class="standard-table fullwidth-table">
 <tbody>
  <tr>
   <th>atributo</th>
   <th>descripción</th>
   <th>valor</th>
  </tr>
  <tr>
   <th colspan="3">Genéricos</th>
  </tr>
  <tr>
   <td><a class="external" href="https://html.conclase.net/w3c/html401-es/struct/global.html#adef-title"><span style="color:green">title </span></a></td>
   <td>Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".</td>
   <td>Texto legible por personas. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr>. Por defecto: Lo fija el navegador.</td>
  </tr>
  <tr>
   <td><a class="external" href="https://html.conclase.net/w3c/html401-es/struct/global.html#adef-id"><span style="color:green">id </span></a></td>
   <td>Le da un nombre al elemento que lo diferencia de todos los demás del documento.</td>
   <td>Un <a class="external" href="https://html.conclase.net/w3c/html401-es/types.html#type-id">nombre único</a>. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td>
  </tr>
  <tr>
   <td><a class="external" href="https://html.conclase.net/w3c/html401-es/struct/global.html#adef-class"><span style="color:green">class </span></a></td>
   <td>Asigna nombres de clases al elemento. Por defecto, clases CSS.</td>
   <td>Lista de clases separadas por espacio en blanco. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td>
  </tr>
  <tr>
   <td><a class="external" href="https://html.conclase.net/w3c/html401-es/present/styles.html#adef-style"><span style="color:green">style </span></a></td>
   <td>Permite especificar <a class="external" href="https://html.conclase.net/w3c/html401-es/present/styles.html">información de estilo</a>. Por defecto, estilos CSS.</td>
   <td><a class="external" href="https://html.conclase.net/w3c/html401-es/types.html#type-style">Declaraciones de estilo</a>. Por defecto: Lo fija el navegador.</td>
  </tr>
  <tr>
   <td><a class="external" href="https://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-lang"><span style="color:green">lang </span></a></td>
   <td>Información sobre el <a class="external" href="https://html.conclase.net/w3c/html401-es/struct/dirlang.html">idioma del contenido</a> del elemento y del valor de sus atributos.</td>
   <td>Un <a class="external" href="https://html.conclase.net/w3c/html401-es/types.html#type-langcode">código de idioma</a>. Por defecto: "desconocido". Lo fija el navegador.</td>
  </tr>
  <tr>
   <td><a class="external" href="https://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color:green">dir </span></a></td>
   <td>Indica la <a class="external" href="https://html.conclase.net/w3c/html401-es/struct/dirlang.html">dirección de texto</a> y tablas.</td>
   <td>Uno de los siguientes: <abbr title="Left-to-right"> 'ltr' </abbr> o <abbr title="Right-to-left"> 'rtl'. </abbr> Por defecto: En castellano 'ltr'. Lo fija el navegador.</td>
  </tr>
  <tr>
   <td colspan="3"><a class="external" href="https://html.conclase.net/w3c/html401-es/interact/scripts.html#events"><span style="color:green">Eventos:</span></a> <code style="color:green">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. </code></td>
  </tr>
  <tr>
   <th colspan="3">Específicos</th>
  </tr>
  <tr>
   <td><code style="color:green">datasrc </code></td>
   <td>Enlaza a una fuente de datos externa (individual o tabular). Reservado para posibles usos futuros.</td>
   <td>Una dirección URI. Por defecto: Lo fija el navegador.</td>
  </tr>
  <tr>
   <td><code style="color:green">datafld </code></td>
   <td>El nombre de una propiedad o columna de <code style="color:green">datasrc</code>. Reservado para posibles usos futuros.</td>
   <td>Por defecto: Lo fija el navegador.</td>
  </tr>
  <tr>
   <td><code style="color:green">dataformatas </code></td>
   <td>Indica como deben ser tratados los datos obtenidos de <code style="color:green">datasrc</code>. Reservado para posibles usos futuros.</td>
   <td>Uno de los siguientes: <code>'paintext'</code> o <code>'html</code>'. Por defecto: <code>'plaintext'</code></td>
  </tr>
  <tr>
   <th colspan="3">De transición</th>
  </tr>
  <tr>
   <td colspan="3">No tiene</td>
  </tr>
  <tr>
   <th>atributo</th>
   <th>descripción</th>
   <th>valor</th>
  </tr>
 </tbody>
</table>
<h3 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h3>
<div class="highlight">
 <h4 id="div_y_span" name="div_y_span">div y span</h4>
 <p>código:</p>
 <pre class="eval">
&lt;div style="border: 1px dotted blue;"&gt;
  &lt;h4&gt;Ejemplo de div y span &lt;/h4&gt;
   &lt;p&gt;
    Esto es un párrafo dentro de un div,
     &lt;span style="color: red;"&gt; y esto un span dentro de un párrafo. &lt;/span&gt;
   &lt;/p&gt;
 &lt;/div&gt;
</pre>
 <p>Resultado:</p>
 <div style="border: solid silver 1px;">
  <div style="border: 1px dotted blue;">
   <h5 id="Ejemplo_de_div_y_span" name="Ejemplo_de_div_y_span">Ejemplo de div y span</h5>
   <p>Esto es un párrafo dentro de un div, <span style="color: red;"> y esto un span dentro de un párrafo.</span></p>
  </div>
 </div>
</div>
<h3 id="Estilo_predeterminado" name="Estilo_predeterminado">Estilo predeterminado</h3>
<p>Por definición span no debe tener ningún estilo predefinido. Estos dos párrafos deben verse igual:</p>
<pre class="eval">
&lt;p&gt; Esto es un párrafo, bla, bla, bla. &lt;/p&gt;
&lt;p&gt; Esto es un párrafo, &lt;span&gt;bla, bla, bla.&lt;/span&gt; &lt;/p&gt;
</pre>
<p>&nbsp;</p>
<h3 id="Notas" name="Notas">Notas</h3>
<h3 id="Referencia" name="Referencia">Referencia</h3>
<ul>
 <li>El elemento <a class="external" href="https://html.conclase.net/w3c/html401-es/struct/global.html#edef-SPAN"><b>span</b> en la especificación</a> de html 4.01</li>
</ul>
<p>&nbsp;</p>
<h3 id="Soporte" name="Soporte">Soporte</h3>
<p>Puede consultar esta <a class="external" href="https://www.webdevout.net/browser_support_html.php#support-html401-span">comparativa</a>: IE 6 - IE 7 - FF 1.5 - OP 9.</p>
<p>&nbsp;</p>
<hr />
<div class="tip">
 <p>Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.</p>
 <p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a href="Project:es/Como_ayudar">MDC:Como ayudar</a>.</p>
</div>
<p><br />
 <span class="comment">Categoría</span></p>
<p><span class="comment">interwiki links</span></p>
<p><span class="comment">automatismos</span></p>