3.5 Markup o Marcado genérico de un texto

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
atributodescripciónvalorpor 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.
stylePermite 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

atributodescripciónvalorpor 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. cdataLo 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’.
Eventosonclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Específicos
No tiene
De transición
No tiene
atributodescripciónvalorpor 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

atributodescripciónvalor
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
datasrcEnlaza a una fuente de datos externa (individual o tabular). Reservado para posibles usos futuros.Una dirección URI. Por defecto: Lo fija el navegador.
datafldEl nombre de una propiedad o columna de datasrc. Reservado para posibles usos futuros.Por defecto: Lo fija el navegador.
dataformatasIndica 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
atributodescripciónvalor

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.

Realiza tus consultas en el foro sobre el curso de HTML
Realiza tus consultas en el foro sobre el curso de HTML