Cabecera curso fácil html y css

Identación, espacios en blanco y comentarios | Curso fácil de HTML5 y CSS #4º

Vamos a conocer dos cuestiones que nos facilitarán mucho las cosas a la hora de escribir nuestro código, la identación y los comentarios. 

Índice general del «Curso de HTML5 y CSS»:

  1. Introducción
  2. La sintaxis de HTML
  3. Los atributos
  4. Formalidades al escribir HTML
  5. Introducción a CSS
  6. Añadir CSS a una página
  7. Selectores básicos
  8. Elementos inline y block

Identación y espacios en blanco

Como habrás podido ver en los capítulos anteriores, cuando escribimos el código de una página web organizamos las líneas con diferentes sangrados, esta manera de mostrar las líneas facilita que con un simple golpe de vista cualquiera pueda apreciar la estructura del documento y la jerarquía de los diferentes elementos HTML.

Analicemos un ejemplo.

<html>
       <body>
              <h1>Este es el título de sección</h1> 
       </body>
</html>

Si observamos el código superior, podemos ver fácilmente qué elemento está anidado dentro de otro. Como <body> está dentro de las etiquetas <html>, lo hemos escrito en una nueva línea que hemos sangrado con un espacio del tabulador. Así mismo, se aprecia claramente como el elemento <h1> está anidado dentro de <body> gracias al doble espaciado de tabulador.

Si bien al navegador le va a dar lo mismo encontrarse el código todo seguido.

<html><body><h1>Este es el título de sección</h1></body></html>

Es evidente que a nosotros se nos va a complicar mucho cuando necesitemos buscar algo dentro del código, o simplemente queramos recordar cómo está estructurada la página, sobre todo cuando se trate de decenas o cientos de líneas.

Comentarios

Una ayuda que nos ofrece HTML es la posibilidad de anotar comentarios entre las líneas de código.

Los comentarios tienen la particularidad de que no van a ser mostrados por el navegador, con lo que podemos utilizarlos para hacer anotaciones que nos sirvan en un futuro como guía.

La sintaxis para hacer un comentario en HTML es muy sencilla.

<!-- esto es un comentario -->

Abrimos el comentario con <!– y lo cerramos con –>, de esta manera todo lo que escribamos dentro no será mostrado.

Entre otras cosas nos puede servir para separar partes del código bajo títulos informativos que nos facilite navegar a través del documento.

<body>
       <h1>Este es el título de sección</h1>
       <p>Esto es un párrafo</p>
       <p>Esto es otro párrafo</p>
       <!-- Aquí comienza la Segunda sección -->
       <h1>Este es el título de sección</h1>
       <p>Esto es un párrafo</p>
       <p>Esto es otro párrafo</p>
</body>

El ejemplo anterior está creado a modo ilustrativo, lógicamente se justificaría el uso de comentarios para separar secciones, cuando el documento fuese mucho más extenso.

También podemos «comentar» momentáneamente partes del código, cuando queremos comprobar si están causando algún tipo de error.

NOTA:

Si anidamos un comentario dentro de otro nos dará problemas.

En el próximo capítulo vamos hablar de un complemento fundamental para HTML, los estilos CSS.


Ir a Curso fácil de HTML5 y CSS 5ª parte

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *