Comments and neat nesting · コメントと整然としたネスト
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · このページには最新のブラウザ（SharedArrayBuffer対応）が必要です。Chrome、Edge、Firefox、Safariを最新バージョンに更新してください。
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 -->.
日本語
コメント
- コメント は読者ではなく あなた自身 へのメモです。
- ブラウザはそれを 無視 します — ページ上には一切表示されません。
- このように書きます：
<!-- 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.
日本語
タグはタグの中に入る
- HTMLタグは ネスト されます — 1組が他のタグの内側に配置できます。
<div>は他のものを放入できる単純なボックスです。- ネストが読みやすいよう、中のタグを少しインデントします。
<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.
日本語
よくあるミス
- タグは重なり合うのではなくネストする必要があります：
<b><i>x</i></b>、<b><i>x</b></i>ではありません。 - コメントは
<!-- ... -->で、ブラウザによって無視されます。
English
Now you try
- Comments help you stay organised; nesting builds structure.
- Leave a comment, then nest a paragraph inside a
<div>.
日本語
あなたも試してみよう
- コメントは整理に役立ち、ネストは構造を作ります。
- コメントを残し、
<div>内にパラグラフをネストします。
Explore · 探索
Neat nesting = the tree · 整然としたネスト = ツリー
Indentation in your HTML mirrors the parent/child tree. · HTMLのインデントは親/子のツリーを反映しています。
Leave a note for yourself. Add a comment, like <!-- TODO: add a photo -->. · 自分向けのメモを残してください。<!-- TODO: add a photo -->のようなコメントを追加してください。
Put the paragraph inside a box. Wrap it in a <div> … </div>. · 段落をボックスに含めてください。<div> … </div>で囲んでください。