Imprimir este CapítuloImprimir este Capítulo

2D. HTML correcto y accesible

5. HTML

5.2. Principales elementos o etiquetas

No vamos a ver en profundidad todas las etiquetas HTML, pero sí las más utilizadas en EducaMadrid para poder comprender y mejorar nuestras páginas:

  1. Títulos
  2. Párrafos
  3. Listados
  4. Estilos del texto (negritas y cursivas)
  5. Enlaces
  6. Imágenes
  7. Capas
  8. Tablas

1. Títulos

Hay títulos de diferentes niveles (de 1 a 6, siendo el primero el de mayor importancia).

Cuando los usemos, debemos hacerlo con coherencia, como haríamos en un trabajo escrito: el título de primer nivel es para todo el trabajo; los títulos de segundo nivel para los principales apartados; los de tercer nivel están englobados dentro de uno de segundo nivel, y así sucesivamente.

¿Por qué hay que hacerlo así? Para que nuestro documento tenga una estructura correcta. Recordemos que no lo vamos a leer solo nosotros; también los robots de los buscadores, otras personas, tal vez personas que usan un lector de pantalla y primero recorren los títulos de determinado nivel, etc. Comprenderemos esto mejor después del punto 3 de esta unidad: Accesibilidad web.

Las etiquetas para los títulos en HTML son: h1, h2, h3, h4, h5 y h6; y se abren y cierran, tal y como hemos comentado antes:

Ejemplo:

<h3>Título de tercer nivel</h3>

2. Párrafos

Los párrafos en HTML se definen con la etiqueta p.

Ejemplo:

<p>En un lugar de la Mancha, de cuyo nombre no quiero acordarme...</p>

3. Listados

Hay listados de dos tipos:

  • Numerados (ol: ordered list)
  • No numerados (ul: unordered list)

Los elementos de los listados son, en ambos casos “li”, de manera que una lista ordenada tendría el siguiente código HTML:

<ol>
    <li>Soy el primer elemento</li>
    <li>Soy el segundo elemento</li>
    <li>Soy el tercer elemento</li>
</ol>

Os animamos a crear un documento HTML con un listado ordenado y otro desordenado para ver la diferencia.

4. Estilo del texto

  • Negritas = strong
  • Cursiva = em

Y se definirían igual que haríamos en el papel. Escribimos un párrafo, y después definimos las negritas. Ejemplo:

<p>En un lugar de la Mancha, de cuyo nombre <strong>no quiero acordarme</strong>...</p>

Se mostraría así:

En un lugar de la Mancha, de cuyo nombre no quiero acordarme...

5. Enlaces

Esta etiqueta es muy importante, porque nos permite movernos entre diferentes páginas HTML. Nos permiten navegar. La etiqueta HTML para los enlaces es “a”, y un enlace tiene varias propiedades importantes:

La dirección a la que enlaza (el atributo href)

Es una dirección web (a una página, a un documento, a una imagen...). Su ruta se puede establecer:

  • De forma absoluta “http://www.educa2.madrid.org/web/revista-digital/noticias”
  • De forma relativa “noticias”.

Atención, porque un enlace con ruta relativa se define a partir de la dirección en la que nos encontramos.

Es decir: si estamos aquí
http://www.educa2.madrid.org/web/revista-digital/noticias
y queremos incluir un enlace aquí
http://www.educa2.madrid.org/web/revista-digital/eventos

Es suficiente con que la ruta de nuestro enlace sea “eventos”, porque ambas páginas pertenecen al mismo dominio y están en el mismo nivel. A eso se llama enlace con ruta relativa. La ruta absoluta sería la ruta completa (también funcionaría, por supuesto).

El título (el atributo title)

Al pasar con el ratón por encima de algunos enlaces, aparece un pequeño texto explicativo. Ese es el TITLE del enlace.

¿Cuándo usarlo?

Cuando haya varios enlaces con el mismo texto (algo que debemos evitar, por cierto, porque no para todo el mundo está tan claro a dónde lleva cada enlace). Ejemplo: los típicos enlaces de “leer más”. ¿Leer más sobre qué? En el título podemos especificarlo.

Cuando el texto del enlace no sea suficientemente claro. Ejemplo: un artículo que enlaza a una revista muy interesante. ¿Qué revista? El título ofrece información adicional (“Revista Digital de EducaMadrid”, por ejemplo).

Ejemplos de enlaces

