Mejores prácticas HTML para un código limpio

Anteriormente en otros artículos hemos indicado la importancia de realizar contenidos atractivos y de calidad para lograr consolidar las visitas a nuestro sitio web, para lograr esto es fundamental emplear de manera adecuada el código HTML, es por esto que a continuación te daremos unos guías para realizar buenas prácticas HTML.

practicas html

¿Qué es HTML?

HTML es un lenguaje informático por desarrolladores web para el diseño y creación de sitios web. Es de sencillo aprendizaje y los conceptos básicos son accesibles para la mayoría de las personas.

Una de sus características es su poder para crear y diseñar. Constantemente está en evaluación para satisfacer las demandas y requisitos de la creciente audiencia de Internet bajo la dirección del »W3C, la organización encargada de diseñar y mantener el lenguaje.

¿Cómo funciona?

Se desarrollan una serie de códigos cortos escritos en un archivo de texto por el autor del sitio, esto se denomina etiquetas.

El texto se guarda como un archivo HTML y se ve a través de un navegador (Firefox, Google Chrome, Safari, Edge, entre otros) el cual lee el archivo y traduce el texto a una forma visible, con suerte presentando la página como el autor había querido.

Escribir sus prácticas HTML implica usar etiquetas correctamente para crear su visión. Puedes emplear cualquier elemento, desde un editor de texto rudimentario hasta un potente editor gráfico para crear páginas HTML.

Prácticas HTML

A continuación te describiremos las mejores prácticas HTML, para escribir un código limpio y sustentable, siguiendo los lineamientos de la W3C, que pueden ser utilizados tanto para prácticas HTML para principiantes o avanzados:

practicas html

Declara el DOCTYPE

Al determinar el tipo de documento, o DOCTYPE, podemos definir el modelo utilizado al elaborar un documento HTML. Mediante esta forma, los exploradores web que puedan leer su contenido descifraran el documento con el lenguaje y versión determinados.

Es importante señalar que al estar en el año 2020, no es recomendable usar un DOCTYPE antiguo, desactualizado y arcaico. Por el contrario lo recomendado es utilizar el lenguaje HTML actualizado, el cual es HTML5.

Ejemplo de DOCTYPE correcto:

Con una versión obsoleta:

  • <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN»
  • «http://www.w3.org/TR/html4/strict.dtd»>

Con una versión actual

  • <!DOCTYPE HTML>

Cierra las etiquetas

Uno de los primeros elementos que se deben tomar en cuenta al comenzar a estudiar HTML, es que las etiquetas deben ser cerradas en su totalidad y siguiendo el orden en que se abrieron.

Ejemplos:

Forma incorrecta:

  • <div>
    • <p>Contenido
    • <p>Contenido</p>
  • </div>

Forma Correcta:

  • <div>
    • <p>Contenido</p>
    • <p>Contenido</p>
  • </div>

Forma incorrecta:

  • <p>Este es<br></br>un mal ejemplo</p>

Forma Correcta:

  • <p>Este es<br>un buen ejemplo</p>

Es de reseñar que en HTML5 se agregaron las etiquetas vacías, debido a que son una consideración especial que no ameritan cierre. Estas etiquetas pueden ser:

  • <area>
  • <base>
  • <br>
  • <col>
  • <embed>
  • <hr>
  • <img>
  • <input>
  • <keygen>
  • <link>
  • <menuitem>
  • <meta>
  • <param>
  • <source>
  • <track>
  • <wbr>

practicas html

Usa minúsculas en etiquetas, atributos y valores

Si bien no afecta el rendimiento del sitio web que estás diseñando, lo recomendable es escribir las etiquetas, atributos y valores en minúsculas, debido a que mejora notablemente la visualización del código.

Forma incorrecta:

  • <SECTION>
    • <h1>Título</H1>
    • <P>Contenido</P>
  • <section>

Forma Correcta:

  • <section>
    • <h1>Título</h1>
    • <p>Contenido</p>
  • <section>

Uso del atributo ALT en imágenes

Todas las imágenes que incluyas en tu sitio web deben agregarse siempre este atributo, el cual proporciona, como lo indica su nombre, un texto alterno a la imagen.

Utilizar esta característica optimiza el acceso debido a que, por ejemplo, los usuarios utilizan la información que aparece en atributo de imágenes, para ubicarse en el contenido de las imágenes.

Este atributo debe ser sobradamente descriptivo a la información que se desea representar. Si la imagen no tiene transcendencia (un icono) se recomienda mantener incluido el atributo, aunque este no este lleno.

Forma incorrecta:

  • <img src=»img/logo.png»>

Forma Correcta:

  • <img src=»img/logo.png» alt=»Logo»>

Indentación consistente

Esto puede ser aplicado para cualquier lenguaje de programación, un código con una deficiente indentación o peor aún un código sin indentación pasa a ser un código sin legibilidad.

¿Qué es Indentar?

Indentar significa emplear los espacios que se encuentran al lado derecha de cada línea con la intención de optimizar la legibilidad del código, considerándose entonces un aspecto de gran relevancia y que siempre debe ser tomado en cuenta al momento de programar.

Para realizar la indentación se puede utilizar las tabulaciones (Tab) o espacios (de acuerdo a las preferencias del diseñador)

Esta decisión queda a criterio del diseñador, se puede tomar como aunque podríamos tomar como punto de comparación, lo indicado en la guía de estilos de Google la cual exhorta al uso de dos espacios.

Ahora bien, independientemente del estilo tomado para indentación (tabulación o espacios) lo verdaderamente importante es que sea permanente durante todo el código.

