Comments and neat nesting · Comentarios y anidamiento ordenado
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Esta página necesita un navegador reciente (con soporte para SharedArrayBuffer). Por favor, actualiza Chrome, Edge, Firefox o Safari a la última versión.
English
Comments
- A comment is a note for you, not for the reader.
- The browser ignores it — it never shows on the page.
- Write it like this:
<!-- this is a comment -->.
Español
Comentarios
- Un comentario es una nota para ti, no para el lector.
- El navegador lo ignora — nunca se muestra en la página.
- Escríbelo así:
<!-- this is a comment -->.
<!-- The header goes here -->
<h1>Welcome</h1>
<!-- TODO: add a photo below -->
English
Tags go inside tags
- HTML tags nest: one pair can sit inside another.
- A
<div>is a plain box you can put other things in. - Indent the inside tags a little, so the nesting is easy to read.
Español
Las etiquetas van dentro de las etiquetas
- Las etiquetas HTML se anidan: un par puede estar dentro de otro.
- Una
<div>es una caja simple en la que puedes colocar otras cosas. - Indenta las etiquetas interiores un poco, para que el anidamiento sea fácil de leer.
<div>
<h2>My card</h2>
<p>Some text inside the box.</p>
</div>
English
Common mistakes
- Tags must nest, not overlap:
<b><i>x</i></b>, never<b><i>x</b></i>. - A comment is
<!-- ... -->and is ignored by the browser.
Español
Errores comunes
- Las etiquetas deben anidarse, no superponerse:
<b><i>x</i></b>, nunca<b><i>x</b></i>. - Un comentario es
<!-- ... -->y es ignorado por el navegador.
English
Now you try
- Comments help you stay organised; nesting builds structure.
- Leave a comment, then nest a paragraph inside a
<div>.
Español
Ahora te toca a ti
- Los comentarios te ayudan a mantenerte organizado; el anidamiento construye estructura.
- Deja un comentario y luego anida un párrafo dentro de una
<div>.
Explore · Explorar
Neat nesting = the tree · Anidamiento ordenado = el árbol
Indentation in your HTML mirrors the parent/child tree. · La sangría en tu HTML refleja el árbol de padre/hijo.
Leave a note for yourself. Add a comment, like <!-- TODO: add a photo -->. · Dejar una nota para ti mismo. Agregar un comentario, como <!-- TODO: add a photo -->.
Put the paragraph inside a box. Wrap it in a <div> … </div>. · Coloca el párrafo dentro de un cuadro. Envuélvelo en un <div> … </div>.