Manual de HTML: Texto

Etiquetas para formatear texto

Etiquetas para formatear texto (alfabéticamente):

<!– –>, <abbr>, <acronym>, <address>, <b>, <bdo>, <big>, <blockquote>, <br />, <center>, <cite>, <code>, <del>, <dfn>, <em>, <font>, <h1> – <h6>, <hr />, <i>, <ins>, <kbd>, <nobr>, <p>, <pre>, <q>, <s>, <samp>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <tt>, <u>, <var>.

p.inline {display:inline;}
a.block {display:block;}

• <!– –>

  Esta etiqueta puede aparecer en cualquier parte del código y sirve para introducir comentarios. Todo el texto incluido entre ellas será considerado como un comentario por el navegador, por lo que no lo mostrará en pantalla.

  Ejemplo: este código:

  <p>Algo de texto.</p> <!-- esto es un comentario --> <p>Mas texto.</p>

  … se ve así:

  Algo de texto.

  Mas texto.

• <hr />

  Esta etiqueta (horizontal rule) dibuja una línea horizontal. Incluye retorno de carro antes y después. No necesita etiqueta de cierre.

  Ejemplo: esta línea que ocupa el 25% del ancho, alineación izquierda y altura 5:

  <p>Algo de texto.</p> <hr align="left" width="25%" size="5"> <p>Mas texto.</p>

  … se ve así:

  Algo de texto.

  ---

  Mas texto.

• <br />

  Esta etiqueta (break) inserta un retorno de carro y no lleva etiqueta de cierre.

  Ejemplo: este código:

  <p>Este parrafo<br /> tiene dos lineas.</p>

  … se ve así:

  Este parrafo
  tiene dos lineas.

• <nobr></nobr>

  Esta etiqueta (not break) impide que el navegador inserte un salto de línea, incluso cuando es adecuado el ajuste de texto. Se utiliza con las cadenas de texto que no deberían romperse bajo ninguna circunstancia, como una URL larga.

  Ejemplo: este código:

  <p>Con la etiqueta "nobr" vamos a impedir que el navegador <nobr>inserte un salto de linea aqui, donde lo hubiera insertado</nobr> para un adecuado ajuste de texto si no estuviera la etiqueta "nobr".</p>

  … se ve así:

  Con la etiqueta "nobr" vamos a impedir que el navegador inserte un salto de linea aqui, donde lo hubiera insertado para un adecuado ajuste de texto si no estuviera la etiqueta "nobr".

• <p></p>

  Esta etiqueta (paragraph) indica un párrafo. Inserta retorno de carro.

  Ejemplo: este código:

  <p>Este es el primer parrafo<br /> y tiene dos lineas.</p>   <p>Este es el segundo parrafo.</p>   <p>Este es el tercero.</p>

  … se ve así:

  Este es el primer parrafo
  y tiene dos lineas.

  Este es el segundo parrafo.

  Este es el tercero.

• <span></span>

  Esta etiqueta, al igual que <div>, se utiliza para aplicar estilos CSS, pero en este caso en línea, ya que no inserta retorno de carro.

  Ejemplo: este código:

  <p>Mi madre tiene ojos <span class="blue">azules</span>.</p>

  … se ve así:

  Mi madre tiene ojos azules.

• <h1></h1> … <h6></h6>

  Son las etiquetas de encabezamiento (heading) y se utilizan para dar formato de título y definir la estructura del texto poniendo títulos de sección, subsección, etc. La etiqueta <h1> proporciona las letras de mayor tamaño y <h6> el menor. Inserta retorno de carro.

  Ejemplo: este código:

  <h1>Titulo del documento</h1> <p>Mucha importancia</p>   <h2>Seccion</h2> <p>Menos importancia</p>   <h3>Sub-seccion</h3> <p>Mucha menos importancia</p>

  … se ve así:

  Titulo del documento

  Mucha importancia

  Seccion

  Menos importancia

  Sub-seccion

  Mucha menos importancia

