HTMLの基本的なルールについての勉強　part2 - HTMLの勉強|Webサイト作りの基礎

さて、前回の続きです。

HTMLを書いて、Web上にアップしたとしても、検索エンジンにすぐにインデックスされるわけではありません。

インデックスされることがなければ、ユーザーは、検索をしてあなたのサイトを見つけることは一生ありません。

どれだけ、素晴らしいサイトを作っても、検索エンジンにインデックスされていなければ、そのサイトは砂漠の上にお店を作っているようなものです。

つまり、誰も見つけることができないってことですね。

では、どうすればすぐにインデックスされるのでしょうか？

と、その前に勉強しなくてはいけないことがありますので、順を追って勉強していきましょう！

その他のmeta

「keywords」は、検索対象ではなくトリガーとしての役割しかありません。Googleは無視されますが「検索エンジンBing」対策として、記述する場合もあります

<metaname="description"content="">
<metaname="keywords"content="">

link要素

<linkrel="stylesheet"type="text/css"href="css/style.css"media="screen, print">

title要素

「title要素」には日本語サイトの場合は、日本語で記述しますが、何を記述すればよいかを答えなさい。

body要素

本来、body内は必要充分なテキストが入力してあるところから進めることが理想です。

その内容は「本文（ほんもん）」として、記述します。

その中から、内容を一目で把握できるように「見出し」を立ち上げます。

つまり、見出しで表すことのできる、文節の塊が「段落」となります。

この「見出し+段落」で表す内容が「パラグラフ」と呼ばれます。

「p要素」そのものも「paragraph」と呼ばれますが、段落要素には見出し要素が不可欠であると考えましょう。

文章だけが長く続くと、可読性が落ちます。

そこで、箇条書きが利用されます。

１行で完結に表現できるものは、箇条書きにします。

特に、Webの表現では「読み物」というよりも「レポート」として読んでもらうことがほとんどです。

まず「結論」を読んでもらい、「検証」で納得してもらうという手法です。

ですから、それには「箇条書き」が有効です。

つまりbody内には、常に

見出し
段落
箇条書き

が記述されることになります。

《課題》

次の内容をマークアップしなさい。

今日の献立
今日は、子供も大人も好きなカレーを作ろうと思います。
カレーの材料
カレー・ルー
豚肉
じゃがいも
たまねぎ
にんじん

文書構造に必要な要素

タイトル
見出しと本文
箇条書き（番号つき、番号なし）
補足説明の画像

見出し <h1> <h2> <h3>

ページ内容を表す１行
優先順位のレベルでマークアップする
見出しの拾い読みでも、ページのツリー講座がわかるように

<h1>アフォーダンス</h1>
<h2>デザインにおけるアフォーダンス</h2>
<h3>本来のアフォーダンス</h3>

見出しは、段落（本文）と組み合わせて記述します。

段落 <p>

基本的には、２行以上の文章に指定する（１行でも可）
迷ったら、「p要素」にする
段落ブロックの下は、必ず１行分の空きができる

箇条書き <ul> <ol> <dl>

必然性のある箇条書きを利用する

ul（unordered list）

順序が置き換わっても意味が伝わる並列な内容に使う。

行頭マークは「黒丸」

<ul>
  <li>私が好きな真っ赤なりんご</li>
  <li>あなたが好きなのはバナナ</li>
</ul>

ol（ordered list）

順序が置き換わっては意味が伝わらない、順序が意味をもつ内容に使う。

行頭は数字

<ol>
  <li>まず良く洗ってから皮をむき</li>
  <li>それからおもむろに囓りつく</li>
</ol>

dl（definition list）

「名称（用語）」と「その説明文（定義）」をセットにしてリスト化するときに使う。

リスト全体に対する dl要素：definition list
名称(用語)に対する dt要素：definition term
説明文(定義)に対する dd要素：definition description

<dl>
  <dt>りんご</dt>
    <dd>赤い色をした丸い果物。</dd>
  <dt>バナナ</dt>
    <dd>黄色い色をした細長い果物。</dd>
</dl>

以下のような場合にも、利用されます。

いわゆる日付で明示する更新情報の場合です。

<dl>
<dt>７月２０日</dt>
<dd>ラーメン一番</dd>
<dt>7月21日</dt>
<dd>HTMLの基本構造の入力練習</dd>
<dt>7月22日</dt>
<dd>HTMLの勉強</dd>
</dl>