El estándar HTML/XHTML incluye numerosas etiquetas para marcar los contenidos de texto. No obstante, la infinita variedad de posibles contenidos textuales hace que no sean suficientes.
Pero, antes de comenzar a trabajar en el ejemplo de hoy, debemos conocer las siguientes etiquetas:
1. Strong:
El elemento strong es el apropiado para marcar con especial énfasis las partes más importantes de un texto.
Sus etiquetas son: <strong>
y </strong>
(ambas obligatorias)
Crea una caja: en linea.
Está definido como: Elemento de frase.
Puede contener: cero o más elementos en linea
Atributos genéricos
atributo | descripción | valor | por omisión |
---|---|---|---|
Genéricos | |||
title | Texto informativo o título del elemento. Suele mostrarse a modo de “tool tip”. | Texto legible. Sensible a M/m. | Lo fija el navegador. |
style | Permite especificar información de estilo. Por defecto, estilos CSS. | Declaraciones de estilo. | Lo fija el navegador. |
- style (información de estilo en línea)
Identificadores: id, class (identificadores a nivel de documento)Idioma: lang (información sobre el idioma), dir (dirección del texto)Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Ejemplo:
<p>
Muerde mi brillante <strong>trasero</strong>.
</p>

2. Acronym
Acromym de acromyn=acrónimo
Es el encargado para marcar estas formas abreviadas (modem, AJAX…). Además, gracias al atributo title
podemos indicar la versión extendida del término.
Sus etiquetas son: <abbr>
y </abbr>
; <acronym>
y </acronym>
.
Crea una caja: en linea.
Está definido como: Elemento de frase.
Puede contener: cero o más elementos en linea
Atributos
atributo | descripción | valor | por omisión |
---|---|---|---|
Genéricos | |||
title | Texto informativo o título del elemento. Suele mostrarse a modo de “tool tip”. | Texto legible. Sensible a M/m. | Lo fija el navegador. |
id | Le da un nombre al elemento que lo diferencia de todos los demás del documento. | Un nombre único. Sensible a M/m. | Lo fija el navegador. |
class | Asigna nombres de clases al elemento. Por defecto, clases CSS. | Lista de clases separadas por espacio en blanco. Sensible a M/m. cdata | Lo fija el navegador. |
style | Permite especificar información de estilo. Por defecto, estilos CSS. | Declaraciones de estilo. | Lo fija el navegador. |
lang | Información sobre el idioma del contenido del elemento y del valor de sus atributos. | Un código de idioma. | Lo fija el navegador. PD.: “desconocido”. |
dir | Indica la dirección de texto y tablas. | Uno de los siguientes: ‘ltr’ o ‘rtl’. | Lo fija el navegador. PD.: En castellano ‘ltr’. |
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. | |||
Específicos | |||
No tiene | |||
De transición | |||
No tiene | |||
atributo | descripción | valor | por omisión |
Ejemplo:
<p>
En <abbr lang="en" title="Planet Express">P.Ex</abbr> pensamos que nuestra trupulación es
<span style='border-bottom: dotted thin;'
title='esto no es ni una abreviatura ni un acrónimo'>descartable</span>, pero su paquete no.
<acronym lang="en" title="Profesor Hubert Farnsworth"> By el Profesor</acronym>.
</p>

