Evita los errores más comunes en HTML y CSS
Tanto los principiantes como los programadores más expertos pueden cometer errores en la codificación de sus archivos HTML y CSS, ya sea por descuido o por falta de experiencia.
Crear un código limpio es muy importante y te ayudará a mejorar tu habilidad como desarrollador web, además de ahorrarte el tiempo que perderías en posteriores ediciones. Nunca está de más revisar el código aunque seas un desarrollador experto, porque la causa de muchos de estos errores es hacer las cosas con demasiadas prisas y no haber observado unas buenas técnicas de codificación desde el principio.
Aquí tienes una útil lista de los errores y equivocaciones más comunes que hemos observado tanto en nuestros propios trabajos como en los ajenos.
Errores de HTML
Olvidarse de cerrar las etiquetas
Esto es muy habitual, especialmente entre los principiantes. Hay varias etiquetas que requieren sus etiquetas de cierre, como div, strong o los enlaces, por nombrar sólo unas pocas. Otras etiquetas requieren una barra de cierre para terminar la línea, como es el caso de la etiqueta img.
<div>Texto dentro del DIV.</div>
<img src="imagenes/nombredelaimagen.jpg" />
Utilizar un DOCTYPE inadecuado
HTML nos exige que empecemos el documento con una declaración DOCTYPE correcta. Debe hacerse antes de cualquier otro elemento del código, y comenzar el documento declarando qué tipo de HTML estamos usando.
Éste es el DOCTYPE para XHTML 1.0 Transicional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Anidar etiquetas de forma incorrecta
Es muy importante abrir y cerrar las etiquetas en el orden apropiado. Cuando abrimos algo (un div, por ejemplo), hay que cerrarlo antes de que cualquier elemento superior pueda cerrarse.
El ejemplo siguiente es incorrecto:
<div><strong>texto</div></strong>
Escribir las etiquetas en mayúsculas
Esto se considera simplemente una mala práctica, pero hará que tu código no pueda ser validado. Siempre deberíamos utilizar minúsculas para etiquetas como los div, los enlaces o las imágenes.
El ejemplo siguiente es incorrecto:
<DIV></DIV>
Olvidarse de abrir o cerrar comillas
Este error puede verse mucho en los principiantes, y provoca código erróneo y que las cosas no funcionen adecuadamente. HTML requiere comillas dobles que hay que abrir y cerrar correctamente.
Esto es un ejemplo de su uso correcto:
<img src="imagenes/imagendecabecera.jpg" />
Usar estilos en línea
Su uso también se considera mala práctica. Los estilos en línea funcionan pero terminan convirtiéndose en dolores de cabeza más tarde. El estilo de los elementos debería aplicarse de forma global mediante una hoja de estilos externa, y así será mucho más fácil editar y añadir estilos posteriormente.
Un ejemplo de estilos en línea:
<a href="enlace.html" style="color: #000; text-decoration: none;">nombre del enlace</a>
No codificar los caracteres especiales
Los caracteres como “©” o “&” deberían mostrarse utilizando el código HTML apropiado para cada uno. En la red pueden encontrarse infinidad de listas de caracteres con sus equivalencias en las entidades HTML correspondientes.
Confundir “class” con “id”
Las clases (“class”) son para elementos que se utilizan más de una vez en la página. Como por ejemplo, el estilo de un enlace al que se hace referencia varias veces desde una página pero que no sigue el estilo global de los demás enlaces. Los identificadores (“id”) son elementos a los que sólo se hace referencia una vez, como el div de la cabecera. A menudo se abusa de las clases y los identificadores, y también se utilizan en lugares innecesarios. Intenta usar el menor número posible de atributos.
Errores de CSS
Olvidarse de los cierres apropiados
Todos los elementos comienzan con una llave de apertura y terminan con una llave de cierre. Todos los estilos tienen que terminar con un punto y coma. La última declaración dentro de un elemento no necesita el punto y coma, pero es mejor utilizarlo porque en caso de que tengas que añadir más elementos posteriormente, es posible que te olvides de añadirlo.
Esto es un ejemplo de uso correcto:
#nombre_div
{
width: 40px;
height: 30px;
}
Es discutible si es conveniente condensar la hoja de estilos escribiendo todas las declaraciones de un div en una sola línea. Yo prefiero poner cada declaración en su propia línea porque creo que es más fácil editar el código de esa manera, pero otros argumentan que eso produce un código más largo y unos archivos CSS más pesados.
No usar estilos globales
El estilo de muchos elementos debería aplicarse de forma global, como los estilos de párrafo y cabecera para el texto o los estilos de los enlaces. Esto reducirá el riesgo de errores y también la cantidad de código de tu hoja de estilos.
No utilizar nombres únicos para los identificadores y las clases
Es muy importante elegir nombres que sean únicos para facilitar su posterior edición y para poder identificarlos en la hoja de estilo. Pon nombres específicos a tus div: es mejor un nombre como #columnaIzquierdaInicio que sólo #izquierda.
No usar código abreviado
El código abreviado es otra manera de condensar tu hoja de estilo, y resulta útil para acelerar los tiempos de carga del usuario y también para encontrar algo cuando estés editando más tarde. En vez de usar padding-top, padding-left, padding-bottom y padding-right, puedes escribir:
padding: 5px 10px 0 10px;
El código abreviado se puede utilizar en muchas declaraciones, incluyendo padding, margin, border y font.
No utilizar declaraciones cortas de color
Los números hexadecimales que se repiten, como #FFFFFF o #000000, pueden acortarse a #FFF y #000. Es otra forma de condensar tu código y de hacer que todo sea corto y fácil de revisar.
Usar el posicionamiento de forma incorrecta
El posicionamiento es difícil de comprender cuando se empieza con CSS. Tienes cuatro opciones a elegir: static, relative, absolute y fixed. Static es la opción por defecto y se posiciona según el flujo normal de la página. Un elemento cuyo estilo es relative posee una posición relativa a sí mismo, lo que significa que puedes moverlo arriba, abajo, a derecha o izquierda, basándonos en la posición en la que normalmente se colocaría. La posición absolute nos permite situar un elemento en cualquier lugar de la página, y es la declaración de posicionamiento que menos se usa. Los valores que establezcas para él serán relativos al último elemento padre que sea relative o absolute, y si no hay ninguno, vuelve por defecto a la etiqueta html, permitiéndonos situarlo en cualquier parte de la página mediante valores asignados a top, left, right o bottom. Un elemento fixed tiene una posición relativa a la ventana del navegador, así que el elemento se quedará en el mismo sitio aunque el usuario haga scroll. Aprender cómo usar el posicionamiento correctamente es importante, aunque no debería utilizarse en exceso.
Validación
Validar tus archivos HTML y CSS te ayudará a reducir errores y a descubrir de dónde puede proceder un problema. Puede que tu página web funcione correctamente aunque muestre algunos de estos errores de HTML y CSS, pero eso no significa que sea buena práctica o código válido. El validador te ayudará a identificar estos problemas, y pronto serás capaz de mejorar tu forma de codificar en proyectos futuros.
Fuente: The Most Common HTML and CSS Mistakes to Avoid [web design ledger]
Artículos relacionados:
Tienes que identificarte para escibir comentarios.