1. Inicio
  2. CSS
  3. Diseño Web
  4. HTML
  5. JavaScript
  6. Miscelanea
  7. Recursos
  8. SEO
  9. Usabilidad

Los 5 errores más comunes en HTML

Todos los días se escribe HTML, y seguramente muchos diseñadores cometen estos errores, aquí la lista de los 5 errores más comunes al escribir HTML.

1. Usar el mismo id para varios elementos.

Este es el error que más veo en las páginas web, un id es un identificador único, eso quiere decir que no se puede usar más de una vez, por ejemplo si tienes un <div id="enlaces"> ningún otro elemento puede tener ese id. Digamos que si tus elementos fueran automóviles, sus id serían su numero de placa.

Si lo que quieres es darle estilos a un grupo de elementos lo que tienes que usar es class, de nuevo, si tus elementos fueran autos, podrías definir por ejemplo class="toyota" para todos los autos que sean de ese fabricante.

2. Usar elementos depreciados.

Hace años que se dejaron de usar varias etiquetas, entre ellas <i> que servía para marcar texto en cursivas y <b> para marcar texto en negritas.

Parece broma, pero muchas páginas aún tienen estas etiquetas, y no hablo de páginas que se hicieron hace años, sino páginas que salen todos los días.

Lo correcto es usar <strong> para texto en negritas y <em> para texto en cursivas (siempre y cuando quieras darle énfasis a esas palabras).

Si lo que buscas es solamente decorativo, te recomiendo usar por ejemplo <span class="negritas">, ojo que esto no va a hacer que el texto que está dentro de ese <span> se ponga en negritas así nada más, necesitas definir el CSS para eso, aquí está el código:

.negritas  {
font-weight: bold;
}

3. No poner los elementos inline dentro de elementos de bloque.

Este es un error clásico, en HTML existen elementos de linea (inline) como <span>, <a> o <img> y elementos de bloque (block) como <p>, <h1> o <blockquote>

La idea es que los elementos inline siempre van dentro de los elementos block, por ejemplo esto es válido:

<h1><a href="http://aprendiendoweb.com">Aprendiendo Web</a></h1>

Pero esto no:

<a href="http://aprendiendoweb.com"><h1>Aprendiendo Web</h1></a>

4. Definir mal o no definir la codificación de caracteres.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Aquí se define la codificación de caracteres, le estás diciendo al navegador que caracteres vas a usar, porque obviamente no es lo mismo escribir a, que á o à.

Este tema es un poco más complicado y sería muy largo definirlo aquí, pronto haré un post al respecto, mientras tanto define el charset como utf-8

5. No definir el elemento <title>.

¿Te imaginas un libro sin titulo?, peor aún, ¿te imaginas un estante lleno de libros sin título?

Pues más o menos eso es lo que pasa cuando no defines un <title>, sabes que los buscadores como Google o Yahoo muestran los títulos de las páginas en los resultados de búsqueda, también sabes que cuando guardas una página como marcador tu navegador la guarda con el título de la página.

Ya te imaginas los problemas que esto puede causar.

Le comenté a mi buen amigo Carlos Wertheman que estaba preparando esta lista, el me dio la suya y me pareció genial, a continuación la lista de Carlos de los 5 errores más comunes:

  1. Usar Frontpage.
  2. Usar Word para editar paginas.
  3. Usar plantillas de internet.
  4. Hacer web en Wilson*
  5. Colgar tu web en geocities

* Wilson es una avenida en Lima - Perú, ahí hay galerías donde puedes conseguir una web entre US$5 y US$50, ¿Te imaginas como se ve una web de esas? (buen tema para otro post) - Gracias Carlos!

¿Cual es tu lista?

Etiquetas:

Comentarios

deja un comentario

  1. Avatar de c c

    por 50 dolares te hacen una web corporativa :P

  2. Avatar de Juan Pablo Juan Pablo

    Mis cinco:

    1. Usar propiedades prehistóricas como "bgcolor" <--- ¡Si al menos usaran CSS en línea!

    2. Cruzar etiquetas. Ej: <span><em>...</span></em>

    3. PONER TODO EL HTML EN MAYÚSCULAS <-- Esto yo lo hacía cuando no sabía nada de HTML para "ver" mejor qué era etiqueta y qué contenido.

    4. Meter más de un <body> o un <head> <-- Pasa cuando desarollan un sitio grande entre varios y el que junta las partes está en la luna.

    5. Usar frames <-- Are you from the past?

  3. Avatar de Cryss Cryss

    Hola, estoy intentando poner un gadget en mi blog, busqué una plantilla en internet y la modifiqué a mi necesidad, pero me salta un problema cuando intento poner la vista previa, me decía esto: "The content of elements must consist of well-formed character data or markup.", busqué errores de html y llegué aquí, vi lo del doctype y noté que en el código estaba en minúscula y lo arreglé, pero luego de eso me sale otro error que no logro entender ni encontrar, dice "Scanner State 24 not Recognized". No sé qué puedo hacer para arreglar eso, espero me puedas ayudar.
    Gracias.

Deja un comentario

Algunos recursos para Diseñadores Web

Firebug
Genial extensión de Firefox que permite ver y editar HTML y CSS de cualquier página, entre otras cosas.
Web Developer Toolbar
Extensión de Firefox, agrega una barra de menu con muchas herramientas utiles para diseño y desarrollo web.
YSlow
Complemento para Firebug creado por Yahoo, da estadísticas de la velocidad de carga de la página así como sugerencias para mejorarla (requiere Firebug).
W3C Markup Validation Service
Valida tu HTML o XHTML, una herramienta indispensable.

Entra a la página de recursos para diseñadores web y mira la lista completa

¿Quien escribe Aprendiendo Web?

Germán MartínezHola, soy Germán Martínez, diseñador web y fundador de PreZentit.com, la primera aplicación web 2.0 creada en Perú.

La idea de Aprendiendo Web, es ser una fuente de información en español de estándares y buenas prácticas, así como de las últimas tendencias en diseño web.

Me apasiona el (X)HTML, CSS, SEO y todo lo que tenga que ver con diseño y desarrollo web.

-12.126668, -77.029910