見出しと段落

例えば、新聞が全て同じフォントで同じサイズの文字だったら見にくいし、どっからどこまでが一つの記事かわかんないですよね？

ページに見出しと段落を割り振ることは、読み手（訪問者＋検索エンジンクローラー）の読みやすさを考える上でとても重要なことです。

大見出し（果物について）
　段落
　小見出し（りんごについて）
　　　小見出し（りんごの種類）
　　　　段落
　　　小見出し（りんごの栄養）
　　　　段落
　小見出し（みかんについて）
　　段落

この構造を作るためのタグがHTMLには用意されています。括弧でくくってあるのが対応するHTMLタグです。

hは「見出し」を表します。h1、h2・・・h6まであり、数字が大きくなるにつれて重要度が下がり文字も小さくなります。 pは「段落」を表します。

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

記事はBody内に入れなければなりませんので、この見出し構造もHTMLの<body></body>の間に記述します。

<html>
	<head>
	略
	</head>
	<body>
		<h1>果物について</h1>
			<p>果物の説明</p>
			<h2>りんごについて</h2>
				<p>りんごの説明</p>
				<h3>りんごの種類</h3>
					<p>紅玉、小町etc...</p>
				<h3>りんごの栄養</h3>
					<p>ビタミンが豊富です。</p>
			<h2>みかんについて</h2>
				<p>みかんの説明</p>
	</body>
</html>

例では段落を見やすくするために、階層ごとにスペース（キーボードTABを使う）を入れていますが、これは必須ではありません。

私はめんどいので滅多にはTABを入れませんが、多くのサイトでは入れているので、余裕があれば入れてあげると後で見返した時とか見やすくなっていいのではないでしょうか。

ここまでで一度保存（保存はショートカットキー：Ctrl+Sで）してブラウザに表示させて見ましょう。（画像はXHTML1.0のケース）

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

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