書き出したテキストに<h1>とか<h3>とか、文章の定義を示すHTMLタグを付けていく。CSSを知らなかった昔は、フォントのサイズとか色を、<font size="2" color="black">○○</font>とかいう感じで、HTMLの中に直接書いてきたけれど、そういう「見た目の要素」はこれからは直に書き込まない。これがまず最初に、へぇ〜って思ったトコロで、なかなか納得できなかった。
というのも普通のブラウザでは、<h1>とか<h3>で指定すると"見出し"と解釈されてフォントが大きくなったり太くなったりする。その挙動自体をコントロールするという感覚にどうしても馴染めなかったワケ。まあ、すぐに慣れましたが。今回はその辺りは横に置いて、とりあえず地道に各ブロック毎に分けてタグ付けしていく。今回はまず「A」「B」「C」の3ブロックをタグで括る。
まずページのトップにあるヘッダ部「A」。現状、実際はテーブルでロゴ部分を分離して2分割しているんだけれど、それをCSSで再現する方法がまだよく分かっていないので、一枚の画像（top.jpg）にしてしまう。書き出したテキスト情報はその画像の中に描き込んでしまうから、alt属性で簡単な代替えテキストだけ挿入しておくことにする。
そして、その画像はロゴを含めトップに位置する視覚効果はもちろん、情報として意味のある画（と個人的に思いこんでいる）なので、<h1>で括る。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" >
<head>
<meta http-equiv="content-type" content="text/html;charset=Shift_JIS">
<title>フリフリの「Mac mini ミニ大作戦！」</title>
</head>
<body>
↑お決まり部分
↓「A」部分
<h1>
<img src="images/top.jpg" alt="フリフリのMac mini ミニ大作戦！" />
</h1>
トップの「A」部分はHTML書類の冒頭〜ヘッダ部も合わせてこんな感じですかね。画像一枚にテキストも入れちゃったので、実にシンプルで悩むところナシ。ここの<h1>は、「ここは見出しですよ」という意味合いで検索エンジンなどのコンピュータの解釈を助けるためにメッセージしているだけで、僕ら人間への見た目の意味付けはない。
サンプル画像ではすでにアイコンに置き換えられているんだけど、その工程は後回しにして、まずテキストで考える。で、参考書をいろいろ読んでみると、こういうメニューの意味合いを持つ部分はほとんど「リスト」としてタグ付けされている。最初は単純に箇条書きでいいんじゃないかと思っていたのだが、どの参考書もあまりにリストを使ったサンプルを掲載しているので、いつの間にかこっちもそれに感化されてしまった。なのでリストでタグ付けする（各リンク先への相対パスは仮）。
<ul>
<li><a href="../../../Macmini/index.html">Mac mini ミニ大作戦！</a></li>
<li><a href="../../../Movie/index.html">映画百本</a></li>
<li><a href="../../../Radio/index.html">放談ラジオ音響系</a></li>
<li><a href="../../../BBS/index.html">BBS放送局</a></li>
<li><a href="../../../Book/index.html">読後の一言</a></li>
<li><a href="../../../Mail/index.html">メールの宛先</a></li>
</ul>
これを単純にブラウザで表示すると、黒丸とか白丸の箇条書きリストになるんだけど、それをCSSでコントロールしてグラフィック込みで整列させるというんだから面白い。それは後日の予定、なんだけど出来るかどうかは分からない。
さて、その時々の最新更新記事を掲載する、いわばサイトの「顔」の中心部分とでもいいましょうか、一番視聴者の目線が突き刺さる場所「C」。ここには文章に3つの装飾を施してある。一番上にある、赤字で書かれた各コンテンツのタイトル（Mac mini ミニ大作戦！）。その次に一番大きな文字で書かれた記事ネタの見出し（第1回 目指せ〜）。そしてその要約・説明文を再び小さなサイズの文字で（先日、ちょっと〜）。
で、この部分をどうやって意味付けすればよいのか、経験不足もあってはっきり言ってよく分からない。参考書には定義リスト（dl、dt、dd）で括るというサンプルもあったのだけれど、個人的に全く馴染みが無い。なので全く洗練されてなくて恥ずかしいけれど、地味に<h2><h3>‥で括ることにする。<h6>まで使えるけれど、このサイトではそこまで装飾の種類は必要ないし。
こんな感じで良いのだろうか‥。ミニ大作戦！はプライオリティが低くてもよいかなと思えたので<h6>にして、一番目立って欲しい記事タイトルを<h2>にした。要約・説明文は段落として<p>で括った。
今回はここまで。すでに大きなミスを犯している気がしないでもないが、何かしらの間違いに気付いたらその時に直しを含めて記事ネタにしよう。
