Las palabras sueltas o pasajes enteros pueden marcarse fácilmente en cursiva y negrita. En primer lugar, la variante negrita. Para ello existen básicamente dos elementos HTML: b y strong.
Bienvenido a <b>PSD-Tutorials.de</b>! <br /> ¡Bienvenido a <strong>PSD-Tutorials.de</strong>!
Un vistazo al resultado en el navegador proporciona la siguiente imagen:
Obviamente, ambos elementos proporcionan una visualización idéntica. Pero, ¿por qué hay dos elementos diferentes? De hecho, existen otras formas de visualización de sitios web además de los conocidos navegadores estándar. Pensemos, por ejemplo, en los lectores para invidentes o en los dispositivos móviles. Los elementos HTML que ofrece el W3C están pensados para soportar la semántica. Por ejemplo, el elemento b ya no significa realmente que algo deba mostrarse en negrita. Más bien, b significa un texto visiblemente enfatizado que no tiene mayor importancia. Puede tratarse, por ejemplo, de nombres de productos o palabras clave en documentos.
Anteriormente, el elemento strong significaba mayor énfasis. em, por su parte, se utilizaba para texto enfatizado, importante (enfático). strong era la intensificación de em en versiones anteriores de HTML. Ambos elementos tienen un significado diferente en HTML5.
Primero un texto con énfasis normal.
<p>Los gatos son animales bonitos </p>
Ahora el mismo texto de nuevo, pero esta vez con el énfasis en la primera palabra.
<p> <em>Los gatos</em> son animales monos.</p>
Al usar em, el énfasis se pone en la palabra gatos. Esto sería concebible en una discusión sobre si los perros o los gatos son más monos.
En este ejemplo, el elemento em también podría aplicarse a la palabra are.
<p>Los gatos <em>son </em>animales monos.</p>
Esta podría ser una respuesta en una discusión en la que alguien afirma que los gatos no son nada monos.
De hecho, los pasajes marcados con em se muestran en cursiva en el navegador. El mismo efecto visual puede conseguirse con el elemento i.
Según el borrador de trabajo de HTML5, el elemento i ya no significa cursiva.
<p>Bienvenido a <i>PSD-Tutorials.de</i> </p> <p>
En su lugar, este elemento significa ahora que quieres utilizarlo para transmitir un estado de ánimo diferente. El elemento i es interesante para etiquetar expresiones técnicas o denominaciones taxonómicas, por ejemplo.
Todo esto es terriblemente teórico, lo sé. En principio, deberías intentar ceñirte a las especificaciones de HTML5. Por otro lado, nadie te arrancará la cabeza si usas strong en lugar de b.
<p> <em>Línea con em</em><br /> <i>Línea con i</i><br /> <strong>Línea con strong</strong><br /> <b>Línea con b</b> </p> <p>Línea con strong</strong>.
En última instancia, los fabricantes de navegadores deben actuar aquí.
De todos modos, CSS es el responsable último del diseño real de los textos equipados con estos elementos.
Siglas con abbr
Para etiquetar un acrónimo se utiliza el mismo elemento que antes se empleaba para las abreviaturas, a saber, abbr.
Desde abril de 2009, la oficina germano-austriaca del <abbr title="World Wide Web Consortium">W3C</abbr> tiene su sede en la Universidad de Ciencias Aplicadas de Potsdam.
Los navegadores que interpretan correctamente el elemento abbr muestran el texto encerrado en el elemento abbr subrayado.
También debe asignar un atributo title a abbr. En él se suele indicar la expresión completa del acrónimo. Si el visitante pasa el puntero del ratón por encima de la sigla, la expresión se muestra en una ventana tooltip.
Detalles de la dirección con address
El elemento dirección puede utilizarse para marcar la información de la dirección.
<dirección> 4eck Media GmbH & Co. KG<br /> Hauptstraße 20<br /> 17309 Viereck<br /> </dirección>.
Los navegadores suelen mostrar el contenido del elemento de dirección en cursiva.
Marcar el código del programa con code
El elemento code se utiliza para marcar el código del programa. En este sentido, nada ha cambiado con respecto a las versiones anteriores de HTML. Jens sigue utilizando code para este fin.
<pre> Esto es un encabezado HTML: <code> <html> <head> <title></title> </head> </code> </pre>
Code suele combinarse con el elemento pre para obtener las sangrías utilizadas en el código del programa.
La especificación HTML5 recomienda el uso del atributo class en relación con el elemento code. A este atributo se le puede asignar el idioma utilizado dentro del elemento code. He aquí algunos ejemplos típicos de lo que puede ser un etiquetado de este tipo:
- language-html
- idioma-css
- idioma-javascript
- lenguaje php
- lenguaje-pascal
El W3C no especifica si los navegadores implementan estas instrucciones ni cómo lo hacen.
<pre> Este es un encabezado HTML: <code class="language-html"> <html> <head> <title></title> </head> </code> </pre>
Por el momento, el atributo class no tiene ningún efecto visible en el navegador. Sin embargo, los espectadores humanos pueden reconocer en qué idioma se basa el código del programa si echan un vistazo al código fuente de la página.
Minúsculas con minúsculas
El elemento small se utilizaba originalmente para mostrar texto más pequeño de lo normal. En HTML5, small se utiliza explícitamente para la letra pequeña. Esta letra pequeña podría ser, por ejemplo, la siguiente
- Información sobre derechos de autor
- descargos de responsabilidad
- Condiciones de licencia
- TÉRMINOS Y CONDICIONES
El W3C señala expresamente que la letra pequeña no debe utilizarse para pasajes de texto largos.
<small> Copyright by PSD-Tutorials.de<br /> 4eck Media GmbH & Co. KG<br /> Hauptstraße 20<br /> 17309 Viereck </small>
Subrayar textos
Puedes subrayar palabras utilizando el elemento u. He aquí un ejemplo:
<p>Bienvenido a <u>PSD-Tutorials.de</u></p>
El resultado aparece en el navegador de la siguiente manera:
Si se fija en el resultado, éste es efectivamente el efecto deseado. Sin embargo, hay un inconveniente. En Internet, los textos subrayados son conocidos por representar hipervínculos. Si subraya un texto o una palabra, los visitantes pueden pensar que se trata de un hipervínculo. El intento de hacer clic en él, por supuesto, fracasará. Por lo tanto, debe prescindir del subrayado.
