10 errores usuales en HTML que no debes cometer

A veces me quejo de la cantidad de twitts que recibo, pero muchas otras considero que envían cosas interesantes como este hallazgo en Line25.com que nos explica qué cosas nunca debemos hacer cuando estamos diseñando en HTML.

Siempre es bueno tener en cuenta cosas pequeñas que nos ayudarán a obtener un código más limpio, apropiado y ajustado a las normas que se utilizan hoy en día.

1. Colocar elementos block dentro de elementos inline

PLAIN TEXT
CODE:
  1. <a href="#"><h2>Esto está mal!</h2></a>
  2. <h2><a href="#">Esto está bien!</a></h2>

2. No incluir atributos ALT en imágenes

PLAIN TEXT
CODE:
  1. <img src="imagen.jpg" /> Incorrecto
  2. <img src="imagen.jpg" alt="Imagen de ejemplo" /> Correcto

3. No utilizar listas cuando se necesitan

PLAIN TEXT
CODE:
  1. INCORRECTO
  2. <p>
  3.     Item 1<br />
  4.     Item 2<br />
  5.     Item 3<br />
  6.     Item 4<br />
  7.     Item 5<br />
  8. </p>
  9. CORRECTO
  10. <ul>
  11.     <li>Item 1</li>
  12.     <li>Item 2</li>
  13.     <li>Item 3</li>
  14.     <li>Item 4</li>
  15.     <li>Item 5</li>
  16. </ul>

4. Usar <b> e <i> para negritas y cursivas

PLAIN TEXT
CODE:
  1. <b>Esto está en negrita</b>,
  2. y <strong>esto también (pero mejor!)</strong>
  3. <i>Esto está en cursiva</i>,
  4. y <em>esto también (pero mejor!)</em>

5. Utilizar demasiados cortes de línea <br />

PLAIN TEXT
CODE:
  1. Ejemplo de múltiples divisores
  2. <br />
  3. <br />
  4. No ayuda.
  5. <p>Ejemplo de divisor correcto</p>
  6. <p>Ayuda</p>

6. Utilizar las etiquetas de tachado y subrayado erróneas

PLAIN TEXT
CODE:
  1. <strike>Tachado</strike> o
  2. <u>subrayado</u> estan en deshuso.
  3. <del>Tachado</del> o
  4. <ins>subrayado</ins> son los que se usan ahora.

7. Utilizar estilización inline

PLAIN TEXT
CODE:
  1. <h2 style="color: red"> No!
  2. Utiliza siempre tu hoja de estilos.

8. Agregar o sacar bordes desde el html

PLAIN TEXT
CODE:
  1. <img src="#" alt="" border="0" />
  2. Utiliza siempre tu hoja de estilos.

9. No utilizar etiquetas de encabezado

PLAIN TEXT
CODE:
  1. <p><strong>Título</strong></p>
  2. <p>No corresponde</p>
  3.  
  4. <h3>Título</h3>
  5. <p>Corresponde</p>

10. Usar etiquetas como <blink> o <marquee>

PLAIN TEXT
CODE:
  1. <blink>Mira aquí!</blink>
  2. <marquee>Mira aquí!</marquee>
  3.  
  4. Simplemente, no lo hagas!

Tags:

Escrito por Tamara

Artista multimedios, trabaja desde hace 7 años en varias disciplinas relacionadas con el mundo tecnológico, video, animación y procesamiento de imágenes. Arte y diseño son quienes alimentan su mojo.

El Lunes, Junio 1st, 2009 a las 13:38 y fue guardada bajo Desarrollo.

Compartir esta entrada

Entradas relacionadas