Forma incorrecta:

  • <div>
  • <h1>Título</h1>
    • <ul>
  • <li>Elemento 1</li>
    • <li>Elemento 2</li>
    • <li>Elemento 3</li>
  • </ul>
  • </div>

Forma Correcta:

  • <div>
    • <h1>Título</h1>
    • <ul>
      • <li>Elemento 1</li>
      • <li>Elemento 2</li>
      • <li>Elemento 3</li>
    • </ul>
  • </div>

Separa el contenido de la presentación

No emplees modos lineales, es otra recomendación para realizar buenas prácticas HTML. Para este elemento debes considerar que el código HTML es el contenido y el código CSS otorga el elemento visual de este contenido. No obstante, ambos códigos de un contenido no pueden ser combinados.

Al combinar ambos lenguajes de programación, se obtienen sitios web más lentos, con dificultades para la lectura del usuario y también complejos para mantener.

Al tener estilos y el contenido dividido servirá para que el equipo que desarrolla el sitio web aplique modificaciones y realice labores de mantenimiento de manera óptima y eficiente.

Para esto se recomienda, usar hojas de estilo externas, junto con clases para utilizar formas según el caso lo amerite.

Forma incorrecta:

  • <p style=»color: red;»>Información</p>

Forma Correcta:

  • <p class=»alerta»>Información</p>

Etiquetas semánticas y evita la Divitis

Divitis se define como la técnica en la cual se utilizan divs para sistematizar toda la información del sitio web. Y es que si bien esta técnica puede funcionar, no es considerara una buena prácticas HTML avanzado, pues perjudica la legibilidad y recarga al código.

Por lo tanto la recomendación en este elemento es conservar el código lo más pulcro y disminuido posible, mermando la utilización de clases y de identificaciones que no se necesitan para enlazar estilos a un único elemento.

Para esto, podemos emplear los factores Para ello, podemos utilizar los elementos orgánicos de HTML5 de forma correcta, de la siguiente manera:

  • <header>
  • <aside>
  • <section>
  • <article>
  • <menu>
  • <footer>

Forma incorrecta:

  • <div id=»encabezado»></div>
  • <div id=»navegacion»></div>
  • <div id=»contenido»>
    • <div class=»articulo»></div>
    • <div class=»articulo»></div>
  • </div>
  • <div id=»pie»></div>

Forma Correcta:

  • <header></header>
  • <nav></nav>
  • <main>
    • <article></article>
    • <article></article>
  • </main>
  • <footer></footer>

Omite el valor de atributos booleanos

En las prácticas HTML se encuentran propiedades denominadas booleanos. Por lo general, estos atributos no consienten los valores true o false y se manifiestan agregando (true) u omitiendo (false) su nombre.

Son ejemplos de propiedades booleanos:

  • Checked
  • Selected
  • Disabled
  • Readonly

Por esto, lo recomendable es utilizarlos adecuadamente y es por ello, que debemos usarlos correctamente y dejar de utilizar siempre su valor.

Forma Incorrecta:

  • <input type=»checkbox» name=»ejemplo» checked=»checked»>

Forma Correcta:

  • <input type=»checkbox» name=»ejemplo» checked>

Especifica la codificación de caracteres

Es una de las prácticas HTML más comunes, debes determinar adecuadamente la categorización de caracteres, lo que nos consentirá de forma apropiada la observación del contenido del sitio web, agregando acentos y caracteres especiales como ñ, dando la orden al explorador cómo debe interpretarlos.

Para especificarla, debemos agregar la siguiente línea al header del sitio web:

  • <meta charset=»UTF-8″/>

Para este caso específico debemos indicar como sistema de codificación UTF-8 pues es el más empleado y difundido.

Valida tu código

Otra de las prácticas HTML que vamos a describir es validar el código para de esta forma verificar que cumple con todas las normas establecidas.

Para esta validación debes usar la herramienta que te suministra W3C. Si debemos resaltar que no se debe angustiar con los resultados, debido a que no obtener la validación absoluta, no significa que se haya escrito un mal código.

Puedes comprobar el código de sitios web populares como Google, Twitter, GitHub, entre otros y podrás observar que sus códigos no son magistrales.

Deseo de trabajar de forma óptima

Lo más importante que necesita para escribir un buen código es su deseo de hacer las cosas bien. Escribir código HTML limpio es fácil, pero debe preocuparse y prestar mucha atención.

Evitar comentarios

Otra práctica HTML avanzado, indica que  en este lenguaje de programación, los comentarios no son necesarios, debido a que el marcado HTML se explica por sí mismo. Por lo tanto, si te encuentras comentando mucho tu HTML, deberías revisar la referencia de estos elementos.

Copia otros códigos

La última de las prácticas HTML, puede parecerte paradójica, pero los mejores artistas del mundo aprendieron su oficio al replicar el trabajo de las personas que admiraban. Puede usar la misma estrategia para escribir código HTML limpio (que también es un proceso bastante creativo).

La forma más fácil de aprender a escribir un código limpio es sencilla: lee un código limpio y luego repítalo. Para esto puedes realizar los siguientes pasos:

  • Explore proyectos de código abierto (para esto existen para ser imitados y mejorados).
  • Lea blogs y artículos que le enseñen las mejores prácticas de codificación.
  • Tome cursos para desarrolladores web.

Sabemos que esta información ha sido de tu interés, así que no dudes en compartirlo con tus amistades y familiares. Asimismo, te invitamos a visitar los siguientes enlaces:

Editores de código: ¿Qué son y para qué sirven?

¿Cómo insertar html en WorPress de forma segura?

¿Qué es diseño web, cómo funciona y para qué sirve?

Deja un comentario