¿Realmente conoces la importancia del HTML y la estructura del lenguaje en el desarrollo web? Continúa leyendo y verás si realmente conocías éstos relevantes aspectos.
El lenguaje de marcado de hipertexto o HTML es el lenguaje estándar de documentos diseñados para mostrarse en un navegador web. Define el significado y la estructura del contenido. A menudo cuenta con la ayuda de tecnologías como las hojas de estilo en cascada (CSS) y lenguajes de programación como JavaScript.
Los navegadores web reciben documentos HTML desde un servidor o desde un almacenamiento local y representan los documentos en páginas web multimedia. HTML describe semánticamente la estructura de una página web y originalmente incluía pistas para su apariencia. Es por ello que resulta importante seguir unas buenas prácticas a la hora de escribir HTML, ya que esto puede mejorar la accesibilidad, la usabilidad, el rendimiento y el posicionamiento de nuestro sitio.
¿Qué sucede con los maquetadores de WordPress?
Éste concepto, aplica incluso cuando estamos trabajando con maquetadores web en WordPress o CMS similares. Elementor PRO, DIVI o Bricks son alguno de los más populares utilizados en éste último. Es preciso que, a la hora de elegir un maquetador estemos informados de las capacidades que éste tiene para poder trabajar las etiquetas de los diferentes bloques que vamos agregando a nuestro diseño.
En Digital JUMP utilizamos Elementor PRO para maquetar proyectos web, particularmente éste builder tiene habilitada la opción de poder elegir qué etiqueta HTML pueden tener nuestros bloques. De ésta manera podemos respetar estándares de semántica web y alinearnos a las buenas prácticas de desarrollo.
¿Qué buenas prácticas seguir?
HTML es inmenso y tiene muchísimas etiquetas que deben utilizarse correspondientemente según el caso en cuestión. A continuación te brindamos un listado de algunas de las buenas prácticas que se deben tener en cuenta a la hora de trabajar con estructuras de marcado:
- Utilizar una declaración DOCTYPE al inicio del documento que indique la versión de HTML que se está usando. Esto ayuda al navegador a interpretar correctamente el código y evitar errores de sintaxis o de renderizado.
- Utilizar un elemento que contenga la información básica del documento, como el título, la codificación de caracteres, los metadatos, los enlaces a los archivos externos (CSS, JavaScript, etc.) y otros elementos que no se muestran en el contenido visible de la página.
- Utilizar un elemento <body> que contenga el contenido visible, organizado en secciones lógicas mediante los elementos semánticos de HTML5, como <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, etc. Estos elementos ayudan a darle sentido y estructura al contenido, facilitando su lectura y comprensión tanto por los usuarios como por los motores de búsqueda.
- Utilizar etiquetas apropiadas para cada tipo de contenido, como <h1> a <h6> para los encabezados, <p> para los párrafos, <ul> y <ol> para las listas, <table> para las tablas, <img> para las imágenes, <a> para los enlaces, etc. Estas etiquetas permiten aplicar estilos y formatos adecuados al contenido, así como mejorar su accesibilidad y semántica.
- Utilizar atributos id y class para identificar y agrupar los elementos HTML según su función o propósito. Los atributos id deben ser únicos en el documento y se usan para referenciar un elemento específico desde el CSS o el JavaScript. Los atributos class pueden repetirse en varios elementos y se usan para aplicar estilos o comportamientos comunes a un conjunto de elementos.
- Utilizar comentarios para explicar el código HTML cuando sea necesario, especialmente si se trata de código complejo o poco intuitivo. Los comentarios se escriben entre los signos <!– y –> y no se muestran en el navegador. Los comentarios ayudan a mantener el código ordenado y legible, facilitando su mantenimiento y modificación.
Un ejemplo y terminamos.
Como nosotros trabajamos en WordPress, nos gustaría citar un ejemplo muy típico de estructura que solemos utilizar cuando trabajamos con blogs o tiendas online. Veamos la siguiente imagen:
Como pueden ver, ésta suele ser una de las estructuras más típicas en éstos rubros. Una tienda online o un blog, tradicionalmente (y como cualquier sitio web) se compone del header y footer de toda la vida. El <header> es el que contendrá información de relevancia de la empresa o negocio, como el logo, datos de contacto o redes sociales. Incluso también suele incluirse el propio menú de navegación (<nav>) dentro de esa etiqueta (aunque en éste ejemplo este por fuera).
Luego tenemos dos bloques importantes: un <section> y un <aside>. En el primero aparecerán todos los listados de artículos o entradas de blog (cuyas etiquetas de cada ítem serán <article>) y el segundo es el espacio en el que suelen agregarse opciones de filtros del contenido, como listas de categorías, orden de productos por precios, etc.
De esta manera, hemos logrado generar toda una estructura coherente con el tipo de contenido que incluirá nuestra sección web. Trabajando de esta forma, logramos mejorar la accesibilidad al contenido y optimizamos nuestro posicionamiento (porque los buscadores califican mejor a los sitios que cumplen buenos estándares de semántica). Es importante que evitemos complejizar la estructura innecesariamente. En ocasiones, algunos desarrolladores utilizan demasiados <div> para separar contenidos de otros o utilizan demasiadas clases css en las etiquetas para dar estilos. Si a nuestro desarrollo sumamos este detalle, lograremos mejorar el rendimiento de carga.
Y vos, ¿qué tan seguro estás de que tu sitio web respete estos estándares? En Digital JUMP podemos auditar tu sitio web para comprobar si estás alineado a ellos. Sólo tienes que dejarnos un mensajito privado y te contactaremos para coordinar el análisis.