13 Comentarios en “10 errores usuales en HTML que no debes cometer”

  1. Marky Dice:
    Junio 1st, 2009 a las 16:31

    Larga vida a las marquesinas!!!

  2. Fepe Dice:
    Junio 1st, 2009 a las 16:31

    El subrayado que no se debe usar más es subrayado y no subrayado. Ese también es tachado, como tachado (y tampoco se usa más).

  3. Fepe Dice:
    Junio 1st, 2009 a las 16:32

    Epa, no anduvo el tag code.

    Decía que, en el punto 6, “s” tacha, el que subraya es “u”.

  4. Alejandro Dice:
    Junio 2nd, 2009 a las 0:57

    Creo que el punto 4 es erroneo. Los tag strong y em deben utilizarse de forma semántica, no para dar formato.

  5. Tamara Dice:
    Junio 2nd, 2009 a las 1:34

    @Marky: no por favor! jaja Saludos! :P

    @Fepe: gracias! al no poder ver el resultado le puse lo mismo sin querer! Saludos! :)

    @Alejandro: Justamente, no se deben usar b e i en estilos inline, el formato va a la hoja de estilos correspondiente con sus bold e italic. Para dar relevancia al contenido estructural se utilizan strong y em. Gracias por tu comentario! Saludos! :)

  6. Alejandro Dice:
    Junio 2nd, 2009 a las 12:14

    Tamara, lo que decís está bien, pero como está redactado el punto 4 da a entender que strong y em deben usarse para negritas y cursivas.

  7. Tamara Dice:
    Junio 2nd, 2009 a las 12:39

    Se llaman…negritas y cursivas. Si tenes dudas por favor lee el post original. Gracias :)

  8. AMENITO Dice:
    Junio 2nd, 2009 a las 19:39

    Hola Tamar,
    uy interesante tu aportacion para con la codificacion de HTML.
    saludos, AMENITO

  9. Diferencias entre los tags b, i, strong y em | vloox Dice:
    Junio 3rd, 2009 a las 1:28

    [...] se discutió (y bien) este tema en otros lugares, pero a raíz de un post en Kabytes y viendo que no está muy clara cual es la diferencia entre los tags  <b> vs. <strong> [...]

  10. Alejandro Dice:
    Junio 3rd, 2009 a las 1:32

    Tamara: En mi blog trato de explicar la diferencia. Espero que se entienda.

  11. Pablo Dice:
    Junio 3rd, 2009 a las 2:17

    @Tamara, @Alejandro: El debate es sumamente interesante la verdad, y probablemente de para largo por ser una cuestión de que estamos hilando muy pero muy fino. En mi caso en particular utilizo bastante el tags b (aunque realmente en XHTML esta siendo prácticamente reemplazado) y strong, creo que muchas veces y por razones practicas es mucho mas facil utilizar estas tags y no incrementar el peso del sitio por agregar una clase nueva dentro de las hojas de estilo como ocurriría utilizando la propiedad font-weight:bold. Y si bien el uso de b y strong no es el mas apropiado creo que en ciertas ocasiones es particularmente util cuando lo que deseamos es un código sintético y “liviano”.

    Otro detalle por ejemplo: Alejandro comenta en su entrada sobre las ventajas de utilizar strong con respecto al posicionamiento, cosa que es cierta pero que si bien todavía funciona, Google ya no tiene tan en cuenta como hace unos años atrás. Por lo que su utilización y diferenciación con respecto a B ya no es tan significativa como hace uno o dos años atrás.

    Creo que a la conclusión a la que llegan ambos es la misma con respecto a la correcta implementación de las negritas y cursivas. Mi opinión en particular es que la diferencia en su utilización esta marcada por el sentido común y efectos prácticos,y la diferencia es tan pequeña que es de talibán discutirla :P

    Otro detalle es que la evolución tanto de buscadores como de estándares hace que esta discusión muy probablemente sea obsoleta de aquí a 3 años, y que tanto b como i dejen prácticamente de utilizarse.

    Saludos y buena la discusión :D

  12. VictorArias Dice:
    Junio 3rd, 2009 a las 10:35

    Severa discusión je je je.

    Según la norma strong y em son meramente semánticas, como q y blockquote.

  13. Pablo Dice:
    Junio 3rd, 2009 a las 11:06

    @VictorArias: Asi es, en lo particular uso de todo un poco, creo que la diferencia es pequeñita pero vale la pena charlar estos temas :D

Deja tu comentario

Seguir comentarios por RSS