Es interesante copiar estos elementos en Visual Studio Code para comprender cómo funcionan cada uno de los elementos.
3. span
span – abarcar. Es un contenedor en línea. Sirve para aplicar estilo al texto o agrupar elementos en línea.
Sus etiquetas son: <span>
y </span>
(ambas obligatorias).
Está definido como: Elemento especial, y por lo tanto en línea.
Crea una caja: En línea.
Puede contener: Texto, y/o Elementos en línea.
Atributos
atributo | descripción | valor |
---|---|---|
Genéricos | ||
title | Texto informativo o título del elemento. Suele mostrarse a modo de “tool tip”. | Texto legible por personas. Sensible a M/m.. Por defecto: Lo fija el navegador. |
id | Le da un nombre al elemento que lo diferencia de todos los demás del documento. | Un nombre único. Sensible a M/m. Por defecto: Lo fija el navegador. |
class | Asigna nombres de clases al elemento. Por defecto, clases CSS. | Lista de clases separadas por espacio en blanco. Sensible a M/m. Por defecto: Lo fija el navegador. |
style | Permite especificar información de estilo. Por defecto, estilos CSS. | Declaraciones de estilo. Por defecto: Lo fija el navegador. |
lang | Información sobre el idioma del contenido del elemento y del valor de sus atributos. | Un código de idioma. Por defecto: “desconocido”. Lo fija el navegador. |
dir | Indica la dirección de texto y tablas. | Uno de los siguientes: ‘ltr’ o ‘rtl’. Por defecto: En castellano ‘ltr’. Lo fija el navegador. |
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. | ||
Específicos | ||
datasrc | Enlaza a una fuente de datos externa (individual o tabular). Reservado para posibles usos futuros. | Una dirección URI. Por defecto: Lo fija el navegador. |
datafld | El nombre de una propiedad o columna de datasrc . Reservado para posibles usos futuros. | Por defecto: Lo fija el navegador. |
dataformatas | Indica como deben ser tratados los datos obtenidos de datasrc . Reservado para posibles usos futuros. | Uno de los siguientes: 'paintext' o 'html ‘. Por defecto: 'plaintext' |
De transición | ||
No tiene | ||
atributo | descripción | valor |
Ejemplo de span

código:
<div style="border: 1px dotted blue;"> <h4>Bender sobre la amistad con Fry</h4> <p> Fry, de todos los amigos que he tenido, <span style="color: red;"> tú eres… el único. </span> </p> </div>
Toca trabajar con nuestro ejemplo
Entonces, ahora que conocemos las etiquetas necesarias, podremos ayudar a Planet Express a realizar un anuncio para su web de paquetería.

Si se considera el siguiente ejemplo:
Importante: si quiere ponerse en contacto con Planet Express, puede hacerlo por olorovisión o a través de la dirección de correo electrónico bender@planetexpress.com

El texto del ejemplo anterior contiene elementos de texto importantes, siglas, números de teléfono y direcciones de correo electrónico. El HTML define la etiqueta <strong>
para marcar los elementos importantes y <acronym>
para marcar las siglas:
Añadiendo Strong y Acronym a nuestro ejemplo
<strong>Importante</strong>: si quiere ponerse en contacto con la empresa <acronym lang="en" title="Planet express mensajería interplanetaria">Planet express</acronym>, puede hacerlo por olorovisión o a través de la dirección de correo electrónico bender@planetexpress.com

Brindándole más información a nuestro navegador con el spam
Desafortunadamente, XHTML no define ninguna etiqueta específica para marcar números de teléfono o direcciones de correo electrónico. De la misma forma, no define etiquetas para otros posibles elementos que se pueden encontrar en los contenidos de texto.
Por este motivo, el estándar HTML/XHTML incluye una etiqueta llamada <span>
que se emplea para marcar cualquier elemento que no se puede marcar con las otras etiquetas definidas.
Siguiendo con el ejemplo anterior, la etiqueta <span>
se utiliza para marcar el teléfono y la dirección de correo electrónico:
<strong>Importante</strong>: si quiere ponerse en contacto con la empresa <acronym lang="en" title="Planet express mensajería interplanetaria">Planet express</acronym>, puede hacerlo por olorovisión al <span>900 555 555</span> o a través de la dirección de correo electrónico <span>bender@planetexpress.com</span>

La etiqueta <span>
se visualiza por defecto con el mismo aspecto que el texto normal. Por tanto, es habitual utilizar esta etiqueta junto con los atributos id
y class
para modificar posteriormente su aspecto con CSS:
<strong>Importante</strong>: si quiere ponerse en contacto con la empresa
<acronym lang="en" title="Planet express mensajería interplanetaria">Planet express</acronym>, puede hacerlo por olorovisión al
<span class="telefono">900 555 555
</span> o a través de la dirección de correo electrónico <span class="email">bender@planetexpress.com</span>

Como detalle extra: La etiqueta <span>
solo se puede utilizar para encerrar contenidos y etiquetas en línea. Cuando se quieren estructurar elementos de bloque, se usa la etiqueta <div>
, tal y como se verá en capítulos posteriores. Sí bien, usamos <div>
en uno de los ejemplo, era necesario mencionar a que el detalle vendrá a futuro.
