文章構造にこだわってコーディングしよう
と思ってはいるものの、今までなんとなくやってきたので反省点として振り返るためにも記事にまとめることにしました。
何かアドバイスがあればよろしくお願いします。
HTMLの文書構造を意識する
HTML5のセクショニングだとか、いろいろ調べてると小難しいことばかりで理解が追い付かなかったので自己流で。
慣れていれば大丈夫なのでしょうけども、最初からCSSで見た目と同時に作成をするとデザインとごちゃごちゃになってしまいがちなので、私はまず以下の点を意識してHTMLを作成します。
- 文書（要素・段落）のアウトライン
Wordとかいうドキュメント作成を使った事がある方ならニュアンスが伝わると思いますが、まずは文字だけでバランスを見て整えていきます。
以下の要素があるとします。
要素
まずは普通にやってみます。
はじめに大きく「グループ化」します（div class="hoge"でくくる）。
なんとなく情報を分けます。
<div class="hoge">
<h1>●●のお知らせ</h1>
<p>毎日暑い日が続きますが、いかがお過ごしでしょうか。この度、暑気払いとして以下の日時でイベントを開催いたします。皆様ふるってご参加ください。<br>なお、飲食を伴うため、ペットの同伴はご遠慮ください。</p>
<ul>
<li>日時：12月12日 13時から</li>
<li>場所：まるぺけ公園</li>
</ul>
<p><img src="../../sample.png" alt="" width="124" height="84" alt="去年のイベント風景"></p>
<p>送信者：宇宙人</p>
</div>
さらに、それぞれの意味を考えてマークアップをしてみます。
- 見出しとなるものはどこか
- 重要なキーワードは何か。強調したい文章はあるか。
- 画像は意味のある画像か（背景にするかどうか）。
- imgの画像サイズ、altは必ず入れる。
- ※画像サイズを指定しないとブラウザが判断にとまどい読み込みが遅れてしまう場合があるため、予め指定してあげます。
- altも画像表示されない場合の代替になり、音声ブラウザでは読み上げられるらしいので意味のある画像であれば必ずいれます。
今回は、
- 見出し：●●のお知らせ
- キーワード：イベントを開催
- 強調したい文章：なお、飲食を伴うため、ペットの同伴はご遠慮ください。
- 画像は、去年のイベントの風景なのでimgとして使用。
という事にしました。
<div class="hoge">
<h1>●●のお知らせ</h1>
<p>毎日暑い日が続きますが、いかがお過ごしでしょうか。</p>
<p>この度、暑気払いとして以下の日時で<strong>イベントを開催</strong>いたします。<br>皆様ふるってご参加ください。</p>
<p><em>なお、飲食を伴うため、ペットのご同伴はご遠慮ください。</em></p>
<ul>
<li>日時：12月12日 13時から</li>
<li>場所：まるぺけ公園</li>
</ul>
<p><img src="../../sample.png" alt="" width="124" height="84"></p>
<p><span>送信者：宇宙人</span></p>
</div>
素のHTMLだとこんな感じになります。
これだけでも一応、見た目で段落など分かれてて見やすいですね。
素のHTML
HTML情報の出し方ですが、私の場合、上から重要な情報を置いていきアウトラインも意識します。
このあたりはSEOに詳しい方に相談された方が良いと思いますが、個人的にはなるべく上から順番においていくようにしています。
<div class="hoge">
<h1>●●のお知らせ</h1>
<div class="group01">
<p>毎日暑い日が続きますが、いかがお過ごしでしょうか。</p>
<p>この度、暑気払いとして以下の日時で<strong>イベントを開催</strong>いたします。<br>皆様ふるってご参加ください。</p>
<p><em>なお、飲食を伴うため、ペットの同伴はご遠慮ください。</em></p>
</div>
<div class="group02">
<p><img src="../../sample.png" alt="" width="124" height="84"></p>
<ul>
<li>日時：12月12日 13時から</li>
<li>場所：まるぺけ公園</li>
</ul>
</div>
<p><span>送信者：宇宙人</span></p>
</div>
さらに本文と日程をグループ分けしました。
後はCSSで見た目を整えれば完成。
完成イメージ
強調タグについて
私は以下の3種類を強調目的で使い分けています。
- strong ・・・検索に強調したいワードとして使う
- em ・・・ユーザーに強調したい場合に使う
- b ・・・意味がなく単にデザイン的に太字にしたいもの。
デザインについてちょっと余談
良いデザイン・良いコーディングはユーザーがパッと見て直感的に理解できるデザインだと思います。
例えば、
- hやstrongを使いたい場所が一目でわかるようにデザインされている
- 段落・カテゴリの分類が一目でわかり、ユーザーにとって構造が意識しやすいデザインになっている
- デザインに反復要素がある（法則性がある）
良いデザインだとマークアップが楽になり、コーディングもやりやすくなります。
デザイン、ワイヤーを作成する上でも文書構造を意識することは大切ですね。
自論ですが、正しい文書構造のHTMLはユーザーにより正しい情報を伝える事になり、よい結果に結びつくと思っています。
ユーザーに正しい情報を伝えるために「意味のある」コーディングを意識していきたいです。