タイトル・ロゴやナビゲーションなどが含まれる「ヘッダ部分（<header>タグ）」，クレジットや連絡先などが含まれる「フッタ部分（<footer>タグ）」のほか，本文部分には自由にブロックを構成できる「<div>タグ」を用いて考える．
例えば，
ページをおおまかなブロックに分割して考える
Webページをデザインする際には，ページをおおまかなブロック（かたまり）に分割して考えるとよい．
タイトル・ロゴやナビゲーションなどが含まれる「ヘッダ部分（<header>タグ）」，クレジットや連絡先などが含まれる「フッタ部分（<footer>タグ）」のほか，本文部分には自由にブロックを構成できる「<div>タグ」を用いて考える．
例えば，
のようなレイアウトのページを作る場合，
のように記述する．なお，デザインの指定については，idやclassを使用した場合のCSSの記述法を参照．
タイトル・ロゴやナビゲーションなどが含まれる「ヘッダ部分（<header>タグ）」，クレジットや連絡先などが含まれる「フッタ部分（<footer>タグ）」のほか，本文部分には自由にブロックを構成できる「<div>タグ」を用いて考える．
例えば，
複雑なレイアウトでもOK（参考）
ブログなどでよく見かける，
のようなレイアウト（このようなレイアウトを「２段組」という）のページを作る場合，
のように記述する（最初の例とそっくりである）．
ただし，これだけでは，上から順番に表示されるだけなので，CSSによって２段組を実現する（授業用のサンプルデータを参照）．
ただし，これだけでは，上から順番に表示されるだけなので，CSSによって２段組を実現する（授業用のサンプルデータを参照）．