• <pre></pre>

  Esta etiqueta (preformatted) indica texto preformateado y se usa cuando queremos que en la presentación final del documento se respeten los espacios y retornos de carro que hayamos puesto en el texto fuente. Se suele utilizar para mostrar código de programación. Utiliza un tipo de letra de espaciado fijo e inserta retorno de carro.

  Ejemplo: este código:

  <pre> texto preformateado --------------------- | 1 | 2 | 3 | 4 | | 5 | 6 | 7 | 8 | | 9 | 10 | 11 | 12 | --------------------- </pre>

  … se ve así:

  texto preformateado
  ---------------------
  |  1 |  2 |  3 |  4 |
  |  5 |  6 |  7 |  8 |
  |  9 | 10 | 11 | 12 |
  ---------------------

• <center></center>

  Esta etiqueta se utiliza para centrar texto.

  Ejemplo: este código:

  <p><center>Este texto va centrado.</center></p>

  … se ve así:

  Este texto va centrado.

• <b></b>

  Esta etiqueta (bold) da formato de negrita.

  Ejemplo: este código:

  <p>Texto <b>resaltado</b> en negrita.</p>

  … se ve así:

  Texto resaltado en negrita.

• <u></u>

  Esta etiqueta (underlined) aplica formato de subrayado.

  Ejemplo: este código:

  <p>No <u>subrayes</u> texto si no es un hipervinculo!</p>

  … se ve así:

  No subrayes texto si no es un hipervinculo!

• <i></i>

  Esta etiqueta (italic) da formato de cursiva.

  Ejemplo: este código:

  <p>Texto <i>resaltado</i> en cursiva.</p>

  … se ve así:

  Texto resaltado en cursiva.

• <font></font>

  Esta etiqueta permite modificar el tipo de letra: tamaño, color y fuente.

  Ejemplo: texto en rojo, con la "P" de tamaño 4:

  <p>Los <font color="red"><font size=4>P</font>erros</font> ladran.</p>

  … se ve así:

  Los Perros ladran.

• 

  Esta etiqueta (subscript) presenta el texto como subíndice.

  Ejemplo: este código:

  <p>Agua: H<sub>2</sub>O.</p>

  … se ve así:

  Agua: H₂O.

• 

  Esta etiqueta (superscript) presenta el texto como super-índice.

  Ejemplo: este código:

  <p>Matematicas: 2*2 = 2<sup>2</sup></p>

  … se ve así:

  Matematicas: 2*2 = 2²

• <address></address>

  Esta etiqueta se emplea con direcciones de email. Aplica cursiva e inserta retorno de carro.

  Ejemplo: este código:

  <address>email: [email protected]</address>

  … se ve así:

  email: [email protected]
• <abbr></abbr>

  Esta etiqueta (abbreviation) indica una abreviatura.

  Ejemplo: este código:

  <p>La <abbr title="Naciones Unidas">ONU</abbr> se fundo en 1945.</p>

  … se ve así:

  La ONU se fundo en 1945.

• <acronym></acronym>

  Esta etiqueta indica un acrónimo.

  Ejemplo: este código:

  <p>mike> how do i change the color of links</p> <p>redjl> <acronym title="Read The F***ing Manual">RTFM</acronym></p>

  … se ve así:

  mike> how do i change the color of links

  redjl> RTFM

• <bdo></bdo>

  Esta etiqueta (bidirectional override) define un elemento con una dirección de lectura contraria a la establecida por defecto, como ocurre por ejemplo en el hebreo. Requiere el atributo dir para especificar la dirección, que puede ser ltr (left-to-right) o rtl (right-to-left).

  Ejemplo: este código:

  <p>El texto en <bdo dir="rtl">Hebreo</bdo> tiene otra direccion.</p>

  … se ve así:

  El texto en Hebreo tiene otra direccion.

• <blockquote></blockquote>

  Esta etiqueta (block quotation) indica una cita larga tipo block. Aplica sangría izquierda y derecha al párrafo, e inserta retorno de carro.

  Ejemplo: este código:

  <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.</blockquote>

  … se ve así:

  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.

• <q></q>

  Esta etiqueta (quotation) indica una cita en una línea. Inserta comillas.

  Ejemplo: este código:

  <p>Como dice el autor: <q>domina tu ira</q>. De acuerdo.</p>

  … se ve así:

  Como dice el autor: domina tu ira. De acuerdo.

• <cite></cite>

  Esta etiqueta (citation) define una cita en una línea. Da formato de cursiva.

  Ejemplo: este código:

  <p>Este texto <cite>es una cita</cite> de otro texto.</p>

  … se ve así:

  Este texto es una cita de otro texto.

