estas son buenas practicas para escribir código HTML, que lo encontré muy
interesante, así que lo quiero citar como referencia, además puede ser
fácilmente aplicadas estas reglas a cualquier otro lenguaje que manejes.
La mejor manera de hacer que nuestros sitios web se vean y funcionen
correctamente en cualquier navegador, es escribiendo código limpio y que
respete los estándares. En la actualidad, la calidad del código HTML
presente en cada página es un factor que ayuda a mejorar -o empeorar- el
posicionamiento en buscadores, una razón de peso para preocuparnos por
escribirlo correctamente.
La lista de buenas practicas que sigue a continuación puede ser percibida
por los desarrolladores más avanzados como "básica", y puede que así sea.
Sin embargo, espero que sea de utilidad para todos, en especial para
nuestros lectores que recién se inician en este mundo del desarrollo web.
En las primeras versiones del lenguaje -hablo de muchos muchos años atrás- y
con los navegadores antiguos, muchas de estas reglas podían omitirse y cada
uno establecía su propio estilo, sin que esto preocupara mucho a nadie. Por
fortuna, las cosas han cambiado y hoy día somos mucho más exigentes con
nosotros mismos.
Existe algunas reglas que debemos respetar, sobre todo ahora que HTML5
comienza a presentarse con más fuerza. Estas reglas no las inventé yo, solo
las aprendí con mi trabajo y hoy quiero compartirlas para que todos
escribamos HTML de calidad.
Declarar el DOCTYPE correcto
Existen varias versiones de HTML, cada una con sus propias reglas,
etiquetas, elementos y atributos. La única manera de que un navegador
muestre correctamente una página web es conociendo exactamente la versión de
HTML que usa el documento que la contiene.
Para indicarle al navegador la versión de HTML que estamos usando debemos
usar la declaración <!DOCTYPE> y debe ser la primera línea de nuestro
documento. Y aquí algunos ejemplos:
DOCTYPE en HTML5
<!DOCTYPE html>
DOCTYPE HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
DOCTYPE XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Si te encuentras un poco confundido ahora, puedes utilizar esta referencia
donde se muestran las diferentes declaraciones posibles y las diferencias
entre ellas.
Recuerda cerrar las etiquetas
Un documento HTML está compuesto por muchas etiquetas que sirven para
definir encabezados, párrafos e incluso secciones enteras, usualmente vienen
en pares, una para abrir y otra para cerrar. Siempre que abras una etiqueta,
recuerda cerrarla correctamente.
Incorrecto <p>Lorem ipsum dolor sit amet
Correcto <p>Lorem ipsum dolor sit amet</p>
Nombra las etiquetas siempre en minúsculas
Tan importante como cerrarlas, es usar los nombres de las etiquetas siempre
en minúsculas. Lo correcto es <p> </p>, <div> </div>, <h1> </h1> no es <P>
</p>, <dIv> </DIV>, <H1> </H1>, . Además de que produce nauseas leer código
escrito de esa manera, es probable que los navegadores modernos no
interpreten correctamente estas etiquetas.
Utiliza ficheros externos para CSS y JavaScript
Aunque puedes crear funciones JavaScript y dar estilo a los elementos
directamente en el documento HTML, por favor, nunca lo hagas. Utiliza
siempre hojas de estilo y scripts externos en archivos separados para estos
fines.
Enlaza los CSS externos al principio
Aunque en teoría puedes enlazar los archivos CSS externos en cualquier parte
del documento HTML, lo más recomendable es hacerlo dentro de las etiquetas
<head> </head>, en la practica esto hará que las páginas se cargan
ligeramente más rápido.
Enlaza los JavaScript externos al final
En la medida de lo posible trata de enlazar los archivos JavaScript, justo
antes de la etiqueta </body>. Esto ayudará a que las páginas carguen mucho
más rápido.
No es una tontería y existe una explicación para esto: cuando el navegador
está cargando un script, se detiene por completo la carga del resto del
sitio y continua una vez que finaliza el otro proceso. Si se trata de un
script de gran tamaño, el usuario deberá esperar un poco y notará fácilmente
que algo sucede en el fondo, algo para nada elegante.
Usa el atributo "alt" en todas las imágenes
Es una regla fácil de olvidar, sin embargo hay que hacer un esfuerzo por
recordar incluir el atributo "alt" en todas las imágenes. Aunque parezca una
tontería, es necesario incluir este atributo por razones de validación y
accesibilidad.
Valida tu código
Validar el código de los documentos varias veces durante el proceso de
creación, te ayudará a descubrir errores de manera oportuna y te ahorrará
dolores de cabeza innecesarios al final, cuando pensabas que ya habías
terminado. W3C pone a nuestra disposición su Markup Validation Service que
nos permitirá realizar esta tarea de manera sencilla y nos avisará sobre
cualquier error en nuestro código.
Memoriza todas las etiquetas
Resulta muy útil repasar la lista completa de etiquetas HTML disponibles y
tratar de memorizar la mayor cantidad de ellas. Siempre puedes acceder a la
referencia, pero mantenerlas en la cabeza te ayudará a escribir código mucho
más rápido.
Si memorizar no es lo tuyo, te recomiendo buscar un editor con soporte para
HTML (hay cientos) que te ayude a agilizar el proceso, autocompletando
código y ofreciendo sugerencias.
Lee código de otros
Para cerrar, aunque no esté ligado únicamente al código HTML (ya que aplica
para JavaScript, CSS y cualquier otro lenguaje) al leer código de otros
desarrolladores, incluso mirando el código fuente de tus sitios web
favoritos puedes aprender mucho. Inspecciona ese elemento particular que
llama tu atención y aprende como lo hicieron. Revisa otros estilos y crea
uno propio.
fuente:
http://bitelia.com/2012/08/buenas-practicas-html
No hay comentarios:
Publicar un comentario