Netscape Navigator. や
Internet Explorer. 等の一般的なWebブラウザでは、太くて大きい字で段階的に表現されるようにしていますが、実際は文字列と同じ大きさです。ページに載せる文章は、読みやすさが大事です。 新聞で、興味のある見出しを見れば中の文を読みたくなるし、本文(記事）を読めば知りたい情報が解るわけです。「的を得た見出し」「簡単・明瞭な本文」、見出しと本文のコンビネーションを心がけるようにしましょう。
前章でHTML文書の基本型（ソース見本）をベースに、最初は、文字だけの文章を作っていきましょう。
見出しのとして、次の文章を使用します。（お堅いですが、一番良い見本だと思うので…）
下記の文章が「日本国憲法と、＊章」を見出し、＊条と本文を段落にしました。
日本国憲法前文日本国民は、正当に選挙された国会における代表者を通じて行動し、… 第一章 天皇第一条 第二章 戦争の放棄第九条 第三章 国民の権利及び義務第十条 第十一条 |
<H*>要素は「ここが見出し」と定義するものであって、太字や大きい字を作るための要素ではありません。
Netscape Navigator. や Internet Explorer. 等の一般的なWebブラウザでは、太くて大きい字で段階的に表現されるようにしていますが、実際は文字列と同じ大きさです。
★ 「定義」すると「表現」するというキーワードを頭のどこかに、おいてください。HTML文書自体は定義するだけで、見出しを「大きい字」「太い字」とは決めていません。これは、プログラムされたWebブラウザが表現するために「見出しの要素は、大きくて太い字で表示しよう」と決めているだけなのです。
HTML文書の基本的な形（土台）で「HTML文章を書くということは、基本的に要素を定義し入力（マークアップ）していくことです。」と書きました。文章の見出しも例外ではなく、HTMLのタグで囲んで「ここが見出し要素である」と明示します。検索ロボットや、音声で聞かれる、目の不自由な方にも見出しを案内してもらえます。見出しサンプル
見出しを作るには、「<H>（heading=見出し）」要素を使います。見出しにはいくつかの階層があるのが普通です。
HTMLでは、見出しの大きさを「Heading-Level 1（もっとも強い見出し主張）」から「Heading-Level 6（もっとも弱い見出し主張）」の「H」に1〜6の数字をつけた「H1」〜「H6」の6段階が用意されていますが、<Hn>は、文字を大きくする役割ではありません、世界には色々なWebブラウザが存在し、<Hn>文字を大きく見せるとは限らないのです。HTMLでは、段階的（章・節）に分けて使用するようにと書かれています。
例えば、<H1>は、メインの見出しで、本で言えば「表紙の大見出し」、そして後に続く「章や節の中見出し」、「項目の小見出し」という感じでとらえてくださいね。見栄えだけの活字の大きさではないのです。見栄えや大きさのように書いている本やインターネットのサイトは、本人がHTMLを理解していないので見ない方が懸命です。
使用する時は、<H1>から<H4>までにした方が良いでしょう。必要以上に<H5>や<H6>を使い深い階層を作ること自体、賢明だとは思えません。
見出しレベルの使い方は、「ページには<H1>から使うこと」とは決まっていません。なぜかと言うと同じテーマのページをいくつも作れば、はじめのテーマページに<H1>を使えば後のつながりのあるページはもちろん<H2>以降の見出しレベルが本質的な使い方になります。
段階的に使えば、別に<H2>からでも<H3>からでも使っても良いのです。ただし、<H1> の次に <H3> が出てきたり、<H2>のあとに<H1>が登場する用法は文法上好ましくなく文書の構造が乱れます。検索ロボット等の H のレベル を自動的に抜き出して目次を表示してくれるようなツールを混乱させる恐れがあります。
見出しの要素には、W3C 「見出しである6のレベル（階層）を明確にし、順番に使うように」とされています。
上参照↑「日本国憲法」が<H1>、で「第一章 天皇」が<H2>、以下が文章（本文）といった感じです。
見出しの大きさと文字の色などを変える事は可能です。そこで、スタイルシートを使用しましょう。
例：
<H4 STYLE="FONT-SIZE:40px;COLOR:#0000ff">見出し</H4>
表示結果：
見出しを左右や中央にしたい場合もあるでしょうから、代表的な方法を紹介します。
下は指定したブロック全体を揃える方法です。サンプル
<DIV style="text-align:center">
<H1>見出し</H1>
<P>段落</P>
</DIV>
にすれば<DIV>要素で指定したブロック全体が左右や中央になってしまいます。
見出しの指定部分のみ行揃えしたいときには、
<h数字 style="text-align:行揃えの値">〜〜〜</h数字>にすれば指定できます。
もちろん、上記の「見出しの大きさと色」で説明したSTYLE属性に「；＝ダブルセミコロン」でTEXT-ALIGN:行揃えの値をつなげても良いでしょう。
STYLE属性にBACKGROUND-COLOR:背景色値です。
代表的な方法は、領域全体または文字の部分かに背景色を指定する方法です。サンプル
STYLE属性にBACKGROUND-IMAGE:url('背景画像のURL')です。
代表的な方法は、領域全体または文字の部分かに背景色を指定する方法です。サンプル
style属性と<STYLE>要素は、共にカスケーティング・スタイル・シート(CSS)です。
違いは、要素としての扱いでプロパティ（指定）を宣言しページ全体に見栄えの影響を与えるか、属性として部分的に見栄えを指定するかの違いです。しかしstyle属性は、XHTML1.0では使用できますが、XHTML1.1では、非推奨になりXHTMLBasicでは、使用できません。
つまり、<STYLE>要素内でid,class,を使いプロパティ宣言（指定）し使用することになります。
基本のプロパティ宣言方法はCSS（スタイルシート）の基礎知識をごらんください。
上記のスタイルプロパティをつなげ<HEAD>内に設定すると下記のようになります。
一つ一つの見出し要素にスタイルを設定することはあまり好ましくありません。
出来れば、<HEAD>内の<STYLE>要素の<style type="text/css">〜〜〜</style>内に設定しましょう。
例：
<style type="text/css"><!--
h1 { font-size:文字の大きさpx;
color:#文字色;
background-color:#背景色;
text-align:行揃え; }
--></style>
タグ解説H1〜H6見出し-レベル1〜6： 一般的なWebブラウザでは、レベル1〜6まで文字のサイズを変えて表示しますが、文字を大きくする役割では無く、見出しの段階的なタイトルとして「章」「項」「節」役割をしています。また、一つのテーマ（ページ）で、レベル<H1>から順番に<H2>,<H3>,<H4>・・と順番に使用します。<H3>のあとに<H1>と言うような段階を無視するような使用もいけません。 テキストベース以外の方への表示サンプル： <H1>見出しレベル1</H1>「一番目のタイトル見出し」ブラウザ依存サイズのフォントです。<H2>見出しレベル2</H2>「二番目の見出し」ブラウザ依存サイズのフォントです。<H3>見出しレベル3</H3>「三番目の見出し」ブラウザ依存サイズのフォントです。<H4>見出しレベル4</H4>「四番目の見出し」ブラウザ依存サイズのフォントです。<H5>見出しレベル5</H5>「五番目の見出し」ブラウザ依存サイズのフォントです。<H6>見出しレベル6</H6>「六番目の見出し」ブラウザ依存サイズのフォントです。見出しの、左右中央の位置指定について： <H3 style="text-align:left">見出し左寄せ</H3><H4 style="text-align:center">見出し中央</H4><H5 style="text-align:right">見出し右寄せ</H5> |