Comments and neat nesting
Handout
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version.
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 -->.
<!-- The header goes here -->
<h1>Welcome</h1>
<!-- TODO: add a photo below -->
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.
<div>
<h2>My card</h2>
<p>Some text inside the box.</p>
</div>
Now you try
- Comments help you stay organised; nesting builds structure.
- Leave a comment, then nest a paragraph inside a
<div>.
Leave a note for yourself. Add a comment, like <!-- TODO: add a photo -->.
Put the paragraph inside a box. Wrap it in a <div> … </div>.