Encabezados
Los encabezados constituyen un importante elemento estructural dentro del lenguaje de marcas HTML, ya que permiten proveer información al usuario y a otras herramientas (como herramientas de indexación, motores de búsqueda, herramientas de ayuda a la navegación, …) acerca de la estructura y organización del contenido.
Los encabezados se especifican mediante etiquetas <h1> a <h6>, siendo el nivel <h1> el de más importancia dentro de la página.
Hasta la versión 5 de HTML las pautas de accesibilidad para la web (WCAG aconsejaban que sólo hubiera un encabezado de nivel 1 dentro de la página. La nueva estructura semántica permite que haya más de un encabezado de este nivel.
No es conveniente utilizar elementos de encabezado únicamente para dar formato al texto (más grande o con un tipo de letra más gruesa), ya que para eso deben utilizarse las hojas de estilo CSS.
Párrafos
Contienen una o más frases que forman parte del contenido de la página web. Los párrafos son elementos de bloque, es decir, que provocarán un salto de línea antes y después del párrafo. Se especifican mediante las etiquetas <p> y </p>.
Saltos de línea
Se puede forzar un salto de línea mediante la etiqueta <br>.
Hyperenlaces
Los hyperenlaces son la base de la web; permiten «saltar» a contenidos ubicados en otro servidor, en nuestro mismo servidor o a posiciones concretas de una página (de nuestro servidor o de un servidor externo).
La etiqueta utilizada para incluir un enlace es la etiqueta <a>; es obligatorio especificar al menos el atributo href, que contendrá la URL de la página con la que se desea enlazar.
<a href="http://www.servidor.com">Texto del enlace</a>
En este caso se está enlazando a un servidor cuya URL es «www.servidor.com». Si se desea enlazar con una página ubicada en el propio servidor bastará con especificar la dirección (absoluta o relativa) de la página con la que se desee enlazar.
Para enlazar a una posición concreta de una página es necesario establecer previamente un «ancla» en el punto de la página a la que queremos saltar.
<a id="ancla">
En el punto en el que queremos incluir el enlace al ancla se insertará un enlace, especificando dentro del atributo href el nombre del indentificador del ancla precedido del símbolo #. A continuación se muestra un ejemplo de cómo establecer un enlace a un ancla concreta ubicada dentro de la misma página.
<a href="#ancla"> Texto del enlace </a>
A continuación se muestra un ejemplo de cómo establecer un enlace a un ancla concreta ubicada en una página diferente.
<a href="nombre_pagina.html#ancla"> Texto del enlace </a>
Además del atributo href se puede especificar el atributo title, que contendrá la descripción de la página web con la que se ha enlazado. Este texto es el que aparece cuando se pasa el ratón sobre el enlace.
Imágenes
Para incluir una imagen dentro del contenido de un documento se utiliza la etiqueta <img>, siendo obligatorio utilizar el atributo src para especificar la ubicación del fichero que contiene la imagen. Los formatos habituales, JPEG, PNG, GIF, son soportados por todos los navegadores actuales.
Otro atributo que debería utilizarse casi de forma obligatoria es el atributo alt, que contiene una descripción de la imagen, y que es necesario por cuestiones de accesibilidad. Sin embargo hay excepciones puntuales donde es conveniente dejar el contenido de este atributo vacío. Estos casos se tratarán posteriormente en el apartado de accesibilidad.
<img src="fichero_imagen.jpg" alt="descripción de la imagen" />
Para controlar el tamaño de la imagen es conveniente recurrir a las hojas de estilo CSS, siendo una mala práctica (totalmente desaconsejada) utilizar los atributos width y height de la etiqueta <img>.
Listas
A la hora de hacer referencia a una enumeración de elementos, las listas son el elemento aconsejado. Existen básicamente tres tipos de listas:
- Listas no ordenadas: aconsejadas cuando el orden de los contenidos no es relevante.
- Listas numeradas u ordenadas: se utilizan cuando el orden es relevante a la hora de mostrar el contenido.
- Listas de definición: para establecer pares de elemento/definición.
A continuación se muestra un ejemplo de cada tipo.
Listas no ordenadas
<div>Ingredientes</div>
<ul>
<li>2 cebollas</li>
<li>4 patatas</li>
<li>5 huevos</li>
</ul>
- 2 cebollas
- 4 patatas
- 5 huevos
Listas ordenadas
<div>Elaboración</div>
<ol>
<li>Pelar las patatas y partirlas</li>
<li>Incorporar las patatas a la sartén con aceite caliente</li>
<li>Picar las cebollas e incorporar a la sartén</li>
<li>Batir los huevos</li>
<li>Cuando la patata esté hecha, incorporar sobre los huevos batidos</li>
</ol>
- Pelar las patatas y partirlas
- Incorporar las patatas a la sartén con aceite caliente
- Picar las cebollas e incorporar a la sartén
- Batir los huevos
- Cuando la patata esté hecha, incorporar sobre los huevos batidos
Listas de definición
<div>Glosario de términos</div>
<dl>
<dt>Pochar cebolla</dt>
<dd>Cocinar a fuego lento la cebolla. Normalmente, hasta que adquiera un color casi transparente.</dd>
<dt>Dorar los alimentos</dt>
<dd>Cocinar hasta que adquieran ese color.</d>
</dl>
- Pochar cebolla
- Cocinar a fuego lento la cebolla. Normalmente, hasta que adquiera un color casi transparente.
- Dorar los alimentos
- Cocinar hasta que adquieran ese color.
Es posible anidar una lista dentro de otra lista, incluso de diferente tipo.
Es importante utilizar listas sólamente cuando el contenido así lo aconseje, y no para conseguir efectos como sangría o viñetas en un texto.
Citas
Existen dos etiquetas para especificar citas, blockquote (<blockquote>) si queremos tratar el elemento como un elemento de bloque y cite (<cite>)si queremos tratarlo como un elemento en línea.
Acrónimos y abreviaturas
Desde la versión 5 se utiliza en ambos casos la etiqueta abbr (<abbr>). La etiqueta <acronym>deja de estar soportada en esta versión.
<p>El lenguaje <abbr title="Hypertext Markup Language"> HTML </abbr> es un lenguaje ... </p>