Un enlace sencillo a Google:

<a href="http://www.google.es/">Google</a>

Un párrafo con un enlace (con TITLE) a Google:

<p>Este es un párrafo que incluye un enlace a un <a href="http://www.google.es/" title="Google">buscador</a>.</p>

Como vemos, las etiquetas se abren y se cierran en el orden adecuado.

Algunas etiquetas, como los enlaces, tienen atributos (href, title...) A cada atributo le damos un valor (lo que va entrecomillado).

6. Imágenes

Las imágenes también tienen varios atributos:

  • src = ruta de la imagen (relativa o absoluta)
  • alt = texto alternativo. No todos los navegadores lo muestran de la misma forma, pero es importante ponerlo, porque aporta información sobre la imagen. Es una breve descripción de la imagen: una vista alternativa de la misma (textual).
  • title = el título de la imagen. Su función no es tanto describir la imagen como titularla. Lo veremos mejor con un ejemplo.
  • width = ancho de la imagen (en píxeles)
  • height = alto de la imagen (en píxeles)

Un ejemplo:

Escribiríamos el siguiente código HTML:

<img src="http://cdn.morguefile.com/imageData/public/files/f/fieryn/preview/fldr_2005_07_11/file0001630698321.jpg" title="Tronco" alt="Primer plano de la vista superior de un troco seco cortado" height="469" width="620" />

Y el resultado sería este:

Primer plano de la vista superior de un troco seco cortado

¡De nuevo un caso especial! La etiqueta imagen no se <abre> y luego se </cierra>, sino que se cierra dentro de la propia etiqueta.

Eso sucede con otras etiquetas, como algunos tipos de campo de formulario o los saltos de línea. Un salto de línea se codifica así: <br />

7. Capas

La etiqueta div define una capa.

Ejemplo:

<div>
    Contenido de la capa.
</div>

Las capas no tienen valor semántico. Un párrafo es un párrafo; un título es un título... Una capa sirve para albergar contenido; no aporta nada más.

Usamos las capas para estructurar la información.

8. Tablas

Muchos usuarios de EducaMadrid están acostumbrados a usar tablas para maquetar sus páginas (si no lo habéis hecho, y esta afirmación os choca, no os preocupéis; pronto entenderéis el porqué de la misma).

Muchos crean las tablas, por ejemplo, utilizando el editor de HTML del administrador de contenidos (el que vemos en el cuerpo de texto de un contenido cuando lo creamos o editamos). Las usan para poder colocar unos elementos a la derecha, otros a la izquierda....

Eso es un error, porque las tablas no deben usarse para maquetar. Para colocar los elementos usaremos CSS.

Igual que solo usamos la etiqueta P para hacer párrafos, usaremos las tablas solo para mostrar datos tabulados, que es para lo que son. Sirven para mostrar una rejilla de datos relacionados entre sí por filas y columnas, no para maquetar.

¿Qué ganamos usándolas así? Tendremos páginas más ligeras, más accesibles, con un diseño más controlable. En definitiva: mejores. Y además tardaremos menos en hacer nuestras páginas (es más fácil cambiar la apariencia de una página con CSS que tener que tocar todo el código HTML para mover cosas de un sitio a otro). Usaremos las tablas solo para lo que son.

El editor TinyMCE, que usaremos constantemente en EducaMadrid tiene una herramienta para la generación de tablas muy completa y fácil de usar. Ahora no vamos a explicar detalladamente la estructura de una tabla HTML, pero habiendo visto lo que hemos visto hasta ahora, no resulta difícil comprenderla. Basta decir que:

  • table = tabla
  • caption = título de la tabla
  • thead = cabecera de la tabla
  • tbody = cuerpo de la tabla
  • tr = fila (table row)
  • th = celda-título
  • td = celda

Y estas etiquetas se anidan y combinan entre sí formando una tabla:

<table>
    <caption>Ciclistas </caption>
    <thead>
        <tr>
            <th>Nombre</th>
            <th>Apellido </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Roberto </td>
            <td>Heras </td>
        </tr>
        <tr>
            <td>Federico </td>
            <td>Bahamontes </td>
        </tr>
    </tbody>
</table>

Os animamos a crear un documento HTML con ese código para comprender cómo son las tablas.

Si queréis aprender más sobre las tablas, visitad el enlace recomendado que encontraréis un poco más abajo en esta misma página.

Para saber más