10 buenas practicas para escribir código HTML


Bitelia

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 unscript, 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 elatributo “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á adescubrir 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.

Etiquetado:, , , , , , ,

Deja un comentario

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Zona de Promesas

Tecnología - Internet - Redes Sociales - Entrepreneurship - Música - Economía - Innovación

Fortune Tech: Technology blogs, news and analysis from Fortune Magazine

Fortune's tech team offers analysis and perspective on the world's most important developments.

Top Master | Blog

LOS PROGRAMAS DE MBA Y POSTGRADO MAS INFLUYENTES DE TODO EL MUNDO

La realidad alterna

Diario de sueños, cuentos, poesías y una novela en proceso

TechCrunch

Startup and Technology News

Unencumbered by Facts

Taking unsubstantiation to new levels

Carlos Cordero

Blog de tecnología

PsicoEmocions Blog

Un Pont entre la Psique i les Emocions

TEA PTLS NACHO

AUTISMO.TEA..PTLS

Comunicación & Marketing

De Lilian Lanzieri

Xtratexia

Dirección estratégica para la vida

Notes From The Internet

by Silvia Altamirano

StellarHIRE Partners

Founding Partner, StellarHire Partners - Executive Search Consultants. Recent engagements include Eloqua, SFDC, Tibco and Veeam.

ivanbrunpr's Blog

4 out of 5 dentists recommend this WordPress.com site

Matt on Not-WordPress

Stuff and things.

BLOGTEC

Noticias de Tecnologia.

Talento en Expansión

Tendencias y Mejores Prácticas en la Gestión de Personas de la Empresa 2.0

Two Leaves Tea SPAIN

Great Organic Tea! ✫✫✫✫✫ Te Organico en Piramides

Escuela de Dinero

El mejor Sitio en Español sobre lo básico para entender el Dinero y sus matemáticas relacionadas.

My Blog Daniel Palop

A topnotch WordPress.com site

Intentando dejar huella...

...en cada uno de los visitantes

Ideas Para la Clase.com

Portafolio de experiencias en la clase de español para Middle School.

littlegreybox

like. read. laugh. love.

déborah rueda

Un sitio más pero diferente sobre marketing on line

No solo los 80's

La mejor música de la historia

Molly Balloon's Blog

Identity + Dressing + Colour

El OJO PUBLICO. / Глаз общественности

Ver para contar & contar para ver. / Чтобы рассказать

Think Creative Idea

Marketing, publicidad, web y negocios

Social Media y más

Social Media, Redes Sociales, Marketing, SEO

The Coaching Alliance

El camino hacia el éxito

Luces y sombras de las marcas

Social Media, Marketing y Comunicación

CNN en Español: Ultimas Noticias de Estados Unidos, Latinoamérica y el Mundo, Opinión y Videos

Ultimas Noticias de Estados Unidos, Latinoamérica y el Mundo, Opinión y Videos

Javier GM Photography - México y más.

“En al fotografía, debemos ser auténticos, tenemos que ejercer nuestra capacidad de asombro para poder, a través de nuestras imágenes, expresar emociones, provocar reacciones y despertar pasiones..” ~ Javier García-Moreno E.

Natalia Gómez del Pozuelo

Experta en comunicación y oratoria

aloyn

Alimentación, ocio y negocios, ALOYN, es un Grupo dirigido a Directivos y Propietarios de empresas, interesados en el mundo de la industria de alimentación y bebidas. Tanto por la parte de la industria productora como por la parte de la industria consumidora y/o distribuidora (Distribución Comercial, Horeca, Vending, Venta Directa, etc). También nos interesan las actividades ligadas al agroturismo y el enoturismo como magníficas actividades de promoción y difusión de la cultura gastronómica.

Blog de Jack Moreno

Un blog de Joaquín Moreno sobre recursos, literatura y ciencia ficción

Mashamour

Ensalada de Manjares

Infographic List

For those who love Infographics - www.infographiclist.com

URieLaRtE

hoy es el primer dia del resto de tu vida

be.blog

be. Intelligent Multimedia Education

unmonodelsiglo21

Un pequeño espacio virtual para pasarla bien

Curso Web 2.0

Diseña tu sitio web gratis y consigue visitas!

~~Mente en Gravedad~~

************************************************************************************************************

Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

Únete a otros 4.356 seguidores

%d personas les gusta esto: