creo que va a ser mejor dejar de lado lo mas posible el uso de clases, ids y
de <div>s y <span>s. antes de ponernos a definir bloques logicos o de
aplicar semantica mediante una clase lo mejor es tener una estructura
solida.
voy a intentar pasar un poco en limpio algunas cosas.
empecemos por los elementos base que tiene un articulo de periodico:
1. Volanta o antetítulo
2. Titulo principal
3. Bajada
4. Copete, lead o entrada
5. Cuerpo del articulo
6. Títulos interiores o subtitulos
a su vez cada articulo tiene informacion agregada:
1. Seccion/categoria a la que pertenece
2. Autor
3. Fecha
entonces, hago un primer intento:
<p>Volanta o antetítulo</p>
<h1>Titulo principal</h1>
<p>Bajada</p>
<p>Copete, lead o entrada</p>
<p>Cuerpo del articulo</p>
<h2>Títulos interiores o subtitulos</h2>
puede mejorarse, segundo intento:
<p><em>Volanta o antetítulo</em></p>
<h1>Titulo principal</h1>
<p><strong>Bajada</strong></p>
<p>Copete, lead o entrada</p>
<p>Cuerpo del articulo</p>
<h2>Títulos interiores o subtitulos</h2>
la volanta en si no es un titulo (no subordina contenidos), tampoco es un
parrafo por lo que ni <hN> ni <p> son realmente elementos correctos.
subordinarla al <h1> estaria bien si uno cuenta con el posicionamiento de
css y puede colocarla visualmente antes que el titulo pero screenreaders,
celulares y browsers sin soporte para css TIENEN que renderizarla antes que
el titulo sino dejaria de cumplir su objetivo. por eso, ante la carencia de
mejores alternativas la marco con un <p> y le doy un póco de énfasis (<em>)
para que no pase como un párrafo mas.
la bajada no es un párrafo común sino que es un resumen de todo el cuerpo
del articulo. tampoco subordina contenidos asi que descarto los <hN>.
nuevamente me quedo sin opciones y uso <p>. en este caso agrego <strong>
para enfatizar. despues de todo uno podria leer solo la bajada y saltearse
el resto del articulo. este parrafo tiene que tener importancia.
el copete no es mas que el primer párrafo del cuerpo al que se le pueden dar
estilos visuales pero semanticamente es igual al resto del cuerpo.
tomando la estructura anterior podemos, ahora si, agregarle bloques lógicos
y clases:
<div class="articulo">
<p class="volanta"><em>Volanta o antetítulo</em></p>
<h1>Titulo principal</h1>
<p class="bajada"><strong>Bajada</strong></p>
<p class="copete">Copete, lead o entrada</p>
<p>Cuerpo del articulo</p>
<h2>Títulos interiores o subtitulos</h2>
</div>
a esta misma estructura se le puede agregar la informacion de la seccion a
la que pertenece, el autor, la fecha, etc.:
<h1>sección</h1>
<div class="articulo">
<p class="volanta"><em>Volanta o antetítulo</em></p>
<h2>Titulo principal</h2>
<p class="bajada"><strong>Bajada</strong></p>
<p class="copete">Copete, lead o entrada</p>
<p>Cuerpo del articulo</p>
<h3>Títulos interiores o subtitulos</h3>
<p class="firma">Autor<br />Fecha</p>
</div>
alguien ya antes se horrorizo ante el uso del <br />. simplemente quiero
aclarar que esta "mal" usarlo para simular párrafos o espaciar contenido
pero en casos como una poesía, una firma, una direccion postal, el
encabezado de una carta, etc. esta muy bien justificado y es completamente
semantico. por algo este tag sigue estando presente en xhtml 1 strict.
tambien se podría solucionar el tema de la volanta (como alguien dijo antes)
gracias al <br>:
<h2><em class="volanta">Volanta o antetítulo</em><br />Titulo principal</h2>
queda medio "raro" pero me parece aceptable.
inti castro
[EMAIL PROTECTED]
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
