Originalmente escribí esto hace más de dos años. Se estaba volviendo un poco largo, especialmente ahora que HTML5 ha llegado y ha hecho que HTML sea mucho más hermoso que incluso XHTML 1.1. ¡Así que lo actualicé!
No puedo evitar ver la fuente en cada sitio web atractivo que veo. Es como si tuvieras anteojos de rayos X que te permitieran ver a voluntad a cualquier persona que hayas visto en ropa interior. ¿Cómo pudiste no hacerlo? Es muy tentador ver si un hermoso sitio web también está construido con un código hermoso, o si su belleza es superficial. ¿Código? ¿Hermosa? Seguro. Después de todo, el código es poesía. Esto es solo HTML, por lo que no puede ser tan intrincado y elegante como un lenguaje dinámico, pero aún tiene las pinceladas de su creador.
Me hace pensar, ¿qué hace que un código sea hermoso? En HTML, todo se reduce a la artesanía. Echemos un vistazo a algunas marcas escritas en la forma en que se deben escribir las marcas y veamos qué tan hermoso puede ser.
PSD grande PNG original
Es lo suficientemente grande para imprimir y pegar dentro de su casillero para impresionar a sus amigos. Bueno, puede que tenga un tamaño un poco extraño. Haré que el PSD esté disponible en caso de que desee modificarlo.
- HTML5 – HTML5 y sus nuevos elementos crean el HTML más hermoso hasta el momento.
- DOCTYPE – HTML5 tiene el mejor DOCTYPE de todos los tiempos
- Sangría – El código está sangrado para mostrar las relaciones entre padres e hijos y enfatizar la jerarquía.
- Juego de caracteres – Declarado como lo primero en la cabeza, antes que cualquier contenido.
- Título – El título del sitio es simple y limpio. El propósito de la página es primero, se usa un separador y termina con el título del sitio.
- CSS – Solo se utiliza una única hoja de estilo (los tipos de medios declarados dentro de la hoja de estilo) y solo se sirve para buenos navegadores. IE 6 y versiones inferiores reciben una hoja de estilo universal.
- Cuerpo – Identificación aplicada al cuerpo para permitir un estilo de página único sin ningún marcado adicional.
- JavaScript – jQuery (la biblioteca de JavaScript más hermosa) se sirve desde Google. Solo se carga un único archivo JavaScript. Se hace referencia a ambos guiones en la parte inferior de la página.
- Rutas de archivo – Los recursos del sitio utilizan rutas de archivo relativas para mayor eficiencia. Las rutas de los archivos de contenido son absolutas, asumiendo que el contenido está sindicado.
- Atributos de imagen – Las imágenes incluyen texto alternativo, principalmente para usos con discapacidad visual, pero también para validación. Altura y ancho aplicados para la eficiencia de renderizado.
- Contenido principal primero – El contenido principal de la página viene después de la identidad básica y la navegación, pero antes de cualquier contenido auxiliar como el material de la barra lateral.
- Elementos descriptivos apropiados a nivel de bloque – Encabezado, navegación, sección, artículo, aparte … todos describen adecuadamente el contenido que contienen mejor que los divs de antaño.
- Jerarquía – Las etiquetas de título están reservadas para contenido real y siguen una jerarquía clara.
- Etiquetas descriptivas apropiadas – Las listas se marcan como listas, dependiendo de las necesidades de la lista: desordenada, ordenada y la lista de definición infrautilizada.
- Contenido común incluido – Las cosas comunes en varias páginas se insertan a través de inclusiones del lado del servidor (a través del método, idioma o CMS que funcione para usted)
- Clases semánticas: más allá de los nombres de elementos apropiados, las clases y los ID son semánticos: describen sin especificar. (por ejemplo, “col” es mucho mejor que “left”)
- Clases: se utilizan siempre que sea necesario aplicar un estilo similar a varios elementos.
- ID: se utilizan cada vez que un elemento aparece solo una vez en la página y no se puede orientar razonablemente de otra manera.
- Elementos dinámicos: las cosas que deben ser dinámicas son dinámicas.
- Caracteres codificados – Si es un carácter especial, está codificado.
- Libre de estilo – Nada en la página aplica estilo o incluso implica cuál podría ser el estilo. Todo en la página es un recurso obligatorio del sitio, contenido o contenido descriptivo.
- Comentarios – Se incluyen comentarios para cosas que pueden no ser inmediatamente obvias al revisar el código.
- Válido – El código debe cumplir con las pautas del W3C. Las etiquetas están cerradas, se utilizan atributos obligatorios, no hay nada obsoleto, etc.