Comments and neat nesting · Comentários e aninhamento limpo
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Esta página precisa de um navegador recente (com suporte a SharedArrayBuffer). Por favor, atualize Chrome, Edge, Firefox ou Safari para a versão mais recente.
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 -->.
Português
Comentários
- Um comentário é uma anotação para você, não para o leitor.
- O navegador ignora ele — ele nunca aparece na página.
- Escreva assim:
<!-- 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.
Português
Etiquetas dentro de etiquetas
- Etiquetas HTML aninhadas: um par pode ficar dentro de outro.
- Um
<div>é uma caixa simples onde você pode colocar outras coisas. - Indente as etiquetas internas um pouco, para que o aninhamento seja fácil de ler.
<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.
Português
Erros comuns
- Etiquetas devem aninhar, não sobrepor:
<b><i>x</i></b>, nunca<b><i>x</b></i>. - Um comentário é
<!-- ... -->e é ignorado pelo navegador.
English
Now you try
- Comments help you stay organised; nesting builds structure.
- Leave a comment, then nest a paragraph inside a
<div>.
Português
Agora você tenta
- Comentários ajudam você a se organizar; aninhamento constrói estrutura.
- Deixe um comentário, depois aninhe um parágrafo dentro de um
<div>.
Explore · Explorar
Neat nesting = the tree · Aninhamento limpo = a árvore
Indentation in your HTML mirrors the parent/child tree. · A indentação no seu HTML espelha a árvore pai/filho.
Leave a note for yourself. Add a comment, like <!-- TODO: add a photo -->. · Deixe uma nota para si mesmo. Adicione um comentário, como <!-- TODO: add a photo -->.
Put the paragraph inside a box. Wrap it in a <div> … </div>. · Coloque o parágrafo dentro de uma caixa. Envolve-o em <div> … </div>.