Boxes and sections
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
Boxes and sections
- Bigger pages need structure — clear areas, not one long pile.
- A
<div>is a plain box. A<span>is a small inline box for a few words. - Boxes group things together, so you can arrange and style them later.
日本語
ボックスとセクション
- 大きなページには 構造 が必要です。長い塊のままでなく、明確な領域を設けます。
<div>は一般的なブロック要素のボックスです。<span>は数単語分の小さなインライン要素のボックスです。- ボックスは関連する要素をグループ化するため、後から配置や装飾を容易に設定できます。
English
Named sections
- HTML has special boxes with meaningful names:
<header>(top),<main>(the main content),<footer>(bottom),<nav>(menu links).- They work like
<div>, but the names tell people — and search engines — what each part is.
日本語
名前付きセクション
- HTMLには意味のある名前を持つ特別なボックスがあります：
<header>（上部）、<main>（メインコンテンツ）、<footer>（下部）、<nav>（メニューリンク）。- これらは
<div>と同様に機能しますが、名前は人々や検索エンジンに対して各部分の役割を明確に伝えます。
<header>
<h1>My site</h1>
</header>
<main>
<p>Welcome to my page.</p>
</main>
<footer>
<small>Made by me</small>
</footer>
English
Classes name your boxes
- A class is a label you add to a tag:
<div class="card">. - It does nothing on its own — but soon, CSS will use it to style that box.
- This is your bridge into the next half of the course.
日本語
クラスによるボックス名の指定
- クラスとはタグに追加するラベルです：
<div class="card">。 - 単独では何もしませんが、cast soon、CSS がこのボックスを装飾するために使用します。
- これはコース後半への架け橋となります。
English
Common mistakes
<div>is a block (new line);<span>is inline (stays in the text).- Use semantic tags like
<header>and<nav>where they fit.
日本語
よくあるミス
<div>はブロック（改行あり）であり、<span>はインライン（テキスト内に収まる）です。- 適切な場所では
<header>や<nav>といった意味のあるタグを使用してください。
English
Now you try
- Add a
<header>and a<footer>, then give a box a class. - Next lesson, we start making things look good with CSS.
日本語
あなたも試してみよう
<header>と<footer>を追加し、ボックスにクラスを与えてください。- 次のレッスンでは、CSS で見栄え良くする作業を始めます。
Explore · 探索
A box wraps its content
A <div> is a box: content surrounded by padding, border, margin.
Give the page a top and a bottom. Wrap the title in a <header>, and the small note in a <footer>.
Give this box a name so we can style it later. Add class="card" to the <div>.