Si sigues por aquí es porque todavía tengo oportunidad de hacer que te guste el mundo del diseño web, por ello hoy vamos a dedicar la entrada a ver los errores de principiante en HTML5, el idioma que pone la estructura de nuestra web.
El lenguaje HTML fue creado por Tim Berners Lee, el padre de la web. Este lenguaje permite que los archivos que dan estructura a una web estén formados únicamente de texto, llamando a las imágenes, videos, etc. de la web a través de este, para ello se utilizan las etiquetas HTML como <img>, <video>… Que le dicen al navegador que ahí hay una imagen o un video y el traduce el código en el formato multimedia que le corresponde.
A su vez el navegador tiene que hacer otra cosa: actualizarse, ya que cada x tiempo aparece una versión nueva de HTML, en la que además de eliminarse etiquetas se añaden otras, y los desarrolladores deben encargarse de que el navegador pueda traducir estas etiquetas correctamente.
Con esta introducción al HTML podemos continuar viendo los errores básicos que podemos cometer al hablar este idioma sin que nadie se pierda.
Corrige tu escritura: al igual que en español una frase se debe comenzar con la primera en minúscula y el final marcarlo con un punto, en HTML se deben abrir y cerrar casi todas las etiquetas, a excepción de algunas como video o img, si no todo te sale en rojo.
Respeta el orden de las cosas: si abres una etiqueta, por ejemplo un <div>(contenedor), y dentro de ella anidas varias etiquetas, como una <p>(párrafo) y un <h1>(encabezado), asegúrate de cerrar la primera cosa que abres al final, de forma que el código quede así.
<div>
<h1> Encabezado</h1>
<p>Párrafo</p>
</div>
Olvida la correcta ortografía:si has leído mi guía de CSS o sabes algo del lenguaje, habrás visto que a las etiquetas HTML se las puede dar una clase o id para únicamente dar estilo exclusivo a un elemento o a unos pocos, muchas veces las clases de estos elementos las ponemos en español y no está mal, lo que está mal es ser correctos y poner las tildes a cada palabra, ya que es algo que a la larga puede traernos problemas. Además de escribir las clases/id Sin tilde, también te recomiendo hacerlo todo en minúsculas, nada de la primera en mayúsculas y las siguientes en minúsculas, más que nada porque al final se nos olvida como la escribimos y si no la escribimos tal cual está en el archivo HTML en el CSS esté no te va a mostrar los estilos que le has dado a esa clase o id y en ese momento toca remover cielo y tierra a ver como la escribimos. Por último, para terminar con el apartado clases e ids no les nombres con cosas tontas, insultos, adjetivos despectivos, frases raras Porque es como cuando estás haciendo el tonto por el pasillo del centro comercial, miras arriba y llegó el momento cámara, ese momento en tu web es cuando el usuario le da a F12, o botón derecho del ratón > Inspeccionar, y ven todo tu archivo HTML de la página en la que se encuentran con sus respectivas clases, id’s…
Comillas y puntos y comas: Como en español y en cualquier idioma cuando se cita algo la frase va entrecomillada, es decir, tiene comillas delante de ella y al final, si no la cita se quedaría coja, lo mismo pasa en este lenguaje, si al poner <p style=color: #333> o <p class=ejemplo> ninguna de las dos cosas va a funcionar, al igual que si ponemos una imagen <img src=ejemplo> o un enlace <a href=ejemplo.com>, por lo que acuérdate de revisar bien si todo, tanto etiquetas si es necesario como comillas, está bien cerrado. Otra cosa en la que se parece nuestro idioma con este lenguaje es que nosotros también utilizamos puntos y comas para separar elementos en una oración (la casa, que está en construcción; el parque, donde los niños juegan), sin embargo en el entorno web cambia un poquitín la cosa. Si quisiéramos darle varios estilos a un párrafo, como un fondo negro y unas letras blancas, la casa se convertiría en background-color, la , en cambio serían : y el que está en construcción sería #333, mientras que el punto y coma se quedaría como está para separar las dos declaraciones. El código final entonces sería:
<p style=background-color: #333; color: #fff>
La verdad es que no hay nada peor que los sudores que te dan cuando ves que elementos de la web no tiran y no encuentras el error, por eso espero haberte ayudado con esta agrupación de los errores de principiante que incluso cuando dejas de serlo sigues cometiéndolos.
