Más etiquetas HTML

HTML es, evidentemente, mucho más complejo de todo esto. Pero para manejar texto de una manera simple tampoco hace falta mucho más.

De hecho, para programar un libro electrónico vamos a usar una colección muy limitada de etiquetas HTML, apenas un puñado con el que vamos a ser capaces de solucionar casi todos los problemas que nos plantea un eBook. Estas etiquetas son:

<html> </html> → Ya la vimos más arriba, es la que identifica a mi documento como un documento HTML.

<head> </head> → Entre estas etiquetas va en Encabezado de mi web, información que no se muestra en pantalla pero que aporta información valiosa al navegador o al eReader.

<title> </title> → Aquí pondremos el Título de la web (si lo tiene, que normalmente sí lo tiene). Esta etiqueta irá siempre metida dentro del <head> </head>, o sea, que no se mostrará en pantalla pero aporta información al eReader.

<body> </body> → El Cuerpo de mi web o Libro Electrónico. Dentro de esta etiqueta va todo el contenido de mi web o mi libro electrónico, como hemos visto más arriba.

<p> </p> → La etiqueta Párrafo. Define un párrafo de texto. Aquí dentro meteremos el texto. Cada párrafo irá metido dentro de una etiqueta <p> </p>, por lo tanto tendremos muuuuuchas etiquetas <p> </p> en nuestra programación.

<a> </a> → Usaremos esta etiqueta para los Enlaces (también conocidos como Vínculos, o Hipervínculos, o como Hyperlinks, o como Links). Cada vez que ves un enlace en una web (el típico texto de color azul subrayado que te lleva a otro sitio cuando linkas...) pues ese texto está etiquetado con la etiqueta <a> </a>.

NOTA

Los enlaces son útiles y necesarios para cualquier documento electrónico. Pero son complejos de manejar al principio. Más adelante hay un Capítulo dedicado exclusivamente a poner enlaces en los eBooks. Mejor no te lo leas ahora, o déjalo para el final del todo. Es fácil liarse con los enlaces y agobiarse un poco al principio. Es mejor que hagas tu primer eBook sin enlaces y más adelante atreverse con vínculos, notas al pie, etc.

<h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, etc → Etiqueta importante para los Libros Electrónicos. La etiqueta <h> </h> define a los Encabezados en nuestro documento HTML. Cada vez que tengamos un titular, una sección, un capítulo, una secuencia... irá etiquetada con una etiqueta <h>.

<div> </div> → Esta etiqueta define una División, o más bien, define cualquier tipo de espacio en una página web. Dentro de un <div> </div> podemos poner todo tipo de contenido: imágenes, sonidos, textos... La etiqueta <div> </div> sirve para poner contenido en una web, de cualquier tipo.

Un detalle interesante

–¿Pero, puedo poner texto dentro de un <div> </div>?

–Sí, claro que puedes.

–Entonces, ¿cuál es la diferencia entre <p></p> y <div></div> si las dos pueden albergar el mismo tipo de contenido?

La diferencia es sutil, pero importante. Hemos dicho que HTML sirve para etiquetar los contenidos de una página web, pero además, sirve para etiquetarlos semánticamente. Es decir, no sólo debemos etiquetar el contenido para que el navegador sepa dónde está, cuál es su tamaño, su color, su ordenación dentro del flujo de datos. También, y esto es muy importante, con las etiquetas HTML debemos decirle al navegador qué tipo de contenido es, para que sepa distinguir entre un texto y una imagen, para que sepa diferenciar entre un párrafo y el título de un capítulo, por ejemplo.

Por tanto, las etiquetas deben ser usadas semánticamente. Eso explicará por qué a veces ponemos <p> y a veces <div> entre muchas otras.

Otras etiquetas, no menos importantes:

<ul> </ul>, <ol> <ol/>, <li> </li> → usaremos estas etiquetas para hacer Listados.

Al igual que con la diferencia entre etiquetas <p></p> y <div></div>, también aquí deberemos ser finos con el etiquetado. Al fin y al cabo, un listado puede ser considerado una sucesión de pequeños párrafos, ¿qué nos impide etiquetarlos con la etiqueta <p></p>?. Error. La finura de una buena programación está en ser escrupuloso con estos detalles, y darle a cada parte el valor semántico que tiene. Un párrafo es un párrafo, y debe ir con su etiqueta <p></p>, en cambio un listado es un listado (un párrafo sui-géneris, si se quiere, pero no es exactamente una sucesión de párrafos) y debemos etiquetarlos con las etiquetas <ul></ul>, <ol><ol/>, <li></li> .

Hay dos tipos de listados porque HTML puede él solo ordenar y numerar listados. Más adelante verás un ejemplo.

<em> <i> <b> <strong> → Estas etiquetas son muy comunes para dar énfasis a textos. Son etiquetas que suelen ir dentro de otras etiquetas, y hacen que algunas palabras o frases aparezcan en cursiva o negrita.

<em> </em> <i> </i> → Una palabra o frase metida dentro de las etiquetas <em></em> o <i></i> aparecerá en cursiva (italic).
<strong> </strong> <b> </b> → Una palabra o frase metida dentro de las etiquetas <strong></strong> o <b></b> aparecerá en negrita (bold).

NOTA

¿Es lo mismo etiquetar con <em> que etiquetar con <i>? ¿Y qué pasa con <strong> y <bold>? ¿Son lo mismo? No, no son lo mismo. El aspecto final del texto sí puede que sea el mismo si usamos una etiqueta u otra, pero una vez más nos encontramos con que semánticamente no es lo mismo etiquetar con un <em> para enfatizar (con el resultado de un texto en cursiva) o etiquetar con un <i> para resaltar el título de una obra, por ejemplo. El aspecto final es igual o muy parecido, pero la información que le damos al dispositivo lector / navegador es distinta, y eso puede tener consecuencias y nos ofrece posibilidades. Todo un mundo por descubrir... pero será en otro eBook.