Ediciones ENI Editorial | líder en informática
El formateo semántico del texto
Utilizar un formateo semántico
En este capítulo, vamos a abordar el formato semántico del texto. Va a poder resaltar una o varias palabras de un elemento contenedor de tipo bloque, con elementos de tipo en línea. En un mismo párrafo, puede poner palabras en negrita, en cursiva, subrayadas, etc.
Insertar caracteres especiales
En un texto, es muy habitual tener que insertar caracteres especiales, como flechas, viñetas, símbolos matemáticos, etc. Atención: no se trata aquí de insertar caracteres acentuados. No olvidemos que hemos declarado en el encabezado <head> que la codificación de los caracteres se hace en UTF-8; por lo tanto, todos los caracteres del teclado se reconocerán perfectamente por los navegadores.
Los caracteres especiales se insertan como entidades de caracteres con esta sintaxis concreta:
-
La entidad va precedida del carácter ámpersan: &.
-
Tenemos a continuación el código del carácter.
-
La entidad va seguida del carácter punto y coma:;.
A continuación se muestra la entidad de caracteres que permite insertar una flecha a la derecha: →. rarr significa Right Arrow.
Otra entidad muy útil habitualmente utilizada es el espacio de no separación: . nbsp significa Non-breaking space.
A continuación se muestra una URL para encontrar el número correcto de entidades de caracteres: https://es.wikipedia.org/wiki/Anexo:Referencias_a_entidades_de_caracteres_XML_y_HTML
A continuación se muestra un ejemplo muy sencillo:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8"> ...El marcado de especial énfasis
El elemento <strong> aplica un marcado de especial énfasis a las palabras a las que abarca y la visualización resultante se resalta en negrita. Desde un punto de vista semántico, se trata de un marcado de especial énfasis y no de un resaltado en negrita.
A continuación se muestra un ejemplo muy sencillo:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi página web</title>
</head>
<body>
<p>Nullam id dolor id nibh <strong>ultricies vehicula</strong>
ut id elit.</p>
</body>
</html> A continuación se muestra la visualización obtenida:
Aquí podemos observar la propiedad de visualización por defecto de este elemento:
strong{
font-weight: bold;
} El énfasis sencillo
Usando el mismo principio, se muestra un énfasis sencillo en cursiva y se aplica con el elemento <em>.
A continuación se muestra un ejemplo muy sencillo:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi página web</title>
</head>
<body>
<p>Nullam id dolor id nibh <em>ultricies vehicula</em>
ut id elit.</p>
</body>
</html> A continuación se muestra la visualización obtenida:
Aquí vemos la propiedad de visualización por defecto de este elemento:
em{
font-style: italic;
} Resaltar en negrita y cursiva
Los elementos <b> e <i> permiten, respectivamente, mostrar texto en negrita y en cursiva, sin darle sentido semántico de tipo énfasis. Solo se trata de resaltar para distinguir estas palabras del resto.
A continuación se muestra un ejemplo muy sencillo:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi página web</title>
</head>
<body>
<p>Un <b>bonito</b> libro y una <i>bella</i> portada.</p>
</body>
</html> A continuación se muestra la visualización obtenida:
Las propiedades de visualización iniciales son las mismas que para <strong> y <em>.
El índice y el exponente
Los elementos <sub> y <sup> permiten respectivamente poner uno de los caracteres como índice o exponente.
A continuación se muestra un ejemplo muy sencillo:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi página web</title>
</head>
<body>
<p>Un bidón de 10m<sup>3</sup> de agua (H<sub>2</sub>O).</p>
</body>
</html> A continuación se muestra la visualización obtenida:
Aquí tenemos las propiedades de visualización por defecto del índice y del exponente:
sub{
vertical-align: sub;
font-size: smaller;
}
sup{
vertical-align: super;
font-size: smaller;
} El subrayado
Para aplicar un subrayado, utilice el elemento <u>. Su sentido semántico es concreto, ya que permite resaltar un texto sin importancia particular o un texto cuya ortografía o gramática son incorrectos.
Preste atención al uso del subrayado: los visitantes de la página podrían confundir estas palabras destacadas con un enlace de hipertexto.
A continuación se muestra un ejemplo muy sencillo:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi página web</title>
</head>
<body>
<p>Un texto con una <u>falta de hortografía</u>.</p>
</body>
</html> A continuación se muestra la visualización obtenida:
Aquí vemos las propiedades de visualización por defecto del subrayado:
u{
text-decoration: underline;
} El tachado
Aplique un tachado al texto con el elemento <s>. Indica que este ya no es correcto o pertinente. Su visualización usual es un texto tachado.
A continuación se muestra un ejemplo muy sencillo:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi página web</title>
</head>
<body>
<p>Las páginas web se crean con el lenguaje <s>HTML 4.01</s>,
ahora se diseñan con HTML5.</p>
</body>
</html> A continuación se muestra la visualización obtenida:
Aquí vemos las propiedades de visualización por defecto del tachado:
s{
text-decoration: line-through;
} Tenga en cuenta que no hay que confundir el uso de este elemento <s> con las anotaciones de revisión de los documentos indicados con <ins> y <del> (ver el apartado Las inserciones y eliminaciones).
Reducir el tamaño de los caracteres
El elemento <small> tiene un sentido semántico muy concreto: permite indicar que el texto mostrado más pequeño es de tipo «nota al pie de página».
A continuación se muestra un ejemplo muy sencillo:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi página web</title>
</head>
<body>
<p>Sed posuere consectetur est...</p>
<hr>
<p>Nota: <small>Maecenas faucibus mollis...</small></p>
</body>
</html> A continuación se muestra la visualización obtenida:
Aquí vemos las propiedades de visualización por defecto de <small> :
small{
font-size: smaller;
} Los títulos de obras y las citas cortas
El elemento <cite> permite indicar el título de una obra y el elemento <q> especifica una cita corta. El texto incluido en el título normalmente se muestra en cursiva y el texto ubicado en la cita corta se muestra entre comillas.
A continuación se muestra un ejemplo muy sencillo:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi página web</title>
</head>
<body>
<p>En el libro <cite>La web en 2032</cite>, el autor nos
dice <q>¡Eh yo no lo sé!</q>.</p>
</body>
</html> A continuación se muestra la visualización obtenida:
Aquí vemos las propiedades de visualización de <cite> y de <q>:
cite{
font-style: italic;
}
q{
display: inline;
} Las inserciones y eliminaciones
Cuando tiene un documento que sufre muchas modificaciones como consecuencia de correcciones sucesivas, puede resultar muy interesante indicar los textos que se tienen que eliminar o añadir. Para esto, use los contenedores semánticos <ins> y <del>. Las inserciones se mostrarán subrayadas, mientras que las eliminaciones se tacharán.
A continuación se muestra un ejemplo muy sencillo:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi página web</title>
</head>
<body>
<p>Integer posuere erat a <ins>ante venenatis dapibus
posuere velit aliquet. Donec sed odio dui.</ins> Cras justo odio,
dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh
ultricies vehicula ut id elit. Donec ullamcorper nulla no metus
auctor fringilla. Fusce dapibus, tellus ac cursus commodo,
<del>tortor mauris condimentum nibh,</del> ut fermentum massa
justo sit amet risus. Nulla vitae elit libero, a pharetra augue.</p>
</body>
</html> A continuación se muestra la visualización obtenida:
Aquí vemos...
El retorno de línea
Por ejemplo, en un párrafo puede cambiar de línea con el elemento <br>, permaneciendo estructuralmente en el mismo párrafo.
A continuación se muestra un ejemplo muy sencillo:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi página web</title>
</head>
<body>
<p>Integer posuere erat a ante venenatis dapibus posuere
velit aliquet. Donec sed odio dui. Cras justo odio, dapibus ac
facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies
vehicula ut id elit.<br>Donec ullamcorper nulla no metus auctor
fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum nibh, ut fermentum massa justo sit amet risus. Nulla
vitae elit libero, a pharetra augue.</p>
</body>
</html> A continuación se muestra la visualización obtenida:
Otros formatos semánticos
A continuación se muestran otros formatos semánticos que puede encontrar en las páginas web:
-
dfn indica que el texto es una definición.
-
abbr define una abreviatura.
A continuación se muestra un ejemplo de su uso: <abbr title="Hypertext Markup Language">HTML</abbr>. El contenido del atributo title puede mostrarse en un globo informativo al pasar el cursor sobre la abreviatural.
-
code señala que el contenido es código informático.
-
var especifica una variable matemática o informática.
-
samp indica el uso de un ejemplo o muestra.
-
kbd se usa para representar texto introducido mediante el teclado.
-
mark resalta un fragmento de texto para enfatizar su importancia.
-
ruby permite incluir anotaciones fonéticas, utilizadas principalmente en caracteres de Asia oriental.
-
rt y rp son elementos hijos de ruby, dentro del sistema de anotación.
-
data asocia un fragmento de texto con un valor de datos legible por máquina. El valor numérico se define en el atributo value.
-
time representa una fecha o un período de tiempo. Su versión numérica puede especificarse mediante el atributo datetime.
-
dbo invierte la dirección del texto respecto al contenido principal, manteniendo la orientación de los caracteres.
-
wbr indica un punto donde el navagador puede insertar un salto de línea, si es necesario.