Aprende a insertar comentarios HTML en el código de tu web de manera rápida, fácil y con ejemplos. En nuestra guía descubrirás: Qué son los comentarios HTML, cómo los vas a poder integrar en tu código ylos mejores tips para utilizarlos. ¡Sigue leyendo y aprende como un programador profesional!
¿Qué es un comentario HTML?
Primer paso, saber en qué consiste un comentario en HTML. Se trata de un fragmento de código HTML que no tiene ningún efecto en la ejecución del código. Es decir, todo lo que incluyas en el comentario no modificará el contenido ni el funcionamiento de la página web.
Los comentarios en HTML5 solo serán anotaciones con información adicional sobre el código, para que el mismo programador sepa cómo está todo estructurado, o, todavía más importante, para que el desarrollador que tome el relevo del proyecto, cosa que ocurre muchas veces, tenga una guía de como se ha construido la web.
Como puedes imaginar, los comentarios son una pieza muy importante a la hora de trabajar en equipo, ya que es la manera de entender el código de otro desarrollador y poder trabajar con él. Si quieres aprender más sobre programación, tenemos un post explicando qué es y para que sirve la programación.
¿Cómo insertar comentarios en HTML 5?
Ahora que ya sabemos qué son los comentarios HTML, vamos a ver cómo agregarlos a nuestro código de manera fácil y rápida.
Para hacer comentarios en HTML se utiliza la etiqueta <!– y –>, “<!– COMENTARIO –>”. Al principio y al final del comentario.
Ejemplo de comentario en HTML:
<!DOCTYPE html>
<html>
<head>
<title>Mi página web</title>
</head>
<body>
<!– Este es un comentario –>
<h1>Bienvenido a mi página web</h1>
<p>Esta es una página de ejemplo</p>
</body>
</html>
Este código ejecutaría toda la parte HTML excepto la parte resaltada en rojo, que es el comentario HTML incluido en este código. Por lo que este comentario sólo tendrá relevancia para los desarrolladores que se paren a leerlo y entender el código.
¿Cómo comentar varias líneas de código en HTML?
Ahora puedes preguntarte: ¿Esto funciona para comentarios multilínea? La respuesta es Sí, y ahora te lo explicamos mejor con un ejemplo.
Para comentar varias líneas de código en HTML5 se utilizan las etiquetas HTML que hemos mencionado antes “<!–” “–>” con el comentario entre las dos etiquetas.
Ejemplo de comentario HTML en varias líneas de código:
<!DOCTYPE html>
<html>
<head>
<title>Mi página web</title>
</head>
<body>
<!–
<h1>Bienvenido a mi página web</h1>
<p>Esta es una página de ejemplo</p>
–>
</body>
</html>
En este ejemplo, la etiqueta <h1> y la etiqueta <p> estarían dentro del comentario. Estas serían dos líneas de código dentro de un comentario.
Puedes comentar todas las líneas de código que necesites, mientras todo el comentario esté dentro de las etiquetas correspondientes. No importa si quieres comentar una línea de código o 200, el método es el mismo, todo el comentario debe ir incluido dentro de las etiquetas de abrir y cerrar comentario.
Tips para utilizar los comentarios HTML en tu código
Descubre cómo generar un código entendible por otros programadores utilizando los comentarios HTML5.
- Explica tu código con palabras: El uso esencial de los comentarios es explicar tu código por secciones, así el programador que trate con tu código en un futuro sabrá cómo lo trabajaste. Si trabajas con un equipo de programadores en un mismo proyecto, los comentarios son esenciales.
- Pon a prueba tu código: Los comentarios HTML son muy útiles para ir probando distintas partes del código, utilizando los comentarios para desactivar temporalmente cierta parte del código. Esto funciona muy bien para detectar si hay un error en una sección en específico.
- Actualiza los comentarios: Ten en cuenta que el código de un proyecto se va cambiando continuamente, por lo que si se cambia algo que, previamente, está comentado hay que cambiar el comentario explicando el código actual.
- No ocultes código con comentarios: A pesar de que el código se oculta utilizando los comentarios, si queremos que algún bot lo lea, no debemos utilizar los comentarios, es mejor que utilicemos otras etiquetas como “style” o “script”. Ya que si lo comentamos, estos comentarios, muy posiblemente, serán ignorados o eliminados.
Parecidos con otros lenguajes: Ejemplo HTML y CSS
Ya eres todo un experto/a de los comentarios en HTML, y seguramente del código HTML5. Una buena noticia para ti es que los comentarios en los distintos lenguajes de programación son muy parecidos, y en la mayoría de los casos tendrás que poner dos elementos, uno para abrir el comentario y otro para cerrarlo, ya sea HTML, CSS, PHP…
Los comentarios los utilizan todos los programadores, da igual el lenguaje y da igual si son backend o frontend.
Por ejemplo: vamos a comparar los comentarios en HTML y los comentarios en CSS:
En el caso de los comentarios HTML, hemos visto que el elemento para abrir el comentario es la etiqueta “<!–”, y para cerrarlo utilizamos la etiqueta “–>”.
En el caso del lenguaje CSS, en vez de utilizar etiquetas, utilizamos los símbolos /* para abrir el comentario, y para cerrarlo utilizamos */.
Ejemplo de comentario en CSS:
/* Esto es un comentario en CSS */
Hemos puesto de ejemplo el lenguaje CSS porque los comentarios funcionan igual que en otros lenguajes de programación, como JavaScript.
Siguiente paso para ser un profesional de HTML y programación web
¡Felicidades programador! Ahora ya sabes como insertar comentarios en un código HTML para tener el código del proyecto ordenado.
¿Quieres trabajar como programador profesional en 7 meses? Con el master de Software development de Assembler Institute te formarás en programación de software y conseguirás tu primer trabajo como programador profesional.
En el caso que no estés convencido del todo para ser un programador profesional en 2023, puedes consultar cuánto cobra un programador en España.
