EjemploAlgunos sitios web dentro de sus publicaciones integran un cuadro con una imagen y una pequeña descripción en la parte inferior de esta. Esto es ventajoso por que un usuario normal por lo general lo primero que mira no es texto sino contenido gráfico, y que mejor si está acompañado de una pequeña descripción de lo que trata.

Así se sentirá impulsado a leer el artículo completo. Además es una buena práctica SEO, pues estos textos cercanos a las imágenes sirven para los motores de búsqueda de imágenes.

¿Cómo lograrlo?

Con unas simple líneas CSS y HTML podemos lograr añadir textos descriptivos debajo de las imágenes.

Primero el código de estilos, dentro de las etiquetas <head>:

<style type="text/css">
	.picture {
		background-color: #F9F9F9;
		border: 1px solid #CCCCCC; padding: 3px;
		font: 11px/1.4em Arial, sans-serif;
	}
	.picture img {
		border: 1px solid #CCCCCC;
		vertical-align:middle;
		margin-bottom: 3px;
	}
	.right {
		margin: 0.5em 0pt 0.5em 0.8em;
		float:right;
	}
	.left {
		margin: 0.5em 0.8em 0.5em 0;
		float:left;
	}
</style>

Ahora dentro del <body> de nuestro documentos html:

<div class="picture left" style="width:220px;">
<img src="marte.jpeg" alt="Planeta Marte" width="210" height="210" /> <br />
Marte, apodado a veces como el Planeta Rojo, es el cuarto planeta del Sistema Solar.
</div>

Por supuesto luego de esas líneas puede venir en contenido completo del artículo ó tema que trata la página.

Podemos colocar la imagen a la izquierda ó derecha, como gustemos y se vea mejor. He aquí un ejemplo. ¿Verdad que se ve mas atractiva una página web de esta forma?