html 4.0

[fjmasero]

Wenas:

Estoy empezando con todo este lío del diseño (puro y duro) web, y una de las cosas q he averiguado es q en el HTML 4.0 se recomienda no usar las etiquetas font, b, i, ..., en fin , tags de este tipo, q formatean texto, y q para dar formato al texto se usen estilos.

Si es así, ¿como se pondría esto (ejemplo)?

Código:

<font color="red">esto</font> <b>es</b> una <i>prueba</i>

Yo lo resuelvo usando la etiqueta span, aplicando estilos, pero no me parece q sea lo correcto, ¿verdad? (lo cierto es q no tengo muy claro cual es el uso real de dicha etiqueta).

He probado con div en vez de span, pero no consigo el mismo efecto, pq se me montan los textos, o se distribuyen en lineas distintas. ¿Es posible q me falte alguna propiedad en los estilos del div?.

Salu2 y gracias

[JavierB]

Hola, fjmasero.

A mi no me parece que sea incorrecto es uso de <span> para dar un formato distinto a parte de un texto. En realidad yo diría que está para eso.

En fin, Pilarín... A ver si alguien más aporta su opinión y nos terminamos de aclarar los dos.

Saludos,

[Ruben_adap]

En principio no deberias tener diferencias usando div o span para dar formato al texto, siempre que los estilos esten bien definidos.

Igual que JavierB pienso que el uso de span es correcto.

[PascalC]

ruben : los elementos span son de tipo inline (o sea texto), los elementos div son de tipo block y sirven para estructurar un documento (div = división de documento), no puedes obtener el mismo efecto con ambos.

fjmasero, depende de lo que quieres hacer. El elemento span es una etiqueta genérica (como div) que se utiliza cuando quieres estilar un trozo de texto sin darle una significación semántica. El HTML es un lenguaje semántico, significa que tu uso del lenguaje da sentido a tu contenido (es lo que permite a google diferenciar un título de un párrafo por ejemplo o lo que permite a un ciego visitar tu página con un navegador que le leera tu texto y le describirá tu página por sintesis vocal). SSi lo que quieres hacer es sólo un efecto visual, utilizarás <span> :

<span style="color:red">esto</span> <span style="font-weight:bold">es</span> una <span style="font-style:italic;">prueba</span>

Si lo que quieres hacer es darle sentido a tu mensaje :

<strong><span style="color:red">esto</span> es</strong> una <em>prueba</em>

<em> = enfasis (en general cursiva)
<strong> = enfasis fuerte (en general negrita)


Claro, eso tomo toda su fuerza con una hoja de estilo externa.

[kemie]

otra cosa que tener en cuenta. porque es rojo tu texto? es un titulo? entonces utiliza <h1> y definelo en tu hoja de estilo como rojo. es el titulo de una tabla? utiliza <th>, etc etc etc

[fjmasero]

Bueno, pues gracias a todos. Me ha quedado bastante claro.

Salu2

[GG]

Perdón la intromisión, pero yo también estoy en un tránisto, claro que hacia el diseño sin tablas anidadas, pero bueno, te puedo contar como más o menos organizo yo las cosas.

Efectivamente, como dice PascalC ( Gran sujeto! ), hay que pensar el html como un lenguaje que ayuda a entender qué es cada cosa. Por eso es importante que diseñes los estilos de tu sitio, tomando en cuenta cada etiqueta html más que con puros span.

Yo parto siempre definiendo los DIV a los que les coloco un ID para organizar la estructura de la página, después veo el texto normal, el que defino en las etiquetas p y algunos div, los títulos, a los que más que colocarles una clase, los defino con los H1, H2, H3... (en general llego hasta ahí no más), los vínculos con las etiquetas a:hover, a:link, etc; y finalmetne, veo qué textos se me complejizan y ahí aparecen las clases que las aplico a veces sólo a los párrafos, por lo que las defino como p.clase {}.

Bueno, eso. Suerte.

También te recomiendo leer todas las especificaiones de las W3C. Están en las FAQs.

[fjmasero]

Hola GG:

Gracias por animarte a dar tu opinión.

Estoy bastante de acuerdo en todo contigo, pero me surge la duda de lo siguiente:

Veo que orientas todo a aplicar clases a div, p, etc., pero no siempre tendrás contenido de un párrafo, bloque, etc., con un solo estilo.

Por ejemplo, en una misma línea yo he tenido que poner hasta 6 colores, fuentes, tamaños, etc., diferentes.

Para estos casos creo que usar span es lo adecuado. ¿Qué te parece?.

Salu2.

[PascalC]

< span> es una etiqueta genérica para contenido de typo inline cuando no existe en HTML una etiqueta espécífica, < div> tiene la misma función para los contenidos de tipo bloque.

Cabe subrayar que hay muchas etiquetas HTML poco conocidas y que a menudo se utiliza un span o un div cuando se debería utilizar una de dichas etiquetas.

[fjmasero]

Hola PascalC:

¿A q etiquetas te refieres?. Pon algún ejemplillo.

Salu2

[PascalC]

por ejemplo :

address, dl, caption, fieldset, legend, label, em, strong, var, abbr, acronym...

[Rafael]

Mi aportación merecerá una pedrada de parte de los de W3, pero es para ejemplificar el poder del css.

Puedo hacer que un elemento de bloque como el div sea un elemento de linea o viceversa, con el atributo display:inline o display:block.

Pero como siempre hay que hacerlo con "responsabilidad", para no afectar la accesibilidad.

[GG]

Fjmasero:
El super Pascal C nuevamente está en lo más que correcto (en lo perfecto).
Existe otras etiquetas que también determinan clases dentro de una línea (inline). Es que el código html está pensado también para esos efectos.
Algunas de las publcadas por PAScal son obvias su aplciación (address, legend, strong, etc..)Si alguien pudiera encontrar o definir las otras sería maravilloso.

En todo caso EM es pará énfasis.

Hasta creoq ue daría para incluirlas en las FAQS

[Rafael]

1) Inline y block:
ADDRESS
ABBR
ACRONYM
CITE
CODE
DFN
EM
KBD
SAMP
STRONG
VAR
BLOCKQUOTE
Q
SUB
SUP
PRE
DEL
INS
B
BIG
I
SMALL
TT

2) Listas
DT
DD

3)Tablas
CAPTION

4) Formas
LEGEND


Luego preparo la lista completa de etiquetas html clasificadas, y una breve descripción.

[Rafael]

Por cierto respecto de la duda original, B e I no está depreciada, o sea que sí las puedes usar.
La que está "fuertemente" recomendada NO usar es FONT.

[PascalC]

la norma HTML precisa que aunque no son depreciadas esas etiquetas, se aconseja fuertemente no usarlas y usar CSS ya que el uso de dichas etiquetas va en contra de la separación entre estructura y apariencia.

[fjmasero]

Bueno, pues q muchas gracias a todos.