• <strong></strong>

  Esta etiqueta se usa para resaltar texto importante. Aplica formato de negrita.

  Ejemplo: este código:

  <p>Texto <strong>resaltado</strong> en negrita.</p>

  … se ve así:

  Texto resaltado en negrita.

• <em></em>

  Esta etiqueta (emphasized) se usa para resaltar texto. Aplica cursiva.

  Ejemplo: este código:

  <p>Texto <em>resaltado</em> en cursiva.</p>

  … se ve así:

  Texto resaltado en cursiva.

• <dfn></dfn>

  Esta etiqueta (definition) se emplea para definiciones de términos y da formato de cursiva.

  Ejemplo: este código:

  <p>Este texto es la <dfn>definicion</dfn> de un termino.</p>

  … se ve así:

  Este texto es la definicion de un termino.

• <tt></tt>

  Esta etiqueta (teletype) se emplea para definir un texto similar al de una máquina de escribir y aplica una fuente de ancho fijo.

  Ejemplo: este código:

  <p>Una <tt>maquina de escribir</tt> escribe asi.</p>

  … se ve así:

  Una maquina de escribir escribe asi.

• <code></code>

  Esta etiqueta (computer code) se emplea para código de programación. Aplica una fuente de ancho fijo.

  Ejemplo: este código:

  <p>El <code>codigo de programacion</code> sale asi.</p>

  … se ve así:

  El codigo de programacion sale asi.

• <samp></samp>

  Esta etiqueta (sample computer code) se emplea para ejemplos de código o mensajes de estado del ordenador. Aplica una fuente de ancho fijo.

  Ejemplo: este código:

  <p>Los <samp>mensajes de estado</samp> salen asi.</p>

  … se ve así:

  Los mensajes de estado salen asi.

• <kbd></kbd>

  Esta etiqueta (keyboard) representa una entrada por teclado y aplica una fuente de ancho fijo y negrita.

  Ejemplo: este código:

  <p>Las <kbd>entradas por teclado</kbd> salen asi.</p>

  … se ve así:

  Las entradas por teclado salen asi.

• <var></var>

  Esta etiqueta (variable) representa una variable de programación y aplica una fuente de ancho fijo y cursiva.

  Ejemplo: este código:

  <p>Las <var>variables de programacion</var> salen asi.</p>

  … se ve así:

  Las variables de programacion salen asi.

• <strike></strike> y <s></s>

  Ambas etiquetas (strikethrough) son equivalentes, muestran texto tachado.

  Ejemplo: este código:

  <p>Version 2.0 <strike>todavia no</strike> ya disponible!</p> <p>Version 1.0 <s>todavia</s> no disponible!</p>

  … se ve así:

  Version 2.0 todavia no ya disponible!

  Version 1.0 todavia no disponible!

• <del></del>

  Esta etiqueta (deleted) se utiliza para indicar textos que se han borrado. Muestra el texto tachado.

  Ejemplo: este código:

  <p>Este texto <del>ya no es valido</del> y va tachado.</p>

  … se ve así:

  Este texto ya no es valido y va tachado.

• <ins></ins>

  Esta etiqueta (inserted) es complementaria de <del> e indica el texto que sustituye al que ha sido borrado. Presenta el texto subrayado.

  Ejemplo: este código:

  <p>Este es <ins>el nuevo texto</ins> y va subrayado.</p>

  … se ve así:

  Este es el nuevo texto y va subrayado.

• <big></big>

  Esta etiqueta aumenta el tamaño del texto respecto del tamaño actual. Es una etiqueta de efecto relativo por lo que si la anidamos va aumentando progresivamente el tamaño del texto.

  Ejemplo: este código:

  <p>Letras <big>grandes o <big>muy grandes</big></big>.</p>

  … se ve así:

  Letras grandes o muy grandes.

• <small></small>

  Esta etiqueta disminuye el tamaño relativo del texto y al igual que <big> se puede anidar disminuyendo progresivamente el tamaño del texto.

  Ejemplo: este código:

  <p>Letras <small>pequeñas o <small>muy pequeñas</small></small>.</p>

  … se ve así:

  Letras pequeñas o muy pequeñas.