Ediciones ENI Editorial | líder en informática
El formato semántico del texto
Objetivos
Este capítulo está dedicado al formato semántico del texto. El objetivo es poder aplicar formato a una o más palabras dentro de un contenedor dotando de sentido a este formato. En el mismo párrafo, es posible poner palabras en negrita, cursiva, subrayarlas, insertar citas o administrar el tamaño de los caracteres. Y todo esto solo con elementos HTML.
Los caracteres especiales
En un texto, es muy habitual tener que insertar caracteres especiales, como flechas, viñetas, símbolos matemáticos... Tenga cuidado; no estamos hablando de insertar caracteres acentuados. No hay que olvidar que en la cabecera <head>, la codificación de caracteres se realiza en UTF-8, <meta charset="UTF-8">, por lo que todos los caracteres del teclado serán perfectamente reconocidos por los navegadores.
Los caracteres especiales se insertan como entidades de caracteres, con esta sintaxis precisa:
-
La entidad tiene el prefijo & (ampersand).
-
A continuación, se indica el código del carácter.
-
La entidad tiene el sufijo del carácter punto y coma: ;.
Por ejemplo, la entidad de caracteres que permite insertar una flecha hacia la derecha es →. rarr significa Right Arrow. Otra entidad muy útil y comúnmente utilizada es el espacio indivisible: . nbsp significa Non-breaking space.
Puede consultar una lista amplia de entidades en la siguiente dirección: https://es.wikipedia.org/wiki/Anexo:Referencias_a_entidades_de_caracteres_XML_y_HTML
He aquí un ejemplo muy simple:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi página web</title>
</head>
<body>
<p>...Énfasis
1. Énfasis fuerte
El elemento <strong> aplica un énfasis fuerte a las palabras incluidas en su interior, y su visualización habitual en pantalla es en negrita. Desde el punto de vista semántico, se trata de una énfasis fuerte, y no simplemente de un formato en negrita.
He aquí un ejemplo 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> Y esta es la pantalla resultante:
2. Énfasis simple
Desde un punto de vista semántico, un énfasis simple implica una importancia menor que un énfasis fuerte. Se aplica con el elemento <em> y generalmente se muestra en cursiva.
He aquí un ejemplo muy sencillo:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi página web</title>
</head>
<body> ...El subíndice y el superíndice
Los elementos <sub> y <sup> le permiten poner uno o más caracteres en subíndice y superíndice, respectivamente.
He aquí 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 10 m<sup>3</sup> de agua (H<sub>2</sub>0).</p>
</body>
</html> Y esta es la pantalla resultante:
El subrayado y el tachado
Para aplicar un subrayado, utilice el elemento <u>. Su significado semántico es preciso: sirve para destacar un texto sin especial importancia o un texto con errores ortográficos o gramaticales. ¡Atención al uso del subrayado! Los visitantes de la página podrían confundir las palabras destacadas con enlaces de hipertexto, que por defecto también aparecen subrayados.
He aquí 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 falta de <u>hortografía</u>.</p>
</body>
</html> Esta es la pantalla resultante:
El elemento <s> indica que un texto ya no es preciso o relevante. La visualización habitual es texto tachado.
He aquí un ejemplo sencillo:
<!doctype html>
<html lang="es">
<head>
...Inserciones y eliminaciones
Cuando un documento sufre muchos cambios como resultado de sucesivas revisiones, puede resultar muy interesante indicar los fragmentos que se han eliminado o agregado. Para ello, utilice los contenedores semánticos <ins> y <del>. Las inserciones se mostrarán subrayadas; las eliminaciones, tachadas.
He aquí un ejemplo 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 non 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> Y esta es la pantalla resultante:
El salto de línea
En un párrafo, es posible pasar a una nueva línea con el elemento <br>, permaneciendo estructuralmente dentro del mismo párrafo.
He aquí un ejemplo 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 non 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> Y esta es la pantalla resultante:
Otros formatos semánticos
Estas son otras formas de formatos semánticos que pueden encontrarse en las páginas web:
-
small: muestra un tamaño de fuente más pequeño que el del contexto del párrafo. Por ejemplo: <p>Nota: <small>Maecenas faucibus mollis.</small></p>
-
dfn indica que el texto es una definición.
-
abbr agrega una abreviatura. He aquí un ejemplo su uso: <abbr title="Hypertext Markup Language">HTML</abbr>. El texto del atributo title puede aparecer como una etiqueta emergente.
-
code indica que el contenido es código informático u otro,
-
var especifica una variable matemática o informática,
-
samp informa del uso de un ejemplo o una muestra,
-
kbd indica una entrada de teclado,
-
mark resalta un texto, para destacarlo y así enfatizar su relevancia.