Saltar al contenido

Cómo comentar en html

Cuando empezamos a ponernos un poco más serios con el diseño web empieza a ser interesante no solo que nuestro código funcione (que cumpla sus propósitos) sino también que esté bien organizado y sea sencillo de explicar a otros.

El motivo de esta necesidad es que tan pronto como comenzamos a trabajar en equipo, la comunicación entre los diseñadores y o programadores es clave para entender qué narices significan esos trozos de código que vemos en nuestras web. Por ello, escribir comentarios en el código es esencial para que otras personas entiendan qué queremos conseguir con cada línea que añadimos.

Cómo hacer comentarios en html

Comentar el código html se hace de manera muy sencilla y rápida: tienes que añadir estas dos etiquetas de apertura <!– y de cierre ––> y todo lo que quede en medio de ellas será nuestro comentario.

<!– Nuestro comentario ––>

Por ejemplo, vayamos con algo real. En este blog, me gusta tener algunos párrafos de color diferente, para resaltar alguna información. Para ello, esos párrafos debe tener una clase, que se llama info, de manera que quedan así.

 

<div class=”info”> Contenido del párrafo que lleva color</div>

Se abre un div (<div>), se le añade la clase “info” (<div class=”info”>) y al final del párrafo se cierra el div (</div).

Pero claro, si esto lo viera otra persona que tuviera que ayudarme con la web, alomejor no lo entendería. Por eso podría comentar el código para que cuando esta persona fuese a verlo tuviera más información. De esta manera el código ya no quedaría como antes, sino más bien así:

<!– Añadimos un div con la clase info para cambiar el color ––>
<div class=”info”> Contenido del párrafo que lleva color</div>

Ahora os enseño como quedaría en la página un párrafo con esta clase en el código:

<!– Añadimos un div con la clase info para cambiar el color ––>

Contenido del párrafo que lleva color. Chulo ¿Verdad?

Por supuesto, el comentario no se ve a simple vista, pero si os enseño el código de la página veréis que ahí está, escondido, solo disponible para el que lo necesite 🙂

Ejemplo de comentario en html
¿Qué te pareció este artículo? No dudes en consultarme cualquier duda que te venga a la mente. Te espero en los comentarios 🙂