見出しと段落

見出しと段落の重要性

次は、見出しタグ（h）と段落タグ（p）について述べようと思います。

新聞や本をよく読む人はわかると思いますが、これらは、

大見出し（h1）
　小見出し（h2）
　　段落（p）
　　段落（p）
　小見出し（h2）
　　段落（p）

のような構造で書かれていると思います。

私は昔、本が嫌いな上に、形式否定派でもあったので、このような型にはまった形式なんか知ったこっちゃなく、めちゃくちゃなhtmlを記述しておりましたが、本を読むようになってから、この構造がシンプルですが非常に読みやすいことがわかりました。

これは書き手の問題というより読み手の問題であり、最初に読み手は見出しをパラパラ眺めて、見出しに惹かれたときに、そこに含まれる段落を読もうと考えます。

また、魅力的なフレーズの見出しを小刻みに記述することは、必要な部分（興味ある部分）と不必要な部分を分けて読むこともでき、かつ大まかな内容を知りやすくなるなど、読み手にとって非常に読みやすいものになります。

もちろん、検索エンジンにとっても読みやすいものとなりますので、上位表示には必須となります。

見出しと段落の使い方

”h”は見出しを表すタグで、h1,h2・・・h6まであり、数字が大きくなるに従い重要度が下がります。また、h1は1ページに1回しか使えず、タイトルの次に重要なタグです。

”p”は段落を表すタグで、hタグの後に記述します。

hやpタグはデフォルトでフォントの大きさや太さ、文字間隔などがその重要度に準じて決められています。

今は述べませんが、スタイルシートでこれらのスタイルは変更できますので心配しないで下さい。

見出しタグ（h）も段落タグ（p）も、使い方はそのタグでくくるだけです。

<html>
<head>
<title>ホームページ作成講座</title>
<meta http-equiv="Content-Type" content="text/html;charset=shift_jis">
</head>
<body>
<h1>ホームページ作成講座</h1>
<h2>Lesson1：メモ帳を起動してみよう！</h2>
<p>ホームページを作成するためにはエディタと呼ばれるアプリを起動して、そこにプログラムを記述します。</p>
<p>Windowsをお使いの方は標準で付属しているエディタとして、メモ帳とwordpadがありますので、それを使うとよいでしょう。</p>
<p>さらに高性能のエディタをお求めの方は、無料ならterapad、有料なら秀丸エディタがお勧めです。</p>
<h2>LLesson2：タグを書いてみよう！</h2>
<p>ホームページを作るのに使用する言語はHTMLと呼ばれ、タグと呼ばれる命令を使って、色やフォントの大きさを指定することができます。</p>
<h3>L＜文字の大きさを変える＞</h3>
<p>文字の大きさは、font sizeタグを使用します。</p>
<h3>L＜文字の色を変える＞</h3>
<p>文字の色は、colorタグを使用します。</p>
</body>
</html>

ここまでの作成経過はコチラ→サンプル（ホームページ作成講座）

Lesson1～HTMLの基礎～

コメントor補足情報orご指摘あればをお願いします。

<< 前のページ
次のページ >>