Hemos concluido la estructura básica de nuestro sitio web, pero todavía tenemos que trabajar en el contenido. Los elementos HTML estudiados hasta el momento nos ayudan a identificar cada sección del diseño y asignarles un propósito, pero lo que realmente importa en una página web es lo que hay dentro de esas secciones. Debido a que esta información está compuesta por diferentes elementos visuales, como títulos, textos, imágenes y vídeos, entre otros, HTML define varios elementos para representarla.
Texto
El medio más importante que puede incluir un documento es texto. HTML define varios elementos para determinar el propósito de cada palabra, frase, o párrafo en el documento. El siguiente elemento se usa para representar títulos.
Cada vez que queremos insertar un título o un subtítulo en el documento, tenemos que incluirlo dentro de etiquetas <h>. Por ejemplo, el documento que hemos creado en la sección anterior incluye el título de la página. Como este es el título principal, debería representarse con el elemento <h1>, tal como ilustra el siguiente ejemplo.
Los navegadores otorgan estilos por defecto a los elementos <h> que incluyen márgenes y diferentes tamaños de letras, dependiendo de la jerarquía (<h1> es el de más alta jerarquía y <h6> el de menor jerarquía). La Figura 2-4, debajo, muestra cómo se ve el texto dentro de un elemento <h1> con los estilos por defecto.
Los navegadores otorgan estilos por defecto a los elementos <h> que incluyen márgenes y diferentes tamaños de letras, dependiendo de la jerarquía (<h1> es el de más alta jerarquía y <h6> el de menor jerarquía). La Figura 2-4, debajo, muestra cómo se ve el texto dentro de un elemento <h1> con los estilos por defecto.
Los siguientes son los elementos que ofrece HTML para representar el cuerpo del texto.
<p>—Este elemento representa un párrafo. Por defecto, los navegadores le asignan un margen en la parte superior para separar un párrafo de otro.
<pre>—Este elemento representa un texto con formato predefinido, como código de programación o un poema que requiere que los espacios asignados a cada carácter y los saltos de línea se muestren como se han declarado originalmente.
<span>—Este elemento puede contener un párrafo, una frase o una palabra. No aplica ningún estilo al texto pero se usa para asignar estilos personalizados, como veremos en próximos capítulos.
El elemento <p> se utiliza ampliamente para representar el cuerpo del texto. Por defecto, los navegadores les asignan estilos que incluyen márgenes y un salto de línea para diferenciar un párrafo de otro. Debido a estas características, también podemos utilizar los elementos <p> para dar formato a líneas de texto, como las citas de nuestro ejemplo.
El Listado presenta las citas dentro del elemento <aside> de ejemplos anteriores con elementos <p>. Ahora, el navegador muestra cada cita en una línea distinta.
Cuando un párrafo incluye múltiples espacios, el elemento <p> automáticamente reduce ese espacio a solo un carácter e ignora el resto.
El elemento también hace algo similar con los saltos de línea. Todo salto de línea introducido en el documento no se considera cuando el texto se muestra en la pantalla.
Si queremos que estos espacios y saltos de línea se muestren al usuario, en lugar de usar el elemento <p> tenemos que usar el elemento <pre>.
El ejemplo del Listado define un elemento <article> que contiene una cita de Epicuro de Samos. Como usamos el elemento <pre>, los saltos de línea son considerados por el navegador y las frases se muestran una por línea, tal como se han definido en el código.
El elemento <pre> se configura por defecto con márgenes y un tipo de letra que respeta el formato asignado al texto original, lo que lo hace apropiado para presentar código de programación y cualquier clase de texto con formato predefinido. En casos como el del ejemplo anterior, donde lo único que necesitamos es incluir saltos de línea dentro del párrafo, podemos usar otros elementos que se han diseñado específicamente con este propósito.
<br>—Este elemento se usa para insertar saltos de línea.
<wbr>—Este elemento sugiere la posibilidad de un salto de línea para ayudar al navegador a decidir dónde cortar el texto cuando no hay suficiente espacio para mostrarlo entero.
Estos elementos se insertan dentro del texto para generar saltos de línea. Por ejemplo, podemos escribir el párrafo anterior en una sola línea e insertar elementos <br> al final de cada frase para presentarlas en líneas aparte.
A diferencia de los elementos <p> y <pre>, los elementos <br> y <wbr> no asignan ningún margen o tipo de letra al texto, por lo que las líneas se muestran como si pertenecieran al mismo párrafo y con el tipo de letra definida por defecto.
Debido a que no todas las palabras en un texto tienen el mismo énfasis, HTML incluye los siguientes elementos para declarar un significado especial a palabras individuales o frases completas.
<em>—Este elemento se usa para indicar énfasis. El texto se muestra por defecto con letra cursiva.
<strong>—Este elemento es utiliza para indicar importancia. El texto se muestra por defecto en negrita.
<i>—Este elemento representa una voz alternativa o un estado de humor, como un pensamiento, un término técnico, etc. El texto se muestra por defecto con letra cursiva.
<u>—Este elemento representa texto no articulado. Por defecto se muestra subrayado.
<b>—Este elemento se usa para indicar importancia. Debería ser implementado solo cuando ningún otro elemento es apropiado para la situación. El texto se muestra por defecto en negrita.
Estos elementos se pueden utilizar para resaltar títulos o etiquetas, o para destacar palabras o frases en un párrafo, según muestra el siguiente ejemplo.
La especificidad de elementos estructurales también se manifiesta en algunos de los elementos utilizados para definir el contenido. Por ejemplo, HTML incluye los siguientes elementos para insertar textos que tienen un propósito claramente definido.
<mark>—Este elemento resalta texto que es relevante en las circunstancias actuales (por ejemplo, términos que busca el usuario).
<small>—Este elemento representa letra pequeña, como declaraciones legales, descargos, etc.
<cite>—Este elemento representa el autor o título de una obra, como un libro, una película, etc.
<address>—Este elemento representa información de contacto. Se implementa con frecuencia dentro de los pies de página para definir la dirección de la empresa o el sitio web.
<time>—Este elemento representa una fecha en formato legible para el usuario. Incluye el atributo datetime para especificar un valor en formato de ordenador y el atributo pubdate, el cual indica que el valor asignado al atributo datetime representa la fecha de publicación.
<code>—Este elemento representa código de programación. Se usa en conjunto con el elemento <pre> para presentar código de programación en el formato original.
<data>—Este elemento representa datos genéricos. Puede incluir el atributo value para especificarelvalorenformatodeordenador(porejemplo,<data value=»32″>Treinta y Dos</data>).
Como estos elementos representan información específica, normalmente se utilizan para complementar el contenido de otros elementos. Por ejemplo, podemos usar el elemento <time> para declarar la fecha en la que un artículo se ha publicado y otros elementos como <mark> y <cite> para otorgarle significado a algunas partes del texto.
El Listado expande el elemento <article> utilizado en ejemplos anteriores. Este elemento ahora incluye un elemento <header> con el título del artículo y la fecha de publicación, y el texto se ha resaltado con los elementos <mark> y <cite>. El elemento <mark> resalta partes del texto que originalmente no se consideraban importantes, pero que al momento se han vuelto relevantes (quizás debido a que el usuario realizó una búsqueda con ese texto), y el elemento <cite>, en este caso, resalta el nombre del autor. Por defecto, los navegadores asignan estilos al texto dentro del elemento <mark> que incluyen un fondo amarillo y muestran el contenido del elemento <cite> en cursiva, tal como ilustra la siguiente figura.
El resto de los elementos mencionados arriba también se combinan con otros elementos para complementar sus contenidos. Por ejemplo, los elementos <address> y <small> se insertan normalmente dentro de un elemento <footer> para resaltar información acerca de la página o una sección.
El elemento <code> también trabaja junto con otros elementos para presentar contenido, pero tiene una relación particular con el elemento <pre>. Estos elementos se implementan juntos para presentar código de programación. El elemento <code> indica que el contenido es código de programación y el elemento <pre> formatea ese contenido para mostrarlo en pantalla como se ha declarado originalmente en el documento (respetando los espacios y los saltos de línea).
El Listado define un elemento <article> que muestra código programado en JavaScript. Debido a que este código no se encuentra dentro de un elemento <script>, el navegador no lo ejecuta y, debido a que se incluye dentro de un elemento <pre>, se presenta con los saltos de línea y los espacios declarados en el documento.
