LucusHost, el mejor hosting

Comentarios en HTML, CSS, PHP y Javascript

Publicado el 28 de octubre de 2020
Actualizado el 28 de octubre de 2020

Cómo insertar notas, aclaraciones e indicaciones en el código fuente de páginas, archivos de estilo y scripts en los lenguajes más frecuentes a la hora de desarrollar una página web, que no sean procesadas por el navegador ni afecten a su funcionamiento.

Un comentario es una cadena de texto que puedes incluir en el código de cualquier lenguaje de programación y que no se muestra al usuario ni afecta al funcionamiento del mismo.

A través de los comentarios puedes ofrecer información sobre el código, desactivar temporalmente alguna parte del mismo o dejar anotaciones e indicaciones para otros desarrolladores o tu yo del futuro.

Porque, sí, una buena práctica a la hora de comentar tu código puede ahorrarte mucho tiempo a la hora de revisar, e incluso comprender, esa función o fragmento de código que tan brillantemente desarrollaste hace unos meses.

Y, hablando de buenas prácticas, procura que tus comentarios sean claros y concisos.

Para qué uso los comentarios en HTML, CSS, PHP y Javascript

Aparte del uso obvio de describir el objeto y/o función de un fragmento de código, suelo usar los comentarios para, por ejemplo:

  • Indicar la URL de refencia o procedencia de un fragmento o función reutilizado.
  • Recordarme futuros cambios o mejoras a tener en cuenta.
  • Desactivar un fragmento de código con fines de testeo o búsqueda de errores.

Comentarios en HTML

Para comentar código en HTML se utiliza una etiqueta de apertura <!-- y otra de cierre -->.

Los comentarios pueden ser de una sola línea:

<!-- Esto es un comentario de una línea en HTML -->

O afectar a varias líneas de código:

<!-- Hola, soy un comentario multilínea en HTML --> <!-- <p>Y yo soy un código comentado</p> <p>porque, de momento, no sirvo pero no me quieren borrar</P> -->

Recuerda que, si abres un comentario en HTML, tienes que cerrarlo. Si no lo haces, todo el código que siga a partir de ahí, se convierte también en comentario.

A veces también se usan los comentarios HTML para evitar que los navegadores antiguos, que no reconocen lenguajes de secuencias de comandos como JavaScript, intenten interpretar el código y se produzca un error.

Comentarios en CSS

Para las hojas de estilo CSS también se utilizan etiquetas de apertura y cierre y puedes comentar líneas o secciones de varias formas.

Para comentar una línea se encierra entre dos barras y asteriscos, tal que así:

/* Soy un comentario CSS de una línea */

Y pueden ir en una sola línea o al final de la propiedad que se quiera comentar.

body { color: #d3d3d3; /* Color del texto de la página */ font-size: 16px; /* Tamaño de fuente de la página */ }

Para comentar una sección más extensa se suele emplear el mismo método, pero agregando un asterisco al comienzo de cada línea, incluyendo las líneas en blanco.

/** * Código CSS para un contenido determinado * * Configuración del contenido * Esta sección solo contiene reglas aplicables a dicho contenido */

Igual que en los comentarios HTML, recuerda cerrar siempre los comentarios en CSS o todo el código que siga a la etiqueta de apertura será considerado comentario y dejará de aplicarse.

Comentarios en PHP

En PHP también se pueden comentar líneas o secciones de código, aunque en este caso se pueden usar diferentes etiquetas para hacerlo.

Para los comentarios de una sola línea se usan dos barras seguidas (//) o una almohadilla (#), aunque también se pueden emplear las mismas etiquetas usadas en los comentarios CSS.

// Esta es una línea comentada en PHP con dos barras # En este comentario usamos la almohadilla para comentar una línea en PHP /* Otra forma de comentar en PHP */

Para comentar un bloque de código o escribir comentarios de múltiples líneas en PHP se emplean siempre las etiquetas /* */.

/* funcion_comentada() { comentario de varias líneas en PHP } */

Comentarios en Javascript

En el código Javascript se pueden usar casi todos los métodos empleados en los comentarios HTML, CSS y PHP.

Aunque hay que tener en cuenta un par de consideraciones:

  1. En el caso de usar la forma /* */ debes comprobar que el código no contenga alguna instrucción con los caracteres */ que pueda romper y bloquear su funcionamiento.
  2. En caso de usar el método de comentar en HTML (<!-- ) para una sola línea, debes hacerlo sin la etiqueta de cierre, que es ignorada por el intérprete.
// Esto es un comentario JavaScript de una línea /* Todo este bloque de varias líneas También se considera un comentario */ <!-- Esto también es un comentario válido en Javascript <!-- --> Y esto, por raro que parezca, también se acepta como comentario <!-- Sin embargo, ESTO NO FUNCIONA -->

Buenas prácticas al usar comentarios en HTML, CSS, PHP y JavaScript

Comentar el código que producimos con anotaciones y aclaraciones sobre el mismo es necesario para hacer dicho código comprensible a lo largo del tiempo.

Pero no te pases. Ten en cuenta que los comentarios no dejan de ser cadenas de caracteres que aportan peso al archivo de tu código.

Así que úsalos con moderación y sentido común. No trates de convertirlos en una especie de arte ASCII. No están para embellecer, sino para hacer comprensible tu código.

Siempre que te sea posible, sirve una versión minificada de tu código. Las máquinas no entienden de líneas ni espacios en blanco.

¡¡Ahh!! Y no trates de usar los comentarios, sobre todo en HTML, para meter a martillazos palabras clave que favorezcan tu SEO.

Los comentarios no son indexados por los buscadores, así que las anotaciones que hagas en ellos no serán rastreadas.

Algunos de los enlaces de este artículo pueden corresponder a programas de afiliación de herramientas que uso, he probado o sé que son de utilidad.

El uso de mis enlaces de afiliado nunca aumenta el precio para ti, pero me dan una pequeña comisión que me permite seguir generando más y mejor contenido.

Por ejemplo, si compras en Amazon, puedes ayudarme haciéndolo con mi enlace de referencia:
https://academiaweb.online/amazon

¡Gracias de antemano por tu apoyo!

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram